/* ==========================================================================
   KOREVUX — Hoja de estilos
   Mobile-first · sin frameworks · sin dependencias externas

   Acento de marca: #A1D705, tomado del logo (H75 · S95 · L43).
   Contraste sobre negro: 12,2:1 — muy por encima del mínimo AA.

   Índice
   01. Tokens y reset
   02. Tipografía y utilidades
   03. Botones e iconos
   04. Header y navegación
   05. Hero
   06. Video (agente IA)
   07. Secciones genéricas
   08. Anclas heredadas
   09. Tarjetas de situaciones
   11. Servicios
   12. Etapas del método
   13. Casos de éxito
   14. Historia
   15. Planes
   16. FAQ (accordion)
   17. Formulario de diagnóstico
   18. CTA final
   19. Footer
   20. WhatsApp flotante
   21. Animaciones y preferencias de movimiento
   ========================================================================== */

/* ==========================================================================
   01. TOKENS Y RESET
   ========================================================================== */
:root {
  /* Marca */
  --lime: #A1D705;
  --lime-bright: #B6EE1F;
  --lime-dim: #6E9403;
  --lime-glow: rgba(161, 215, 5, .16);
  --lime-faint: rgba(161, 215, 5, .08);

  /* Superficies */
  --bg: #050505;
  --bg-alt: #0A0B0B;
  --surface: #0E1011;
  --surface-2: #16181A;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  /* Texto */
  --white: #F5F6F5;
  --text: #DFE2E0;
  --muted: #9A9CA1;
  --muted-dim: #6C6F74;
  --danger: #FF6B6B;

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --radius: 14px;
  --radius-lg: 20px;
  --gutter: 20px;
  --section-y: clamp(72px, 9vw, 128px);

  /* Proporción del video del agente IA.
     El archivo actual es vertical 1080×1920 (9:16).
     Si sustituyes el video por uno horizontal, cambia este valor a 16 / 9. */
  --video-aspect: 9 / 16;

  --header-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --header-h: 84px; }
}

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

/* El navegador oculta [hidden] con `display:none`, pero cualquier regla propia
   con `display` (grid, flex…) tiene más especificidad y lo anula. Sin esto,
   los elementos que el JS oculta con `hidden` seguirían viéndose:
   el aviso del video, los controles y la confirmación del formulario. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--lime); color: #050505; }

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

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--lime); color: #050505;
  padding: 12px 18px; border-radius: 8px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   02. TIPOGRAFÍA Y UTILIDADES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(1.65rem, 4.2vw, 2.75rem); }
.section-head .lead { margin-top: 16px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lime);
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Símbolo de marca: una trayectoria que atraviesa el límite que la frenaba.
   Dice "liberamos" —destrabar algo detenido— y no "lanzamos", que es lo que
   comunica un cohete. Korevux no lanza negocios nuevos: destraba los que ya
   existen, que es justo el método (diagnóstico → cuello de botella → salida).
   -------------------------------------------------------------------------- */
.mark-liberar {
  width: 1.75em; height: 1.75em;
  flex: 0 0 auto;
  vertical-align: -.5em;
  margin-right: .18em;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
/* El límite en gris y la salida en verde: así se lee qué rompe a qué. */
.mark-liberar .mk-limite { stroke: var(--muted-dim); }
.mark-liberar .mk-salida,
.mark-liberar .mk-punta  { stroke: var(--lime); }

.eyebrow-claim { display: inline-flex; align-items: center; gap: .1em; }
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px var(--lime-faint);
  flex: none;
}

/* El claim de marca no lleva punto delante: sus tres palabras se separan
   con los mismos «·», todos del mismo tamaño. */
.eyebrow-claim { letter-spacing: .18em; }
.claim-text { line-height: 1.7; }
.claim-br { display: none; }
@media (max-width: 599px) {
  .claim-sep { display: none; }
  .claim-br { display: inline; }
}

.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--muted); }
.note { font-size: .92rem; color: var(--muted-dim); }

.closing-line {
  margin-top: clamp(32px, 4vw, 48px);
  padding-left: 20px;
  border-left: 2px solid var(--lime);
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: var(--white);
  max-width: 760px;
}

.accent { color: var(--lime); }

.section-cta { margin-top: clamp(36px, 5vw, 56px); }
.section-cta.center, .center { display: flex; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   03. BOTONES E ICONOS
   ========================================================================== */
.btn {
  --btn-py: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--btn-py) 26px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: .97rem; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--lime); color: #050505; }
.btn-primary:hover { background: var(--lime-bright); box-shadow: 0 8px 28px -10px var(--lime-glow); }

.btn-ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); background: var(--lime-faint); }

.btn-quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet:hover { color: var(--white); border-color: var(--line-strong); }

.btn-sm { --btn-py: 10px; padding-inline: 18px; min-height: 42px; font-size: .9rem; }

.btn .ico { width: 19px; height: 19px; fill: currentColor; flex: none; }

/* ==========================================================================
   04. HEADER Y NAVEGACIÓN
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(5, 5, 5, .72);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(140%); }
}
.site-header.is-scrolled {
  background: rgba(5, 5, 5, .92);
  border-bottom-color: var(--line);
}

.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.brand { display: inline-flex; align-items: center; flex: none; }
/* El logo es un lockup completo (marca + wordmark + claim), más alto que
   ancho respecto al anterior. Estas alturas le dan un peso visual parecido
   sin que el claim quede ilegible. */
/* El logo ya no lleva el lema debajo: a igual altura CSS, el KX saldría un
   28 % más grande. Estas alturas lo dejan algo mayor que antes, sin descuadrar
   la cabecera. */
.brand-logo { width: auto; height: 40px; }
@media (min-width: 720px) { .brand-logo { height: 48px; } }

.nav-list { display: none; }
.nav-cta { display: none; }

@media (min-width: 1040px) {
  .nav { display: flex; align-items: center; gap: 28px; }
  .nav-list { display: flex; align-items: center; gap: 26px; }
  .nav-list a {
    position: relative;
    font-size: .93rem; font-weight: 500; color: var(--text);
    padding-block: 6px;
    transition: color .2s var(--ease);
  }
  .nav-list a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--lime);
    transition: right .25s var(--ease);
  }
  .nav-list a:hover, .nav-list a.is-current { color: var(--white); }
  .nav-list a:hover::after, .nav-list a.is-current::after { right: 0; }
  .nav-cta { display: inline-flex; }
}

.menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
}
.menu-toggle span {
  display: block; height: 2px; width: 100%; background: var(--white);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1040px) { .menu-toggle { display: none; } }

/* Panel móvil */
@media (max-width: 1039px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--bg);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 28px;
    display: grid; gap: 4px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav-list { display: grid; }
  .nav-list a {
    display: block; padding: 15px 4px;
    font-size: 1.02rem; font-weight: 500;
    border-bottom: 1px solid var(--line);
  }
  .nav-cta { display: inline-flex; margin-top: 20px; width: 100%; }
}

/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(64px, 8vw, 110px);
  overflow: hidden;
}
.hero-glow {
  position: absolute; top: -220px; left: 50%; translate: -50% 0;
  width: min(1000px, 130vw); height: 620px;
  background: radial-gradient(ellipse at center, var(--lime-glow), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
}

/* Hero a una columna, centrado: la prueba visual la aporta el video de la
   sección siguiente, así que aquí manda el mensaje y la llamada a la acción. */
.hero-grid {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.hero-copy .eyebrow { justify-content: center; }
.hero-lead { margin-inline: auto; }
.hero-actions { justify-content: center; }

.hero-title {
  font-size: clamp(2.3rem, 7.4vw, 4.2rem);
  line-height: 1.03;
  margin-bottom: 24px;
}
.hero-lead {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: var(--muted);
  max-width: 58ch;
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 4vw, 38px);
}
@media (max-width: 460px) { .hero-actions .btn { width: 100%; } }

/* En pantallas estrechas la lista se alinea a la izquierda dentro de un
   bloque centrado: apilada y centrada línea a línea quedaría irregular. */
.hero-meta {
  display: grid; gap: 10px; justify-items: start;
  width: fit-content;
  margin: clamp(30px, 4vw, 42px) auto 0;
  padding-top: clamp(26px, 3vw, 32px);
  border-top: 1px solid var(--line);
  text-align: left;
}
@media (min-width: 800px) {
  .hero-meta {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px 30px; max-width: 780px;
  }
}
.hero-meta li {
  position: relative; padding-left: 20px;
  font-size: .9rem; color: var(--muted);
}
.hero-meta li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--lime);
}

/* ==========================================================================
   06. VIDEO (AGENTE IA)
   ========================================================================== */
.video-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .video-grid { grid-template-columns: 1fr minmax(300px, 380px); }
}

.video-copy h2 { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
.video-copy .lead { margin-top: 14px; }
.video-copy .note {
  margin-top: 24px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px;
}

.video-frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: var(--video-aspect);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
/* object-fit: contain garantiza que el video nunca se deforme,
   sea cual sea la proporción del archivo que se coloque. */
.video-el {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

.video-placeholder {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 28px; text-align: center;
  background: var(--surface);
  color: var(--muted);
  font-size: .88rem;
}
.video-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--lime);
  overflow-wrap: anywhere;
}
.vp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 6px var(--lime-faint);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Chat animado del agente IA.
   Sustituye al video: mismo marco, misma proporción vertical, pero es texto
   real — pesa unos 6 KB en lugar de 2,9 MB, se lee nítido en cualquier
   pantalla y para cambiar un mensaje basta con editar index.html.
   -------------------------------------------------------------------------- */
.chat-demo {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  font-size: .84rem;
}

/* Cabecera: quién atiende. Decir "Asistente virtual" es deliberado —
   el prospecto debe saber que habla con una IA. */
.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex: 0 0 auto;
}
.chat-avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lime); color: #0B0C07;
  font-weight: 700; font-size: .9rem;
}
.chat-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.chat-who strong { color: var(--white); font-size: .9rem; }
.chat-who span { color: var(--muted); font-size: .72rem; }
.chat-live {
  margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px var(--lime-faint);
}

.chat-stream {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 8px;
  margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}

/* Cada burbuja empieza oculta y el script las va revelando.
   Sin JavaScript se muestran todas de golpe (ver el <noscript> del HTML),
   para que la conversación siga siendo legible. */
.msg { display: none; max-width: 84%; }
.msg.is-shown {
  display: flex; flex-direction: column; gap: 4px;
  animation: msgIn .24s var(--ease) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.msg p {
  margin: 0;
  padding: 9px 12px;
  border-radius: 14px;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.msg-time {
  font-size: .66rem; color: var(--muted-dim);
  padding-inline: 4px;
}

/* Entrante: el prospecto. Alineado a la izquierda, gris. */
.msg-in { align-self: flex-start; }
.msg-in p { background: var(--surface-2); border-bottom-left-radius: 5px; }

/* Saliente: el agente. Alineado a la derecha, con el verde de marca
   en un tono apagado para que el texto blanco siga siendo legible. */
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-out p {
  background: rgba(78, 106, 2, .5);
  border: 1px solid var(--lime-glow);
  border-bottom-right-radius: 5px;
}
.msg-out .msg-time { color: var(--muted); }

.msg-name {
  font-size: .68rem; color: var(--lime);
  padding-inline: 4px; letter-spacing: .02em;
}

/* Indicador de "escribiendo…". Sólo aparece antes de los mensajes del
   agente: el prospecto escribe desde su propio teléfono. */
.chat-typing {
  display: flex; gap: 4px; align-items: center;
  align-self: flex-start;
  margin: 0 14px 10px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-radius: 14px; border-bottom-left-radius: 5px;
  flex: 0 0 auto;
}
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: typingDot 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Cierre: la conversación animada termina empujando al chat real.
   Ahí el prospecto deja de ser anónimo y queda un número al que escribir. */
.chat-end {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  flex: 0 0 auto;
}
.chat-end .btn { flex: 1 1 auto; justify-content: center; }
.chat-replay {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.chat-replay:hover { color: var(--lime); border-color: var(--lime-glow); }
.chat-replay svg { width: 17px; height: 17px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .msg.is-shown { animation: none; }
  .chat-typing span { animation: none; opacity: .5; }
  .chat-stream { scroll-behavior: auto; }
}

/* Barra de desplazamiento discreta dentro del chat: la barra ancha del
   sistema rompe la ilusión de estar viendo un teléfono. */
.chat-stream { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.chat-stream::-webkit-scrollbar { width: 4px; }
.chat-stream::-webkit-scrollbar-track { background: transparent; }
.chat-stream::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 2px;
}

/* Cursor mientras Sofía escribe. La barra parpadeante es lo que hace que se
   lea como "lo está escribiendo ahora" y no como "el texto apareció". */
.msg p.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--lime);
  animation: cursorChat .8s steps(1) infinite;
}
@keyframes cursorChat { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .msg p.is-typing::after { animation: none; }
}

/* Resumen de lo que ocurre en el video */
.video-beats { display: grid; gap: 12px; margin-top: 26px; }
.video-beats li {
  display: flex; align-items: center; gap: 14px;
  font-size: .95rem; color: var(--text);
}
.beat-num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px;
  border: 1px solid rgba(161, 215, 5, .45);
  border-radius: 50%;
  font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: .72rem;
  color: var(--lime);
}

.video-controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 8px;
}
.video-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: rgba(5, 5, 5, .78);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .video-btn { backdrop-filter: blur(8px); }
}
.video-btn svg { width: 20px; height: 20px; fill: var(--white); }
.video-btn:hover { border-color: var(--lime); }
.video-btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); }
.video-btn[aria-pressed="true"] svg { fill: #050505; }

/* El botón alterna entre el icono de pausa y el de reproducción */
#videoPlay .ico-play { display: none; }
#videoPlay[aria-pressed="false"] .ico-pause { display: none; }
#videoPlay[aria-pressed="false"] .ico-play { display: block; }

/* ==========================================================================
   08. ANCLAS HEREDADAS
   Mantienen vivos los enlaces del sitio anterior (#antes-despues, #proceso)
   aunque esas secciones ahora estén fusionadas en otras.
   ========================================================================== */
.anchor-alias {
  display: block; position: relative;
  top: calc((var(--header-h) + 16px) * -1);
  height: 0; visibility: hidden;
}

/* ==========================================================================
   10. TARJETAS DE SITUACIONES
   ========================================================================== */
.cards-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
/* Seis tarjetas: tres columnas en escritorio dejan dos filas completas. */
@media (min-width: 1040px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.card:hover {
  border-color: rgba(161, 215, 5, .4);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.card h3 { font-size: 1rem; line-height: 1.3; font-weight: 600; }
.card p { font-size: .89rem; color: var(--muted); }

/* A partir de tablet las tarjetas vuelven a respirar */
@media (min-width: 640px) {
  .card { padding: 28px 24px 30px; gap: 12px; }
  .card h3 { font-size: 1.02rem; line-height: 1.35; }
  .card p { font-size: .92rem; }
}

/* ==========================================================================
   11b. PROYECTOS Y TESTIMONIOS
   ========================================================================== */
.projects { display: grid; gap: 18px; }
@media (min-width: 760px) { .projects { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
/* Tres proyectos: tres columnas en escritorio, sin tarjeta huérfana. Con
   cuatro, quita esta línea para volver a 2×2. */
@media (min-width: 1100px) { .projects { grid-template-columns: repeat(3, 1fr); } }

.project {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.project:hover { border-color: rgba(161, 215, 5, .4); }

/* 16:10, la proporción de una pantalla de portátil: la captura se ve entera. */
.project-shot {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.project-shot.is-empty {
  display: grid; place-items: center;
  color: var(--muted-dim); font-size: .85rem;
}

.project-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; flex: 1; }
.project-type {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime);
}
.project h3 { font-size: 1.15rem; line-height: 1.3; }
.project-sector { font-size: .85rem; color: var(--muted-dim); margin-top: -4px; }
.project-body > p:not(.project-type):not(.project-sector) { font-size: .93rem; color: var(--muted); }
.project-link {
  margin-top: auto; padding-top: 8px;
  font-size: .9rem; font-weight: 600; color: var(--lime);
}
.project-link::after { content: " ↗"; }
.project-link:hover { color: var(--lime-bright); text-decoration: underline; text-underline-offset: 3px; }

/* auto-fit: con dos testimonios, dos columnas iguales; con tres, tres. Nunca
   queda una columna vacía. */
.testimonials {
  display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.testimonial {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0; padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Con un solo testimonio, ocupa el ancho de una lectura cómoda en vez de
   quedarse en un tercio de la fila. */
.testimonial:only-of-type { grid-column: 1 / -1; max-width: 760px; }
.testimonial:only-of-type blockquote p { font-size: 1.08rem; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { color: var(--text); font-size: .98rem; line-height: 1.6; }
.testimonial figcaption { margin-top: auto; display: grid; gap: 2px; }
.testimonial figcaption strong { color: var(--white); font-size: .95rem; }
.testimonial figcaption span { color: var(--muted); font-size: .85rem; }

/* Estrellas: cinco caracteres ★ rellenos de verde hasta --rating/5 del
   ancho. Basta con cambiar el número (admite 4.5) para cambiar la nota. */
.stars { margin: 0; line-height: 1; font-size: 1.1rem; letter-spacing: 3px; }
.stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--lime) calc(var(--rating, 5) / 5 * 100%), var(--line-strong) 0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ==========================================================================
   12. SERVICIOS
   ========================================================================== */
/* Las cuatro líneas de servicio. Una columna en móvil, dos en tablet y
   cuatro en escritorio: con cuatro tarjetas no queda ninguna huérfana. */
.services { display: grid; gap: 14px; }
@media (min-width: 700px)  { .services { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .services { grid-template-columns: repeat(4, 1fr); } }

.service {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.service:hover { border-color: rgba(161, 215, 5, .4); background: var(--surface-2); }

/* Con varias columnas, las tarjetas comparten filas (subgrid): así la
   línea que separa descripción y ejemplos cae a la misma altura en todas.
   Los navegadores sin subgrid se quedan con el flex de arriba. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .service {
      display: grid; grid-row: span 5;
      grid-template-rows: subgrid; row-gap: 12px;
      align-content: start;
    }
  }
}

/* Mismo trazo que el símbolo del hero, para que los iconos sean de la familia. */
.service-ico {
  width: 30px; height: 30px; margin-bottom: 4px;
  fill: none; stroke: var(--lime);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.service h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 600; }
.service > p { font-size: .92rem; color: var(--muted); }

.service-points {
  display: grid; gap: 8px; align-content: start;
  margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.service-points li {
  position: relative; padding-left: 16px;
  font-size: .88rem; color: var(--text);
}
.service-points li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); opacity: .8;
}

/* margin-top:auto la pega al fondo: los cuatro pies quedan alineados
   aunque las tarjetas tengan textos de distinta longitud. */
.service-link {
  margin-top: auto; padding-top: 6px;
  font-size: .88rem; font-weight: 600; color: var(--lime);
}
.service-link::after { content: ' ↓'; }
.service-link:hover { color: var(--lime-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   13. ETAPAS DEL MÉTODO
   ========================================================================== */
.stages { display: grid; gap: 0; border-top: 1px solid var(--line); }

.stage {
  display: grid; gap: 8px;
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .stage { grid-template-columns: 140px 1fr; gap: 32px; align-items: start; }
}
.stage-num {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--lime);
  letter-spacing: -.02em;
}
.stage h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: 10px; }
.stage p { color: var(--muted); max-width: 66ch; }

.stage-points { display: grid; gap: 8px; margin-top: 16px; }
.stage-points li {
  position: relative; padding-left: 22px;
  font-size: .92rem; color: var(--white); font-weight: 500;
}
.stage-points li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--lime);
}

/* ==========================================================================
   15. CASOS DE ÉXITO
   ========================================================================== */
.cases { display: grid; gap: 20px; }
@media (min-width: 860px) { .cases:has(.case) { grid-template-columns: repeat(2, 1fr); } }

.case-empty {
  grid-column: 1 / -1;
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(32px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(161, 215, 5, .045), transparent 55%),
    var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.case-empty-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: var(--white);
}
.case-empty p:not(.case-empty-title) { color: var(--muted); max-width: 60ch; }
.case-empty .btn { margin-top: 10px; }

.case {
  display: grid; gap: 20px;
  padding: 30px 26px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.case-head { display: flex; align-items: center; gap: 16px; }
.case-logo { width: auto; height: 34px; object-fit: contain; }
.case-client { font-size: 1.15rem; }
.case-sector { font-size: .85rem; color: var(--muted); }
.case-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.case-body { display: grid; gap: 4px; margin: 0; }
.case-body dt {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime); margin-top: 14px;
}
.case-body dd { margin: 0; color: var(--muted); font-size: .94rem; }
.case-metric {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.case-metric strong {
  font-family: 'Fraunces', Georgia, serif; font-size: 2rem; color: var(--lime);
}
.case-metric span { font-size: .88rem; color: var(--muted); }
.case-quote { margin: 0; padding-left: 18px; border-left: 2px solid var(--lime); }
.case-quote p { color: var(--white); font-style: italic; }
.case-quote cite { font-style: normal; font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   16. HISTORIA
   ========================================================================== */
.story-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .story-grid { grid-template-columns: .8fr 1.2fr; } }

.story-media { margin: 0; }
.story-media img {
  width: 100%;
  /* La foto actual es horizontal (682×511). Si la sustituyes por un retrato
     vertical, cambia esta proporción a 4 / 5. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 32%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.story-caption {
  display: grid; gap: 2px;
  margin-top: 16px; padding-left: 16px;
  border-left: 2px solid var(--lime);
}
.story-caption strong {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 1rem; color: var(--white);
}
.story-caption span { font-size: .85rem; color: var(--muted); }

.story-copy p { color: var(--muted); margin-bottom: 18px; max-width: 68ch; }
.story-quote {
  margin: 28px 0 0; padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  border-radius: 0 12px 12px 0;
}
.story-quote p {
  margin: 0; color: var(--white);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.45;
}

/* ==========================================================================
   17. PLANES
   ========================================================================== */
.plans { display: grid; gap: 16px; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: grid; gap: 14px; align-content: start;
  padding: 32px 26px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan-placeholder { min-height: 210px; align-content: center; gap: 12px; border-style: dashed; }
.plan-ghost {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2), rgba(255,255,255,.05), var(--surface-2));
}
.plan-ghost.short { width: 55%; }

.plan-name { font-size: 1.25rem; }
.plan-desc { color: var(--muted); font-size: .93rem; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 2.2rem; color: var(--white); }
.plan-period { color: var(--muted); font-size: .9rem; }
.plan-features { display: grid; gap: 10px; }
.plan-features li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--muted); }
.plan-features li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 10px; height: 1px; background: var(--lime);
}

/* ==========================================================================
   18. FAQ (ACCORDION)
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-heading { margin: 0; font-size: inherit; font-weight: inherit; }

.acc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(.98rem, 1.9vw, 1.1rem);
  line-height: 1.4; color: var(--white); text-align: left;
  transition: color .2s var(--ease);
}
.acc-trigger:hover { color: var(--lime); }

.acc-icon {
  position: relative; flex: none;
  width: 20px; height: 20px;
}
.acc-icon::before, .acc-icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--lime);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.acc-icon::before { width: 14px; height: 2px; translate: -50% -50%; }
.acc-icon::after  { width: 2px; height: 14px; translate: -50% -50%; }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }

.acc-panel { padding: 0 4px 26px; }
.acc-panel p { color: var(--muted); max-width: 68ch; }

.faq-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: clamp(36px, 5vw, 52px);
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq-foot p { font-weight: 600; color: var(--white); }
@media (max-width: 520px) { .faq-foot .btn { width: 100%; } }

/* ==========================================================================
   19. FORMULARIO DE DIAGNÓSTICO
   ========================================================================== */
.section-form { background: var(--bg-alt); border-block: 1px solid var(--line); }

.form-card {
  padding: clamp(26px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.steps-bar { margin-bottom: 12px; }
.steps-track {
  display: block; height: 3px; border-radius: 3px;
  background: var(--line-strong); overflow: hidden;
}
.steps-fill {
  display: block; height: 100%; width: 33.33%;
  background: var(--lime);
  transition: width .35s var(--ease);
}
.steps-label {
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 28px;
}

.step { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.step[hidden] { display: none; }

.field { display: grid; gap: 8px; }
.field label {
  font-size: .9rem; font-weight: 600; color: var(--white);
}
.req { color: var(--lime); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  min-height: 50px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--white);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dim); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.26); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--lime-faint);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239A9CA1' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 42px;
}
.field select option { background: var(--surface); color: var(--white); }

.field .hint { font-size: .82rem; color: var(--muted-dim); }
.field .err { font-size: .84rem; color: var(--danger); font-weight: 500; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); }

.step-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px;
}
.step-actions .btn { flex: 1 1 auto; min-width: 150px; }
.js-prev { flex: 0 1 auto; }

.form-legal { font-size: .82rem; color: var(--muted-dim); }

/* --------------------------------------------------------------------------
   Casillas de frustración (paso 3 del diagnóstico).
   Se presentan como opciones pulsables, no como una lista de casillas
   sueltas: el área de toque completa hace la diferencia en el móvil, que es
   donde se rellena la mayoría de los formularios.
   -------------------------------------------------------------------------- */
.checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks > legend {
  padding: 0 0 12px;
  color: var(--white);
  font-size: .95rem;
  font-weight: 500;
}
.checks > legend .hint {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 400;
  margin-left: 6px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.check:hover { border-color: var(--line-strong); }

.check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.check:has(input:checked) {
  border-color: var(--lime);
  background: var(--lime-faint);
}
.check:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Cuando ya hay dos elegidas, el resto se atenúa. Se ve por qué no
   responden, en vez de parecer que la página se ha roto. */
.check.is-blocked {
  opacity: .42;
  cursor: not-allowed;
}
.check.is-blocked input { cursor: not-allowed; }

/* «¿Qué necesitas?»: cuatro opciones cortas, en 2×2 a partir de tablet. */
@media (min-width: 560px) {
  .needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .needs .check { margin-bottom: 0; }
}
.needs > legend .hint { display: block; margin: 4px 0 0; }

/* Paso 4: una frase que dice para qué se piden los datos. */
.step-intro { margin: 0 0 18px; color: var(--white); font-weight: 500; }

/* Qué recibe el cliente: justo encima del formulario, es el gancho. */
.diag-offer {
  margin: 0 0 clamp(24px, 3vw, 32px); padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--lime); border-radius: 0 var(--radius) var(--radius) 0;
}
.diag-offer-title { margin: 0; color: var(--white); font-weight: 600; }
.diag-offer .video-beats { margin-top: 16px; }
.field.is-invalid .needs .check { border-color: rgba(255, 107, 107, .45); }

/* Texto de ayuda bajo un campo: aclara qué se espera sin cargar la etiqueta. */
.field-help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.form-error {
  margin-top: 20px; padding: 14px 16px;
  background: rgba(255, 107, 107, .08);
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: 10px;
  color: #FFB3B3; font-size: .92rem;
}

#submitBtn { position: relative; }
.spinner { display: none; width: 17px; height: 17px; flex: none; }
#submitBtn.is-loading .spinner {
  display: block;
  border: 2px solid rgba(5, 5, 5, .25);
  border-top-color: #050505;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success {
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(8px, 2vw, 16px) 0;
}
.form-success h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.form-success p { color: var(--muted); max-width: 56ch; }
.form-success .check {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--lime);
}
.form-success .check::after {
  content: ''; width: 15px; height: 8px;
  border-left: 2.5px solid #050505; border-bottom: 2.5px solid #050505;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* ==========================================================================
   20. CTA FINAL
   ========================================================================== */
.final-cta {
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 10vw, 130px);
  text-align: center;
}
.final-glow {
  position: absolute; left: 50%; bottom: -300px; translate: -50% 0;
  width: min(900px, 130vw); height: 560px;
  background: radial-gradient(ellipse at center, var(--lime-glow), transparent 70%);
  filter: blur(40px); pointer-events: none;
}
.final-inner { position: relative; }
.final-cta h2 { font-size: clamp(1.9rem, 5.4vw, 3.2rem); }
.final-cta .lead { margin: 18px auto 0; max-width: 58ch; }
.final-cta .hero-actions { justify-content: center; }

.signature {
  margin-top: clamp(38px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 36px);
  border-top: 1px solid var(--line);
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: .95rem; color: var(--lime);
  letter-spacing: .01em;
}

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); }

.footer-grid {
  display: grid; gap: clamp(32px, 4vw, 48px);
  padding-block: clamp(48px, 6vw, 72px);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer-logo { width: auto; height: 64px; }
.footer-tagline {
  margin-top: 14px;
  font-size: .84rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime);
}

.footer-title {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 18px;
}
.footer-nav ul, .footer-contact ul { display: grid; gap: 11px; }
.footer-nav a, .footer-contact a {
  font-size: .93rem; color: var(--muted);
  transition: color .2s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--lime); }

.footer-bottom {
  padding-block: 26px;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted-dim);
}

/* ==========================================================================
   22. WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float {
  position: fixed; z-index: 90;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px;
  background: var(--lime); color: #050505;
  border-radius: 999px;
  font-weight: 600; font-size: .93rem;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .95), 0 0 0 1px rgba(5, 5, 5, .2);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.wa-float:hover { background: var(--lime-bright); transform: translateY(-2px); }

/* Mientras el hero está en pantalla el botón flotante se retira: ahí ya hay
   un «Hablar por WhatsApp» a la vista y, en móvil, el flotante tapaba el
   final de la última línea de la lista del hero. Lo controla main.js; si el
   JS no llega a ejecutarse, el botón se queda visible como hasta ahora. */
.wa-float {
  transition: transform .25s var(--ease), background-color .2s var(--ease),
              opacity .25s var(--ease), visibility .25s var(--ease);
}
.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.94);
}

/* ---------------------------------------------------------------------------
   Distintivo de Netlify
   Netlify inyecta en el sitio publicado un <iframe id="nl-badge-frame"> fijo
   con z-index 2147483645 (el máximo), que se coloca por encima de todo
   —incluido el botón de WhatsApp— en la esquina inferior derecha.
   No forma parte de este proyecto: lo añade el hosting al desplegar.

   También puedes desactivarlo en el panel de Netlify, en la configuración del
   proyecto. Esta regla lo resuelve igualmente, esté como esté ese ajuste.
   --------------------------------------------------------------------------- */
#nl-badge-frame { display: none !important; }

.wa-float svg { width: 24px; height: 24px; fill: #050505; flex: none; }

@media (max-width: 620px) {
  .wa-float { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float-label { display: none; }
}

/* Deja espacio para que el botón flotante no tape el final del formulario
   ni el último bloque del footer. */
@media (max-width: 900px) {
  .section-form .form-card { padding-bottom: 88px; }
  .footer-bottom { padding-bottom: 88px; }
}

/* ==========================================================================
   23. ANIMACIONES Y PREFERENCIAS DE MOVIMIENTO
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; }

/* Escalonado suave dentro de grids */
.cards-grid [data-reveal]:nth-child(2),
.value-grid [data-reveal]:nth-child(2) { transition-delay: .06s; }
.cards-grid [data-reveal]:nth-child(3),
.value-grid [data-reveal]:nth-child(3) { transition-delay: .12s; }
.cards-grid [data-reveal]:nth-child(4),
.value-grid [data-reveal]:nth-child(4) { transition-delay: .18s; }

/* Sin JS: nada queda invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Impresión: legible y sin elementos flotantes */
@media print {
  .site-header, .wa-float, .video-frame, .hero-glow, .final-glow { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}

/* ==========================================================================
   22. PÁGINAS SIMPLES (opinion.html, opinion-gracias.html)
   ========================================================================== */
.page-simple .section { padding-block: clamp(36px, 6vw, 72px); }
.simple-brand { display: inline-block; margin-bottom: clamp(28px, 4vw, 44px); }
.simple-brand img { width: auto; height: 48px; }
.simple-title { font-size: clamp(1.65rem, 4.2vw, 2.5rem); }

/* Valoración con estrellas. Los radios van de 5 a 1 en el HTML y la fila se
   invierte: así «~» ilumina la estrella elegida y todas las de su izquierda. */
.rating { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.rating input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; padding: 0; border: 0;
}
.rating label {
  cursor: pointer; line-height: 1;
  font-size: 2.1rem; color: var(--line-strong);
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.rating label::before { content: "★"; }
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label { color: var(--lime); }
.rating label:hover { transform: scale(1.08); }
.rating input:focus-visible + label { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.page-simple form { display: grid; gap: 22px; }

/* ==========================================================================
   22. REDISEÑO · OCTUBRE 2026
   Cambios de la revisión "anti-IA" (ver revision-anti-ia.md). Van al final
   para que se lean juntos y se puedan quitar de una vez si hiciera falta.
   - Títulos en Fraunces (serif editorial) con la palabra clave en cursiva.
   - Hero a dos columnas con capturas de trabajos reales y chispas verdes.
   - Soluciones en "bento": tarjetas de distintos tamaños.
   - Situaciones como lista numerada, no como seis tarjetas iguales.
   ========================================================================== */

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
}
h1, h2 { font-weight: 500; letter-spacing: -.025em; }
.accent, em.accent {
  font-style: italic;
  font-weight: 400;
  color: var(--lime);
}
.section-head h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; }

/* ---------- Hero ---------- */
.hero { isolation: isolate; }
.hero-sparks {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-grid {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  display: grid;
}
.hero-copy .eyebrow { justify-content: center; }
.hero-lead { margin-inline: auto; }
.hero-actions { justify-content: center; }
.hero-title {
  font-size: clamp(2.35rem, 6.2vw, 4.1rem);
  line-height: 1.02;
}
.eyebrow-claim { letter-spacing: .14em; }
.hero-meta {
  margin-inline: auto;
  justify-items: start;
}
@media (min-width: 800px) {
  .hero-meta { display: grid; justify-content: center; gap: 10px; }
}

/* Capturas de proyectos reales, en abanico */
.hero-shots {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}
.hero-shot {
  position: absolute;
  width: 78%;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  background: var(--surface);
  transition: transform .5s var(--ease);
}
.hero-shot-1 { left: 0;    top: 4%;  transform: rotate(-5deg); z-index: 1; }
.hero-shot-2 { right: 0;   top: 0;   transform: rotate(4deg);  z-index: 2; }
.hero-shot-3 { left: 11%;  bottom: 6%; transform: rotate(-1deg); z-index: 3; }
.hero-shots:hover .hero-shot-1 { transform: rotate(-7deg) translateX(-8px); }
.hero-shots:hover .hero-shot-2 { transform: rotate(6deg) translateX(8px); }
.hero-shots:hover .hero-shot-3 { transform: rotate(0deg) translateY(-6px); }
.hero-shots-label {
  position: absolute; left: 0; right: 0; bottom: -8px;
  text-align: center;
  font-size: .8rem; color: var(--muted);
}
.hero-shots-label em { font-family: 'Fraunces', Georgia, serif; color: var(--text); }
@media (max-width: 979px) {
  .hero-shots { max-width: 440px; }
}

/* ---------- Soluciones en bento ---------- */
.services .service { display: flex; grid-row: auto; }
@media (min-width: 700px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .services .service:nth-child(1),
  .services .service:nth-child(4) { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .services { grid-template-columns: repeat(6, 1fr); }
  .services .service:nth-child(1),
  .services .service:nth-child(4) { grid-column: span 4; }
  .services .service:nth-child(2),
  .services .service:nth-child(3) { grid-column: span 2; }
}
/* Las tarjetas anchas: título grande y ejemplos en dos columnas */
@media (min-width: 700px) {
  .services .service:nth-child(1),
  .services .service:nth-child(4) { padding: 34px 32px; }
  .services .service:nth-child(1) h3,
  .services .service:nth-child(4) h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; }
  .services .service:nth-child(1) > p,
  .services .service:nth-child(4) > p { font-size: 1rem; max-width: 52ch; }
  .services .service:nth-child(1) .service-points,
  .services .service:nth-child(4) .service-points { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
}
/* La primera, con un fondo distinto para que destaque sin brillo */
.services .service:nth-child(1) {
  background: linear-gradient(160deg, rgba(161, 215, 5, .07), var(--surface) 55%);
  border-color: rgba(161, 215, 5, .28);
}
.service h3 { font-size: 1.2rem; }

/* ---------- Situaciones: lista numerada ---------- */
.pains { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pains { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
.pain {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px; row-gap: 6px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.pain-num {
  grid-row: span 2;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 1.5rem; line-height: 1.1;
  color: var(--lime);
}
.pain h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500; line-height: 1.25;
}
.pain p { font-size: .94rem; color: var(--muted); }

/* ---------- Casilla de privacidad ---------- */
.field-consent { margin-top: 6px; }
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .88rem; color: var(--muted); line-height: 1.5;
  cursor: pointer;
}
.consent input {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--lime); cursor: pointer;
}
.consent a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.field-consent.is-invalid .consent { color: var(--text); }

/* ---------- Pie: enlaces legales ---------- */
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .85rem; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--lime); }

/* ---------- Páginas legales ---------- */
.legal { padding-top: calc(var(--header-h) + 48px); padding-bottom: 96px; }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.legal .legal-date { color: var(--muted); font-size: .9rem; margin-bottom: 40px; }
.legal h2 { font-size: 1.45rem; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--text); margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.legal a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.legal-note {
  margin-top: 48px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-size: .88rem; color: var(--muted);
}
.legal-back { display: block; width: fit-content; margin-bottom: 28px; color: var(--muted); font-size: .9rem; }
.legal-back:hover { color: var(--lime); }

/* ---------- Ajustes tras quitar etiquetas ---------- */
/* Historia: sin etiqueta, el título necesita más presencia */
.story-copy h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.08; margin-bottom: 20px; }
/* Etiquetas pequeñas en mayúsculas: mejor en la letra de texto */
.footer-title { font-family: 'Geist', system-ui, sans-serif; }
.beat-num { font-style: italic; font-weight: 500; font-size: .85rem; }

/* ==========================================================================
   23. MÁS CORTA Y CON MÁS MOVIMIENTO (octubre 2026, segunda vuelta)
   ========================================================================== */
:root { --section-y: clamp(56px, 7vw, 100px); }

/* ---------- Cinta de servicios en bucle ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: mq-move 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.marquee-row span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  font-weight: 400; color: var(--white); white-space: nowrap;
}
.marquee-row span:nth-child(4n+3) { font-style: italic; color: var(--lime); }
.marquee-row .mq-star { font-family: 'Geist', system-ui, sans-serif; font-size: 1.1rem; color: var(--lime-dim); }
@keyframes mq-move { to { transform: translateX(-50%); } }

/* ---------- Título que sube palabra a palabra ---------- */
.js-rise.is-split .rw {
  display: inline-block;
  opacity: 0; transform: translateY(.45em);
  animation: rise .7s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Capturas del hero que flotan ---------- */
.hero-shot { animation: float 7s ease-in-out infinite; }
.hero-shot-2 { animation-delay: -2.3s; animation-duration: 8s; }
.hero-shot-3 { animation-delay: -4.6s; animation-duration: 6.5s; }
@keyframes float { 50% { translate: 0 -10px; } }

/* ---------- Proyectos: en el celular, se deslizan de lado ---------- */
.project-shot { transition: transform .6s var(--ease); }
.project:hover .project-shot { transform: scale(1.04); }
@media (max-width: 759px) {
  .projects {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 14px;
    scrollbar-width: none;
  }
  .projects::-webkit-scrollbar { display: none; }
  .project { flex: 0 0 84%; scroll-snap-align: center; }
}
.swipe-hint { display: none; font-size: .82rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 759px) { .swipe-hint { display: block; } }

/* ---------- Soluciones: en el celular, sin listas de ejemplos ---------- */
@media (max-width: 699px) {
  .services .service-points { display: none; }
  .services .service { padding: 22px 20px; }
}

/* ---------- Método en 4 columnas ---------- */
@media (min-width: 900px) {
  .stages { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 0; position: relative; }
  .stage {
    grid-template-columns: 1fr; gap: 10px;
    padding: 28px 24px 8px 0;
    border-bottom: 0; border-top: 1px solid var(--line);
    position: relative;
  }
  .stage::before {
    content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
    background: var(--lime); transition: width 1s var(--ease);
  }
  .stage.is-visible::before { width: 100%; }
  .stage:nth-child(2)::before { transition-delay: .25s; }
  .stage:nth-child(3)::before { transition-delay: .5s; }
  .stage:nth-child(4)::before { transition-delay: .75s; }
}
.stage-num { font-style: italic; font-weight: 400; }

/* ---------- Símbolo del lema: se dibuja una vez al abrir ----------
   La línea gris (el freno) aparece y la flecha verde la atraviesa.
   Es la opción A elegida: «liberamos», no «lanzamos». */
.hero .mark-liberar .mk-limite { stroke-dasharray: 20; stroke-dashoffset: 20; animation: mk-draw .5s .15s ease-out forwards; }
.hero .mark-liberar .mk-salida { stroke-dasharray: 20; stroke-dashoffset: 20; animation: mk-draw .6s .6s cubic-bezier(.6,0,.2,1) forwards; }
.hero .mark-liberar .mk-punta  { stroke-dasharray: 12; stroke-dashoffset: 12; animation: mk-draw .3s 1.15s ease-out forwards; }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }

/* ---------- Ajustes de experiencia en el celular ---------- */
@media (max-width: 899px) {
  .video-copy .note { display: none; }   /* acerca el chat de Sofía */
}

/* ---------- Diagnóstico rápido ---------- */
.steps-time { font-size: .82rem; color: var(--muted); margin: -6px 0 18px; }
.opt { color: var(--muted); font-weight: 400; font-size: .85rem; }
.checks > legend { font-size: 1.02rem; line-height: 1.4; }
.needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.needs .check { margin-bottom: 0; }
@media (min-width: 560px) { .chips-5, .chips-6 { grid-template-columns: repeat(3, 1fr); } }
.step .field + .field { margin-top: 22px; }
.quick-result {
  margin: 0 0 24px; padding: 20px 20px 22px;
  border: 1px solid rgba(161, 215, 5, .35);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(161, 215, 5, .09), var(--surface) 60%);
  animation: rise .5s var(--ease) both;
}
.quick-result-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.quick-result-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.25rem, 3.2vw, 1.55rem); line-height: 1.2; color: var(--white); margin-bottom: 8px; }
.quick-result-text { color: var(--text); font-size: .95rem; }
.quick-who { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, rgba(255,255,255,.1)); }
.quick-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; }
.quick-who-name { font-size: .9rem; color: var(--text); margin: 0; }
.quick-who-name strong { color: var(--white); font-weight: 500; }
.quick-who-links, .story-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; }
.quick-who-links a, .story-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-size: .88rem; text-decoration: none; padding: 4px 0; }
.quick-who-links a:hover, .story-links a:hover { text-decoration: underline; }
.li-icon { width: 15px; height: 15px; flex: none; }
.story-links { margin-top: 20px; }
.story-links a { font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .hero-shot { animation: none; }
  .quick-result { animation: none; }
  .hero .mark-liberar path { animation: none; stroke-dashoffset: 0; }
  .js-rise.is-split .rw { animation: none; opacity: 1; transform: none; }
  .stage::before { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shot { transition: none; }
}


/* ==========================================================================
   24. MÁS MOVIMIENTO EN LAS SECCIONES (oct. 2026)
   Las piezas entran una tras otra, cada tipo a su manera, y las palabras de
   cada título suben al aparecer la sección. Todo se apaga con «reducir movimiento».
   ========================================================================== */
[data-reveal] {
  transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.pain[data-reveal], .stage[data-reveal] { transform: translateX(-34px); }
.service[data-reveal], .project[data-reveal] { transform: translateY(40px) scale(.96); }
.story-media[data-reveal] { transform: translateX(-40px) rotate(-1.5deg); }
.story-copy[data-reveal] { transform: translateX(40px); }
[data-reveal].is-visible { transform: none; }

.split-h .rw {
  display: inline-block;
  opacity: 0; transform: translateY(.55em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i) * 60ms + 150ms);
}
.is-visible .split-h .rw { opacity: 1; transform: none; }

/* Las tarjetas responden al pasar el ratón */
.service, .project, .pain, .stage { transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
@media (hover: hover) {
  .service.is-visible:hover, .project.is-visible:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -20px rgba(161, 215, 5, .35);
    transition-delay: 0s;
  }
  .pain.is-visible:hover .pain-num { color: var(--lime); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .pain[data-reveal], .stage[data-reveal], .service[data-reveal],
  .project[data-reveal], .story-media[data-reveal], .story-copy[data-reveal] { transform: none; }
  .split-h .rw { opacity: 1; transform: none; }
}

/* Cada pregunta entra desde la derecha */
.step.is-active { animation: stepIn .45s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.step .check:has(input:checked) { transition: background .2s, border-color .2s, transform .2s; transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .step.is-active { animation: none; } }
.story-copy .story-lead { color: var(--white); font-size: 1.15rem; line-height: 1.5; }

/* Foto del equipo: más pequeña para que se vea nítida (el original mide 682 px) */
.story-media { max-width: 380px; width: 100%; justify-self: center; }
.story-copy .story-sub {
  font-family: 'Geist', system-ui, sans-serif; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
  margin: 26px 0 6px;
}
.story-copy .story-sub + p { margin-bottom: 0; }
.story-copy .story-quote { margin-top: 28px; }
.story-copy .story-name { font-size: .92rem; margin-top: 18px; }
.story-copy .story-name strong { color: var(--white); font-weight: 500; }
.field-consent + .field-consent { margin-top: 10px; }
@media (min-width: 900px) {
  .story-grid { align-items: start; }
  .story-media { position: sticky; top: 120px; }
}
/* Subtítulos de la historia en letra normal (sin mayúsculas ni etiqueta) */
.story-copy .story-sub {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.12rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--white);
  margin: 26px 0 4px;
}
.story-cta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.story-cta p { color: var(--white); margin: 0; }

/* ---------- 20-oct: sin números decorativos + subrayado a mano ---------- */
/* Situaciones: sin número, el texto ocupa todo el ancho */
.pain { grid-template-columns: 1fr; align-content: start; }
/* Listas cortas: una rayita verde en lugar de 01, 02, 03 */
.video-beats li::before {
  content: ""; flex: none;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--lime);
}
/* Trazo de marcador bajo «a la medida»: se dibuja cuando termina de subir el título */
.scribble-wrap { position: relative; display: inline-block; white-space: nowrap; }
.scribble {
  position: absolute; left: -2%; bottom: -.12em;
  width: 104%; height: .28em;
  overflow: visible; pointer-events: none;
}
.scribble path {
  fill: none; stroke: var(--lime); stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: scribble-draw .9s cubic-bezier(.6, .05, .3, 1) 1.5s forwards;
}
@keyframes scribble-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scribble path { animation: none; stroke-dashoffset: 0; }
}