/* Portada «estilo dayos» de CREAM — exploración, sin publicar.
   Estructura, medidas y movimiento copiados de dayos.com, medidos el 11/09/2026 en Chrome sin ventana (10 anchos).
   Escala: como en dayos, 1rem es 1/144 del ancho en computadora (10 px a 1440) y 1/37,5 en celular (10,4 px a 390),
   así que las medidas de dayos se escriben tal cual en rem. Diferencia a propósito: pisos de tamaño para el texto
   chico (dayos baja a 10-14 px entre 768 y 1100 de ancho) y grises un punto más oscuros para que pasen contraste.
   Tipos: Mona Sans (ancho 85 %, peso 680) en lugar de SuisseIntlCond, Archivo en lugar de SuisseIntl y Geist Mono en
   lugar de SuisseIntlMono. Las tres son libres (OFL) y se cargan desde Google Fonts. */

:root {
  --lienzo: #e5e5e5;
  --niebla: #f3f3f3;
  --ceniza: #c6c6c6;
  --humo: #979797;
  --gris-texto: #5e5e5e;        /* dayos usa #979797 (2,9:1 sobre blanco); este da 6,6:1 sobre blanco y 5,3:1 sobre #e5e5e5 */
  --pizarra: #444;
  --grafito: #2f2f2f;
  --tinta: #1a1a1a;
  --negro: #000;
  --blanco: #fff;
  --acento: #ff29ff;            /* magenta CREAM en el lugar del amarillo #fff100 de dayos */
  --acento-palido: #ffd6ff;     /* en el lugar del menta #d1ffca */
  --foco: #b800b8;
  --acento-claro: #b800b8;      /* obligatorio sobre fondo claro: el #ff29ff no pasa contraste ahí */
  --acento-vivo: #ff6bff;       /* el tono de hover del manual */
  --acento-sobre: var(--acento-claro);   /* lo que se usa al pasar el cursor; cambia en las zonas oscuras */

  --f-cond: 'Mona Sans', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --margen: 8.8rem;
  --margen-cabecera: 5.6rem;
  --alto-cabecera: 8rem;
  --radio-bloque: 6.4rem;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --curva-boton: cubic-bezier(.65, 0, .35, 1);

  --t-12: max(1.2rem, 11px);
  --t-14: max(1.4rem, 13px);
  --t-16: max(1.6rem, 14px);
  --t-20: max(2rem, 16px);
  --t-28: max(2.8rem, 20px);
}

html {
  font-size: calc(100vw / 144);      /* sin tope, como dayos: en 2560 todo crece en proporción y el video sigue a la derecha */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--negro);
  font-family: var(--f-texto);
  font-size: var(--t-16);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1.6rem); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1.6rem; top: -10rem; z-index: 100;
  padding: 1.2rem 1.6rem; border-radius: .8rem;
  background: var(--negro); color: var(--blanco); font-weight: 500; text-decoration: none;
}
.saltar:focus { top: 1.6rem; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
[data-fondo="negro"] :focus-visible, .pie :focus-visible, .menu-movil :focus-visible { outline-color: var(--acento); }

/* ───────── Tipos (medidas de dayos a 1440) ───────── */

.titular, .titulo-grande, .columna__titulo, .capacidad__titulo, .caso__titulo, .entrada__titulo, .menu-movil__nav a {
  font-family: var(--f-cond);
  font-weight: 680;
  font-stretch: 85%;
  letter-spacing: -.036em;          /* con esto Mona Sans ocupa el mismo ancho que SuisseIntlCond a -0,03 em */
  line-height: .9;
  text-transform: uppercase;
}
.titulo-grande { font-size: 8rem; margin: 0; max-width: 83.5rem; }
.titulo-cita {
  margin: 0;
  max-width: 62.1rem;
  font-size: 4rem;
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.texto-grande {
  margin: 4rem 0 0;
  max-width: 83.5rem;
  font-size: var(--t-28);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.03em;
}
.texto-grande--gris { color: var(--gris-texto); }

/* ───────── Botones: el texto se va hacia arriba y su copia entra desde abajo ───────── */

.boton {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.2rem;
  font-family: var(--f-texto);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.boton__texto {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 100%;
  padding-inline: 2.4rem;
  transition: transform .55s var(--curva-boton);
}
.boton__texto svg { width: 1.6rem; height: 1.6rem; flex: none; }
.boton__texto--eco { transform: translateY(100%); }
@media (hover: hover) {
  .boton:hover .boton__texto { transform: translateY(-100%); }
  .boton:hover .boton__texto--eco { transform: none; }
  /* todo botón lleno se enciende en magenta con el texto en negro, como manda el manual de marca */
  .boton--negro:hover, .boton--blanco:hover, .boton--grafito:hover, .boton--niebla:hover { background: var(--acento); color: var(--negro); }
  .boton--acento:hover, .cabecera[data-fondo="negro"] .boton--cabecera:hover { background: var(--acento-vivo); color: var(--negro); }
}
.boton--cabecera { height: 4rem; font-size: var(--t-14); background: var(--negro); color: var(--blanco); }
.boton--mediano { height: 4.8rem; font-size: var(--t-16); letter-spacing: -.02em; }
.boton--chico { height: 4.5rem; font-size: var(--t-14); }
.boton--chico .boton__texto { padding-inline: 2.2rem; }
.boton--negro { background: var(--negro); color: var(--blanco); }
.boton--blanco { background: var(--blanco); color: var(--negro); }
.boton--grafito { background: var(--grafito); color: var(--blanco); }

.boton--niebla { background: var(--niebla); color: var(--negro); }
.boton--acento { height: 4.8rem; font-size: var(--t-16); background: var(--acento); color: var(--negro); }

.boton-redondo, .boton-cuadrado {
  display: grid;
  place-items: center;
  flex: none;
  width: max(4rem, 32px);
  height: max(4rem, 32px);
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--niebla);
  color: var(--negro);
  transition: background-color .25s ease;
}
.boton-redondo { border-radius: 50%; }
.boton-redondo svg { width: 1.6rem; height: 1.6rem; }
.boton-redondo:hover { background: var(--acento); color: var(--negro); }
.boton-redondo .icono-reproducir, .boton-redondo[aria-pressed="true"] .icono-pausa { display: none; }
.boton-redondo[aria-pressed="true"] .icono-reproducir { display: block; }
.boton-cuadrado { border-radius: 1rem; background: var(--blanco); }
.boton-cuadrado svg { width: 1.6rem; height: 1.6rem; }
.boton-cuadrado:hover { background: var(--acento); color: var(--negro); }
.boton-cuadrado:disabled { cursor: default; opacity: .4; background: var(--blanco); color: var(--negro); }
[data-tarjetas-anterior] svg { transform: rotate(180deg); }

/* ───────── Cabecera ───────── */

.cabecera {
  --fondo-cabecera: var(--lienzo);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--alto-cabecera);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--margen-cabecera);
}
.cabecera__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fondo-cabecera);
  transition: background-color .35s ease;
}
.cabecera[data-fondo="blanco"] { --fondo-cabecera: var(--blanco); }
.cabecera[data-fondo="negro"] { --fondo-cabecera: var(--negro); }
.cabecera__abrir { display: none; }
.cabecera__marca { justify-self: start; padding-block: max(1.1rem, 11px); color: var(--negro); transition: color .35s ease; }
.cabecera__marca svg { width: auto; height: 2.2rem; }
.cabecera__nav {
  display: flex;
  height: 4.8rem;
  padding: 0 1.6rem;
  border-radius: 4.8rem;
  background: var(--niebla);
  color: var(--pizarra);
  transition: background-color .35s ease, color .35s ease;
}
.cabecera__nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: 2rem;
  font-size: var(--t-14);
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.cabecera__nav a::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  width: .3rem;
  height: .3rem;
  margin-top: -.15rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .cabecera__nav:hover a { color: var(--humo); }
  .cabecera__nav a:hover { color: var(--acento-sobre); }
  .cabecera__nav a:hover::before { opacity: 1; }
}
.cabecera .boton--cabecera { justify-self: end; }
.cabecera[data-fondo="negro"] .cabecera__marca { color: var(--blanco); }
.cabecera[data-fondo="negro"] .cabecera__nav { background: var(--tinta); color: var(--humo); }
.cabecera[data-fondo="negro"] .cabecera__nav a:hover { color: var(--acento); }
.cabecera__marca:hover { color: var(--acento-sobre); }
.cabecera[data-fondo="negro"] .boton--cabecera { background: var(--acento); color: var(--negro); }

/* Menú de celular: popover nativo, abre y cierra sin JS */
.menu-movil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 2.2rem 2.4rem 3.2rem;
  border: 0;
  background: var(--negro);
  color: var(--blanco);
  overflow: auto;
}
.menu-movil:popover-open { display: flex; flex-direction: column; }
html.menu-abierto { overflow: hidden; }
.menu-movil__cabeza { display: flex; align-items: center; justify-content: space-between; height: 4.2rem; }
.menu-movil__marca { width: auto; height: 2.2rem; color: var(--blanco); }
.menu-movil__cerrar {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin-right: -1rem;
  padding: 0; border: 0; background: none; color: var(--blanco); cursor: pointer;
}
.menu-movil__cerrar svg { width: 2.4rem; height: 2.4rem; }
.menu-movil__nav { display: flex; flex-direction: column; gap: .4rem; margin-top: 4.8rem; }
.menu-movil__nav a { display: block; padding: .4rem 0; font-size: 5.2rem; text-decoration: none; }
.menu-movil__pie { margin-top: auto; padding-top: 4rem; display: grid; gap: 2.4rem; justify-items: start; }
.menu-movil__ingresar { margin: 0; color: var(--humo); font-size: var(--t-16); }
.menu-movil__ingresar a { color: var(--blanco); }

/* ───────── Hero ───────── */

.portada {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 17.6rem var(--margen) 9.6rem;
  background: var(--lienzo);
}
.titular { position: relative; z-index: 2; margin: 0; font-size: 13rem; }
.titular__linea {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  /* aire para la tilde de ESTRATÉGICO y la cola de la Q: el recorte no debe comérselas */
  padding: .16em 0 .1em;
  margin: -.16em 0 -.04em;
}
.titular__linea:last-child { margin-bottom: -.1em; }
.titular__linea > span { display: block; }
.titular__linea:nth-child(2) > span { --i: 1; }
.titular__linea:nth-child(3) > span { --i: 2; }
.titular__linea:nth-child(4) > span { --i: 3; }
/* el punto final es el destello del logo de CREAM: apoyado en la línea base, un poco más grande que un punto */
.titular__acento { color: var(--acento-claro); }
.titular__destello {
  display: inline-block;
  width: .3em;
  height: .3em;
  margin-left: .04em;
  vertical-align: baseline;
}

.portada__bajada {
  position: relative;
  z-index: 2;
  max-width: 40.6rem;
  margin: 6.4rem 0 0;
  font-size: var(--t-20);
  line-height: 1.2;
}

.portada__medios { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.portada__videos {
  position: absolute;
  top: calc(var(--alto-cabecera) + 2.4rem);
  bottom: 12rem;
  right: 0;
  width: 57rem;
  clip-path: inset(1px);
  /* sin marco: el video se funde con el fondo en un rectángulo de bordes suaves. Son dos degradados, uno horizontal y
     otro vertical, que se cruzan; las paradas van en curva para que el borde no marque una línea. Por la izquierda el
     degradado empieza más adentro, para que el titular nunca le quede encima. */
  --horizontal: linear-gradient(to right, transparent 0 10%, rgba(0, 0, 0, .05) 13%, rgba(0, 0, 0, .16) 16.5%, rgba(0, 0, 0, .36) 20%, rgba(0, 0, 0, .6) 23.5%, rgba(0, 0, 0, .82) 27%, rgba(0, 0, 0, .95) 30.5%, #000 34% 78%, rgba(0, 0, 0, .95) 81%, rgba(0, 0, 0, .82) 84%, rgba(0, 0, 0, .6) 87%, rgba(0, 0, 0, .36) 90%, rgba(0, 0, 0, .16) 93%, rgba(0, 0, 0, .05) 96.5%, transparent 100%);
  --vertical: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .05) 3%, rgba(0, 0, 0, .16) 6.5%, rgba(0, 0, 0, .36) 10%, rgba(0, 0, 0, .6) 13.5%, rgba(0, 0, 0, .82) 17%, rgba(0, 0, 0, .95) 20.5%, #000 24% 76%, rgba(0, 0, 0, .95) 79.5%, rgba(0, 0, 0, .82) 83%, rgba(0, 0, 0, .6) 86.5%, rgba(0, 0, 0, .36) 90%, rgba(0, 0, 0, .16) 93.5%, rgba(0, 0, 0, .05) 97%, transparent 100%);
  -webkit-mask-image: var(--horizontal), var(--vertical);
  -webkit-mask-composite: source-in;
  mask-image: var(--horizontal), var(--vertical);
  mask-composite: intersect;
}
.portada__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.portada__video.es-activo { opacity: 1; }
.portada__puntos {
  position: absolute;
  right: 0; bottom: 8.8rem; width: 57rem;
  display: flex; justify-content: center; align-items: center; gap: .2rem;
  pointer-events: auto;
}
.portada__punto {
  display: grid; place-items: center;
  width: max(2.4rem, 24px); height: max(2.4rem, 24px);
  padding: 0; border: 0; background: none; cursor: pointer;
}
.portada__punto::before {
  content: '';
  width: .7rem; height: .7rem;
  border-radius: 1rem;
  background: var(--ceniza);
  transition: width .35s var(--curva), background-color .35s var(--curva);
}
.portada__punto.es-activo::before { width: 2.2rem; background: var(--negro); }
@media (hover: hover) { .portada__punto:hover::before { background: var(--acento-claro); } }

/* Entrada del hero: líneas que suben, texto que aparece, video que se funde (solo con JS y movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .titular__linea > span { transform: translateY(135%); }
  .js .portada__bajada { opacity: 0; transform: translateY(2.4rem); }
  .js .portada__videos { opacity: 0; }
  .js .portada__video { transform: scale(1.08); }   /* crece por dentro del óvalo: el borde de la máscara no se mueve */
  .js.listo .titular__linea > span {
    transform: none;
    transition: transform 1.25s var(--curva) calc(var(--i, 0) * 90ms + 120ms);
  }
  .js.listo .portada__bajada {
    opacity: 1;
    transform: none;
    transition: opacity 1s ease .55s, transform 1.25s var(--curva) .55s;
  }
  .js.listo .portada__videos { opacity: 1; transition: opacity 2.2s ease .25s; }
  .js.listo .portada__video { transform: none; transition: opacity 1.4s ease, transform 3s var(--curva) .25s; }
}

/* ───────── Bloques de esquinas redondas (negro y blanco) ───────── */

.bloque--negro, .pie, .menu-movil { --acento-sobre: var(--acento); }
.envoltura--sobre-lienzo { background: linear-gradient(var(--lienzo) 50%, var(--negro) 50%); }
.envoltura--sobre-negro { background: linear-gradient(var(--negro) 50%, var(--blanco) 50%); }
/* arriba, el color de la sección anterior (lo que asoma por las esquinas y por los lados mientras el bloque crece);
   abajo, el del propio bloque, para que ningún medio píxel del escalado deje ver una raya */
.bloque {
  position: relative;
  overflow: clip;
  border-radius: var(--radio-bloque) var(--radio-bloque) 0 0;
  transform-origin: 50% 0;
}
.bloque--negro { background: var(--negro); color: var(--blanco); }
.bloque--blanco { background: var(--blanco); color: var(--negro); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bloque {
      animation: bloque-entra linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
  }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(3.2rem); }
  to { opacity: 1; transform: none; }
}
@keyframes bloque-entra {
  from { transform: scale(.94); }
  to { transform: none; }
}

/* Tres columnas */
.columnas { padding: 9.6rem var(--margen); }
.columnas__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: 9.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* subgrid: los tres títulos comparten fila y se apoyan abajo, así los textos arrancan a la misma altura aunque un
   título tenga una línea y otro dos (con flex, el título partido en líneas para la entrada se desarma) */
.columna { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.columna__titulo { align-self: end; margin: 0; font-size: 6.4rem; }
/* Cada columna lleva a su página: al pasar el cursor crece y se enciende en el magenta de la marca.
   En celular no hay cursor, así que portada.js le pone .es-activa cuando cruza el centro de la pantalla. */
.columna__enlace {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  color: inherit;
  text-decoration: none;
  transform-origin: left center;
  transition: transform .5s var(--curva);
}
.columna__titulo { transition: color .35s ease, text-shadow .35s ease; }
.columna__accion {
  justify-self: start;
  align-self: start;
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 2.4rem; padding: .9rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 2.4rem;
  font-size: var(--t-14); line-height: 1; color: var(--blanco);
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.columna__accion svg { width: 1.4rem; height: 1.4rem; transition: transform .3s var(--curva); }
@media (hover: hover) {
  .columna__enlace:hover .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
  .columna__enlace:hover .columna__accion svg { transform: translateX(.3rem); }
}
.columna__enlace.es-activa .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
.columna__flecha {
  position: absolute;
  top: 0;
  right: .4rem;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  color: var(--acento);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .5s var(--curva);
}
.columna__flecha svg { width: 2.4rem; height: 2.4rem; }
.columna__enlace:focus-visible, .columna__enlace.es-activa { transform: scale(1.04); }
.columna__enlace:focus-visible .columna__titulo, .columna__enlace.es-activa .columna__titulo {
  color: var(--acento);
  text-shadow: 0 0 3rem rgba(255, 41, 255, .55);
}
.columna__enlace:focus-visible .columna__flecha, .columna__enlace.es-activa .columna__accion {
  justify-self: start;
  align-self: start;
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 2.4rem; padding: .9rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 2.4rem;
  font-size: var(--t-14); line-height: 1; color: var(--blanco);
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.columna__accion svg { width: 1.4rem; height: 1.4rem; transition: transform .3s var(--curva); }
@media (hover: hover) {
  .columna__enlace:hover .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
  .columna__enlace:hover .columna__accion svg { transform: translateX(.3rem); }
}
.columna__enlace.es-activa .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
.columna__flecha { opacity: 1; transform: none; }
@media (hover: hover) {
  .columna__enlace:hover { transform: scale(1.04); }
  .columna__enlace:hover .columna__titulo { color: var(--acento); text-shadow: 0 0 3rem rgba(255, 41, 255, .55); }
  .columna__enlace:hover .columna__accion {
  justify-self: start;
  align-self: start;
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 2.4rem; padding: .9rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 2.4rem;
  font-size: var(--t-14); line-height: 1; color: var(--blanco);
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.columna__accion svg { width: 1.4rem; height: 1.4rem; transition: transform .3s var(--curva); }
@media (hover: hover) {
  .columna__enlace:hover .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
  .columna__enlace:hover .columna__accion svg { transform: translateX(.3rem); }
}
.columna__enlace.es-activa .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
.columna__flecha { opacity: 1; transform: none; }
}
.columna__texto { margin: 3.2rem 0 0; max-width: 34rem; font-size: var(--t-16); line-height: 1.25; }

/* Frase que se llena al bajar */
.manifiesto { padding: 9.6rem var(--margen); }
.relleno__palabra {
  --p: clamp(0, calc((var(--avance, 1) - var(--n, 0)) * var(--total, 1)), 1);
  color: color-mix(in srgb, var(--relleno-fin, var(--blanco)) calc(var(--p) * 100%), #3d3d3d);
}
.manifiesto__acento { color: var(--acento); }      /* «Vendemos resultados.» se llena en magenta */
.destacado { color: var(--acento); font-weight: 600; }
.manifiesto__lineas { max-width: 51.3rem; margin-top: 4rem; font-size: var(--t-20); line-height: 1.2; }
.manifiesto__lineas p, .presentacion__cuerpo p { margin: 0 0 2.4rem; }
.manifiesto__lineas p:last-child, .presentacion__cuerpo p:last-child { margin-bottom: 0; }

/* Presentación del agente */
.presentacion {
  display: grid;
  grid-template-columns: 51.3rem minmax(0, 1fr);
  column-gap: 2.4rem;
  align-items: start;
  min-height: 89.3rem;
  padding: 9.6rem var(--margen);
}
.presentacion__cuerpo { margin-top: 4rem; font-size: var(--t-20); line-height: 1.2; }
.presentacion .boton { margin-top: 4rem; }
.reserva {
  display: grid;
  place-items: center;
  padding: 2rem;
  border: 1px dashed var(--pizarra);
  border-radius: 2.4rem;
  color: var(--humo);
  font-family: var(--f-mono);
  font-size: var(--t-12);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.03em;
  text-align: center;
  text-transform: uppercase;
}
.reserva--clara { border: 0; border-radius: 0; background: var(--niebla); color: var(--gris-texto); }

/* Capacidades */
.capacidades { padding: 0 var(--margen) 9.6rem; }
.capacidades__bajada { max-width: 51.3rem; margin: 4rem 0 0; font-size: var(--t-20); line-height: 1.2; }
.capacidades > .boton { margin-top: 4rem; }
.capacidades__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 9.6rem;
  margin: 6.4rem 0 0;
  padding: 0;
  list-style: none;
}
.capacidad__titulo { margin: 3.2rem 0 0; font-size: 4.8rem; }
.capacidad__texto { margin: 1.6rem 0 0; max-width: 34rem; font-size: var(--t-16); line-height: 1.25; }


/* ───────── Animaciones del agente: dos chats de WhatsApp y un Google Calendar ─────────
   Todo es CSS, sin imágenes. Las conversaciones y las cifras son una simulación de cómo trabaja el agente;
   los garabatos del fondo del chat son propios, no los de WhatsApp. */

.anim {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid #e2ddd7;
  border-radius: 2.4rem;
  background: #fff;
}
.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #272727;
  border-radius: 2.4rem;
  background: linear-gradient(#111, #070707);
}
.anim__etiqueta, .panel__barra span, .panel__ficha span, .panel__pie {
  font-family: var(--f-mono);
  font-size: max(1.1rem, 10px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--humo);
}
.anim__etiqueta { position: absolute; top: 1.8rem; left: 2.2rem; z-index: 2; }

/* ── WhatsApp ── */
.wa {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%; height: 100%;
  font-family: var(--f-texto);
}
.wa__cabeza { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; background: #008069; color: #fff; }
.wa__volver { width: 1.8rem; height: 1.8rem; flex: none; }
.wa__avatar { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none; overflow: hidden; border-radius: 50%; background: #b0bec5; color: #eceff1; }
.wa__avatar svg { width: 2.8rem; height: 2.8rem; margin-bottom: -.3rem; }
.wa__quien { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.wa__quien b { overflow: hidden; font-size: max(1.35rem, 12px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.wa__estado { position: relative; display: block; height: 1.4rem; font-size: max(1.05rem, 9px); font-style: normal; color: rgba(255, 255, 255, .8); }
.wa__estado s, .wa__estado u { position: absolute; left: 0; top: 0; text-decoration: none; white-space: nowrap; }
.wa__estado u { opacity: 0; }
.wa__icono { width: 1.9rem; height: 1.9rem; flex: none; }
.wa__icono--mas { width: 1.4rem; }

.wa__cuerpo {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  padding: 1rem 1.1rem .6rem;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cg fill='none' stroke='%23c6bcae' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.42'%3E%3Ccircle cx='18' cy='16' r='6'/%3E%3Cpath d='M44 22c3-5 9-5 11 0 2-5 8-5 11 0 0 6-11 12-11 12S44 28 44 22z'/%3E%3Cpath d='M84 10v13M78 16h13'/%3E%3Cpath d='M12 46h16l-3 12H15z'/%3E%3Cpath d='M44 52l5-9 5 9 10 1-7 7 2 10-10-5-10 5 2-10-7-7z'/%3E%3Cpath d='M84 44c6 0 9 4 9 8s-4 8-9 8h-3l-5 4 1-5c-3-2-5-4-5-7 0-4 5-8 12-8z'/%3E%3Cpath d='M10 84c4-6 10-6 14 0M10 92c4-6 10-6 14 0'/%3E%3Ccircle cx='52' cy='88' r='7'/%3E%3Cpath d='M52 81v14M45 88h14'/%3E%3Cpath d='M80 82l8 5-8 5-8-5z'/%3E%3Cpath d='M88 87v7l-8 5-8-5v-7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 9.6rem;
}
.wa__dia, .wa__cifrado { align-self: center; flex: none; }
.wa__dia { margin-bottom: .7rem; padding: .35rem 1rem; border-radius: .6rem; background: #fff; box-shadow: 0 1px .2rem rgba(11, 20, 26, .13); font-size: max(1rem, 9px); font-weight: 600; letter-spacing: .03em; color: #54656f; }
.wa__cifrado { max-width: 88%; margin-bottom: 1rem; padding: .5rem 1rem; border-radius: .6rem; background: #ffeecd; font-size: max(.95rem, 8px); line-height: 1.3; text-align: center; color: #54656f; }

.wa__fila { display: flex; flex: none; margin-bottom: .5rem; }
.wa__fila--yo { justify-content: flex-end; }
.wa__globo {
  position: relative;
  max-width: 85%;
  padding: .55rem .85rem .6rem;
  border-radius: .75rem;
  background: #fff;
  color: #111b21;
  font-size: max(1.25rem, 11px);
  line-height: 1.34;
  box-shadow: 0 1px .15rem rgba(11, 20, 26, .13);
  overflow-wrap: break-word;
}
.wa__globo--yo { background: #d9fdd3; }
.wa__fila--ellos .wa__globo--rabo { border-top-left-radius: 0; }
.wa__fila--yo .wa__globo--rabo { border-top-right-radius: 0; }
.wa__globo--rabo::before { content: ''; position: absolute; top: 0; width: .85rem; height: 1.2rem; }
.wa__fila--ellos .wa__globo--rabo::before { left: -.82rem; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.wa__fila--yo .wa__globo--rabo::before { right: -.82rem; background: #d9fdd3; clip-path: polygon(0 0, 0 100%, 100% 0); }
.wa__hora { float: right; display: flex; align-items: center; gap: .3rem; margin: .5rem -.25rem -.1rem .9rem; font-size: max(1rem, 9px); font-style: normal; color: #667781; }
.wa__check { width: 1.5rem; height: 1rem; color: #53bdeb; }

/* los puntitos de «escribiendo» */
.wa__globo--puntos { display: flex; align-items: center; gap: .45rem; padding: .95rem 1rem; }
.wa__globo--puntos i { width: .75rem; height: .75rem; border-radius: 50%; background: #9aa4ae; }

/* el comprobante de PayPal que manda la clienta: se ve entero */
.wa__globo--captura { padding: .35rem .35rem .45rem; }
.paypal { width: 19.5rem; max-width: 100%; overflow: hidden; border-radius: .55rem; background: #fff; color: #2c2e2f; }
.paypal__marca { display: flex; gap: .1rem; padding: .55rem .8rem; border-bottom: 1px solid #e6e9ec; font-size: max(1.5rem, 13px); font-weight: 700; font-style: italic; }
.paypal__marca b { color: #253b80; }
.paypal__marca i { color: #179bd7; font-style: italic; }
.paypal__cuerpo { display: grid; justify-items: center; gap: .2rem; padding: .85rem .8rem .9rem; background: #f7f9fa; text-align: center; }
.paypal__reloj { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .25rem; border-radius: 50%; background: #e8f3fb; color: #179bd7; }
.paypal__reloj svg { width: 1.7rem; height: 1.7rem; }
.paypal__cuerpo strong { font-size: max(1.4rem, 12px); font-weight: 700; }
.paypal__cuerpo em { font-size: max(1.1rem, 9px); font-style: normal; color: #6c7378; }
.paypal__cuerpo u { margin-top: .3rem; font-size: max(1.15rem, 10px); font-weight: 600; text-decoration: none; color: #2c9c4a; }
.paypal__fecha { font-size: max(1rem, 8px); color: #8b9196; }

.wa__barra { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem 1rem; background: #f0f2f5; }
.wa__campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-radius: 2rem; background: #fff; font-size: max(1.2rem, 10px); color: #8696a0; }
.wa__campo svg { width: 1.9rem; height: 1.9rem; flex: none; color: #8696a0; }
.wa__clip { margin-left: auto; }
.wa__enviar { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%; background: #008069; color: #fff; }
.wa__enviar svg { width: 1.9rem; height: 1.9rem; }

/* ── Google Calendar ── */
.gcal { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; height: 100%; --canal: 5.4rem; font-family: var(--f-texto); color: #3c4043; background: #fff; }
.gcal__barra { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid #dadce0; }
.gcal__menu { width: 1.9rem; height: 1.9rem; flex: none; color: #5f6368; }
.gcal__logo { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border: 2px solid #4285f4; border-radius: .5rem; }
.gcal__logo i { font-size: max(1.1rem, 9px); font-style: normal; font-weight: 700; color: #4285f4; }
.gcal__barra b { font-size: max(1.5rem, 12px); font-weight: 500; letter-spacing: -.01em; }
.gcal__hoy { margin-left: auto; padding: .35rem .9rem; border: 1px solid #dadce0; border-radius: .5rem; font-size: max(1.1rem, 9px); }
.gcal__dias { display: flex; align-items: center; gap: 1.4rem; padding: .9rem 1.4rem; border-bottom: 1px solid #dadce0; }
.gcal__fecha { display: grid; justify-items: center; gap: .2rem; width: calc(var(--canal) - 1.4rem); }
.gcal__fecha s { font-size: max(1rem, 8px); letter-spacing: .06em; text-decoration: none; color: #1a73e8; }
.gcal__fecha u { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #1a73e8; font-size: max(1.6rem, 13px); font-weight: 500; text-decoration: none; color: #fff; }
.gcal__todo { font-size: max(1.05rem, 9px); color: #70757a; }
.gcal__grilla { position: relative; display: grid; grid-template-rows: repeat(6, 1fr); padding: 0 1.2rem 0 var(--canal); }
.gcal__hora { border-top: 1px solid #e8eaed; }
.gcal__hora:first-child { border-top: 0; }
.gcal__hora:first-child span { margin-top: .2rem; }
.gcal__hora span { position: absolute; left: 0; width: calc(var(--canal) - 1rem); margin-top: -.7rem; text-align: right; font-size: max(1rem, 8px); color: #70757a; }
.gcal__evento {
  position: absolute;
  left: calc(var(--canal) + .4rem); right: 1.6rem;
  top: calc(var(--desde) * 100% / 6); height: calc(var(--alto) * 100% / 6 - .3rem);
  display: grid; align-content: start; gap: .1rem;
  overflow: hidden; padding: .4rem .7rem; border-radius: .5rem;
  background: #1a73e8; color: #fff;
}
.gcal__evento b { font-size: max(1.15rem, 10px); font-weight: 600; white-space: nowrap; }
.gcal__evento em { font-size: max(1.05rem, 9px); font-style: normal; opacity: .9; }
.gcal__evento--dos { background: #7986cb; display: flex; align-items: center; gap: .5rem; }
.gcal__evento--dos em::before { content: '·'; margin-right: .5rem; }
.gcal__evento--tres { background: #f6bf26; color: #3c4043; }
.gcal__evento--nuevo { background: var(--acento-palido); color: var(--negro); }
.gcal__ahora { position: absolute; left: calc(var(--canal) - .5rem); right: 1.2rem; top: calc(.67 * 100% / 6); height: 2px; background: #ea4335; }
.gcal__ahora::before { content: ''; position: absolute; left: 0; top: -.45rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #ea4335; }

.gcal__dialogo {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 3;
  padding: 1.4rem;
  border-radius: .8rem; background: #fff;
  box-shadow: 0 .1rem .3rem rgba(60, 64, 67, .3), 0 .4rem 1.6rem rgba(60, 64, 67, .18);
  font-size: max(1.15rem, 10px);
}
.gcal__campo { display: block; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 2px solid #1a73e8; font-size: max(1.5rem, 12px); }
.gcal__campo i { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; font-style: normal; }
.gcal__pestanas { display: flex; gap: 1.6rem; margin-bottom: .9rem; }
.gcal__pestanas s { padding-bottom: .3rem; border-bottom: 2px solid #1a73e8; text-decoration: none; color: #1a73e8; }
.gcal__pestanas u { text-decoration: none; color: #70757a; }
.gcal__fila { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; overflow: hidden; line-height: 1.35; }
.gcal__fila--hora { align-items: center; }
.gcal__fila svg { width: 1.7rem; height: 1.7rem; flex: none; margin-top: .1rem; color: #5f6368; }
.gcal__fila b { margin-left: .6rem; white-space: nowrap; padding: .05rem .5rem; border-radius: .4rem; background: #e8f0fe; font-weight: 500; color: #1a73e8; }
.gcal__botones { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; }
.gcal__botones s { text-decoration: none; color: #1a73e8; }
.gcal__guardar { padding: .55rem 1.6rem; border-radius: .4rem; background: #1a73e8; font-weight: 500; color: #fff; }
.raton { position: absolute; left: 72%; top: 88%; z-index: 4; width: 1.5rem; }
.raton svg { width: 100%; height: auto; }

/* ── Panel ── */
.panel { width: 80.8rem; aspect-ratio: 808 / 701; display: grid; grid-template-rows: auto 1fr; }
.panel .anim__etiqueta { top: 2rem; right: 2.2rem; left: auto; }
.panel__barra { display: flex; align-items: center; gap: .8rem; padding: 1.8rem 2.2rem; border-bottom: 1px solid #242424; }
.panel__barra i { width: .9rem; height: .9rem; border-radius: 50%; background: #2f2f2f; }
.panel__barra span { margin-left: 1.2rem; }
.panel__cuerpo { display: grid; grid-template-rows: auto 1fr auto; gap: 2.4rem; padding: 2.8rem 2.2rem 2.2rem; }
.panel__fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.panel__ficha { display: grid; gap: .8rem; padding: 1.8rem; border: 1px solid #242424; border-radius: 1.6rem; }
.panel__ficha strong { font-size: max(3.2rem, 24px); font-weight: 600; letter-spacing: -.03em; color: var(--blanco); font-variant-numeric: tabular-nums; }
.panel__ficha--roi strong { color: var(--acento); }
.panel__grafico { position: relative; display: flex; align-items: flex-end; gap: 1.2rem; height: 100%; }
.panel__grafico > span:not([class]) {
  flex: 1;
  height: var(--h);
  border-radius: .6rem .6rem .2rem .2rem;
  background: linear-gradient(color-mix(in srgb, var(--acento) 82%, #0d0d0d), color-mix(in srgb, var(--acento) 14%, #0d0d0d));
  transform-origin: bottom;
}
.panel__linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.panel__linea polyline { fill: none; stroke: #35f39a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .6rem rgba(53, 243, 154, .5)); }
.panel__brillo {
  position: absolute; right: 6.25%; bottom: 78%; width: 1rem; height: 1rem; margin: 0 -.5rem -.5rem 0;
  border-radius: 50%; background: #35f39a; box-shadow: 0 0 1.4rem .25rem rgba(53, 243, 154, .55);
}
.panel__pie { display: flex; justify-content: space-between; padding-top: 1.4rem; border-top: 1px solid #242424; }

@media (prefers-reduced-motion: no-preference) {
  .con-movimiento .wa__fila { max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; }
  .anim--responde.visto .wa__fila { animation: 35.1s var(--curva) infinite both; }
  .anim--responde.visto .r-e-1 { animation-name: r-e-1; }
  .anim--responde.visto .r-m-1 { animation-name: r-m-1; }
  .anim--responde.visto .r-e-2 { animation-name: r-e-2; }
  .anim--responde.visto .r-m-2 { animation-name: r-m-2; }
  .anim--responde.visto .r-e-3 { animation-name: r-e-3; }
  .anim--responde.visto .r-m-3 { animation-name: r-m-3; }
  .anim--responde.visto .r-e-4 { animation-name: r-e-4; }
  .anim--responde.visto .r-m-4 { animation-name: r-m-4; }
  .anim--responde.visto .r-e-5 { animation-name: r-e-5; }
  .anim--responde.visto .r-m-5 { animation-name: r-m-5; }
  .anim--responde.visto .r-e-6 { animation-name: r-e-6; }
  .anim--responde.visto .r-m-6 { animation-name: r-m-6; }
  .anim--responde.visto .r-e-7 { animation-name: r-e-7; }
  .anim--responde.visto .r-m-7 { animation-name: r-m-7; }
  .anim--responde.visto .r-estado u { animation: r-escribe 35.1s step-end infinite both; }
  .anim--responde.visto .r-estado s { animation: r-enlinea 35.1s step-end infinite both; }
  .anim--vende.visto .wa__fila { animation: 38.0s var(--curva) infinite both; }
  .anim--vende.visto .v-e-1 { animation-name: v-e-1; }
  .anim--vende.visto .v-m-1 { animation-name: v-m-1; }
  .anim--vende.visto .v-e-2 { animation-name: v-e-2; }
  .anim--vende.visto .v-m-2 { animation-name: v-m-2; }
  .anim--vende.visto .v-e-3 { animation-name: v-e-3; }
  .anim--vende.visto .v-m-3 { animation-name: v-m-3; }
  .anim--vende.visto .v-e-4 { animation-name: v-e-4; }
  .anim--vende.visto .v-m-4 { animation-name: v-m-4; }
  .anim--vende.visto .v-e-5 { animation-name: v-e-5; }
  .anim--vende.visto .v-m-5 { animation-name: v-m-5; }
  .anim--vende.visto .v-e-6 { animation-name: v-e-6; }
  .anim--vende.visto .v-m-6 { animation-name: v-m-6; }
  .anim--vende.visto .v-e-7 { animation-name: v-e-7; }
  .anim--vende.visto .v-m-7 { animation-name: v-m-7; }
  .anim--vende.visto .v-e-8 { animation-name: v-e-8; }
  .anim--vende.visto .v-m-8 { animation-name: v-m-8; }
  .anim--vende.visto .v-estado u { animation: v-escribe 38.0s step-end infinite both; }
  .anim--vende.visto .v-estado s { animation: v-enlinea 38.0s step-end infinite both; }
  .con-movimiento .wa__globo--puntos i { animation: wa-punto 1.3s ease-in-out infinite both; }
  .con-movimiento .wa__globo--puntos i:nth-child(2) { animation-delay: .18s; }
  .con-movimiento .wa__globo--puntos i:nth-child(3) { animation-delay: .36s; }

  .con-movimiento .gcal__evento--nuevo, .con-movimiento .gcal__dialogo, .con-movimiento .raton { opacity: 0; }
  .anim--agenda.visto .gcal__evento--nuevo { animation: cita 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__dialogo { animation: dialogo 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__campo i { animation: escribe 18s steps(26) infinite both; }
  .anim--agenda.visto .gcal__fila--hora { animation: aparece-dato 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__nota--1 { animation: aparece-dato-2 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__nota--2 { animation: aparece-dato-3 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__nota--3 { animation: aparece-dato-4 18s var(--curva) infinite both; }
  .anim--agenda.visto .gcal__guardar { animation: guardar 18s var(--curva) infinite both; }
  .anim--agenda.visto .raton { animation: raton 18s var(--curva) infinite both; }

  /* El panel entero tarda 10 s: las barras, la línea y las cifras terminan juntas. */
  .con-movimiento .panel__linea { clip-path: inset(0 100% 0 0); }
  .con-movimiento .panel__brillo { opacity: 0; }
  .panel.visto .panel__linea { animation: dibujar 9.6s linear .4s both; }
  .panel.visto .panel__brillo { animation: brota .6s ease 9.8s both, latido 2.6s ease-in-out 10.4s infinite; }
  .panel.visto .panel__grafico > span:not([class]) { animation: barra 1.6s var(--curva) both; animation-delay: calc(var(--i, 0) * 1.2s); }
}
@keyframes wa-punto {
  0%, 60%, 100% { opacity: .4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-.28rem); }
}
@keyframes r-e-1 {
  0%, 1.71% { max-height: 0; opacity: 0; margin-bottom: 0; }
  2.71%, 7.41% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  8.41%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-1 {
  0%, 7.41% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  8.41%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-2 {
  0%, 13.35% { max-height: 0; opacity: 0; margin-bottom: 0; }
  14.35%, 19.05% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  20.05%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-2 {
  0%, 19.05% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  20.05%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-3 {
  0%, 25.89% { max-height: 0; opacity: 0; margin-bottom: 0; }
  26.89%, 31.59% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  32.59%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-3 {
  0%, 31.59% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  32.59%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-4 {
  0%, 38.58% { max-height: 0; opacity: 0; margin-bottom: 0; }
  39.58%, 44.28% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  45.28%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-4 {
  0%, 44.28% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  45.28%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-5 {
  0%, 48.2% { max-height: 0; opacity: 0; margin-bottom: 0; }
  49.2%, 53.89% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  54.89%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-5 {
  0%, 53.89% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  54.89%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-6 {
  0%, 61.56% { max-height: 0; opacity: 0; margin-bottom: 0; }
  62.56%, 67.26% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  68.26%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-6 {
  0%, 67.26% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  68.26%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-e-7 {
  0%, 72.0% { max-height: 0; opacity: 0; margin-bottom: 0; }
  73.0%, 77.7% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  78.7%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes r-m-7 {
  0%, 77.7% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  78.7%, 97.44% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.44%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes r-escribe {
  0% { opacity: 0; }
  1.71% { opacity: 0; }
  2.11% { opacity: 1; }
  7.41% { opacity: 1; }
  7.81% { opacity: 0; }
  38.58% { opacity: 0; }
  38.98% { opacity: 1; }
  44.28% { opacity: 1; }
  44.68% { opacity: 0; }
  61.56% { opacity: 0; }
  61.96% { opacity: 1; }
  67.26% { opacity: 1; }
  67.66% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes r-enlinea {
  0% { opacity: 1; }
  1.71% { opacity: 1; }
  2.11% { opacity: 0; }
  7.41% { opacity: 0; }
  7.81% { opacity: 1; }
  38.58% { opacity: 1; }
  38.98% { opacity: 0; }
  44.28% { opacity: 0; }
  44.68% { opacity: 1; }
  61.56% { opacity: 1; }
  61.96% { opacity: 0; }
  67.26% { opacity: 0; }
  67.66% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes v-e-1 {
  0%, 1.58% { max-height: 0; opacity: 0; margin-bottom: 0; }
  2.5%, 6.84% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  7.76%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-1 {
  0%, 6.84% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  7.76%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-2 {
  0%, 11.99% { max-height: 0; opacity: 0; margin-bottom: 0; }
  12.91%, 17.25% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  18.17%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-2 {
  0%, 17.25% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  18.17%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-3 {
  0%, 21.98% { max-height: 0; opacity: 0; margin-bottom: 0; }
  22.9%, 27.24% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  28.16%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-3 {
  0%, 27.24% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  28.16%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-4 {
  0%, 31.76% { max-height: 0; opacity: 0; margin-bottom: 0; }
  32.68%, 37.02% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  37.94%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-4 {
  0%, 37.02% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  37.94%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-5 {
  0%, 41.89% { max-height: 0; opacity: 0; margin-bottom: 0; }
  42.81%, 47.15% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  48.07%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-5 {
  0%, 47.15% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  48.07%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-6 {
  0%, 53.06% { max-height: 0; opacity: 0; margin-bottom: 0; }
  53.98%, 58.32% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  59.24%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-6 {
  0%, 58.32% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  59.24%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-7 {
  0%, 64.63% { max-height: 0; opacity: 0; margin-bottom: 0; }
  65.55%, 69.9% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  70.82%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-7 {
  0%, 69.9% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  70.82%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-e-8 {
  0%, 74.28% { max-height: 0; opacity: 0; margin-bottom: 0; }
  75.2%, 79.54% { max-height: 6rem; opacity: 1; margin-bottom: .5rem; }
  80.46%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; }
}
@keyframes v-m-8 {
  0%, 79.54% { max-height: 0; opacity: 0; margin-bottom: 0; transform: translateY(.5rem); }
  80.46%, 97.63% { max-height: 46rem; opacity: 1; margin-bottom: .5rem; transform: none; }
  99.63%, 100% { max-height: 0; opacity: 0; margin-bottom: 0; transform: none; }
}
@keyframes v-escribe {
  0% { opacity: 0; }
  1.58% { opacity: 0; }
  1.98% { opacity: 1; }
  6.84% { opacity: 1; }
  7.24% { opacity: 0; }
  31.76% { opacity: 0; }
  32.16% { opacity: 1; }
  37.02% { opacity: 1; }
  37.42% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes v-enlinea {
  0% { opacity: 1; }
  1.58% { opacity: 1; }
  1.98% { opacity: 0; }
  6.84% { opacity: 0; }
  7.24% { opacity: 1; }
  31.76% { opacity: 1; }
  32.16% { opacity: 0; }
  37.02% { opacity: 0; }
  37.42% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cita {
  0%, 68% { opacity: 0; transform: translateY(.8rem) scaleY(.75); }
  73%, 95% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}
@keyframes dialogo {
  0%, 8% { opacity: 0; transform: translateY(1.2rem) scale(.97); }
  12%, 65% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-.5rem) scale(.98); }
}
@keyframes escribe { 0%, 13% { width: 0; } 25%, 100% { width: 100%; } }
@keyframes aparece-dato {
  0%, 27% { opacity: 0; max-height: 0; margin-bottom: 0; }
  31%, 65% { opacity: 1; max-height: 6rem; margin-bottom: .8rem; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}
@keyframes aparece-dato-2 {
  0%, 33% { opacity: 0; max-height: 0; margin-bottom: 0; }
  37%, 65% { opacity: 1; max-height: 6rem; margin-bottom: .8rem; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}
@keyframes aparece-dato-3 {
  0%, 39% { opacity: 0; max-height: 0; margin-bottom: 0; }
  43%, 65% { opacity: 1; max-height: 6rem; margin-bottom: .8rem; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}
@keyframes aparece-dato-4 {
  0%, 45% { opacity: 0; max-height: 0; margin-bottom: 0; }
  49%, 65% { opacity: 1; max-height: 6rem; margin-bottom: .8rem; }
  70%, 100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}
@keyframes guardar {
  0%, 56% { opacity: 0; transform: none; }
  59%, 61% { opacity: 1; transform: none; }
  63% { opacity: 1; transform: scale(.93); }
  65%, 68% { opacity: 1; transform: none; }
  72%, 100% { opacity: 0; }
}
@keyframes raton {
  0% { opacity: 0; left: 86%; top: 98%; transform: none; }
  3% { opacity: 1; left: 78%; top: 86%; transform: none; }
  7% { opacity: 1; left: 55%; top: 54%; transform: none; }
  9% { opacity: 1; left: 55%; top: 54%; transform: scale(.75); }
  11%, 16% { opacity: 1; left: 53%; top: 56%; transform: none; }
  24% { opacity: 1; left: 34%; top: 60%; transform: none; }
  38% { opacity: 1; left: 30%; top: 71%; transform: none; }
  50% { opacity: 1; left: 32%; top: 80%; transform: none; }
  58% { opacity: 1; left: 80%; top: 92%; transform: none; }
  62% { opacity: 1; left: 80%; top: 92%; transform: scale(.75); }
  65%, 72% { opacity: 1; left: 80%; top: 92%; transform: none; }
  80%, 100% { opacity: 0; left: 84%; top: 96%; transform: none; }
}
@keyframes dibujar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -6% 0 0); } }
@keyframes brota { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes latido { 0%, 100% { box-shadow: 0 0 1.4rem .25rem rgba(53, 243, 154, .55); } 50% { box-shadow: 0 0 2.2rem .4rem rgba(53, 243, 154, .8); } }
@keyframes barra { from { transform: scaleY(.05); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────── Trabajos (carrusel) ───────── */

.casos { padding: 9.6rem 0; }
.casos > .titulo-cita, .casos__bajada { margin-inline: var(--margen); }
.casos__bajada { max-width: 51.3rem; margin-top: 4rem; margin-bottom: 0; color: var(--gris-texto); font-size: var(--t-20); line-height: 1.2; }
.carrusel { margin-top: 6.4rem; }
.carrusel__pista {
  position: relative;
  display: flex;
  gap: 2.4rem;
  margin: 0;
  padding: 0 var(--margen);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
/* Cada trabajo es una ficha angosta: el nombre arriba y el video vertical debajo. Entran cuatro a la vez en
   computadora, tres en tableta y dos en celular, así que se ve la cartera completa y no un clip gigante. */
.caso {
  flex: 0 0 calc((100% - 7.2rem) / 4);
  display: grid;
  gap: 1.6rem;
  align-content: start;
  padding: 2.4rem;
  border-radius: 3.2rem;
  background: var(--lienzo);
  scroll-snap-align: start;
}
.caso__titulo { margin: 0; font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; text-align: center; }
.caso__marco {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 2rem;
  /* El póster va de fondo del marco —puesto en el style del propio elemento— así nunca se ve un
     rectángulo negro mientras el video carga. */
  background-color: var(--niebla);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.caso__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ───────── Plataformas ───────── */

.plataformas { padding: 0 var(--margen) 9.6rem; }
.plataformas__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 6.4rem 0 0;
  padding: 0;
  list-style: none;
}
.plataforma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  height: 13.8rem;
  border-radius: 3.2rem;
  background: var(--negro);
  color: var(--blanco);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
}
.plataforma svg { width: 1.25em; height: 1.25em; flex: none; }

/* ───────── Servicios (tarjetas con flechas) ───────── */

.servicios { padding: 9.6rem 0; overflow-x: clip; background: var(--lienzo); }
.servicios > .titulo-grande, .servicios > .texto-grande { margin-inline: var(--margen); }
.tarjetas { margin-top: 6.4rem; }
.tarjetas__pista {
  position: relative;
  display: flex;
  gap: 2.4rem;
  margin: 0;
  padding: 0 var(--margen);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
  perspective: 200rem;
}
.tarjetas__pista::-webkit-scrollbar { display: none; }
.tarjeta {
  flex: 0 0 40.6rem;
  display: flex;
  flex-direction: column;
  height: 47rem;
  overflow: hidden;
  border-radius: 2.4rem;
  background: var(--blanco);
  scroll-snap-align: start;
}
.tarjeta__imagen { flex: none; height: 21.2rem; }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 2.4rem; }
.tarjeta__titulo { margin: 0; font-size: var(--t-16); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.tarjeta__texto { margin: .8rem 0 0; color: var(--gris-texto); font-size: var(--t-14); line-height: 1.3; }
.tarjeta .boton { align-self: flex-start; margin-top: auto; }
.tarjetas__flechas { display: flex; justify-content: center; gap: .8rem; margin-top: 4rem; }

/* ───────── Contacto: dos mitades ───────── */

.entradas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--lienzo);
  background: var(--blanco);
}
.entrada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 42rem;
  padding: 6.4rem;
  overflow: hidden;
  color: var(--negro);
  text-decoration: none;
}
.entrada + .entrada { border-left: 1px solid var(--lienzo); }
.entrada__titulo { max-width: 42rem; font-size: 6.4rem; }
.entrada__texto { max-width: 36rem; font-size: var(--t-16); line-height: 1.25; }
.entrada__flecha {
  position: absolute;
  top: 6.4rem;
  right: 6.4rem;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid var(--negro);
  border-radius: .8rem;
  transition: background-color .3s ease, color .3s ease;
}
.entrada__flecha svg { width: 2rem; height: 2rem; }
.entrada__destello {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 44.5rem;
  height: 44.5rem;
  margin: -22.25rem 0 0 -22.25rem;
  background: var(--acento);
  opacity: 0;
  transform: perspective(120rem) rotate3d(1, 1, 0, 90deg);
  transition: transform .7s var(--curva), opacity .35s ease;
}
@media (hover: hover) {
  .entrada:hover .entrada__destello { opacity: 1; transform: none; }
  .entrada:hover .entrada__flecha { background: var(--acento); border-color: var(--acento); color: var(--negro); }
}
.entrada:focus-visible .entrada__destello { opacity: 1; transform: none; }
.entrada:focus-visible { outline-offset: -6px; }

/* ───────── Pie ───────── */

.pie {
  display: grid;
  grid-template-columns: 46.1rem minmax(0, 1fr);
  row-gap: 12rem;
  padding: 8rem var(--margen-cabecera);
  background: var(--negro);
  color: var(--blanco);
}
.pie__logo { display: inline-block; color: var(--blanco); }
.pie__wordmark { width: auto; height: 5.4rem; }
.pie__monograma { display: none; }
.pie__frase { margin: 0; font-size: var(--t-16); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.pie__logo + .pie__frase { margin-top: 3.2rem; }
.pie__correo { color: var(--acento); text-decoration: none; }
.pie__correo:hover { color: var(--acento-vivo); text-decoration: underline; }
.pie__etiqueta, .pie__arriba, .pie__derechos, .pie__lugar {
  margin: 0;
  color: var(--humo);
  font-family: var(--f-mono);
  font-size: var(--t-12);
  line-height: 1.6;
  letter-spacing: -.03em;
}
.pie__etiqueta { margin-top: 3.2rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; }
.pie__pastilla {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .8rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--humo);
  border-radius: 99rem;
  font-size: var(--t-16);
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: border-color .25s ease;
}
.pie__pastilla svg { width: 2rem; height: 2rem; }
.pie__pastilla:hover { border-color: var(--acento); color: var(--acento); }
.pie__columnas { display: grid; grid-template-columns: repeat(4, 21.5rem); align-content: start; }
.pie__columna { display: flex; flex-direction: column; align-items: flex-start; }
.pie__titulo, .pie__columna a { font-size: var(--t-14); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.pie__titulo { margin: 0; }
.pie__columna a { display: inline-flex; align-items: center; min-height: 24px; color: var(--humo); text-decoration: none; transition: color .2s ease; }
.pie__columna a:hover { color: var(--acento); }
.pie__base {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 46.1rem 43rem 21.5rem minmax(0, 1fr);
  align-items: end;
}
.pie__arriba { display: inline-flex; align-items: center; gap: .8rem; justify-self: start; text-decoration: none; }
.pie__arriba-icono {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem;
  border-radius: 1.2rem; background: var(--blanco); color: var(--negro);
}
.pie__arriba-icono svg { width: 1.6rem; height: 1.6rem; }
.pie__arriba:hover { color: var(--acento); }
.pie__derechos { grid-column: 1; margin-top: 2.4rem; }
.pie__base .pie__arriba { grid-column: 1; grid-row: 1; }
.pie__lugar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pie__redes { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pie__redes a { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; color: var(--humo); transition: color .2s ease; }
.pie__redes a:hover { color: var(--acento); }
.pie__redes svg { width: 2rem; height: 2rem; }

/* ───────── Revelaciones al bajar (solo si portada.js corre y hay movimiento) ───────── */

.linea-envoltura { display: block; overflow: hidden; padding: .16em 0 .1em; margin: -.16em 0 -.1em; }
.linea { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .con-movimiento [data-revelar="lineas"]:not(.visto) { opacity: 0; }
  .con-movimiento [data-revelar="lineas"] .linea { transform: translateY(135%); transition: transform 1.1s var(--curva) calc(var(--i, 0) * 90ms + var(--retraso, 0s)); }
  .con-movimiento [data-revelar="lineas"].visto .linea { transform: none; }
  /* con animation y no con transition: así no se pisa el transition propio de los botones (su hover) */
  .con-movimiento [data-revelar="subir"]:not(.visto) { opacity: 0; }
  .con-movimiento [data-revelar="subir"].visto { animation: subir 1.1s var(--curva) calc(var(--retraso, 0s) + .15s) both; }
  .con-movimiento .tarjeta {
    opacity: 0;
    transform: translateX(21.6rem) rotateY(-15deg);
    transition: opacity .8s ease calc(var(--i, 0) * 90ms), transform 1.3s var(--curva) calc(var(--i, 0) * 90ms);
  }
  .con-movimiento .tarjetas.visto .tarjeta { opacity: 1; transform: none; }
}

/* ───────── Celular y tableta vertical (dayos cambia a 767; acá a 899, para que el titular no choque con el video) ───────── */

@media (max-width: 899px) {
  html { font-size: clamp(9.6px, calc(100vw / 37.5), 12.8px); }
  :root { --margen: 2.4rem; --margen-cabecera: 2.4rem; --alto-cabecera: 8.6rem; --radio-bloque: 3.2rem; }

  .titulo-grande { font-size: 4.4rem; }
  .titulo-cita { font-size: 2.8rem; }
  .texto-grande { margin-top: 3.2rem; font-size: 2.2rem; line-height: 1.2; }

  .cabecera { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cabecera__abrir {
    display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin-left: -1rem;
    padding: 0; border: 0; background: none; color: var(--negro); cursor: pointer; transition: color .35s ease;
  }
  .cabecera__abrir svg { width: 2.4rem; height: 2.4rem; }
  .cabecera[data-fondo="negro"] .cabecera__abrir { color: var(--blanco); }
  .cabecera__marca { margin-left: .6rem; }
  .cabecera__marca svg { height: 2rem; }
  .cabecera__nav { display: none; }
  .boton--cabecera { height: 4.2rem; font-size: var(--t-16); }
  .boton--cabecera .boton__texto { padding-inline: 2rem; }

  .portada { padding: 11.9rem var(--margen) 0; }
  .titular { font-size: min(5rem, calc((100vw - 4.8rem) / 6.5)); line-height: .85; }
  .portada__bajada { max-width: 30rem; margin-top: 3.2rem; font-size: 1.8rem; line-height: 1.3333; }
  .portada__medios { position: relative; inset: auto; height: auto; margin: .8rem 0 0; }
  .portada__puntos { position: static; width: auto; margin-top: 1.2rem; }
  .portada__videos {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: min(100%, 27rem); margin-inline: auto; aspect-ratio: 9 / 16;
    --horizontal: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .05) 2.5%, rgba(0, 0, 0, .16) 5%, rgba(0, 0, 0, .36) 7.5%, rgba(0, 0, 0, .6) 10%, rgba(0, 0, 0, .82) 12.5%, rgba(0, 0, 0, .95) 15%, #000 17.5% 82.5%, rgba(0, 0, 0, .95) 85%, rgba(0, 0, 0, .82) 87.5%, rgba(0, 0, 0, .6) 90%, rgba(0, 0, 0, .36) 92.5%, rgba(0, 0, 0, .16) 95%, rgba(0, 0, 0, .05) 97.5%, transparent 100%);
    --vertical: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .05) 4%, rgba(0, 0, 0, .16) 8%, rgba(0, 0, 0, .36) 12%, rgba(0, 0, 0, .6) 16%, rgba(0, 0, 0, .82) 20%, rgba(0, 0, 0, .95) 24%, #000 28% 64%, rgba(0, 0, 0, .95) 68%, rgba(0, 0, 0, .82) 72%, rgba(0, 0, 0, .6) 76%, rgba(0, 0, 0, .36) 80%, rgba(0, 0, 0, .16) 84%, rgba(0, 0, 0, .05) 88%, transparent 92%);
  }

  .columnas { padding: 6.4rem var(--margen) 3.2rem; }
  .columnas__lista { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 4rem; }
  .columna, .columna__enlace { display: block; grid-row: auto; }
  .columna__accion {
  justify-self: start;
  align-self: start;
  display: inline-flex; align-items: center; gap: .8rem;
  margin-top: 2.4rem; padding: .9rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 2.4rem;
  font-size: var(--t-14); line-height: 1; color: var(--blanco);
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.columna__accion svg { width: 1.4rem; height: 1.4rem; transition: transform .3s var(--curva); }
@media (hover: hover) {
  .columna__enlace:hover .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
  .columna__enlace:hover .columna__accion svg { transform: translateX(.3rem); }
}
.columna__enlace.es-activa .columna__accion { border-color: var(--acento); background: var(--acento); color: var(--negro); }
.columna__flecha { width: 2.8rem; height: 2.8rem; right: 0; }
  .columna__flecha svg { width: 2rem; height: 2rem; }
  .columna__titulo { font-size: 3.8rem; }
  .columna__texto { max-width: 30rem; margin-top: 1.6rem; font-size: var(--t-14); line-height: 1.3; }

  .manifiesto { padding: 6.4rem var(--margen); }
  .manifiesto__lineas { margin-top: 3.2rem; font-size: 1.8rem; line-height: 1.3333; }

  .presentacion { display: flex; flex-direction: column; min-height: 0; padding: 3.2rem var(--margen) 6.4rem; }
  .presentacion__texto { order: 2; }
  .presentacion__cuerpo { margin-top: 3.2rem; font-size: 1.8rem; line-height: 1.3333; }
  .presentacion .boton { margin-top: 3.2rem; }
  .panel { order: 1; width: calc(100% + var(--margen)); margin-bottom: 4.8rem; }
  .panel__fichas { grid-template-columns: 1fr 1fr; }
  .panel__ficha--roi { grid-column: 1 / -1; }

  .capacidades { padding: 0 var(--margen) 6.4rem; }
  .capacidades__bajada { margin-top: 3.2rem; font-size: 1.8rem; line-height: 1.3333; }
  .capacidades > .boton { margin-top: 3.2rem; }
  .capacidades__lista { grid-template-columns: 1fr; row-gap: 4.8rem; margin-top: 4.8rem; }
  .anim { width: 28.1rem; }
  /* En el ancho de un celular los dos renglones del evento no entran y la hora salía cortada: van en una
     sola línea, como hace Google Calendar con los eventos cortos. */
  .gcal__evento { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem; }
  .gcal__evento b, .gcal__evento em { font-size: max(1rem, 8px); }
  .gcal__evento em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .gcal__evento em::before { content: '·'; margin-right: .5rem; }
  .capacidad__titulo { margin-top: 2.4rem; font-size: 2.8rem; line-height: 1; }
  .capacidad__texto { max-width: 28.1rem; margin-top: 1.6rem; font-size: var(--t-14); line-height: 1.3; }

  .casos { padding: 6.4rem 0; }
  .casos__bajada { margin-top: 3.2rem; font-size: 1.8rem; line-height: 1.3333; }
  .carrusel { margin-top: 4rem; }
  .carrusel__pista { gap: 1.2rem; }
  .caso { flex: 0 0 calc((100% - 2.4rem) / 2); gap: 1.2rem; padding: 1.6rem; border-radius: 2.4rem; }
  .caso__titulo { font-size: 1.8rem; }

  .plataformas { padding: 0 var(--margen) 6.4rem; }
  .plataformas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 4rem; }
  .plataforma { height: 9rem; border-radius: 2.4rem; font-size: 2rem; }

  .servicios { padding: 6.4rem 0 4rem; }
  .servicios > .texto-grande { font-size: 1.8rem; line-height: 1.3333; letter-spacing: 0; font-weight: 400; }
  .tarjetas { margin-top: 4rem; }
  .tarjetas__pista { flex-direction: column; gap: 0; overflow: visible; padding: 0 var(--margen); perspective: none; }
  .tarjeta {
    flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 8rem; column-gap: 1.6rem;
    height: auto; padding: 2.4rem 0; overflow: visible; border-radius: 0; background: none; border-top: 1px solid var(--ceniza);
  }
  .tarjeta__imagen { grid-column: 2; grid-row: 1; height: 8rem; border-radius: 1.2rem; padding: .6rem; font-size: 9px; }
  .tarjeta__cuerpo { grid-column: 1; grid-row: 1; padding: 0; }
  .tarjeta__texto { margin-top: .6rem; }
  .tarjeta .boton { margin-top: 1.6rem; }
  .tarjetas__flechas { display: none; }
  .con-movimiento .tarjeta { transform: translateY(3.2rem); }

  .entradas { grid-template-columns: 1fr 1fr; }
  .entrada { min-height: 32.9rem; padding: 2.4rem 1.6rem 2.4rem 2.4rem; }
  .entrada__titulo { font-size: 3.8rem; }
  .entrada__texto { margin-top: 2rem; font-size: var(--t-14); line-height: 1.3; }
  .entrada__flecha { position: static; order: 3; width: 3.2rem; height: 3.2rem; margin-top: 3.2rem; border-radius: .6rem; }
  .entrada__flecha svg { width: 1.6rem; height: 1.6rem; }
  .entrada__destello { width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; }

  .pie { grid-template-columns: 1fr; row-gap: 5.6rem; padding: 4rem var(--margen) 4.8rem; }
  .pie__marca { display: grid; }
  .pie__wordmark { display: none; }
  .pie__monograma { display: block; width: auto; height: 4.4rem; }
  .pie__columnas { grid-row: 2; grid-template-columns: 1fr 1fr; row-gap: 3.2rem; }
  .pie__base { grid-template-columns: 1fr auto; row-gap: 2.4rem; }
  .pie__base .pie__arriba { grid-column: 2; grid-row: 1; justify-self: end; }
  .pie__lugar { grid-column: 1; grid-row: 1; }
  .pie__redes { grid-column: 1; grid-row: 2; }
  .pie__derechos { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
}

/* Tableta vertical (700-899): el video queda en una caja vertical a la derecha, como en computadora, y las columnas,
   las capacidades y las plataformas vuelven a ir en fila para no dejar media pantalla vacía */
@media (min-width: 700px) and (max-width: 899px) {
  .portada__medios { height: auto; }
  .portada__videos { left: auto; width: min(100%, 30rem); }
  .columnas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 2.4rem; }
  .columna, .columna__enlace { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .columna__titulo { align-self: end; font-size: 3rem; }
  .columna__texto, .capacidad__texto { max-width: none; }
  .capacidades__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.4rem; }
  .caso { flex: 0 0 calc((100% - 4.8rem) / 3); }
  .anim { width: auto; }
  .capacidad__titulo { font-size: 2.4rem; }
  .plataformas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plataforma { font-size: 1.6rem; }
}

/* ───────── Movimiento reducido: todo quieto y a la vista ───────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .boton__texto--eco { display: none; }
  .boton:hover .boton__texto { transform: none; }
  .wa__fila--escribe, .gcal__dialogo, .raton { display: none; }
  .wa__cuerpo { justify-content: flex-start; }
}

/* Impresión: la impresora no pone fondos por defecto, así que lo negro pasa a papel y el texto blanco a negro */
@media print {
  .cabecera, .menu-movil, .portada__medios, .tarjetas__flechas, .saltar, .anim, .panel { display: none !important; }
  [data-revelar], .tarjeta, .titular__linea > span { opacity: 1 !important; transform: none !important; }
  .bloque { animation: none !important; transform: none !important; border-radius: 0; }
  .envoltura, .bloque--negro, .pie, .plataforma { background: none !important; color: #000 !important; }
  .relleno__palabra, .pie__logo, .pie__pastilla { color: #000 !important; }
  .plataforma, .boton--blanco, .pie__pastilla { border: 1px solid #000; }
  .pie__columna a, .pie__etiqueta, .pie__arriba, .pie__derechos, .pie__lugar, .reserva, .pie__redes a { color: var(--pizarra) !important; }
  .boton--grafito { background: none; color: #000; border: 1px solid #000; }
  .carrusel__pista, .tarjetas__pista { flex-wrap: wrap; overflow: visible; }
}