/* =============================================================
   SECCIONES
   - .articulo   : sección terminada (foto + colgante + textos)
   - .seccion    : página provisoria, a la espera de su diseño
   ============================================================= */

/* -------------------------------------------------------------
   SECCIÓN TERMINADA
   Las posiciones se declaran como variables para poder ajustarlas
   a ojo contra el diseño de Illustrator. Todas son % de la
   pantalla: horizontal sobre el ancho, vertical sobre el alto.
   ------------------------------------------------------------- */

.articulo {
  position: relative;
  height: 100vh;
  height: 100svh;       /* el alto que se ve de verdad en el celular */
  overflow: hidden;

  --colgante-x:     12.6%;  /* eje del hilo punteado */
  --colgante-alto:  47svh;   /* define también el tamaño del círculo */
  --texto-x:        19%;    /* margen izquierdo de título y texto */
  --titulo-y:       25%;
  --texto-y:        53%;
  --texto-ancho:    31.5%;

  /* Tamaños de tipografía (acompañan el ancho de la pantalla) */
  --titulo-tamano:  clamp(22px, 1.95vw, 40px);
  --texto-tamano:   clamp(12px, 1.11vw, 21px);
  --texto-interlineado: 1.65;
}

/* Foto de fondo de la sección.
   La imagen se indica en el HTML con style="background-image: url(...)",
   porque una url() dentro de una variable CSS se resolvería contra esta
   hoja de estilos y no contra la página. */
.articulo__foto {
  position: absolute;
  inset: 0;
  background-color: var(--negro);
  background-size: cover;
  background-position: center;
}

/* -------------------------------------------------------------
   FONDO EN MOSAICO
   Una fila de 3 imágenes arriba y otra de 4 abajo (una de las
   cuales puede ser un video). Las proporciones son variables.
   ------------------------------------------------------------- */

.mosaico {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;

  --mosaico-arriba: 61%;   /* alto de la fila de 3 imágenes */
  --sombra: 0.34;          /* cuánto se oscurecen las fotos para leer el texto */
}

.mosaico__fila {
  display: flex;
  min-height: 0;
}

.mosaico__fila--arriba { flex: 0 0 var(--mosaico-arriba); }
.mosaico__fila--abajo  { flex: 1; }

.mosaico__celda {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  background-color: var(--negro);
  background-size: cover;
  background-position: center;
}

/* El video ocupa su celda igual que una foto */
.mosaico__celda video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo parejo sobre todo el mosaico: sin esto el texto blanco no se lee
   sobre las fotos claras */
.mosaico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--sombra));
  pointer-events: none;
}

/* -------------------------------------------------------------
   FONDO QUE ROTA (sólo celulares)
   Dos capas que se cruzan; el JS las va alternando.
   ------------------------------------------------------------- */

.rotador {
  display: none;   /* en escritorio no existe */
  position: absolute;
  inset: 0;
  background-color: var(--negro);
  overflow: hidden;
}

.rotador__capa {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

/* El mismo velo que el mosaico, para que se lea el texto */
.rotador::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--sombra, 0.34));
  pointer-events: none;
}

/* -------------------------------------------------------------
   COMPOSICIÓN CENTRADA (título, texto e isotipo al medio)
   ------------------------------------------------------------- */

.articulo__centro {
  position: absolute;
  left: 50%;
  top: var(--centro-y, 30%);
  width: var(--centro-ancho, 68%);
  transform: translateX(-50%);
  text-align: center;
}

.articulo__centro .articulo__titulo,
.articulo__centro .articulo__texto {
  position: static;
  width: auto;
  transform: none;
}

.articulo__centro .articulo__titulo {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--titulo-espaciado, 0.42em);
  /* el espaciado agrega aire a la derecha: se compensa para que quede centrado */
  margin: 0 0 1.5em calc(var(--titulo-espaciado, 0.42em) * 0.5);
}

.articulo__centro .articulo__texto {
  margin: 0 auto;
  text-align: center;
  /* Para que el texto no pase el ancho del título: se le da el mismo
     valor y queda centrado dentro del bloque. */
  max-width: var(--centro-texto-ancho, 100%);
}

/* Las frases van seguidas en escritorio y separadas en celular */
.frase { display: inline; }

/* Los ítems de una lista con viñeta: seguidos en escritorio y uno
   debajo del otro en celular (Terminaciones). Ojo: .punto ya es el
   circulito del navegador de la galería. */
.vineta { display: inline; }

/* Al revés que .frase: punto y aparte en escritorio y todo seguido en
   celular, donde la columna es angosta y cortar sería desprolijo
   (Atención post venta) */
.parrafo { display: block; }
/* --parrafo-aire: 0 deja un salto de línea simple, sin renglón de por medio */
.parrafo + .parrafo { margin-top: var(--parrafo-aire, 1.3em); }

.articulo__iso {
  display: block;
  width: var(--iso-tamano, 1.9%);
  min-width: 22px;
  margin: 2.1em auto 0;
  color: var(--blanco);
}

.articulo__iso svg { width: 100%; height: auto; }

/* Hay secciones que llevan colgante sólo en celular (Obsesión) */
.colgante--solo-mobile { display: none; }

/* --- Colgante: hilo punteado + círculo con el ícono --- */
.colgante {
  position: absolute;
  top: 0;
  padding: 0;
  left: var(--colgante-x);
  height: var(--colgante-alto);
  transform: translateX(-50%);
  color: var(--blanco);
}

.colgante svg {
  height: 100%;
  width: auto;
  overflow: visible;
}

/* Cuando el colgante abre una galería, es un <button> */
button.colgante { cursor: pointer; }

button.colgante polyline {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-media) var(--ease-suave);
}

button.colgante:hover polyline { transform: translateX(2.5px); }

/* --- Textos --- */
.articulo__titulo {
  position: absolute;
  left: var(--texto-x);
  top: var(--titulo-y);
  margin: 0;
  font-weight: 700;
  font-size: var(--titulo-tamano);
  letter-spacing: 0.005em;
  line-height: 1.1;
}

/* Variante: el título alineado a la altura del círculo del colgante
   (se activa agregando la clase .articulo--titulo-en-medalla).
   --medalla-factor es dónde cae el centro del círculo dentro del alto
   del colgante; lo calcula seccion.js leyendo el propio SVG, así cada
   colgante puede tener el círculo a distinta altura. */
.articulo--titulo-en-medalla .articulo__titulo {
  top: calc(var(--colgante-alto) * var(--medalla-factor, 0.8125));
  /* `translate` y no `transform`: la animación de entrada escribe el
     transform y, al centrar con él, el texto saltaba al aparecer. */
  translate: 0 -50%;
}

.articulo__texto {
  position: absolute;
  left: var(--texto-x);
  top: var(--texto-y);
  width: var(--texto-ancho);
  margin: 0;
  font-weight: 300;
  font-size: var(--texto-tamano);
  letter-spacing: 0.025em;
  line-height: var(--texto-interlineado);
  text-align: var(--texto-alineacion, left);
}

/* -------------------------------------------------------------
   SUBTÍTULO CON DISCO
   Un círculo blanco lleno y, al lado, un subtítulo en mayúsculas.
   ------------------------------------------------------------- */

.subtitulo {
  position: absolute;
  left: var(--subtitulo-x, 10%);
  top: var(--subtitulo-y, 43%);
  display: flex;
  align-items: center;
  gap: var(--subtitulo-separacion, 2.2%);
  /* El dibujo trae aire a su izquierda —el círculo arranca al 6,4% de
     su ancho—, así que se corre esa distancia para que quede alineado
     con el título y el texto. El centrado vertical va acá mismo y no
     en transform, que lo escribe la animación de entrada. */
  translate: calc(var(--contexto-ancho, 21.6vw) * -0.064) -50%;
}

.subtitulo__disco {
  width: var(--disco-tamano, 4.8vw);
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--blanco);
}

/* Variante: el subtítulo viene dibujado (disco con el ícono calado y el
   texto en curvas), todo en un solo SVG. Se mide por su ancho total. */
.subtitulo__grafico {
  display: block;
  width: var(--contexto-ancho, 21.6vw);
  min-width: 220px;
  color: var(--blanco);
}

.subtitulo__grafico svg { width: 100%; height: auto; }

.subtitulo__texto {
  font-weight: 700;
  font-size: calc(var(--texto-tamano) * 0.72);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   TEXTO EN COLUMNAS (con subtítulo cada una)
   ------------------------------------------------------------- */

.columnas {
  position: absolute;
  left: var(--columnas-x, 10%);
  top: var(--columnas-y, 50%);
  width: var(--columnas-ancho, 80%);
  display: grid;
  grid-template-columns: repeat(var(--columnas-cantidad, 3), 1fr);
  gap: var(--columnas-separacion, 4.25%);
}

.columna__titulo {
  margin: 0 0 1.9em;
  font-weight: 700;
  font-size: calc(var(--texto-tamano) * 1.05);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.columna__texto {
  margin: 0;
  font-weight: 300;
  /* medida propia: se puede achicar sin mover los subtítulos */
  font-size: var(--columna-texto-tamano, var(--texto-tamano));
  letter-spacing: 0.025em;
  line-height: var(--texto-interlineado);
}

/* El enlace de volver, arriba a la derecha */
.articulo__volver {
  position: absolute;
  top: 4svh;
  right: 6vw;
}

/* Algunas secciones traen una segunda foto de fondo, ya preparada para
   celular (por ejemplo desenfocada). Se muestra una o la otra. */
.articulo__foto--mobile { display: none; }

@media (max-width: 760px) {
  .articulo__foto--escritorio { display: none; }
  .articulo__foto--mobile { display: block; }
}

/* Estado inicial de la animación de entrada (lo libera JS) */
[data-intro="pendiente"] [data-anim] { opacity: 0; }

/* -------------------------------------------------------------
   SECCIÓN PROVISORIA
   ------------------------------------------------------------- */

.seccion {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4svh 6vw;
  gap: 6svh;
}

.seccion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.seccion__header .logo { --logo-ancho: clamp(170px, 14vw, 240px); }

.seccion__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 60ch;
}

.seccion__titulo {
  margin: 0 0 1.2rem;
  font-weight: 300;
  font-size: clamp(30px, 5vw, 68px);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.seccion__nota {
  margin: 0;
  font-weight: 300;
  font-size: clamp(14px, 1.8svh, 18px);
  line-height: 1.7;
  color: var(--gris-tenue);
}

/* -------------------------------------------------------------
   Enlace "volver al menú" (común a las dos)
   ------------------------------------------------------------- */

.seccion__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(10px, 1.1svh, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Sobre fondos claros se le pasa otro color desde el <article>:
     style="--volver-color: #4d4d4d; --volver-color-activo: #000" */
  color: var(--volver-color, var(--gris-tenue));
  transition: color var(--dur-media) var(--ease-suave);
}

.seccion__volver:hover { color: var(--volver-color-activo, var(--blanco)); }

/* -------------------------------------------------------------
   TARJETAS DE OPORTUNIDADES
   Dos imágenes con su encabezado arriba y, montado sobre el
   borde inferior de cada una, el óvalo que lleva a WhatsApp.
   ------------------------------------------------------------- */

.tarjetas {
  position: absolute;
  left: var(--tarjetas-x, 13.6%);
  right: var(--tarjetas-derecha, 12.5%);
  top: var(--tarjetas-y, 21%);
  bottom: var(--tarjetas-abajo, 9%);
  display: grid;
  grid-template-columns: repeat(var(--tarjetas-cantidad, 2), 1fr);
  gap: var(--tarjetas-separacion, 8%);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- Encabezado: flechita + subtítulo --- */
.tarjeta__cabecera {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.5em;
  font-size: calc(var(--texto-tamano) * 0.78);
}

.tarjeta__flecha {
  width: 2.4em;
  flex: none;
  color: var(--blanco);
}

.tarjeta__flecha svg { width: 100%; height: auto; }

.tarjeta__subtitulo {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --- La imagen (ya trae sus esquinas redondeadas) ---
   El <picture> sólo elige el archivo; no arma caja propia. */
.tarjeta__marco picture { display: contents; }

.tarjeta__marco {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.tarjeta__marco img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.tarjeta__marco img { cursor: pointer; }

.tarjeta__marco:hover img {
  transform: scale(var(--foto-acercamiento, 1.035));
}

/* --- El óvalo, montado sobre el pie de la imagen --- */
.tarjeta__ovalo {
  /* es un <button>: se le sacan los estilos que trae por defecto */
  appearance: none;
  border: 1px solid var(--blanco);
  font-family: inherit;
  cursor: pointer;
  position: absolute;
  bottom: var(--ovalo-abajo, -3.5%);
  /* centrado con left/right y no con transform: el transform queda libre
     para la animación de entrada */
  left: calc((100% - var(--ovalo-ancho, 76%)) / 2);
  width: var(--ovalo-ancho, 76%);
  display: block;
  padding: 1.25em 1.8em;
  border-radius: 999px;
  background: var(--negro);
  text-align: center;
  font-size: calc(var(--texto-tamano) * 0.92);
  font-weight: 300;
  line-height: 1.5;
  transition: background-color var(--dur-media) var(--ease-suave);
}

.tarjeta__ovalo:hover { background: #161616; }

.tarjeta__ovalo strong { font-weight: 700; }

/* =============================================================
   MOBILE — las secciones en pantallas angostas
   Se cambian las propiedades (no las variables), porque cada
   sección declara las suyas en el HTML y ésas mandan sobre
   cualquier hoja de estilos. Si una sección necesita una medida
   propia para mobile, la declara con el sufijo -mobile.
   El diseño de escritorio no se toca.
   ============================================================= */

@media (max-width: 760px) {
  .colgante { left: var(--colgante-x-mobile, 16.6%); }

  .articulo__titulo {
    /* el título puede arrancar en otro margen que el texto (Terminaciones) */
    left: var(--titulo-x-mobile, var(--texto-x-mobile, 25.5%));
    top: var(--titulo-y-mobile, 24%);
    font-size: var(--titulo-tamano-mobile, clamp(16px, min(5vw, 3svh), 26px));
  }

  /* El colgante puede ser más corto en celular (mueve el círculo y,
     con él, el título que va a su altura) */
  .articulo { --colgante-alto: var(--colgante-alto-mobile, 47svh); }

  /* En celular, las secciones que en escritorio llevan el título a la
     altura del círculo lo suben arriba de él, como en los diseños. */
  .articulo--titulo-en-medalla .articulo__titulo {
    top: var(--titulo-y-mobile, 24%);
    translate: none;
  }

  /* Secciones con el título centrado en celular */
  .articulo--titulo-centrado-mobile .articulo__titulo {
    left: 0;
    right: 0;
    text-align: center;
  }

  /* …salvo las que piden mantenerlo al lado del círculo también acá */
  .articulo--medalla-en-mobile .articulo__titulo {
    top: calc(var(--colgante-alto) * var(--medalla-factor, 0.8125));
    translate: 0 -50%;
  }

  .articulo__texto {
    left: var(--texto-x-mobile, 25.5%);
    top: var(--texto-y-mobile, 56%);
    width: var(--texto-ancho-mobile, 57%);
    /* min(vw, dvh): en un iPhone con las dos barras a la vista queda poco
       alto y, si la letra sólo mirara el ancho, el texto se desbordaba */
    font-size: var(--texto-tamano-mobile, clamp(10px, min(3.4vw, 1.9svh), 17px));
    text-align: left;   /* en columna angosta, justificar deja huecos feos */
  }

  /* Secciones que en celular no llevan el bloque del subtítulo */
  .articulo--sin-subtitulo-mobile .subtitulo { display: none; }

  /* El subtítulo con el ícono (Terminaciones) */
  .subtitulo {
    left: var(--subtitulo-x-mobile, var(--subtitulo-x, 10%));
    top: var(--subtitulo-y-mobile, var(--subtitulo-y, 43%));
    translate: 0 -50%;   /* en celular la posición ya es la del diseño */
  }

  .subtitulo__grafico {
    width: var(--contexto-ancho-mobile, var(--contexto-ancho, 21.6vw));
    min-width: 0;   /* el mínimo de escritorio no lo dejaría achicar */
  }

  /* Las letras del subtítulo se agrandan sin tocar el círculo del ícono.
     El dibujo puede salirse de su caja, así que se deja ver de más. */
  .subtitulo__grafico svg { overflow: visible; }

  .subtitulo__palabras {
    transform: scale(var(--contexto-letras-mobile, 1));
    transform-box: fill-box;
    transform-origin: left center;
  }

  /* Desenfoque de la foto, si la sección lo pide. Ojo: desenfocar una
     foto a pantalla completa es caro y se nota en la animación de
     entrada; si se puede, mejor una foto ya desenfocada con
     .articulo__foto--mobile (ver más abajo). */
  .articulo__foto {
    filter: blur(var(--fondo-desenfoque-mobile, 0px));
    inset: calc(var(--fondo-desenfoque-mobile, 0px) * -3);
  }

  /* Velo oscuro para que el texto se lea sobre la foto */
  .articulo__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--fondo-oscurecer-mobile, 0));
  }

  /* Si el fondo cambia de claridad en celular, el enlace de volver
     puede necesitar otro color que en escritorio */
  .seccion__volver {
    color: var(--volver-color-mobile, var(--volver-color, var(--gris-tenue)));
  }

  /* El enlace de volver, más cerca del borde */
  .articulo__volver {
    top: 2.4svh;
    right: 5vw;
  }

  /* Si el hilo del colgante baja por la derecha, en una pantalla angosta
     pasaría justo por encima del enlace: se lo pasa a la izquierda. */
  .articulo--colgante-derecha .articulo__volver {
    right: auto;
    left: 5vw;
  }
}


/* =============================================================
   MOBILE — secciones de composición centrada
   (Obsesión por los detalles). El mosaico de escritorio se
   reemplaza por una sola foto que va rotando.
   ============================================================= */

@media (max-width: 760px) {
  .mosaico { display: none; }
  .rotador { display: block; }

  .articulo__centro {
    top: var(--centro-y-mobile, 15%);
    width: var(--centro-ancho-mobile, 78%);
  }

  .articulo__centro .articulo__titulo {
    /* el ancho es el que define el corte en tres líneas del diseño */
    max-width: var(--titulo-ancho-mobile, 68%);
    margin: 0 auto var(--titulo-aire-mobile, 3.2em);
    font-size: var(--titulo-tamano-mobile, clamp(17px, 4.9vw, 24px));
    letter-spacing: var(--titulo-espaciado-mobile, 0.34em);
    line-height: 1.55;
  }

  .articulo__centro .articulo__texto {
    width: var(--texto-ancho-mobile, 86%);
    /* min(vw, dvh): en un iPhone con las dos barras a la vista queda poco
       alto y, si la letra sólo mirara el ancho, el texto se desbordaba */
    font-size: var(--texto-tamano-mobile, clamp(10px, min(3.4vw, 1.9svh), 17px));
    line-height: 1.8;
  }

  /* Cada frase, su propio párrafo */
  .frase { display: block; }
  .frase + .frase { margin-top: 1.6em; }

  /* Cada ítem, en su renglón */
  .vineta { display: block; }

  /* Los párrafos, uno seguido del otro */
  .parrafo { display: inline; }
  .parrafo + .parrafo { margin-top: 0; }

  .articulo__iso {
    width: var(--iso-tamano-mobile, 7%);
    margin-top: var(--iso-aire-mobile, 8svh);
  }

  /* --- Obsesión en celular: deja de ser una composición centrada ---
     El bloque se corre a la izquierda, el título va en caja alta normal
     y el colgante aparece a la derecha. En escritorio no cambia nada. */

  .colgante--solo-mobile { display: block; }

  .articulo--suelto-en-mobile .articulo__centro {
    left: var(--texto-x-mobile, 15.9%);
    top: var(--titulo-y-mobile, 16.9%);
    width: var(--centro-ancho-mobile, 69%);
    transform: none;
    text-align: left;
  }

  .articulo--suelto-en-mobile .articulo__centro .articulo__titulo {
    max-width: none;
    margin: 0 0 var(--titulo-aire-mobile, 28svh);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.25;
  }

  .articulo--suelto-en-mobile .articulo__centro .articulo__texto {
    width: 100%;
    max-width: none;   /* el tope de escritorio no corre acá */
    margin: 0;
    text-align: left;
  }
}


/* =============================================================
   MOBILE — Oportunidades disponibles

   Las dos tarjetas pasan a una sola columna y cada foto usa su
   versión apaisada (…-celular.jpg). El marco redondeado y el
   filete lo dibuja el CSS, porque esos archivos vienen recortados
   del interior de la foto original.
   ============================================================= */

@media (max-width: 760px) {
  .tarjetas {
    left: var(--tarjetas-x-mobile, 17.9%);
    right: var(--tarjetas-derecha-mobile, 17%);
    top: var(--tarjetas-y-mobile, 18%);
    bottom: var(--tarjetas-abajo-mobile, 5%);
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    /* Arrancan arriba de todo y la separación entre las dos es fija:
       así el bloque no se va al pie en los teléfonos menos altos. */
    align-content: start;
    /* el óvalo de la tarjeta de arriba cuelga por debajo de su foto, así
       que la separación lleva esos píxeles de más: lo que se ve entre el
       óvalo y el título de la tarjeta siguiente son unos 35 px */
    gap: var(--tarjetas-separacion-mobile, calc(4svh + 36px));
  }

  .tarjeta__cabecera {
    font-size: var(--tarjeta-texto-mobile, clamp(9px, min(2.7vw, 1.7svh), 14px));
    gap: 0.8em;
    margin-bottom: 1em;
  }

  .tarjeta__flecha { width: 2.1em; }

  /* La foto ocupa el ancho disponible, pero nunca más alto que
     --foto-alto-mobile: así, en pantallas menos altas, las dos
     tarjetas siguen teniendo aire entre una y otra. */
  .tarjeta__marco {
    width: min(100%, calc(var(--foto-alto-mobile, 28svh) * var(--foto-proporcion-mobile, 1.18)));
    margin: 0 auto;
    flex: none;
    /* el óvalo mide su letra contra el ancho de esta foto */
    container-type: inline-size;
  }

  .tarjeta__marco img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: clamp(12px, 4vw, 22px);
  }

  /* El óvalo, montado sobre el pie de la foto */
  .tarjeta__ovalo {
    /* la letra también mira el alto: en pantallas bajas la foto (y con
       ella el óvalo) se achica, y el texto tiene que seguir entrando
       en tres renglones */
    font-size: var(--ovalo-texto-mobile, clamp(7.5px, 4.6cqw, 14px));
    width: var(--ovalo-ancho-mobile, 94%);
    left: calc((100% - var(--ovalo-ancho-mobile, 94%)) / 2);
    bottom: var(--ovalo-abajo-mobile, -2.6em);
    padding: 1.05em 0.7em;
    line-height: 1.45;
  }
}


/* =============================================================
   MOBILE — Inversores de pozo: los textos pasan de a uno

   En celular las tres columnas se convierten en un carril que se
   desliza con el dedo, con un texto por pantalla. La flechita de
   la derecha avisa que hay más para leer y también pasa al
   siguiente si la tocan.
   ============================================================= */

@media (max-width: 760px) {
  .columnas {
    left: 0;
    right: 0;
    width: auto;
    top: var(--columnas-y-mobile, var(--columnas-y, 50%));

    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* sin barra a la vista */
  }

  .columnas::-webkit-scrollbar { display: none; }

  .columna {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding-left: var(--columnas-x-mobile, var(--texto-x-mobile, 19.8%));
    padding-right: var(--columnas-derecha-mobile, 19.8%);
  }

  .columna__titulo {
    font-size: var(--columna-titulo-mobile, clamp(11px, min(3.7vw, 2.2svh), 19px));
    margin-bottom: 1.4em;
  }

  .columna__texto {
    font-size: var(--columna-texto-mobile, clamp(10px, min(3.4vw, 1.9svh), 17px));
  }
}

/* --- Las flechitas que pasan de un contenido a otro --- */
.pasador { display: none; }

/* Las copias que arman el carril infinito no existen en escritorio.
   La clase va dos veces a propósito: así pesa más que el display
   que cada contenido trae por su cuenta (por ejemplo .proyecto). */
@media (min-width: 761px) {
  .es-clon.es-clon { display: none; }
}

@media (max-width: 760px) {
  .pasador {
    position: absolute;
    display: block;
    top: var(--pasador-y-mobile, 72%);
    width: var(--pasador-tamano-mobile, 22px);
    padding: 10px;              /* área de toque cómoda */
    box-sizing: content-box;
    color: inherit;             /* negro en las secciones claras */
    opacity: 0.5;
    transition: opacity 0.4s var(--ease-suave);
  }

  .pasador:active { opacity: 0.85; }

  .pasador--adelante { right: var(--pasador-x-mobile, 6%); }
  .pasador--atras    { left:  var(--pasador-x-mobile, 6%); }

  .pasador svg { width: 100%; height: auto; display: block; }
  .pasador--atras svg { transform: scaleX(-1); }

  /* El vaivén va en el hijo: así no pelea con la animación de entrada */
  .pasador__flecha {
    display: block;
    animation: pasador-vaiven 2.8s var(--ease-suave) infinite;
  }

  .pasador--atras .pasador__flecha {
    animation-name: pasador-vaiven-atras;
  }
}

@keyframes pasador-vaiven {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

@keyframes pasador-vaiven-atras {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pasador__flecha { animation: none; }
}


/* -------------------------------------------------------------
   CELULARES DE PANTALLA BAJA
   Un iPhone SE con las dos barras del navegador a la vista deja
   poco más de 500 px de alto: ahí el ícono del subtítulo se achica
   un poco para no quedar encima del texto.
   ------------------------------------------------------------- */

@media (max-width: 760px) and (max-height: 700px) {
  /* Oportunidades: fotos un poco más chicas, para que las dos tarjetas
     entren con aire entre una y otra */
  .tarjeta__marco {
    width: min(100%, calc(var(--foto-alto-corto-mobile, 26svh) * var(--foto-proporcion-mobile, 1.18)));
  }
}

@media (max-width: 760px) and (max-height: 600px) {
  .subtitulo__grafico {
    width: var(--contexto-ancho-corto-mobile, 42vw);
  }
}


/* =============================================================
   CELULAR APAISADO

   Con el teléfono de costado quedan unos 320 px de alto: no entra
   una composición de una sola pantalla y, como la sección recorta
   lo que sobra, el visitante no podía leer el final.

   Acá la sección toma un alto mínimo cómodo y deja de recortar: la
   página se scrollea como cualquier página, y al llegar al final el
   gesto sigue a la sección siguiente, igual que en vertical (de eso
   se ocupa assets/js/scroll-secciones.js, que sólo cambia de sección
   cuando no queda nada más para scrollear).
   ============================================================= */

@media (orientation: landscape) and (max-height: 520px) {
  .articulo {
    height: auto;
    min-height: max(100svh, var(--alto-apaisado, 660px));
  }
}