/* ============================================================
   Sección Iniciativas — gencorp.com.mx/iniciativas/
   ============================================================
   Se carga DESPUÉS de src/style.css, que trae el chrome del sitio
   (navbar y footer). Todo lo de aquí vive bajo .ini-* para no tocar
   el resto de la página: el header y el pie deben verse idénticos al
   resto del sitio.

   Paleta oficial GEN Corp — máximo 5 colores. La profundidad siempre
   se resuelve con sombra, NUNCA con degradado.
   ============================================================ */

.pagina-iniciativas {
  --ini-white:     #FFFFFF;
  --ini-red:       #DA1A32;   /* Rojo Bonifie */
  --ini-red-dark:  #A00C30;   /* Embers */
  --ini-grey:      #B5B4B4;   /* neutral */
  --ini-blue:      #0656A1;   /* Blurey — solo enlaces */

  /* Grises de apoyo: transparencias del neutral, no colores nuevos */
  --ini-panel:  #E3E2E2;
  --ini-soft:   #F2F1F1;
  --ini-ink:    #1A1A1A;
  --ini-ink-2:  #4A4A4A;

  --ini-head: "Barlow Semi Condensed", "Barlow", sans-serif;
  --ini-body: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sombra con un punto de rojo: sobre blanco un gris neutro se ve
     sucio, y así la sombra pertenece al filete que rodea la tarjeta. */
  --ini-shadow: 0 14px 34px rgba(160, 12, 48, .16),
                0 3px 10px rgba(0, 0, 0, .07);
  --ini-shadow-soft: 0 4px 14px rgba(0, 0, 0, .08);

  --ini-t: .18s ease;
}

/* ── Contenedor ─────────────────────────────────────── */
.ini-main {
  padding: 2.5rem 0 4rem;
  background: var(--ini-white);
}

/* 1200px es el ancho de contenedor del resto del sitio (--container-max en
   src/style.css). La página nacía en 1080 y eso la dejaba más angosta que su
   propio header: al ensanchar el carrusel se aprovecha ese margen que ya
   existía y de paso la caja queda alineada con el chrome. Más de 1200 haría
   el contenido más ancho que el encabezado, que se nota. */
.ini-main .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Pestañas (propuesta A: barra clásica) ──────────── */
.ini-tabs {
  display: flex;
  gap: 2rem;
  align-items: center;
  border-bottom: 1px solid var(--ini-grey);
  margin-bottom: 2rem;
}

.ini-tabs button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--ini-head);
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ini-ink-2);
  padding: 0 0 .75rem;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  transition: color var(--ini-t), border-color var(--ini-t);
}

.ini-tabs button:hover { color: var(--ini-ink); }

.ini-tabs button[aria-selected="true"] {
  color: var(--ini-red);
  border-bottom-color: var(--ini-red);
  font-weight: 700;
}

/* ── Panel ──────────────────────────────────────────── */
/* Ojo con la cascada: [hidden] viene de la hoja del navegador y CUALQUIER
   regla de autor le gana, sin importar la especificidad. Como más abajo
   .ini-panel.is-intro declara display:grid, el panel de intro nunca se
   ocultaría. Por eso esta regla lleva el prefijo del body: sube a (0,3,0)
   y gana a las reglas de display de los paneles. */
.pagina-iniciativas .ini-panel[hidden] { display: none; }

/* El logo de submarca sale de la caja de la tarjeta, arriba a la izquierda.
   Los cinco son PNG de 500×300 con transparencia y la misma caja óptica, así
   que la altura se puede fijar sin que unos se vean más chicos que otros.
   El traslape sigue en 0; ahora que hay alfa puede bajarse a -8px o -16px
   para que el logo muerda el filete, como en el PSD — es decisión de diseño,
   no una limitación técnica. */
.ini-marca {
  display: block;
  height: 110px;          /* +20 % sobre los 92px originales */
  width: auto;
  max-width: 384px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0;
}

/* ── Tarjeta: texto + carrusel como un solo bloque ───
   Filete rojo delgado y la sombra sobre ESE bloque. */
/* El reparto no es mitad y mitad: las fichas del portafolio llevan su texto
   rasterizado dentro del JPG, así que el ancho de la columna derecha no es
   una preferencia estética, es lo que decide si ese texto se lee. Ver el
   cálculo sobre .ini-carrusel. */
.ini-tarjeta,
.ini-panel.is-intro {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  background: var(--ini-white);
  border: 1px solid var(--ini-red);
  border-radius: 3px;
  box-shadow: var(--ini-shadow);
  overflow: hidden;
  min-height: 420px;
}

.ini-panel.is-intro { grid-template-columns: 1fr; }

.ini-texto {
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.ini-visual {
  background: var(--ini-panel);
  padding: 1.5rem;        /* eran 2rem: 16px menos de aire = 16px más de imagen */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tipografía del panel: se fija explícitamente porque src/style.css
   impone Inter a nivel global. */
.ini-texto h1,
.ini-texto h2 {
  font-family: var(--ini-head);
  color: var(--ini-ink);
  margin: 0;
  line-height: 1.15;
}

.ini-texto h1 { font-size: clamp(26px, 3vw, 34px); text-align: center; }

/* El h2 lleva el nombre y la propuesta de valor en texto plano: es lo
   que leen los motores generativos. Se muestra solo a lectores de
   pantalla y buscadores porque en el diseño aprobado el nombre lo da
   el logotipo; ocultarlo con display:none lo sacaría del árbol de
   accesibilidad y del índice. */
.ini-tarjeta .ini-texto h2 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ini-texto p {
  margin: 0;
  font-family: var(--ini-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ini-ink-2);
  text-align: justify;
  hyphens: auto;
}

.ini-panel.is-intro .ini-texto { text-align: center; padding: 4rem 3rem; }
.ini-panel.is-intro .ini-texto p { text-align: center; max-width: 62ch; margin: 0 auto; }

/* ── Productos ──────────────────────────────────────── */
.ini-productos { list-style: none; margin: 0; padding: 0; }
.ini-productos li + li { margin-top: .75rem; }

.ini-productos h3 {
  margin: 0;
  font-family: var(--ini-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--ini-ink);
  line-height: 1.2;
}

.ini-productos p {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 14px;
  text-align: left;
}

/* ── Carrusel de portafolio ─────────────────────────────
   POR QUÉ ESTE ANCHO Y NO OTRO

   Cada ficha del portafolio trae su texto rasterizado dentro del JPG. Medido
   sobre los originales de 1200 px: el cuerpo de texto ocupa ~30 px de alto
   con interlínea de 43. Como la imagen se escala completa, el tamaño con que
   ese texto llega al ojo es  30 × (ancho_desplegado / 1200):

       420 px  →  10.5 px   ← el ancho anterior, por debajo de lo legible
       560 px  →  14 px
       640 px  →  16 px     ← empata con .ini-texto p, el texto del panel

   Por eso la tarjeta reparte 40/60 y el contenedor subió a 1200: a partir de
   1280 px de viewport la columna derecha da ~643 px de carrusel, o sea ~16 px
   de tipografía. El max-width solo entra en juego cuando la columna es más
   ancha que eso —pantallas grandes con la tarjeta apilada—, para que la
   imagen no crezca sin control. */
.ini-carrusel {
  position: relative;
  background: var(--ini-white);
  box-shadow: var(--ini-shadow-soft);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.ini-track {
  display: flex;
  height: 100%;
  transition: transform .28s ease;
}

.ini-slide { flex: 0 0 100%; height: 100%; }

.ini-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ini-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ini-shadow-soft);
  color: var(--ini-red);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--ini-t);
}

.ini-nav:hover { background: var(--ini-white); }
.ini-nav:disabled { opacity: .35; cursor: default; }
.ini-nav.prev { left: 8px; }
.ini-nav.next { right: 8px; }

.ini-puntos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: .75rem auto 0;
  max-width: 720px;
}

.ini-puntos button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--ini-grey);
  cursor: pointer;
  transition: background var(--ini-t), width var(--ini-t);
}

.ini-puntos button[aria-current="true"] { background: var(--ini-red); width: 20px; }

/* El primer hijo empuja al resto a la derecha. Se usa margin en vez de
   space-between porque el JS añade el botón de pausa: con space-between,
   pasar de dos a tres hijos habría repartido los botones en vez de
   agruparlos. */
.ini-acciones {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: .75rem auto 0;
  max-width: 720px;
  width: 100%;
  font-size: 13px;
}

.ini-acciones > :first-child { margin-right: auto; }

.ini-acciones a { color: var(--ini-blue); text-decoration: none; }
.ini-acciones a:hover { text-decoration: underline; }

.ini-expandir,
.ini-pausa {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ini-ink-2);
  font-size: 16px;
  padding: 4px;
  line-height: 1;
}

.ini-expandir:hover,
.ini-pausa:hover { color: var(--ini-red); }

/* El de pausa es un control secundario: se ve cuando se busca, no compite
   con la imagen. Al pasar por la tarjeta sube a contraste pleno, que es
   justo cuando la rotación se detiene y conviene que se note por qué. */
.ini-pausa {
  font-size: 14px;
  opacity: .55;
  min-width: 26px;
  transition: opacity var(--ini-t), color var(--ini-t);
}

.ini-visual:hover .ini-pausa,
.ini-pausa:focus-visible { opacity: 1; }

/* ── CTA ────────────────────────────────────────────── */
.ini-cta {
  display: inline-block;
  background: var(--ini-red);
  color: var(--ini-white);
  font-family: var(--ini-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  padding: 12px 34px;
  border-radius: 2px;
  align-self: flex-start;
  transition: background var(--ini-t);
}

.ini-cta:hover { background: var(--ini-red-dark); color: var(--ini-white); }
.ini-panel.is-intro .ini-cta { align-self: center; }

/* ── Lightbox ───────────────────────────────────────── */
/* ── Lightbox: la vista de lectura ──────────────────────
   Encajaba la imagen completa en la pantalla (max-height: 86vh). Como las
   fichas son cuadradas, el límite lo ponía la ALTURA: en un portátil de
   900px la ampliación daba 600px, MENOS que los 642px del carrusel. El
   botón "ampliar" encogía, y encima dejaba el texto por debajo de lo legible.

   Ahora manda el ancho y el contenedor se desplaza. En una pantalla de 1440
   la ficha se lee a 30px —el tamaño con que se diseñó— y la ilustración se
   ve bajando. Para este material eso es lo correcto: la mitad superior de
   cada ficha es texto, y el propósito de ampliar es leerlo. */
.ini-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  display: grid;
  place-items: start center;
  z-index: 9999;
  padding: 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ini-lightbox[hidden] { display: none; }

.ini-lightbox img {
  width: min(94vw, 1200px);   /* 1200px es el original: no se estira */
  max-width: none;
  height: auto;
}

/* Con el contenedor desplazándose, un botón absolute se iría con el scroll
   y dejaría la salida fuera de alcance. */
.ini-lightbox-cerrar {
  position: fixed;
  top: 1.5rem; right: 1.5rem;
  width: 42px; height: 42px;
  border: none;
  border-radius: 999px;
  background: var(--ini-white);
  color: var(--ini-ink);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--ini-shadow-soft);
}

/* ── Foco visible ───────────────────────────────────── */
.ini-main a:focus-visible,
.ini-main button:focus-visible,
.ini-lightbox button:focus-visible {
  outline: 3px solid var(--ini-red);
  outline-offset: 3px;
}

/* ── Sin JavaScript ─────────────────────────────────────
   Si el JS no corre, los paneles quedarían ocultos por el atributo
   hidden y la página aparecería casi vacía. Estas reglas los muestran
   todos: degrada a un listado largo con las 5 iniciativas, que es un
   fallo aceptable. Van DESPUÉS de la regla que oculta, con la misma
   especificidad (0,3,0), para ganarle por orden. */
.no-js .ini-panel[hidden] { display: block; }
.no-js .ini-panel.is-intro[hidden] { display: grid; }
.no-js .ini-tabs { display: none; }
.no-js .ini-panel { margin-bottom: 3rem; }

/* ── Responsivo ─────────────────────────────────────────
   El corte no está donde lo pondría la maqueta, sino donde el texto de las
   fichas deja de leerse. Con dos columnas, por debajo de 1100px de viewport
   la columna derecha baja de ~560px y la tipografía rasterizada cae de 14px.
   Antes que dejarla encogerse, la tarjeta se apila: el carrusel toma el ancho
   completo y recupera tamaño en vez de perderlo. */
@media (max-width: 1100px) {
  .ini-tarjeta {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ini-visual { padding: 1.5rem 1.5rem 2rem; }

  /* Apilado, el párrafo ocuparía todo el ancho de la tarjeta: a 1024px son
     910px de renglón, más de 110 caracteres, ilegible por exceso igual que
     el texto de las fichas lo era por defecto. Se le da la misma medida que
     al carrusel para que las dos mitades queden a plomo. */
  .ini-tarjeta .ini-texto {
    padding: 2.5rem 2rem 1.5rem;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 1024px) {
  .ini-marca { height: 89px; }   /* +20 % sobre los 74px originales */
  .ini-tarjeta { min-height: 0; }
}

@media (max-width: 720px) {
  .ini-main { padding: 1.5rem 0 2.5rem; }

  .ini-tabs {
    gap: 1.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .ini-tabs::-webkit-scrollbar { display: none; }
  .ini-tabs button { flex: 0 0 auto; }

  .ini-marca { height: 67px; max-width: 240px; }  /* +20 % sobre 56px */

  .ini-tarjeta,
  .ini-panel.is-intro {
    grid-template-columns: 1fr;
    box-shadow: 0 8px 20px rgba(160, 12, 48, .13);
  }

  .ini-texto { padding: 1.5rem 1rem; gap: 1rem; }
  .ini-texto p { font-size: 15px; text-align: left; }
  .ini-panel.is-intro .ini-texto { padding: 2rem 1rem; }
  .ini-texto h1 { font-size: 24px; }

  .ini-visual { padding: 1rem; }
  .ini-productos h3 { font-size: 17px; }
  .ini-productos p { padding-left: 1rem; }

  .ini-cta { width: 100%; text-align: center; align-self: stretch; }
  .ini-nav { width: 30px; height: 30px; font-size: 15px; }
}

@media (max-width: 380px) {
  .ini-marca { height: 55px; }   /* +20 % sobre 46px */
}

/* ── El teléfono no tiene arreglo por maqueta ────────────
   A 390px de viewport el carrusel mide ~310px y la tipografía rasterizada
   cae a ~8px. No hay reparto de columnas que lo salve: el texto vive dentro
   de un JPG de 1200px y la pantalla no da. Aquí el lightbox no puede regirse
   por el ancho de la pantalla —94vw serían 367px, aún ilegible—, así que se
   fija en 640px, que son los 16px de tipografía del objetivo, y se navega
   con el dedo en los dos ejes. */
@media (max-width: 720px) {
  .ini-lightbox {
    padding: 0;
    place-items: start start;
  }

  .ini-lightbox img { width: 640px; }

  .ini-lightbox-cerrar { top: 1rem; right: 1rem; }
}

/* Quien pida menos movimiento, que no lo tenga */
@media (prefers-reduced-motion: reduce) {
  .ini-track,
  .ini-tabs button,
  .ini-nav,
  .ini-cta { transition-duration: .001ms !important; }
}