/* ==========================================================================
   VitroNutri en iPhone Duo (dos pantallas con bisagra)

   - Con UNA pantalla (vertical u horizontal) la web se ve como en cualquier
     móvil: este archivo no cambia nada.
   - Con las DOS pantallas abiertas el navegador avisa con
     (horizontal-viewport-segments: 2) y la web se coloca como un libro:
     lo de la izquierda queda en la pantalla izquierda y lo de la derecha en
     la derecha, sin que ningún texto, botón ni tarjeta pase por la bisagra.

   Cómo funciona: todo se apoya en una sola medida, --gap-fold, que es el
   ancho de la bisagra más 24 px de margen a cada lado. Cualquier cuadrícula
   de dos columnas iguales con ese hueco entre ellas cae justo sobre la
   bisagra, porque la bisagra está en el centro de la pantalla.

   Para quitar esta adaptación basta con quitar el enlace a duo.css de las
   páginas (o borrar este archivo).
   ========================================================================== */

@media (horizontal-viewport-segments: 2) {

  :root {
    /* Ancho real de la bisagra (en el iPhone Duo, unos 34 px) */
    --fold: calc(env(viewport-segment-left 1 0, 574px) - env(viewport-segment-right 0 0, 540px));
    /* Hueco entre las dos pantallas: bisagra + 24 px de margen a cada lado */
    --gap-fold: calc(var(--fold) + 48px);
  }

  /* El contenido ocupa todo el ancho, para que cada columna caiga en su pantalla */
  .container { max-width: none; }

  /* ---------- Barra superior: logotipo y botón a la izquierda, enlaces a la derecha ---------- */
  .nav-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-fold);
    align-items: center;
  }
  nav.links { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  nav.links a { padding: 8px 9px; font-size: 14px; white-space: nowrap; }
  nav.links a.btn-appstore {
    position: absolute;
    inset-block: 0;
    margin: auto 0;
    height: fit-content;
    right: calc(50% + var(--gap-fold) / 2);
  }
  /* Barra del juego */
  .game-sub .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-fold);
  }
  .game-sub nav { justify-content: space-between; }
  .game-sub nav a { padding: 6px 8px; font-size: 13.5px; }

  /* ---------- Portada: texto en una pantalla, dispositivos en la otra ---------- */
  .hero-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--fold);
    align-items: center;
    padding: 56px 0;
    background: var(--hero-bg);
  }
  .hero-stage .hero-center,
  .hero-stage .stage-wrap { max-width: none; width: auto; margin: 0; }
  .hero-center h1 { font-size: 3.1rem; }

  /* Cifras: dos a cada lado */
  .facts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--gap-fold) repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }
  .facts-list li:nth-child(3) { grid-column: 4; padding-left: 0; border-left: 0; }

  /* ---------- Títulos de sección: el título a un lado y la explicación al otro ---------- */
  .section-intro {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-fold);
    align-items: end;
  }
  .section-intro h2 { grid-column: 1; margin: 0; }
  .section-intro .sub { grid-column: 2; margin: 0; max-width: none; }

  /* Tarjetas en dos columnas, una por pantalla */
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }

  /* Pasos del juego: uno en una pantalla y dos en la otra */
  .features.steps > .feat:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .features.steps > .feat:nth-child(2) { grid-column: 2; grid-row: 1; }
  .features.steps > .feat:nth-child(3) { grid-column: 2; grid-row: 2; }

  /* Recorrido por la app: texto y dispositivo, cada uno en su pantalla */
  .show-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }

  /* Privacidad */
  .privacy-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }
  .privacy-inner .privacy-ico { grid-column: 1; grid-row: 1; }
  .privacy-inner > div { grid-column: 1; grid-row: 2; }
  .privacy-inner .privacy-points { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .privacy-inner .btn { grid-column: 1; grid-row: 3; }

  /* Tarjeta del juego, bloque final y paneles de llamada a la acción */
  .game-card { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }
  .game-card img { margin: 0 auto; }
  .final-inner,
  .cta-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-fold);
    align-items: center;
    text-align: left;
  }
  .final-inner > :not(.cta),
  .cta-panel > :not(.cta) { grid-column: 1; }
  .final-inner .sub,
  .cta-panel .sub { margin-left: 0; margin-right: 0; }
  .final-inner .cta,
  .cta-panel .cta { grid-column: 2; grid-row: 1 / span 3; justify-content: center; margin-top: 0; }
  .final-inner .logo.logo-xl,
  .cta-panel .cta-icon { margin-left: 0; margin-right: 0; }

  /* Cabecera de las páginas interiores */
  .page-head > .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-fold);
    align-items: start;
  }
  .page-head > .container > * { grid-column: 1; }
  .page-head > .container > .cta,
  .page-head > .container > .platforms,
  .page-head > .container > .doc-meta { grid-column: 2; }
  .page-head > .container > .doc-meta { grid-row: 1; align-self: end; }
  .page-head > .container > .cta { grid-row: 1; align-self: end; margin: 0 0 10px; }
  .page-head > .container > .platforms { grid-row: 2; align-self: start; margin: 10px 0 0; }
  /* Sin botones: el título a una pantalla y la explicación a la otra */
  .page-head > .container:not(:has(.cta)) > .lead { grid-column: 2; grid-row: 1; align-self: end; }
  .page-head > .container:not(:has(.cta)) > h1 { grid-row: 1; align-self: end; }

  /* Soporte: preguntas a la izquierda, contacto a la derecha */
  .support-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }

  /* Textos legales: el índice en una pantalla y el texto en la otra */
  .doc-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); justify-content: normal; }
  .doc-aside { grid-column: 1; grid-row: 1; }
  .doc { grid-column: 2; grid-row: 1; }
  .summary-box { grid-template-columns: minmax(0, 1fr); }

  /* Web del juego */
  .hero-grid,
  .hero-home .hero-grid,
  .game-hero .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }

  /* Mundos: cuatro en total, dos a cada lado */
  .worlds {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--gap-fold) repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }
  .worlds > li { margin-right: 14px; }
  .worlds > li:nth-child(4n+1) { grid-column: 1; }
  .worlds > li:nth-child(4n+2) { grid-column: 2; margin-right: 0; }
  .worlds > li:nth-child(4n+3) { grid-column: 4; }
  .worlds > li:nth-child(4n) { grid-column: 5; margin-right: 0; }
  .worlds { row-gap: 14px; }

  /* Estilos del gusano: tres a cada lado */
  .skins {
    grid-template-columns: repeat(3, minmax(0, 1fr)) var(--gap-fold) repeat(3, minmax(0, 1fr));
    column-gap: 14px;
  }
  .skins > li:nth-child(6n+1) { grid-column: 1; }
  .skins > li:nth-child(6n+2) { grid-column: 2; }
  .skins > li:nth-child(6n+3) { grid-column: 3; }
  .skins > li:nth-child(6n+4) { grid-column: 5; }
  .skins > li:nth-child(6n+5) { grid-column: 6; }
  .skins > li:nth-child(6n) { grid-column: 7; }

  /* Capturas del juego: dos en una pantalla y una en la otra */
  .shots {
    grid-template-columns:
      calc((100% - var(--gap-fold)) / 4)
      calc((100% - var(--gap-fold)) / 4)
      var(--gap-fold)
      calc((100% - var(--gap-fold)) / 2);
    column-gap: 0;
    justify-content: normal;
  }
  .shots > figure:nth-child(1) { grid-column: 1; margin-right: 12px; }
  .shots > figure:nth-child(2) { grid-column: 2; margin-left: 12px; }
  .shots > figure:nth-child(3) { grid-column: 4; justify-self: center; width: 60%; }

  /* ---------- Pie de página: marca a la izquierda, tres listas a la derecha ---------- */
  .foot-grid {
    grid-template-columns: calc((100% - var(--gap-fold)) / 2) var(--gap-fold) repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }
  .foot-grid .foot-about { grid-column: 1; }
  .foot-grid > nav { padding-right: 12px; }
  .foot-grid > nav:nth-of-type(1) { grid-column: 3; }
  .copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-fold); }
  .copy p:last-child { text-align: left; }
}