/* Inter, autohospedada y subconjuntada.
   Antes venía de fonts.googleapis.com: una hoja que bloqueaba el render y dos
   conexiones a un tercero. Es la variable (400–700 en un solo archivo, 34,5 KB)
   recortada a latín + acentos + la puntuación que usa la página. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* format('woff2') a secas: 'woff2-variations' es sintaxis antigua y algún
     navegador la descarta, dejando la página en la fuente del sistema */
  src: url('../fonts/inter-var.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════════════
   Marley Olivera · Asistente Virtual
   Dirección visual v2: grotesca grande a dos tonos, azules con degradados
   suaves, superficies redondeadas y planes en tarjetas. Mobile-first.
   Las decisiones están explicadas en DESIGN-NOTES.md
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --tinta: #101828;          /* texto principal */
  --gris-texto: #667085;     /* 4.92:1 sobre blanco */
  --gris-titulo: #8A94A6;    /* solo para texto grande (3.06:1) */
  --azul: #2563EB;           /* acción principal, 5.13:1 con blanco */
  --azul-hover: #1D4ED8;
  --azul-tenue: #EFF4FF;
  --azul-borde: #C7D7FE;
  --verde: #12A150;

  --papel: #FFFFFF;
  --papel-suave: #F7F8FA;
  --linea: #E4E7EC;          /* separadores: decorativos, sin requisito de contraste */
  --linea-fuerte: #D0D5DD;
  --borde-control: #8A94A6;  /* bordes que DEFINEN un control: 3.06:1 ✓ 1.4.11 */
  --gris-oscuro: #475467;    /* texto secundario sobre fondos azules claros: 6.7:1 */

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --h1: clamp(2.4rem, 1.25rem + 4.6vw, 4rem);
  --h2: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  --h3: clamp(1.15rem, 1.05rem + .5vw, 1.375rem);
  --medida: 36em;

  --seccion-y: clamp(3.5rem, 2rem + 7vw, 7rem);
  --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --ancho: 75rem;
  --cab-alto: 4rem;

  --radio-sm: 10px;
  --radio: 18px;
  --radio-lg: 26px;
  --pill: 999px;

  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 10px 28px -12px rgba(16, 24, 40, .18);
  --sombra-3: 0 28px 60px -24px rgba(16, 24, 40, .28);

  --rapido: 160ms cubic-bezier(.2, 0, .2, 1);
}

/* ── 2. Reset y base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.032em;
}
p, ul, ol, dl, figure, table { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--azul); color: #fff; }

/* ── 3. Utilidades ─────────────────────────────────────────────────────── */
.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: var(--pill);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: top var(--rapido);
}
.salto:focus { top: .75rem; }

.parrafo-guia {
  max-width: var(--medida);
  font-size: 1.0625rem;
  color: var(--gris-texto);
}
.entrada-seccion { margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }

/* ── 4. Botones ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--rapido), color var(--rapido),
              border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}

.btn--acento, .btn--azul {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8);
}
.btn--acento:hover, .btn--azul:hover { background: var(--azul-hover); }

.btn--suave, .btn--linea, .btn--linea-clara {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--borde-control);
  box-shadow: var(--sombra-1);
}
.btn--suave:hover, .btn--linea:hover, .btn--linea-clara:hover {
  border-color: var(--tinta);
  box-shadow: var(--sombra-2);
}

.btn--oscuro { background: var(--tinta); color: #fff; }
.btn--oscuro:hover { background: #000; }

.enlace-fuerte {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px solid var(--azul-borde);
  padding-bottom: 2px;
  transition: border-color var(--rapido);
}
.enlace-fuerte:hover { border-bottom-color: var(--azul); }

/* ── 5. Cabecera ───────────────────────────────────────────────────────── */
.cab {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  transition: background-color var(--rapido), box-shadow var(--rapido);
}
.cab.is-compacta, .cab.is-abierta {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--linea);
}

.cab__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--cab-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
/* Logotipo: Bricolage Grotesque 600 con los trazos ya convertidos, así que
   no se carga ninguna fuente extra. Hereda el color con currentColor. */
.marca__logo {
  display: block;
  height: 1.0625rem;
  width: auto;
}

.cab__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .4rem .25rem;
  background: none;
  border: 0;
  color: var(--tinta);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.cab__toggle-barras {
  position: relative;
  width: 18px;
  height: 11px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.cab__toggle-barras::after {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  border-top: 1.5px solid currentColor;
  transition: opacity var(--rapido);
}
/* Abierto = una barra menos, no una más */
.cab__toggle[aria-expanded="true"] .cab__toggle-barras::after { opacity: 0; }

.cab__nav { display: none; }
.cab.is-abierta .cab__nav {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  box-shadow: var(--sombra-2);
  padding: .5rem var(--gutter) 1.35rem;
}

.cab__lista { list-style: none; margin: 0; padding: 0; }
.cab__lista a {
  display: block;
  padding: .8rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: 1rem;
  text-decoration: none;
}
.cab__cta { margin-top: 1.1rem; width: 100%; }

/* ── 6. Hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: calc(var(--cab-alto) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem))
                 clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background:
    radial-gradient(1100px 520px at 12% -12%, #E3ECFF 0%, rgba(227, 236, 255, 0) 62%),
    radial-gradient(820px 460px at 92% -6%, #EDE9FE 0%, rgba(237, 233, 254, 0) 58%),
    linear-gradient(180deg, #F4F7FF 0%, #FFFFFF 78%);
}

.hero__firma {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.5rem;
  padding: .4rem .95rem .4rem .8rem;
  border: 1px solid var(--azul-borde);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .7);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--azul);
}

.hero__titulo {
  font-size: var(--h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.042em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__remate { color: var(--gris-titulo); }
.hero__titulo .linea {
  display: block;
  /* la máscara del reveal recortaba los descendentes (la g de «agenda»);
     el padding le da aire y el margen negativo devuelve el interlineado */
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.hero__titulo .linea > span { display: block; }

.hero__rotador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .45rem;
  margin-top: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gris-texto);
}
.hero__rotador-caja {
  position: relative;
  display: block;
  flex: 1 1 12rem;
  min-width: 11rem;
  height: 1.7em;
  overflow: hidden;
}
.hero__palabra {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  line-height: 1.7;
  font-weight: 600;
  color: var(--tinta);
  opacity: 0;
  transform: translateY(.75em);
  transition: opacity .32s cubic-bezier(.2, .6, .2, 1), transform .32s cubic-bezier(.2, .6, .2, 1);
}
.hero__palabra.is-activa { opacity: 1; transform: none; }
.hero__palabra.is-saliendo { opacity: 0; transform: translateY(-.75em); transition-duration: .2s; }

.hero__entrada {
  margin-top: 1.35rem;
  max-width: var(--medida);
  font-size: 1.0625rem;
  color: var(--gris-texto);
}

.hero__acciones {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Botón del video de presentación + su ventana.
   Vive dentro de la escena: en pantalla grande flota a la izquierda, a la
   altura de la laptop, con un anillo que late para pedir el clic. */
.ver-video {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 1.25rem 0 0;
  padding: .4rem 1.1rem .4rem .4rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 45px -22px rgba(16, 24, 40, .35);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: transform var(--rapido), box-shadow var(--rapido);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ver-video { background: rgba(255, 255, 255, .95); }
}
.ver-video__play {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  padding-left: 2px;
  border-radius: 50%;
  background: var(--verde);          /* 3.4:1 con el glifo blanco */
  color: #FFF;
  transition: transform var(--rapido);
}
.ver-video:hover { transform: translateY(-1px); box-shadow: 0 24px 50px -22px rgba(16, 24, 40, .45); }
.ver-video:hover .ver-video__play { transform: scale(1.06); }

/* El anillo que late. Solo transform y opacidad. */
.ver-video::after {
  content: "";
  position: absolute;
  left: .4rem;
  top: 50%;
  width: 2.5rem; height: 2.5rem;
  margin-top: -1.25rem;
  border: 2px solid var(--verde);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.motion .ver-video::after { animation: onda 2.6s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes onda {
  0%   { transform: scale(1); opacity: .55; }
  75%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Mientras el video sea el de muestra, el botón se anuncia como tal */
.ver-video--demo { color: var(--gris-oscuro); }

.dialogo {
  width: fit-content;   /* el diálogo se ciñe al video, sin franjas negras alrededor */
  max-width: 92vw;
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg);
  background: #000;
  box-shadow: var(--sombra-3);
  overflow: visible;
}
/* El contenedor no necesita anillo de foco: el foco va al video que hay dentro */
.dialogo:focus, .dialogo:focus-visible { outline: none; }
.dialogo::backdrop { background: rgba(16, 24, 40, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* El alto manda: así un video vertical nunca se sale de la pantalla */
.dialogo__caja video {
  display: block;
  height: min(78vh, 44rem);
  width: auto;
  max-width: 92vw;
  border-radius: var(--radio-lg);
}
.dialogo__cerrar {
  position: absolute;
  top: -.75rem; right: -.75rem;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--sombra-2);
}

/* 6.1 Escena: la figura de Marley con piezas flotando */
/* En el celular el botón va delante de la figura, no perdido entre las tarjetas */
.hero__escena {
  position: relative;
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
}
.ver-video { order: -1; align-self: center; margin: 0 0 1.5rem; }

.figura {
  position: relative;
  z-index: 1;
  width: min(17rem, 74%);
  margin: 0 auto;
}
/* Mancha de color que sostiene la figura, en vez de un recuadro */
.figura::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -14% 4% -14%;
  background: linear-gradient(160deg, #DCE7FF 0%, #E7E0FD 100%);
  border-radius: 46% 54% 42% 58% / 38% 36% 64% 62%;
}
.figura img {
  width: 100%;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-3);
}

/* Vidrio esmerilado: dejan ver la foto por debajo sin perder legibilidad.
   El blanco no baja de .62 para que el texto siga por encima de 4.5:1 incluso
   cuando lo que hay detrás es la parte oscura de la ropa. */
.flotante {
  position: absolute;
  z-index: 2;
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 45px -22px rgba(16, 24, 40, .35);
  font-size: .8125rem;
}
/* Si el navegador no sabe difuminar, se vuelve opaco: nunca ilegible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .flotante { background: rgba(255, 255, 255, .95); }
}
/* Globo de pensamiento: en el celular es un bloque normal, y va arriba del
   todo — al final del flujo quedaba tapado por las tarjetas ancladas al pie */
.flotante--idea {
  position: static;
  order: -2;
  margin: 0 0 1.35rem;
  padding: 1rem 1.15rem;
  border-radius: 22px 22px 22px 6px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris-oscuro);
}
.flotante--idea b { color: var(--tinta); font-weight: 600; }

.flotante .agenda__marca { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .8); }
.flotante .burbuja--entra { background: rgba(255, 255, 255, .68); }
.flotante .burbuja--sale { background: rgba(219, 231, 254, .78); }
.flotante--agenda, .flotante--chat {
  position: static;
  width: 100%;
  margin-top: 1rem;
}

.chat__quien { font-weight: 600; margin-bottom: .55rem; }
.chat__pie { margin-top: .5rem; font-size: .75rem; color: var(--gris-texto); }
.flotante .burbuja { font-size: .75rem; padding: .45rem .65rem; margin-bottom: .35rem; max-width: 100%; }
.flotante .burbuja--sale { background: var(--azul-tenue); color: var(--tinta); }

.hero__media {
  position: relative;
  width: min(18rem, 82%);
  margin: 0;
}
.media__disparador {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg);
  background: var(--azul-tenue);
  box-shadow: var(--sombra-3);
  cursor: pointer;
  overflow: hidden;
}
.media__disparador[disabled] { cursor: default; }
.media__disparador img { width: 100%; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.media__disparador:not([disabled]):hover img { transform: scale(1.04); }

.media__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  padding-left: 4px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .9);
  transition: transform .25s cubic-bezier(.2, .6, .2, 1);
}
.media__disparador:hover .media__play { transform: translate(-50%, -50%) scale(1.08); }
.media__disparador:active .media__play { transform: translate(-50%, -50%) scale(.96); }

.media__leyenda { margin-top: 1rem; font-size: .8125rem; color: var(--gris-texto); }

.hero__media[data-video="pendiente"] .media__play,
.hero__media[data-video="pendiente"] .media__leyenda { display: none; }
.hero__media video { display: block; width: 100%; border-radius: var(--radio-lg); background: #000; }

/* Tarjeta de agenda flotante */
/* En móvil la tarjeta va debajo del retrato, apenas montada sobre su esquina:
   superpuesta de verdad taparía la cara, que es lo que hay que ver. */
.agenda {
  position: relative;
  margin: -2.75rem 0 0 auto;
  width: min(17rem, 92%);
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sombra-3);
}
.agenda__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--linea);
}
.agenda__dia { font-size: .8125rem; color: var(--gris-texto); }
.agenda__dia b { display: block; font-size: .9375rem; font-weight: 600; color: var(--tinta); }
.agenda__marca {
  font-size: .6875rem;
  color: var(--gris-texto);
  border: 1px solid var(--linea);
  border-radius: var(--pill);
  padding: .1rem .5rem;
}

.agenda__lista { list-style: none; margin: 0; padding: 0; }
.agenda__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .8125rem;
}
.agenda__hora { grid-row: 1 / span 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.agenda__que { color: var(--tinta); }
.agenda__estado { font-size: .75rem; color: var(--gris-texto); }
.agenda__estado--ok { color: var(--azul); font-weight: 500; }
.agenda__pie { margin-top: .8rem; font-size: .8125rem; color: var(--gris-texto); }
.agenda__pie b { color: var(--tinta); }

/* 6.2 Cinta de datos */
.hero__cinta { margin-top: clamp(2.5rem, 1.5rem + 4vw, 3.5rem); }
.cinta {
  display: grid;
  gap: 1.15rem 2rem;
  margin: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.cinta__dato { display: flex; align-items: flex-start; gap: .75rem; }
.cinta__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radio-sm);
  background: var(--papel);
  border: 1px solid var(--azul-borde);
  color: var(--azul);
}
.cinta__dato > div { min-width: 0; }   /* deja que el texto se recorte en vez de desbordar */
.cinta__dato dt { font-size: .8125rem; color: var(--gris-texto); }
.cinta__dato dd {
  margin: .25rem 0 0;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  white-space: nowrap;      /* ningún dato se parte en dos líneas… */
  overflow: hidden;
  text-overflow: ellipsis;  /* …y si un día no cupiera, se recorta, no se sale */
}

/* ── 7. Secciones ──────────────────────────────────────────────────────── */
.seccion { padding-block: var(--seccion-y); scroll-margin-top: var(--cab-alto); }
.seccion--suave { background: var(--papel-suave); }
.seccion--azul { background: var(--azul-tenue); }

/* Herramientas y confidencialidad */
.confianza { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem .45rem .95rem;
  border: 1px solid var(--azul-borde);
  border-radius: var(--pill);
  background: var(--papel);
  font-size: .875rem;
  font-weight: 500;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.chip:hover { border-color: var(--azul); box-shadow: var(--sombra-1); }
.chip__icono { flex: none; width: 16px; height: 16px; object-fit: contain; }
/* Los logotipos que son palabra, no símbolo, necesitan más ancho y menos alto */
.chip__icono--ancho { width: 42px; height: 11px; }
.chips__nota { margin-top: 1.25rem; max-width: var(--medida); font-size: .9375rem; color: var(--gris-oscuro); }

.cuidado {
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  border-radius: var(--radio-lg);
  background: var(--papel);
  box-shadow: var(--sombra-1);
}
.cuidado__titulo { font-size: var(--h3); margin-bottom: 1rem; }
.cuidado__lista { list-style: none; margin: 0; padding: 0; }
.cuidado__lista li {
  position: relative;
  padding: .7rem 0 .7rem 1.9rem;
  border-bottom: 1px solid var(--linea);
  font-size: .9375rem;
  color: var(--gris-oscuro);
}
.cuidado__lista li:last-child { border-bottom: 0; }
/* El titular de cada punto va en su propia línea; la explicación, debajo */
.cuidado__lista b { display: block; margin-bottom: .15rem; color: var(--tinta); font-weight: 600; }
.cuidado__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2l6.5 2.6v5.2c0 4-2.8 7.4-6.5 8.2-3.7-.8-6.5-4.2-6.5-8.2V4.6z'/%3E%3Cpath d='M7.2 10.2l2 2 3.6-3.8'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* Nota al pie de un frente */
.frente__nota {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--gris-texto);
}

.titulo-seccion { font-size: var(--h2); margin-bottom: 1.25rem; }

/* Punto que late en el distintivo del hero: se nota que hay alguien ahí, ahora */
.pulso {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #12B76A;
}
.pulso::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #12B76A;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pulso::after { animation: latido 2.4s cubic-bezier(.2, .6, .2, 1) infinite; }
}
@keyframes latido {
  0% { transform: scale(.55); opacity: .7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* ── 8. Sobre mí y carrusel de trayectoria ─────────────────────────────── */
.sobre { max-width: 46rem; }
.sobre__parrafo {
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--gris-oscuro);
}

/* El carrusel vive dentro del ancho del contenido, no de borde a borde */
.marquesina {
  width: 100%;
  max-width: var(--ancho);
  margin: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) auto 0;
  padding-inline: var(--gutter);
}
/* Se desvanece en los extremos para que no parezca una lista cortada */
.marquesina__ventana {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquesina__pista { display: flex; width: max-content; }
.marquesina__grupo {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  margin: 0;
  padding: 0 clamp(1.25rem, .6rem + 2.5vw, 2.5rem);
  list-style: none;
}
/* Cada logotipo tiene su propia proporción: la altura se ajusta uno por uno
   para que todos pesen lo mismo a la vista, no para que midan lo mismo. */
.sello { display: flex; align-items: center; }
.sello img {
  width: auto;
  height: var(--alto, 1.75rem);
  filter: grayscale(1);
  opacity: .5;
  transition: filter var(--rapido), opacity var(--rapido);
}
.sello--davivienda { --alto: 1rem; }
.sello--bolivar    { --alto: 2.125rem; }
.sello--metlife    { --alto: 1.5rem; }
.sello--bcs        { --alto: 2.75rem; }
.sello--mercedes   { --alto: 1.875rem; }

/* Al pasar el ratón el carrusel se detiene y los logos recuperan su color */
.marquesina:hover .sello img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .marquesina__pista { animation: desfile 34s linear infinite; }
  .marquesina:hover .marquesina__pista,
  .marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
}
@keyframes desfile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Sin motion se puede recorrer a mano */
@media (prefers-reduced-motion: reduce) {
  .marquesina__ventana { overflow-x: auto; }
}

/* ── 8.0 Habilidades (en desuso tras el rediseño de Sobre mí) ──────────── */
.sobre__texto .parrafo-guia { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); color: var(--tinta); }
.dato-practico {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  max-width: var(--medida);
  font-size: .9375rem;
  color: var(--gris-texto);
}

.habilidades { margin-top: 2.5rem; display: grid; gap: 1rem; }
.habilidades__bloque {
  padding: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.habilidades__titulo { font-size: 1rem; margin-bottom: .9rem; }
.habilidades__lista { list-style: none; margin: 0; padding: 0; }
.habilidades__lista li {
  position: relative;
  padding: .45rem 0 .45rem 1.5rem;
  font-size: .9375rem;
  color: var(--gris-texto);
}
.habilidades__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .82em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--azul);
}

/* ── 8.1 Sectores: lienzo + lista que avanza sola ──────────────────────── */
.sectores { display: grid; gap: 1.75rem; }

.lienzo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 21rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radio-lg);
  background: linear-gradient(150deg, #DCE7FF 0%, #EAF3FF 45%, #E7F6EF 100%);
  overflow: hidden;
}
.lienzo__pieza {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  justify-content: center;
  /* los decorados van en absoluto y se pintan después: sin esto taparían la pieza */
  position: relative;
  z-index: 1;
}

/* ── Fondo vivo del lienzo ─────────────────────────────────────────────────
   Los degradados no se animan barato: interpolar color obliga a repintar cada
   fotograma. Lo que se mueve aquí son tres manchas de color quietas, cada una
   con su bucle de transform. Al cruzarse y separarse el fondo parece cambiar
   de color sin animar un solo color. Encima, una trama de barras verticales
   fija — el patrón de Calendly — que se lee mejor precisamente porque no se
   mueve: el color se desplaza por debajo de ella. */
.lienzo__bruma,
.lienzo__trama { position: absolute; z-index: 0; pointer-events: none; }

.lienzo::before,
.lienzo::after,
.lienzo__bruma {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* El difuminado sale del propio radial-gradient closest-side, que es gratis.
     Nada de filter: blur(), que obligaría a rasterizar en cada fotograma. */
  border-radius: 50%;
}
.lienzo::before, .lienzo::after { content: ""; }

.lienzo::before {                       /* azul de marca, arriba a la izquierda */
  left: -20%; top: -24%; width: 80%; height: 88%;
  background: radial-gradient(closest-side,
    rgba(37, 99, 235, .24) 0%, rgba(37, 99, 235, .14) 46%, rgba(37, 99, 235, 0) 100%);
}
.lienzo::after {                        /* menta, abajo a la derecha */
  left: 42%; top: 38%; width: 84%; height: 86%;
  background: radial-gradient(closest-side,
    rgba(45, 212, 160, .20) 0%, rgba(45, 212, 160, .12) 46%, rgba(45, 212, 160, 0) 100%);
}
.lienzo__bruma {                        /* violeta: la nota que no está en el degradado base */
  left: 28%; top: -12%; width: 72%; height: 76%;
  background: radial-gradient(closest-side,
    rgba(139, 92, 246, .18) 0%, rgba(139, 92, 246, .11) 46%, rgba(139, 92, 246, 0) 100%);
}

/* Trama de barras en marcha, como la de Calendly. Dos planos a distinta escala
   y velocidad: eso es el paralaje. La máscara vive en el contenedor y no se
   mueve; lo que se traslada son los dos hijos. */
.lienzo__trama {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  /* se apaga hacia el centro, que es donde vive la tarjeta */
  --velo: radial-gradient(88% 66% at 50% 50%,
    transparent 0%, rgba(0, 0, 0, .3) 58%, #000 100%);
  -webkit-mask-image: var(--velo);
          mask-image: var(--velo);
}
/* Doble de anchos que el lienzo: al correrse un ciclo entero siguen
   cubriéndolo de lado a lado y nunca asoma su borde. */
.lienzo__trama::before,
.lienzo__trama::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200%;
}
.lienzo__trama::before {              /* plano cercano: barras anchas con filo */
  --paso: 96px;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .55)  0px   1px,
    rgba(255, 255, 255, .17)  1px  28px,
    rgba(255, 255, 255, 0)   28px  52px,
    rgba(37, 99, 235, .10)   52px  53px,
    rgba(37, 99, 235, .045)  53px  70px,
    rgba(255, 255, 255, 0)   70px  96px);
}
.lienzo__trama::after {               /* plano lejano: hilos finos, más lento */
  --paso: 36px;
  opacity: .8;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .34)  0px   1px,
    rgba(255, 255, 255, 0)    1px  17px,
    rgba(16, 24, 40, .03)    17px  18px,
    rgba(255, 255, 255, 0)   18px  36px);
}
/* El recorrido es exactamente un paso del patrón: al terminar, el dibujo es
   idéntico al del principio y el bucle no tiene costura. */
@keyframes trama-desfila {
  to { transform: translate3d(calc(var(--paso) * -1), 0, 0); }
}
.motion .lienzo__trama::before { animation: trama-desfila 10s linear infinite; }
.motion .lienzo__trama::after  { animation: trama-desfila  9s linear infinite; }
@media (min-width: 48em) {
  .lienzo__trama {
    --velo: radial-gradient(58% 74% at 50% 50%,
      transparent 0%, rgba(0, 0, 0, .28) 56%, #000 100%);
  }
}

/* Solo con .motion. Sin la clase, las manchas se quedan donde están y la
   composición ya está terminada. Sin will-change: una animación infinita de
   transform ya se promueve sola, y declararlo solo clava capas en memoria.
   Duraciones primas entre sí: el patrón no se repite en horas. */
.motion .lienzo::before { animation: deriva-azul    23s ease-in-out infinite; }
.motion .lienzo::after  { animation: deriva-menta   19s ease-in-out infinite; }
.motion .lienzo__bruma  { animation: deriva-violeta 31s ease-in-out infinite; }

/* Los tres recorridos empiezan y acaban en la identidad, que es el estado
   quieto: nunca hay salto al añadirse la clase. Los % son del tamaño de cada
   mancha, así que escalan solos de móvil a escritorio. */
@keyframes deriva-azul {
  0%   { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
  28%  { transform: translate3d(13%, 8%, 0)   scale(1.1)  rotate(8deg); }
  55%  { transform: translate3d(6%, -10%, 0)  scale(.95)  rotate(-6deg); }
  78%  { transform: translate3d(-7%, 3%, 0)   scale(1.05) rotate(3deg); }
  100% { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
}
@keyframes deriva-menta {
  0%   { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
  24%  { transform: translate3d(-11%, -7%, 0) scale(1.08) rotate(-7deg); }
  52%  { transform: translate3d(-4%, 9%, 0)   scale(.93)  rotate(6deg); }
  81%  { transform: translate3d(8%, 2%, 0)    scale(1.04) rotate(-3deg); }
  100% { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
}
@keyframes deriva-violeta {
  0%   { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
  33%  { transform: translate3d(7%, -9%, 0)   scale(1.12) rotate(5deg); }
  64%  { transform: translate3d(-9%, 5%, 0)   scale(.91)  rotate(-8deg); }
  100% { transform: translate3d(0, 0, 0)      scale(1)    rotate(0deg); }
}

/* En alto contraste forzado y en papel, el decorado sobra */
@media (forced-colors: active), print {
  .lienzo::before, .lienzo::after,
  .lienzo__bruma, .lienzo__trama { display: none; }
}
.lienzo__pieza[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lienzo__pieza.is-activa { animation: entra-pieza .45s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes entra-pieza {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* Dentro del lienzo la pieza es blanca y sólida: el degradado ya pone el color */
/* .pieza.pieza--claro y no .pieza--claro a secas: `.pieza` redeclara el fondo
   170 líneas más abajo con la misma especificidad y ganaba por orden, así que
   el .88 nunca llegaba a aplicarse y la tarjeta dejaba pasar un 28%. */
.pieza.pieza--claro {
  --tono-icono: var(--azul-tenue);
  --tono-tinta: var(--azul);
  --tono-sombra: rgba(37, 99, 235, .28);
  background: rgba(255, 255, 255, .88);
  /* Sobre el fondo animado el texto secundario se quedaba en 4,6:1; con el
     token oscuro sube a 7,1:1 en el peor fotograma. */
  --gris-texto: var(--gris-oscuro);
}

.sectores__lista { display: grid; gap: .25rem; }
.sector {
  position: relative;
  display: grid;
  /* icono · texto · signo. align-items:start para que al desplegarse el detalle
     no arrastre el icono hacia abajo */
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: .9rem;
  width: 100%;
  padding: 1.05rem .25rem 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sector__icono {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radio-sm);
  background: var(--papel-suave);
  color: var(--gris-texto);
  transition: background-color var(--rapido), color var(--rapido);
}
.sector.is-activo .sector__icono { background: var(--azul-tenue); color: var(--azul); }

/* Misma altura que el icono y centrado dentro: así el título queda a la altura
   del icono tanto plegado como desplegado, sin saltos */
.sector__nombre {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--gris-texto);
  transition: color var(--rapido);
}
.sector.is-activo .sector__nombre { color: var(--tinta); font-weight: 600; }
.sector:hover .sector__nombre { color: var(--tinta); }

/* La descripción solo se despliega en el sector activo */
.sector__detalle {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  font-size: .9375rem;
  color: var(--gris-oscuro);
  opacity: 0;
  transition: grid-template-rows .32s cubic-bezier(.16, 1, .3, 1), opacity .25s, margin-top .32s;
}
.sector__detalle > * { min-height: 0; }
.sector.is-activo .sector__detalle {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: .1rem;
}

/* El signo dice que el sector se abre: + plegado, − desplegado. Mide lo mismo
   de alto que el icono, así que su glifo cae justo a esa altura. */
.sector__signo {
  align-self: start;
  width: 1.25rem; height: 2.25rem;
  color: var(--gris-titulo);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 1.5px, 1.5px 11px;
  transition: color var(--rapido), background-size .32s cubic-bezier(.16, 1, .3, 1);
}
.sector:hover .sector__signo { color: var(--gris-oscuro); }
.sector.is-activo .sector__signo {
  color: var(--azul);
  background-size: 11px 1.5px, 1.5px 0;   /* la barra vertical se encoge: + → − */
}

/* Esta barra hace de separador y, en el sector activo, de cuenta atrás.
   Una sola línea entre sectores: el borde y la barra juntos se veían dobles. */
.sector__barra {
  grid-column: 1 / -1;
  height: 2px;
  margin-top: 1.15rem;
  border-radius: 2px;
  background: var(--linea);
  overflow: hidden;
}
.sector__barra i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: 2px; }
.sector.is-activo .sector__barra i { width: var(--avance, 0%); }
@media (prefers-reduced-motion: no-preference) {
  .sector.is-activo .sector__barra i { transition: width .2s linear; }
}
/* Sin autoavance la barra se queda como simple separador */
.sectores--manual .sector__barra i { display: none; }

/* ── 8.2 Frentes de trabajo (bloques de color a ancho completo) ────────── */
.frentes { padding-block: var(--seccion-y) 0; scroll-margin-top: var(--cab-alto); }
/* Cierra el apilado: este bloque tapa al último frente cuando llega */
.frentes > .envoltura:last-child {
  position: relative;
  z-index: 5;
  background: var(--papel);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.frente {
  --tono-fondo: var(--azul-tenue);
  --tono-icono: #DBE7FE;
  --tono-tinta: #1D4ED8;
  /* La sombra es el propio color del bloque, más oscuro: nunca un gris que lo ensucie */
  --tono-sombra: rgba(29, 78, 216, .3);
  /* --tono-vidrio es el mismo color con alfa: se usa solo donde los bloques
     se apilan, para que el de abajo se adivine a través del de arriba */
  --tono-vidrio: rgba(239, 244, 255, .74);
  background: var(--tono-fondo);
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
}
.frente--mensajes { --tono-fondo: #F3F8E7; --tono-vidrio: rgba(243, 248, 231, .74); --tono-icono: #E2EFC2; --tono-tinta: #4C7A0B; --tono-sombra: rgba(76, 122, 11, .28); }
.frente--notas    { --tono-fondo: #F5F2FE; --tono-vidrio: rgba(245, 242, 254, .74); --tono-icono: #E6DFFC; --tono-tinta: #6D28D9; --tono-sombra: rgba(109, 40, 217, .26); }
.frente--cartera  { --tono-fondo: #ECF7F4; --tono-vidrio: rgba(236, 247, 244, .74); --tono-icono: #D3EEE7; --tono-tinta: #0F766E; --tono-sombra: rgba(15, 118, 110, .28); }

.frente__rejilla { display: grid; gap: 2rem; align-items: center; }

.frente__icono {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radio-sm);
  background: var(--tono-icono);
  color: var(--tono-tinta);
}
.frente__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.frente__entrada {
  margin-top: .8rem;
  max-width: 34em;
  font-size: 1.0625rem;
  color: var(--gris-oscuro);
}
.frente__lista { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 34em; }
.frente__lista li {
  position: relative;
  padding: .55rem 0 .55rem 1.85rem;
  font-size: .9688rem;
  color: var(--gris-oscuro);
}
/* Círculo y palomita en una sola máscara: así nunca se descentran entre sí.
   El color lo pone el tono del frente. */
.frente__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 19px; height: 19px;
  background: var(--tono-tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8.7 13.5 5.6 10.4a1.05 1.05 0 0 1 1.5-1.5l1.6 1.6 4.2-4.2a1.05 1.05 0 0 1 1.5 1.5l-5 5a1.05 1.05 0 0 1-1.5 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8.7 13.5 5.6 10.4a1.05 1.05 0 0 1 1.5-1.5l1.6 1.6 4.2-4.2a1.05 1.05 0 0 1 1.5 1.5l-5 5a1.05 1.05 0 0 1-1.5 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Piezas ilustrativas de cada frente */
.frente__visual { display: flex; justify-content: center; }
.pieza {
  width: min(23rem, 100%);
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  /* La pieza también se apoya en el color de su bloque, no en gris */
  box-shadow: 0 18px 40px -26px var(--tono-sombra, rgba(16, 24, 40, .4));
  font-size: .875rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pieza { background: var(--papel); }
}
.pieza__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.pieza__cab { font-weight: 600; }
.pieza__chip {
  flex: none;
  padding: .2rem .6rem;
  border-radius: var(--pill);
  background: var(--tono-icono);
  color: var(--tono-tinta);
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.pieza__pie {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(16, 24, 40, .1);
  font-size: .8125rem;
  color: var(--gris-texto);
}
.pieza__pie b, .pieza b { color: var(--tinta); }

/* Franjas de agenda */
.ranura {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .3rem .7rem;
  padding: .55rem .7rem;
  border-radius: var(--radio-sm);
  margin-bottom: .45rem;
  color: var(--gris-oscuro);
}
.ranura__hora { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ranura__que b { font-weight: 600; }
.ranura__estado {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tono-tinta);
  white-space: nowrap;
}
.ranura--llena { background: rgba(255, 255, 255, .55); }
.ranura--libre {
  border: 1px dashed rgba(16, 24, 40, .22);
  background: none;
  color: var(--gris-texto);
  font-size: .8125rem;
}

/* Burbujas de chat */
.burbuja {
  max-width: 90%;
  padding: .55rem .75rem;
  margin-bottom: .45rem;
  border-radius: 14px;
  line-height: 1.45;
}
.burbuja--entra { background: rgba(255, 255, 255, .6); border-bottom-left-radius: 4px; color: var(--gris-oscuro); }
.burbuja--sale {
  margin-left: auto;
  background: var(--tono-icono);
  border-bottom-right-radius: 4px;
  color: var(--tinta);
}
.burbuja__hora {
  display: block;
  margin-top: .2rem;
  font-size: .625rem;
  color: var(--gris-texto);
}
.burbuja--sale .burbuja__hora { text-align: right; }

/* Líneas del acta */
.nota-linea {
  display: grid;
  grid-template-columns: 4.75rem 1fr;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(16, 24, 40, .08);
  color: var(--gris-oscuro);
}
.nota-linea b {
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--tono-tinta);
}
.nota-linea--tarea { background: linear-gradient(90deg, rgba(255, 255, 255, .5), transparent); }

/* Filas de cartera */
.fila-cartera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(16, 24, 40, .08);
  color: var(--gris-oscuro);
}
.fila-cartera__quien b { display: block; font-weight: 600; }
.fila-cartera__quien { font-size: .75rem; color: var(--gris-texto); line-height: 1.35; }
.fila-cartera__dias {
  flex: none;
  padding: .2rem .55rem;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .6);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tono-tinta);
  white-space: nowrap;
}

/* ── 9. Servicios ──────────────────────────────────────────────────────── */
.servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: servicio;
  display: grid;
  gap: 1rem;
}
.servicio {
  counter-increment: servicio;
  padding: 1.5rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.servicio::before {
  content: counter(servicio, decimal-leading-zero);
  display: block;
  margin-bottom: .6rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.servicio__nombre { font-size: var(--h3); margin-bottom: .4rem; }
.servicio p { color: var(--gris-texto); font-size: .9375rem; }

.nota-asincrona {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2rem);
  border-radius: var(--radio);
  background: var(--azul-tenue);
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + .55vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
}

/* ── 10. Demos ─────────────────────────────────────────────────────────── */
.demo { margin-bottom: clamp(3rem, 2rem + 4vw, 4.5rem); }
.demo:last-of-type { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
.demo__cab { margin-bottom: 1.5rem; }
.demo__titulo { font-size: var(--h3); margin-bottom: .4rem; }
.demo__pie { max-width: var(--medida); font-size: .9688rem; color: var(--gris-texto); }

/* 10.1 Hoja de cálculo */
.hoja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.hoja__barra {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  background: var(--papel-suave);
}
.hoja__archivo { font-size: .8125rem; font-weight: 600; }
.hoja__marca, .correo__marca {
  font-size: .75rem;
  color: var(--gris-texto);
}
.hoja__lienzo, .comparativa__lienzo { overflow-x: auto; }
.hoja__lienzo:focus-visible, .comparativa__lienzo:focus-visible { outline-offset: -2px; }

.hoja__ayuda {
  padding: .7rem 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: .75rem;
  color: var(--gris-texto);
}
@media (min-width: 62em) { .hoja__ayuda { display: none; } }

.hoja__tabla { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: .875rem; }
.hoja__tabla th, .hoja__tabla td {
  text-align: left;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
  white-space: nowrap;
}
.hoja__tabla thead th {
  font-size: .75rem;
  font-weight: 500;
  color: var(--gris-texto);
  background: var(--papel-suave);
}
.hoja__tabla tbody th { font-weight: 600; }
.hoja__tabla td { color: var(--gris-texto); }
.hoja__tabla tbody tr:last-child th, .hoja__tabla tbody tr:last-child td { border-bottom: 0; }

.estado { font-size: .8125rem; font-weight: 500; color: var(--tinta); white-space: nowrap; }
.estado--espera { color: var(--gris-texto); }
.estado--foco {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--pill);
  background: var(--azul-tenue);
  color: var(--azul);
  font-weight: 500;
}

/* 10.2 Flujo */
.flujo { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 1rem; }
.flujo__paso {
  counter-increment: paso;
  padding: 1.35rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}
.flujo__paso::before {
  content: counter(paso, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: var(--azul-tenue);
  color: var(--azul);
  font-size: .8125rem;
  font-weight: 600;
}
.flujo__nombre { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.flujo__detalle { margin-top: .35rem; font-size: .9375rem; color: var(--gris-texto); }

/* 10.2b Las cuatro etapas (tarjetas con degradado) */
.etapas {
  display: grid;
  gap: 1rem;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 clamp(3rem, 2rem + 4vw, 4.5rem);
  counter-reset: etapa;
}
.etapa {
  --grad: #CFE3FF;
  counter-increment: etapa;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 15rem;
  padding: 1.75rem;
  border-radius: var(--radio-lg);
  background: var(--papel);
  box-shadow: var(--sombra-1);
}
.etapa--dos { --grad: #E4DBFB; }
.etapa--tres { --grad: #DDF1D6; }
.etapa--cuatro { --grad: #D0EFEA; }

/* El degradado sube desde el pie de la tarjeta, como en la referencia */
.etapa::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--grad) 100%);
}
/* Número fantasma */
.etapa::before {
  content: counter(etapa);
  position: absolute;
  z-index: -1;
  right: -.5rem; bottom: -3.5rem;
  font-size: 11rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .55);
}
.etapa__titulo { font-size: 1.375rem; }
.etapa__texto { margin-top: .7rem; font-size: .9688rem; color: var(--gris-oscuro); }
.etapa__lista { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.etapa__lista li {
  position: relative;
  padding: .3rem 0 .3rem 1.15rem;
  font-size: .875rem;
  color: var(--gris-oscuro);
}
.etapa__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--azul);
}
.etapa__pieza {
  margin-top: 1.35rem;
  padding: 1rem;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra-2);
}
.etapa__mensaje {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .8125rem;
  color: var(--gris-oscuro);
}
.etapa__mensaje + .etapa__mensaje { margin-top: .8rem; }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
}
.avatar--tu { background: var(--papel-suave); color: var(--gris-texto); border: 1px solid var(--linea); }
.etapa__mensaje b {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tinta);
}
.etapa__mensaje--yo b { color: var(--azul); }

/* 10.3 Reporte semanal */
.correo {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.correo__cab { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--linea); background: var(--papel-suave); }
.correo__linea { font-size: .875rem; }
.correo__linea span {
  display: inline-block;
  min-width: 4.25rem;
  font-size: .75rem;
  color: var(--gris-texto);
}
.correo__marca { display: block; margin-top: .6rem; }
.correo__cuerpo { padding: 1.6rem 1.35rem; font-size: .9375rem; color: var(--gris-texto); }
.correo__cuerpo > p + p { margin-top: 1rem; }
/* La tarjeta ocupa todo el ancho igual que la hoja de cálculo; sólo la prosa
   se queda en una medida legible — el tablero sí aprovecha el espacio. */
.correo__cuerpo > p,
.correo__subtitulo { max-width: var(--medida); }

/* ── Tablero del reporte semanal ──────────────────────────────────────
   Cifras, gráfica y medidor. Todo se anima al entrar en pantalla desde
   .correo.is-visible; sin motion aparece ya en su estado final. */
.tablero {
  margin: 1.25rem 0 1.5rem;
  padding: 1.15rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  background: linear-gradient(180deg, var(--papel-suave), var(--papel));
}
.kpis { list-style: none; margin: 0; padding-left: 0; display: grid; gap: .7rem; }
.kpi {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .25rem .75rem;
  padding: .85rem .95rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel);
}
.kpi__icono {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 9px;
  background: var(--azul-tenue);
  color: var(--azul);
}
.kpi--citas .kpi__icono { background: #D8F0EA; color: #0B5F58; }
.kpi--reagenda .kpi__icono { background: #E9E2FD; color: #5B21B6; }
.kpi__valor {
  align-self: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.kpi__rotulo {
  grid-column: 1 / -1;
  margin-top: .35rem;
  font-size: .8125rem;
  color: var(--gris-oscuro);
}
.kpi__apoyo {
  grid-column: 1 / -1;
  font-size: .75rem;
  color: var(--gris-titulo);
}

.tablero__par { display: grid; gap: .7rem; margin-top: .7rem; }

/* Gráfica de barras */
.grafica {
  padding: .95rem 1rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel);
}
.grafica__cab { display: grid; gap: .1rem; margin-bottom: .9rem; }
.grafica__titulo { font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.grafica__apunte { font-size: .75rem; color: var(--gris-titulo); }
.grafica__barras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: .8rem;
  height: 7.5rem;
}
.grafica__barras li {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: .3rem;
  height: 100%;
  text-align: center;
}
.grafica__col { display: flex; align-items: flex-end; height: 100%; }
.grafica__barra {
  display: block;
  width: 100%;
  height: calc(var(--v) * 100%);
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--azul), #3B76F6);
  transform-origin: bottom;
}
.grafica__barras li:nth-child(3) .grafica__barra { background: linear-gradient(180deg, #1D4ED8, var(--azul)); }
.grafica__valor { font-size: .75rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafica__dia { font-size: .6875rem; color: var(--gris-titulo); }

/* Medidor de horas */
.medidor {
  display: grid;
  justify-items: center;
  gap: .1rem;
  padding: 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel);
  text-align: center;
}
.medidor__aro { position: relative; width: 8.25rem; height: 8.25rem; }
.medidor__aro svg { width: 100%; height: 100%; }
.medidor__pista { fill: none; stroke: var(--azul-tenue); stroke-width: 11; }
.medidor__avance {
  fill: none;
  stroke: var(--azul);
  stroke-width: 11;
  stroke-linecap: round;
  /* 2πr con r=52 → 326.7. El 22,5% (4,5 de 20) son 73.5 */
  stroke-dasharray: 73.5 326.7;
}
.medidor__cifra {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: .1rem;
}
.medidor__cifra b {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.medidor__cifra span { font-size: .75rem; color: var(--gris-titulo); }
.medidor__rotulo { margin-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.medidor__nota { font-size: .75rem; color: var(--gris-texto); }
.medidor__nota b { font-weight: 600; color: var(--gris-oscuro); }

/* Pendientes con icono */
.pendientes {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin: .85rem 0 1.5rem;
  padding-left: 0;
}
/* misma anatomía que las tarjetas del tablero: icono + rótulo arriba,
   texto ocupando el ancho */
.pendiente {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .25rem .65rem;
  padding: .85rem .95rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel-suave);
}
.pendiente__icono {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  background: var(--papel);
  color: var(--gris-oscuro);
}
.pendiente__rotulo { font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.pendiente__texto {
  grid-column: 1 / -1;
  margin-top: .3rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--gris-texto);
}
.pendiente--reloj .pendiente__icono { background: #FDF0E3; color: #92400E; }
.pendiente--doc .pendiente__icono { background: var(--azul-tenue); color: #1D4ED8; }
.pendiente--pregunta .pendiente__icono { background: #E9E2FD; color: #5B21B6; }
.correo__subtitulo { margin-top: 1.5rem; font-weight: 600; font-size: .9375rem; color: var(--tinta); }

/* 10.4 Oferta */
/* ── Cenefa de lanzamiento ─────────────────────────────────────────────
   Franja a todo el ancho entre el bloque gris y Tarifas: va pegada arriba,
   sin margen, para que se lea como el remate del bloque anterior. */
.cenefa {
  border-top: 1px solid var(--azul-borde);
  border-bottom: 1px solid var(--azul-borde);
  background: linear-gradient(135deg, #EEF3FF 0%, #F4F1FE 100%);
}
.cenefa__rejilla {
  display: grid;
  gap: .7rem;
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
}
.cenefa__titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}
.cenefa__punto {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.motion .cenefa__punto { animation: latido-azul 2.6s ease-out infinite; }
@keyframes latido-azul {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
/* --gris-oscuro y no --gris-texto: sobre este azul claro da 6.9:1 */
.cenefa__texto { max-width: var(--medida); font-size: .9375rem; color: var(--gris-oscuro); }
.cenefa__texto strong { color: var(--tinta); font-weight: 600; }
.cenefa__accion {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.15rem;
  border: 1px solid var(--azul-borde);
  border-radius: 999px;
  background: var(--papel);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--azul);              /* 5.13:1 sobre blanco */
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.cenefa__accion svg { transition: transform var(--rapido); }
.cenefa__accion:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: #FFF;                     /* 5.13:1 al revés */
}
.cenefa__accion:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .cenefa__accion:hover svg { transform: none; }
}

/* ── 11. Planes y comparativa ──────────────────────────────────────────── */
.planes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--papel);
  transition: box-shadow var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.plan:hover { box-shadow: var(--sombra-2); }
.plan--destacado {
  border-color: var(--azul);
  box-shadow: var(--sombra-2);
  background: linear-gradient(180deg, var(--azul-tenue) 0%, var(--papel) 42%);
}
.plan__sello {
  align-self: flex-start;
  margin-bottom: .8rem;
  padding: .25rem .7rem;
  border-radius: var(--pill);
  background: var(--azul);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
}
.plan__nombre { font-size: 1.125rem; }
.plan__precio { display: flex; align-items: baseline; gap: .4rem; margin-top: .9rem; }
.plan__cifra { font-size: 2.75rem; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.plan__unidad { font-size: .9375rem; color: var(--gris-texto); }
.plan__hora { margin-top: .5rem; font-size: .875rem; font-weight: 500; color: var(--azul); }
.plan__nota {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
  font-size: .9375rem;
  color: var(--gris-texto);
  flex: 1;
}
.plan .btn { margin-top: 1.35rem; width: 100%; }

.comparativa { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.comparativa__titulo { font-size: var(--h3); }
.comparativa__intro { margin-top: .5rem; margin-bottom: 1.5rem; max-width: var(--medida); font-size: .9375rem; color: var(--gris-texto); }
.comparativa__lienzo {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

.tabla-comparativa { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: .875rem; }
.tabla-comparativa th, .tabla-comparativa td {
  padding: .85rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--linea);
}
.tabla-comparativa thead th {
  position: sticky;
  top: 0;
  background: var(--papel-suave);
  font-size: .8125rem;
  font-weight: 600;
}
.tabla-comparativa tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--gris-oscuro);
  white-space: nowrap;
}
.tabla-comparativa td { color: var(--gris-texto); white-space: nowrap; }
.tabla-comparativa tbody tr:hover th { color: var(--tinta); }
.tabla-comparativa tbody tr:hover td { background: var(--azul-tenue); }

/* Encabezado de cada grupo de filas */
.grupo__cab th {
  padding-top: 1.6rem;
  border-bottom-color: var(--linea-fuerte);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tinta);
}
.grupo:first-of-type .grupo__cab th { padding-top: .85rem; }
.grupo__cab:hover th { color: var(--tinta); }
/* Flex en vez de vertical-align: el icono y el texto quedan centrados de verdad */
.grupo__rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.grupo__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--azul-tenue);
  color: var(--azul);
}
.grupo__icono--mensajes { background: #E9F3D4; color: #3F6A08; }
.grupo__icono--notas { background: #E9E2FD; color: #5B21B6; }
.grupo__icono--cartera { background: #D8F0EA; color: #0B5F58; }

.grupo--cifras td { color: var(--tinta); font-weight: 500; }
.tabla-comparativa tbody:last-of-type tr:last-child th,
.tabla-comparativa tbody:last-of-type tr:last-child td { border-bottom: 0; }

/* "No incluido" se dibuja como un guion discreto; el texto queda para el lector de pantalla */
.tabla-comparativa td.no { font-size: 0; line-height: 0; color: transparent; }
.tabla-comparativa td.no::before {
  content: "—";
  font-size: .9375rem;
  line-height: 1.4;
  color: #C7CDD8;
}

/* El "Sí" se dibuja como check azul; el texto sigue ahí para el lector de pantalla */
.tabla-comparativa td.si { font-size: 0; line-height: 0; color: transparent; }
.tabla-comparativa td.si::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232563EB'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}

/* Comparación con el costo de contratar en Miami */
.cotejo {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}
.cotejo__titulo {
  margin-bottom: 1.1rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.cotejo__par { display: grid; gap: 1rem; }
.cotejo__lado {
  padding: 1.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--papel-suave);
}
.cotejo__lado--yo {
  border-color: var(--azul-borde);
  background: linear-gradient(160deg, var(--azul-tenue) 0%, var(--papel) 100%);
}
.cotejo__quien {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9375rem;
  color: var(--gris-oscuro);
}
.cotejo__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--gris-oscuro);
}
.cotejo__lado--yo .cotejo__icono { border-color: var(--azul-borde); color: var(--azul); }
.cotejo__cifra {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .5rem;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}
.cotejo__cifra span { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--gris-texto); }
.cotejo__lado--yo .cotejo__cifra { color: var(--azul); }
.cotejo__regla {
  height: 6px;
  margin-top: 1.1rem;
  border-radius: 3px;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--linea);
  overflow: hidden;
}
.cotejo__regla i {
  display: block;
  height: 100%;
  width: var(--largo);
  border-radius: 3px;
  background: var(--gris-titulo);
  transform-origin: left;
}
.cotejo__lado--yo .cotejo__regla i { background: var(--azul); }
.motion .cotejo__regla i { transform: scaleX(0); }
.motion .cotejo.is-visible .cotejo__regla i {
  transform: none;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1) .15s;
}
.motion .cotejo.is-visible .cotejo__lado--yo .cotejo__regla i { transition-delay: .35s; }

.cotejo__nota { margin-top: 1rem; font-size: .9375rem; color: var(--gris-oscuro); }
.cotejo__fuente { margin-top: .9rem; font-size: .75rem; color: var(--gris-texto); }
.cotejo__fuente a {
  display: inline-block;
  padding-block: .3rem;
  color: var(--gris-texto);
  text-underline-offset: 3px;
}
.cotejo__fuente a:hover { color: var(--azul); }
/* Nota honesta: tiene rótulo propio para que no se lea como letra pequeña */

/* Las tres condiciones que antes iban en un párrafo corrido */
.condiciones {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-left: 0;
  list-style: none;
}
.condicion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .25rem .65rem;
  padding: .85rem .95rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  background: var(--papel-suave);
}
.condicion__icono {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  background: var(--papel);
  color: var(--azul);
}
.condicion b { font-size: .8125rem; font-weight: 600; color: var(--tinta); }
/* :not(.condicion__icono) — el icono también es un span y se colaba aquí */
.condicion span:not(.condicion__icono) {
  grid-column: 1 / -1;
  margin-top: .3rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--gris-texto);
}

.comparativa__ayuda { margin-top: .7rem; font-size: .75rem; color: var(--gris-texto); }
@media (min-width: 62em) { .comparativa__ayuda { display: none; } }

/* ── 12. Preguntas ─────────────────────────────────────────────────────── */
.faq { max-width: 56rem; border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }

.faq__pregunta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::before {
  content: "";
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  /* dos capas fijas: así la barra vertical puede encogerse con transición */
  background-color: transparent;
  background-image:
    linear-gradient(var(--tinta), var(--tinta)),
    linear-gradient(var(--tinta), var(--tinta));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 1.5px, 1.5px 11px;
  transition:
    background-color var(--rapido), border-color var(--rapido),
    background-image var(--rapido),
    background-size .32s cubic-bezier(.16, 1, .3, 1);
}
.faq__item[open] .faq__pregunta::before {
  border-color: var(--azul);
  background-color: var(--azul);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 11px 1.5px, 1.5px 0;
}
/* mientras se cierra, el icono vuelve al + al mismo tiempo que el panel */
.motion .faq__item.is-cerrando .faq__pregunta::before {
  border-color: var(--linea-fuerte);
  background-color: transparent;
  background-image:
    linear-gradient(var(--tinta), var(--tinta)),
    linear-gradient(var(--tinta), var(--tinta));
  background-size: 11px 1.5px, 1.5px 11px;
}

.faq__respuesta { padding: 0 0 1.35rem 2.75rem; max-width: var(--medida); }
.faq__respuesta p { font-size: .9688rem; color: var(--gris-texto); }

/* El panel se despliega con la rejilla (0fr → 1fr), que no necesita saber la
   altura de antemano. Solo con .motion: sin JS, <details> abre como siempre. */
.motion .faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  opacity: 0;
  transition:
    grid-template-rows .36s cubic-bezier(.16, 1, .3, 1),
    padding-bottom .36s cubic-bezier(.16, 1, .3, 1),
    opacity .2s ease-out;
}
.motion .faq__respuesta > p { overflow: hidden; }
.motion .faq__item.is-abierta .faq__respuesta {
  grid-template-rows: 1fr;
  padding-bottom: 1.35rem;
  opacity: 1;
  transition-delay: 0s, 0s, .1s;
}

/* ── 13. Cierre ────────────────────────────────────────────────────────── */
.cierre {
  padding-block: var(--seccion-y);
  scroll-margin-top: var(--cab-alto);
  background:
    radial-gradient(900px 460px at 85% 10%, #E9E3FE 0%, rgba(233, 227, 254, 0) 60%),
    linear-gradient(180deg, #EAF0FF 0%, #F4F7FF 100%);
}
.cierre__titulo { font-size: var(--h2); max-width: 18ch; text-wrap: balance; }
.cierre__parrafo { margin-top: 1.25rem; max-width: var(--medida); font-size: 1.0625rem; color: var(--gris-oscuro); }
.cierre__figura { display: none; }
.cierre__acciones { margin-top: 2.25rem; display: flex; flex-direction: column; gap: .75rem; }
.cierre__directo {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.75rem;
  margin: 1.5rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--azul-borde);
  font-size: .9375rem;
}
/* en fila: son dos etiquetas cortas, apilarlas desperdiciaba el ancho */
.cierre__directo li { display: flex; }
.cierre__directo a { display: inline-flex; align-items: center; gap: .6rem; }
.cierre__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  border: 1px solid var(--azul-borde);
  background: rgba(255, 255, 255, .65);
  color: var(--azul);
}
/* sin subrayado fijo: el icono ya dice que es un enlace, y el subrayado
   aparece al pasar por encima */
.cierre__directo a {
  padding-block: .4rem;
  color: var(--gris-oscuro);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--rapido);
}
.cierre__directo a:hover,
.cierre__directo a:focus-visible { color: var(--azul); text-decoration: underline; }

.cierre__tarjeta {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .9rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 45px -22px rgba(16, 24, 40, .35);
  font-size: .8125rem;
  color: var(--gris-oscuro);
  text-align: left;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cierre__tarjeta { background: rgba(255, 255, 255, .95); }
}
.cierre__tarjeta b { display: block; margin-bottom: .1rem; color: var(--tinta); }
.cierre__pulso {
  flex: none;
  width: 9px; height: 9px;
  margin-top: .3rem;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .18);
}
.motion .cierre__pulso { animation: latido 2.4s ease-out infinite; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(18, 161, 80, .45); }
  70%  { box-shadow: 0 0 0 9px rgba(18, 161, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}

/* ── 14. Pie ───────────────────────────────────────────────────────────── */
.pie {
  padding: clamp(3rem, 2rem + 4vw, 4.5rem) 0 2rem;
  border-radius: 28px 28px 0 0;
  background: var(--tinta);
  font-size: .9375rem;
  color: #D0D5DD;               /* 11.8:1 sobre la tinta */
}
.pie__rejilla { display: grid; gap: 2.5rem; }
.pie__frase {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
  color: #FFF;
  text-wrap: balance;
}
.pie__marca { margin-top: 2rem; color: #FFF; }
.marca__logo--pie { height: 1.125rem; }
.pie__descriptor { margin-top: .35rem; font-size: .875rem; color: #98A2B3; }

.pie__columnas { display: grid; gap: 2rem; }
.pie__rubro { margin-bottom: .85rem; font-size: .9375rem; font-weight: 600; color: #FFF; }
.pie__columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
/* El padding hace de zona táctil (2.5.8): el enlace mide 30px de alto sin que
   la lista se vea más suelta, porque el gap baja lo mismo que sube el padding */
.pie__columna a {
  display: inline-block;
  padding-block: .3rem;
  color: #D0D5DD;
  text-decoration: none;
  transition: color var(--rapido);
}
.pie__columna a:hover { color: #FFF; text-decoration: underline; text-underline-offset: 3px; }
.pie__columna a:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; border-radius: 3px; }

.pie__ano {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .8125rem;
  color: #98A2B3;               /* 6.7:1 sobre la tinta */
}
/* Crédito de Interfuse. La marca va con su degradado propio y la palabra en
   Space Grotesk convertida a trazos: se respeta su tipografía sin cargarla. */
.pie__hecho {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-block: .3rem;
  font-size: .8125rem;
  color: #98A2B3;
  text-decoration: none;
  transition: color var(--rapido);
}
.pie__hecho:hover { color: #FFF; }
.pie__hecho:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; border-radius: 4px; }
.pie__interfuse { height: 1.05rem; width: auto; display: block; }

/* ── 15. Motion ────────────────────────────────────────────────────────────
   Los estados ocultos SOLO existen bajo .motion, que el JS añade al <html>
   y únicamente si el visitante no pidió movimiento reducido. Si el JS falla,
   la página se ve completa y quieta.
   ───────────────────────────────────────────────────────────────────────── */
.motion .hero__titulo .linea > span { transform: translateY(125%); }
.motion .hero__firma,
.motion .hero__rotador,
.motion .hero__entrada,
.motion .hero__acciones,
.motion .hero__escena,
.motion .hero__cinta { opacity: 0; transform: translateY(12px); }
.motion .agenda { opacity: 0; transform: translateY(20px) scale(.97); }

.motion .hero.is-listo .hero__titulo .linea > span {
  transform: none;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
}
.motion .hero.is-listo .hero__titulo .linea:nth-child(2) > span { transition-delay: 70ms; }
.motion .hero.is-listo .hero__titulo .linea:nth-child(3) > span { transition-delay: 140ms; }
.motion .hero.is-listo .hero__titulo .linea:nth-child(4) > span { transition-delay: 210ms; }

.motion .hero.is-listo .hero__firma,
.motion .hero.is-listo .hero__rotador,
.motion .hero.is-listo .hero__entrada,
.motion .hero.is-listo .hero__acciones,
.motion .hero.is-listo .hero__escena,
.motion .hero.is-listo .hero__cinta {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.motion .hero.is-listo .agenda {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease-out 520ms, transform .65s cubic-bezier(.16, 1, .3, 1) 520ms;
}
.motion .hero.is-listo .hero__rotador { transition-delay: 200ms; }
.motion .hero.is-listo .hero__entrada { transition-delay: 60ms; }
.motion .hero.is-listo .hero__acciones { transition-delay: 300ms; }
.motion .hero.is-listo .hero__escena { transition-delay: 160ms; }
.motion .hero.is-listo .hero__cinta { transition-delay: 380ms; }

.motion .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .42s ease-out calc(var(--paso, 0) * 55ms),
    transform .52s cubic-bezier(.16, 1, .3, 1) calc(var(--paso, 0) * 55ms);
}
.motion .revelar.is-visible { opacity: 1; transform: none; }
/* ── Vida propia de las demos ─────────────────────────────────────────
   La tabla entra fila por fila, la gráfica crece desde la base y el aro se
   dibuja. Todo cuelga de .is-visible, que ya pone el observador de scroll. */
.motion .hoja__tabla tbody tr {
  opacity: 0;
  transform: translateY(10px);
}
.motion .hoja.is-visible .hoja__tabla tbody tr {
  opacity: 1;
  transform: none;
  transition:
    opacity .4s ease-out calc(var(--f, 0) * 70ms),
    transform .5s cubic-bezier(.16, 1, .3, 1) calc(var(--f, 0) * 70ms);
}
.motion .hoja__tabla .estado { transform: scale(.9); opacity: 0; }
.motion .hoja.is-visible .hoja__tabla .estado {
  transform: none;
  opacity: 1;
  transition:
    transform .35s cubic-bezier(.34, 1.56, .64, 1) calc(220ms + var(--f, 0) * 70ms),
    opacity .3s ease-out calc(220ms + var(--f, 0) * 70ms);
}

.motion .grafica__barra { transform: scaleY(0); }
.motion .correo.is-visible .grafica__barra {
  transform: scaleY(1);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1) calc(160ms + var(--i, 0) * 85ms);
}
.motion .grafica__valor { opacity: 0; }
.motion .correo.is-visible .grafica__valor {
  opacity: 1;
  transition: opacity .3s ease-out calc(420ms + var(--i, 0) * 85ms);
}
.motion .medidor__avance { stroke-dasharray: 0 326.7; }
.motion .correo.is-visible .medidor__avance {
  stroke-dasharray: 73.5 326.7;
  transition: stroke-dasharray 1.05s cubic-bezier(.16, 1, .3, 1) .3s;
}

.motion .revelar.is-saliendo {
  opacity: 0;
  transform: translateY(16px);
  transition-duration: .28s, .28s;
  transition-delay: 0s, 0s;
}

.btn:active { transform: translateY(1px); }

/* ══ Puntos de quiebre ═════════════════════════════════════════════════ */

@media (min-width: 37.5em) {
  .hero__acciones, .cierre__acciones { flex-direction: row; flex-wrap: wrap; }
  .hero__acciones .btn, .cierre__acciones .btn { min-width: 14rem; }
  .cierre__directo { flex-basis: 100%; }
  .correo__cifras { grid-template-columns: repeat(4, 1fr); }
  .cinta { grid-template-columns: repeat(2, 1fr); }
  .habilidades, .sectores, .servicios, .flujo { grid-template-columns: repeat(2, 1fr); }
  .planes { grid-template-columns: repeat(2, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  .cotejo { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .pie__rejilla { grid-template-columns: 1fr auto; align-items: start; }
  .pie__enlaces { grid-auto-flow: column; gap: 1.5rem; }
  .pie__ano { grid-column: 1 / -1; }
}

@media (min-width: 47.5em) {
  .pie__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cotejo__par { grid-template-columns: 1fr 1fr; }
  .condiciones { grid-template-columns: repeat(3, 1fr); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* misma rejilla que .kpis para que los bordes coincidan */
  .tablero__par { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grafica { grid-column: span 2; }
  .tablero { padding: 1.35rem; }
  .servicios { grid-template-columns: repeat(3, 1fr); }
  .flujo { grid-template-columns: repeat(4, 1fr); }
  .sectores { grid-template-columns: repeat(3, 1fr); }

  /* Los frentes se apilan: cada bloque se queda fijo y el siguiente se le monta encima */
  .frente {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    align-items: center;
    border-radius: var(--radio-lg) var(--radio-lg) 0 0;
    /* Dos capas: un filo fino que marca el borde y un halo ancho muy suave */
    box-shadow:
      0 -1px 0 var(--tono-sombra),
      0 -22px 38px -30px var(--tono-sombra);
    /* Vidrio esmerilado: el bloque anterior se adivina debajo mientras sube */
    background: var(--tono-vidrio);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }
  /* Sin backdrop-filter, el color sólido de siempre */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .frente { background: var(--tono-fondo); }
  }
  .frente:first-of-type { border-radius: 0; box-shadow: none; }

  /* Los frentes se leen en zigzag: texto y pieza cambian de lado en cada bloque */
  .frente__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  }
  .frente:nth-child(odd) .frente__texto { order: 2; }
  .frente:nth-child(odd) .frente__visual { order: 1; }
}

@media (min-width: 56.25em) {
  :root { --cab-alto: 4.5rem; }

  .cab__toggle { display: none; }
  .cab__nav, .cab.is-abierta .cab__nav {
    display: flex;
    position: static;
    align-items: center;
    gap: clamp(1.5rem, .5rem + 2vw, 2.5rem);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .cab__lista { display: flex; gap: clamp(1.25rem, .5rem + 1.6vw, 2rem); }
  .cab__lista a { padding: 0; border: 0; font-size: .9375rem; color: var(--gris-texto); transition: color var(--rapido); }
  .cab__lista a:hover { color: var(--tinta); }
  .cab__cta { margin-top: 0; width: auto; min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .875rem; }

  .hero__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "texto escena"
      "cinta cinta";
    column-gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
  }
  .hero__texto { grid-area: texto; }
  .hero__escena { grid-area: escena; margin-top: 0; padding-bottom: 1.5rem; }
  /* La figura de cuerpo entero va recortada libre, sin marco: es una silueta */
  .figura { width: min(16rem, 62%); margin-inline: auto; }
  .figura img { border-radius: 0; box-shadow: none; }
  .figura::before { inset: 10% -34% 6% -34%; }

  /* A la altura de la laptop, a la izquierda de la figura */
  .ver-video {
    position: absolute;
    left: -2.75rem;
    top: 37%;
    z-index: 4;
    margin: 0;
    background: rgba(255, 255, 255, .82);
  }

  .flotante--agenda, .flotante--chat { position: absolute; margin-top: 0; }
  .flotante--agenda { left: -1.5rem; bottom: 6rem; width: 15rem; }
  /* A la altura del brazo con la laptop, no a los pies */
  .flotante--chat { right: -2.5rem; top: 26%; bottom: auto; width: 13.5rem; }

  /* El globo, a la altura de la cabeza y con su colita apuntando a la figura */
  .flotante--idea {
    position: absolute;
    left: -4.5rem;
    top: 0;
    width: 14rem;
    margin: 0;
    border-radius: 22px 22px 6px 22px;
  }
  .flotante--idea::before,
  .flotante--idea::after {
    content: "";
    position: absolute;
    right: 1.4rem;
    border-radius: 50%;
    background: inherit;
    border: 1px solid rgba(255, 255, 255, .7);
  }
  .flotante--idea::before { bottom: -.85rem; width: 14px; height: 14px; }
  .flotante--idea::after { bottom: -1.7rem; right: .8rem; width: 8px; height: 8px; }

  .hero__media { width: min(21rem, 86%); margin-left: auto; }
  .hero__cinta { grid-area: cinta; }
  .hero__titulo { max-width: 13ch; }

  .cinta { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem 0; }
  .cinta__dato { padding-inline: .9rem; }
  .cinta__dato:first-child { padding-left: 0; }
  .cinta__dato + .cinta__dato { border-left: 1px solid var(--linea); }

  .sobre__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    column-gap: clamp(2.5rem, 1rem + 5vw, 5rem);
    align-items: start;
  }
  .confianza { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }

  /* Lienzo a la izquierda, lista de sectores a la derecha */
  .sectores {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: center;
  }
  .lienzo { min-height: 26rem; }
  .habilidades { margin-top: 0; }

  .planes { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  /* La primera etapa es la que lleva el detalle, así que pide más aire */
  .etapas { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; }
  .etapa { min-height: 27rem; }

  /* Texto y acciones a la izquierda; la figura se apoya en la base */
  .cierre { padding-bottom: 0; position: relative; z-index: 1; }
  .cierre__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 1rem + 5vw, 5rem);
    align-items: end;
  }
  .cierre__texto { padding-bottom: var(--seccion-y); }
  .cierre__acciones { flex-direction: row; flex-wrap: wrap; }
  .cierre__acciones .btn { min-width: 0; flex: 1 1 15rem; }

  /* La foto solo aparece donde hay sitio de sobra */
  .cierre__figura {
    position: relative;
    display: block;
    margin: 0;
    justify-self: center;
    align-self: end;
    width: min(22rem, 100%);
    /* que la base del taburete se apoye sobre la línea del pie */
    margin-bottom: -1.5rem;
  }
  .cierre__figura img { display: block; width: 100%; height: auto; }
  .cierre__tarjeta {
    position: absolute;
    left: -3.25rem;
    bottom: 40%;
    width: 15.5rem;
  }

  .pie__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; }
  .pie__columnas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__ano { grid-column: 1 / -1; }

  .faq__pregunta { font-size: 1.125rem; }
}

/* La cenefa se acomoda en una línea: rótulo + texto a la izquierda,
   acción a la derecha. */
@media (min-width: 56.25em) {
  .cenefa__rejilla {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titulo accion"
      "texto  accion";
    align-items: center;
    column-gap: clamp(2rem, 1rem + 3vw, 4rem);
    row-gap: .35rem;
  }
  .cenefa__titulo { grid-area: titulo; }
  .cenefa__texto  { grid-area: texto; max-width: none; }
  .cenefa__accion { grid-area: accion; align-self: center; }
}

/* Con la tarjeta del correo a ancho completo el medidor no necesita crecer:
   el sobrante se lo queda la gráfica. */
@media (min-width: 62em) {
  .pendientes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* con más ancho, las barras crecen a lo alto en vez de engordar */
  .grafica__barras { height: 10rem; gap: 1.25rem; }
  .grafica__barra { max-width: 5rem; margin-inline: auto; }
}

/* ── Impresión ─────────────────────────────────────────────────────────── */
@media print {
  .motion .revelar,
  .motion .hero__firma, .motion .hero__rotador, .motion .hero__entrada,
  .motion .hero__acciones, .motion .hero__escena, .motion .hero__cinta, .motion .agenda {
    opacity: 1 !important;
    transform: none !important;
  }
  .motion .hero__titulo .linea > span { transform: none !important; }
  .cab { position: static; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* El apilado desorienta a quien pidió menos movimiento: se vuelve una lista normal */
  .frente { position: static; min-height: 0; box-shadow: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}