/* =========================================================================
   Taurus Rank — onepage
   Hoja de estilos. La marca se cambia SOLO desde :root (no-negociable).
   Tokens y componentes copiados del design system (fuente de verdad visual).
   ========================================================================= */

/* ---- 1. Tokens (:root) --------------------------------------------------- */
:root{
  /* color */
  --ink:#333442;        /* negro de marca */
  --bg:#F7F4F1;         /* fondo hueso */
  --bg-soft:#DDD9D0;    /* superficie crema */
  --line:#DDD9D0;       /* bordes */
  --ink-soft:#6C6D72;   /* texto secundario */
  --go:#5CC386;         /* acento · detalle ocasional */

  /* degradados cálidos */
  --warm-1:#fffdf8; --warm-2:#f3ebdf; --warm-3:#efe7da;

  /* tipografía */
  --font-display:'Besley', Georgia, serif;      /* Claim · Titular 2/3 · cifras */
  --font-body:'Merriweather', Georgia, serif;   /* cuerpo (p) */
  --font-ui:'Noto Sans', system-ui, sans-serif; /* eyebrow · caption · botón · Titular 4 */

  /* sombras */
  --shadow-soft:0 10px 30px rgba(51,52,66,.07), 0 2px 8px rgba(51,52,66,.04);
  --shadow-card:0 22px 55px rgba(51,52,66,.12), 0 4px 14px rgba(51,52,66,.05);

  /* radios y medidas */
  --radius:18px; --radius-pill:999px; --maxw:1080px;

  /* movimiento */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.18s; --dur-base:.4s; --dur-slow:.7s;
  --rise:18px;

  /* espaciado · escala de 8 */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px;
}

/* ---- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%; scroll-behavior:smooth;}   /* root 16px */
body{
  margin:0;
  font-family:var(--font-body); font-size:1.0625rem;  /* 17px */
  line-height:1.75; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
button{font:inherit;}
a{color:inherit;}

/* Foco visible siempre (no-negociable) */
:focus-visible{outline:2.5px solid var(--ink); outline-offset:3px; border-radius:4px;}

/* Salta al contenido (accesibilidad) */
.skip-link{position:absolute; left:var(--s3); top:-3rem; background:var(--ink); color:var(--bg);
  padding:.6rem 1rem; border-radius:var(--radius-pill); font-family:var(--font-ui); font-weight:600;
  z-index:200; transition:top var(--dur-fast) var(--ease-out);}
.skip-link:focus{top:var(--s3);}

/* Utilidades de layout */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4);}
.section{padding-block:var(--s8);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---- 3. Tipografía ------------------------------------------------------- */
/* H1/H2/H3 = SEO. Estética eyebrow, minúsculas (sin forzar mayúsculas) */
h1,h2,h3{
  font-family:var(--font-ui); font-weight:600; font-size:.8rem;
  letter-spacing:.03em; color:var(--ink-soft); text-transform:none; margin:0; line-height:1.4;
}

/* Funciones visuales */
.claim    {font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,6vw,3rem); line-height:1.06; letter-spacing:-.01em; margin:0;}
.titular-2{font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.5vw,2.8rem); line-height:1.12; margin:0;}
.titular-3{font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3vw,1.7rem); line-height:1.22; margin:0;}
.titular-4{font-family:var(--font-ui); font-weight:700; font-size:1.0625rem; line-height:1.8; margin:0;}   /* 17px */
.eyebrow  {font-family:var(--font-ui); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:0;}
.lede     {font-family:var(--font-body); font-size:1.1rem; color:var(--ink-soft); line-height:1.7;}
.caption  {font-family:var(--font-ui); font-size:1rem; color:var(--ink-soft);}

strong,.enfasis{font-weight:700;}     /* énfasis = 700, nunca cursiva */
.soft{color:var(--ink-soft);}          /* segundo tono en titulares */
p{margin:0 0 1rem;}

/* ---- 4. Iconos — Material Symbols Rounded (peso 300) --------------------- */
.icon{
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap;
  direction:ltr; display:inline-block; vertical-align:middle; color:var(--ink-soft);
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
}
.icon.ink{color:var(--ink);} .icon.go{color:var(--go);} .icon.white{color:var(--bg-soft);}

/* ---- 5. Botones --------------------------------------------------------- */
.btn{font-family:var(--font-ui); font-weight:600; font-size:1.15rem; border:0; border-radius:var(--radius-pill);
  padding:.8rem 1.6rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  transition:transform .18s ease, filter .18s ease, background .18s;}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.btn--primary{background:var(--ink); color:var(--bg);} .btn--primary:hover{filter:brightness(1.14);}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink);} .btn--ghost:hover{background:var(--ink); color:var(--bg);}
.btn--go{background:var(--go); color:var(--ink);} .btn--go:hover{filter:brightness(1.05);}  /* texto en tinta */

/* ---- 6. Tarjeta (relleno cálido) ---------------------------------------- */
.card{background:linear-gradient(180deg,var(--warm-1),var(--warm-2)); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem 1.8rem; box-shadow:var(--shadow-soft);
  transition:transform .35s ease, box-shadow .35s ease;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}

/* ---- 7. Feature row (icono + matiz) ------------------------------------- */
.feat{display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0;}
.feat .icon{font-size:1.5rem; color:var(--ink); margin-top:.1rem;}
.feat p{margin:.1rem 0 0; color:var(--ink-soft); font-size:.92rem;}

/* ---- 8. Bloque de cifra ------------------------------------------------- */
.stat .num{font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,6vw,4.2rem); line-height:1;}
.stat .num .plus{color:var(--go);}
.stat .num .unit{font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink-soft); margin-left:.2rem;}

/* ---- 9. Tabla comparativa (banda oscura) -------------------------------- */
.dark{background:var(--ink); color:#e7e7ec; border-radius:22px; padding:2.6rem 2rem;}
.dark .eyebrow,.dark .titular-2{text-align:center;} .dark .titular-2{color:#fff;}
.ctab{width:100%; border-collapse:collapse;}
.ctab th,.ctab td{padding:.7rem .8rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.08);}
.ctab th:first-child,.ctab td:first-child{text-align:left; color:#b9bac4;}
.ctab .win{background:rgba(255,255,255,.05); color:#fff; font-weight:600;}
.ctab .chk{color:var(--go); font-weight:700;} .ctab .x{color:#6f7080;} .ctab .mid{color:#9a9ba6;}
.reco-pill{display:inline-block; background:var(--go); color:var(--ink); font-family:var(--font-ui);
  font-size:.66rem; font-weight:700; padding:.2rem .6rem; border-radius:var(--radius-pill);}
/* en móvil, la etiqueta se sustituye por una estrella (ver responsive) */
.reco-star{display:none; color:var(--go); font-size:1.3rem; margin-top:.15rem;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}

/* ---- 10. Punto "disponible" --------------------------------------------- */
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--go);
  box-shadow:0 0 0 0 rgba(92,195,134,.5); animation:pulse 2.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,195,134,.4)}70%{box-shadow:0 0 0 8px rgba(92,195,134,0)}100%{box-shadow:0 0 0 0 rgba(92,195,134,0)}}

/* ---- 11. Form-chat ------------------------------------------------------ */
@keyframes msg-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.chat-msg{animation:msg-in var(--dur-base) var(--ease-out) both;}
.chat-msg.me{margin-left:auto;}        /* mensaje del usuario */
/* indicador "escribiendo…" */
.typing{display:inline-flex; gap:4px; align-items:center;}
.typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-soft); animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25} 30%{opacity:1}}

/* ---- 12. Movimiento por atributo (data-anim) ---------------------------- */
[data-anim]{opacity:0; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
[data-anim="fade-up"]{transform:translateY(var(--rise));}
[data-anim="fade-in"]{transform:none;}
[data-anim="fade-left"]{transform:translateX(calc(var(--rise) * -1.4));}
[data-anim="fade-right"]{transform:translateX(calc(var(--rise) * 1.4));}
[data-anim="scale-in"]{transform:scale(.96);}
[data-anim].in{opacity:1; transform:none;}

/* ---- 13. Atmósfera de fondo --------------------------------------------- */
body::before{ content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(60% 50% at 10% 6%, var(--warm-1), transparent 70%),
    radial-gradient(55% 48% at 90% 10%, var(--warm-2), transparent 72%),
    radial-gradient(75% 60% at 50% 102%, var(--warm-3), transparent 75%),
    var(--bg);
}
/* grano sutil */
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* =========================================================================
   NAV flotante — pastilla absorbida al hacer scroll
   ========================================================================= */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; display:flex; justify-content:center;
  padding:var(--s4) var(--s4); transition:padding var(--dur-base) var(--ease-out);}
.nav__inner{
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.55rem .6rem .55rem 1rem; border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:max-width var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             padding var(--dur-base) var(--ease-out);
}
/* estado absorbido: pastilla centrada, crema, sombra suave */
.nav.is-pill{padding-top:var(--s3);}
.nav.is-pill .nav__inner{
  max-width:760px;
  background:var(--warm-1);
  border-color:var(--line);
  box-shadow:var(--shadow-soft);
  padding:.45rem .5rem .45rem .9rem;
  backdrop-filter:saturate(1.1);
}

.nav__brand{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;}
.nav__logo{height:50px; width:auto; display:block;}
.nav.is-pill .nav__logo{height:26px;}
.nav__fav{display:none; height:30px; width:auto;}
.nav__panel{display:none;}   /* solo se usa en móvil */
.nav__inner--solo{justify-content:center;}   /* header reducido (presupuestos): logo centrado */

.nav__links{display:flex; align-items:center; gap:var(--s5); list-style:none; margin:0; padding:0;}
.nav__links a{font-family:var(--font-ui); font-weight:500; font-size:.9rem; color:var(--ink-soft);
  text-decoration:none; transition:color var(--dur-fast) var(--ease-out);}
.nav__links a:hover{color:var(--ink);}

.nav__cta{display:inline-flex; align-items:center; gap:.6rem;}
.nav__cta .dot{margin-left:.1rem;}

/* botón de menú (móvil) */
.nav__toggle{display:none; background:transparent; border:0; cursor:pointer; padding:.4rem;
  color:var(--ink); border-radius:var(--radius-pill);}
.nav__toggle .icon{font-size:1.6rem; color:var(--ink);}

/* =========================================================================
   HERO — claim (izq) + chat-form (der)
   ========================================================================= */
.hero{padding-block:calc(var(--s9) + var(--s6)) var(--s9);}
.hero__grid{display:grid; grid-template-columns:1fr; gap:var(--s7); align-items:stretch;}

.hero__claim-block > * + *{margin-top:var(--s4);}
.hero .eyebrow{display:block;}
.hero .claim{max-width:15ch;}
.hero .lede{max-width:46ch;}
/* CTA de texto bajo el claim */
.hero__pitch{margin-top:var(--s5); max-width:48ch; display:flex; flex-direction:column; gap:var(--s2);}
.hero__pitch-text{margin:0; color:var(--ink); font-size:1rem;}
.hero__pitch-cta{align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-ui); font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none;}
/* la flecha "fluye" en bucle: se desliza y se desvanece (100% → 0%) */
.hero__pitch-cta .icon{font-size:1.25rem; animation:arrow-glide 1.5s var(--ease-out) infinite;}
@keyframes arrow-glide{
  0%  {transform:translateX(-4px); opacity:0;}
  30% {opacity:1;}
  70% {opacity:1;}
  100%{transform:translateX(9px); opacity:0;}
}
@keyframes arrow-glide-down{
  0%  {transform:rotate(90deg) translateX(-4px); opacity:0;}
  30% {opacity:1;}
  70% {opacity:1;}
  100%{transform:rotate(90deg) translateX(9px); opacity:0;}
}

/* columna del chat: tarjeta + badge debajo */
.hero__chat-stack{display:flex; flex-direction:column; gap:var(--s3);}
/* badge bajo el chat */
.hero__badge{align-self:center; margin:0; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-ui); font-weight:600; font-size:.85rem; color:var(--ink);
  background:var(--warm-1); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.5rem 1rem; box-shadow:var(--shadow-soft);}
.hero__badge .icon{font-size:1.2rem; color:var(--go);}   /* verde = detalle */

/* ---- chat-form ---------------------------------------------------------- */
.chat{flex:1 1 auto; min-height:0; padding:0; overflow:hidden; display:flex; flex-direction:column;}
.chat:hover{transform:none; box-shadow:var(--shadow-soft);}  /* no "levantar" el form */
/* cabecera oscura (estilo "soporte") */
.chat__head{display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.3rem;
  background:var(--ink); color:#fff;}
.chat__avatar{width:46px; height:46px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  background:#23232f; display:grid; place-items:center;}
.chat__avatar img{width:100%; height:100%; object-fit:cover;}
.chat__who{display:flex; flex-direction:column; line-height:1.35;}
.chat__name{font-family:var(--font-ui); font-weight:700; font-size:1rem; color:#fff;}
.chat__status{display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-ui); font-size:.78rem; color:#b9bac4;}

/* barra de progreso (relleno en tinta; el verde queda como detalle) */
.chat__progress{flex:0 0 auto; height:4px; background:var(--bg-soft);}
.chat__progress-fill{display:block; height:100%; width:0; background:var(--go);
  transition:width var(--dur-base) var(--ease-out);}

/* pantallas: solo se ve una a la vez */
.chat__screens{flex:1 1 auto; min-height:120px; display:flex;}
.screen{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1rem;
  padding:1.3rem; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--bg-soft) transparent;}      /* Firefox */
.screen::-webkit-scrollbar{width:9px;}
.screen::-webkit-scrollbar-track{background:transparent;}
.screen::-webkit-scrollbar-thumb{background:var(--bg-soft); border-radius:var(--radius-pill);
  border:3px solid transparent; background-clip:padding-box;}
.screen::-webkit-scrollbar-thumb:hover{background:var(--ink-soft); background-clip:padding-box;}
.screen[hidden]{display:none;}
/* pregunta de la pantalla (burbuja) */
.screen__q{margin:0; align-self:flex-start; max-width:92%;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; border-top-left-radius:5px;
  padding:.8rem 1rem; font-family:var(--font-body); font-size:.98rem; line-height:1.5; color:var(--ink);}
.screen__fields{display:flex; flex-direction:column; gap:.8rem;}
/* pie pegado abajo: paso + botón a todo el ancho */
.screen__foot{margin-top:auto; display:flex; flex-direction:column; gap:.7rem; padding-top:.4rem;}
.chat__cta{width:100%; justify-content:center; padding:.9rem 1.6rem;}
.chat__step{margin:0; text-align:center; font-family:var(--font-ui); font-size:.78rem; color:var(--ink-soft);}

.field{display:flex; flex-direction:column; gap:.35rem; min-width:0;}
/* la etiqueta va dentro del campo (placeholder); el <label> de texto queda solo para
   lectores de pantalla. Solo hijos directos y salvo .field__q (etiqueta visible);
   NO afecta a los .chip (que también son <label>). */
.field > label:not(.field__q){position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.field__q{font-family:var(--font-ui); font-weight:600; font-size:.82rem; color:var(--ink);}
.field__q .caption{font-weight:400;}
.field input{width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:12px; background:var(--bg);
  transition:border-color var(--dur-fast) var(--ease-out);}
.field input::placeholder{color:var(--ink-soft); opacity:.8;}
.field input:focus{border-color:var(--ink); outline:none;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}

/* grupos de opciones (chips) */
.field--chips{border:0; margin:0; padding:0; min-width:0;}
.field--chips legend{padding:0; font-family:var(--font-ui); font-weight:600; font-size:.82rem; color:var(--ink); margin-bottom:.5rem;}
.field--chips legend .caption{font-weight:400;}
.chips{display:flex; flex-wrap:wrap; gap:.5rem;}
.chip{position:relative; display:inline-flex;}
.chip input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;}
.chip span{display:inline-block; padding:.5rem .9rem; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-family:var(--font-ui); font-size:.85rem; color:var(--ink); background:var(--bg);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}
.chip input:hover + span{border-color:var(--ink);}
.chip input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.chip input:focus-visible + span{outline:2.5px solid var(--ink); outline-offset:3px;}
/* fila: chips Sí/No + campo de URL en línea (no empuja el contenido hacia abajo) */
.chips-row{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;}
.field--chips input.web-url{flex:1 1 160px; min-width:0; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:.6rem .9rem; border:1px solid var(--line); border-radius:12px; background:var(--bg);}
.field--chips input.web-url[hidden]{display:none;}

/* elección final */
.chat__choice{display:flex; flex-direction:column; gap:.6rem;}
.consent-note{margin:0; text-align:center; font-family:var(--font-ui); font-size:.78rem; color:var(--ink-soft);}
.consent-note a{color:var(--ink); text-underline-offset:2px;}

/* =========================================================================
   3. Franja de sectores O2O
   ========================================================================= */
#o2o{padding-top:calc(var(--s9) + var(--s6));}        /* más hueco hero→O2O para la imagen */
.o2o__inner{max-width:760px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--s5);}
.o2o .lede{max-width:54ch; margin:0;}
.o2o__city{margin:var(--s2) 0 0;}                    /* grande (titular-3) */
.o2o__city strong{font-weight:700;}
.o2o__rotator{margin:0; font-family:var(--font-body); font-size:1.15rem; color:var(--ink-soft);}
/* franja destacada con el sector (que rota) + icono */
.o2o__highlight{align-self:center; display:inline-flex; align-items:center; gap:.7rem;
  background:var(--warm-1); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.7rem 1.4rem; box-shadow:var(--shadow-soft);}
.o2o__highlight .icon{font-size:1.9rem; color:var(--go);}   /* verde = detalle */
/* la palabra del sector cambia en bucle con un fade simple */
.o2o__sector{font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--ink);
  transition:opacity var(--dur-base) var(--ease-out);}
.o2o__sector.is-out{opacity:0;}

/* =========================================================================
   4. Posicionamiento / tabla comparativa (franja ink a todo el ancho)
   ========================================================================= */
.band-ink{background:var(--ink); color:#e7e7ec;}
.comparativa .eyebrow{text-align:center; color:#b9bac4;}
.comparativa .titular-2{max-width:20ch; margin:var(--s5) auto 0; text-align:center; color:#fff;}
.comparativa__intro{text-align:center; max-width:58ch; margin:var(--s4) auto var(--s6); color:#c9cad3;}
.ctab-wrap{overflow-x:auto; margin-bottom:var(--s7);}
.ctab thead th{font-family:var(--font-ui); font-weight:600; font-size:.85rem; color:#fff; vertical-align:bottom; line-height:1.35;}
.ctab thead th.win{padding-top:1rem;}
.ctab thead th .reco-pill{margin-top:.45rem;}
.ctab tbody th{font-family:var(--font-body); font-weight:400; font-size:.95rem; line-height:1.4;}
.ctab .win{border-radius:10px;}
.ctab tbody tr:first-child .win{border-top-left-radius:10px; border-top-right-radius:10px;}
.ctab tbody tr:last-child .win{border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.ctab .icon{font-size:1.35rem;}
.comparativa__close{text-align:center; margin:var(--s6) auto 0; color:#fff;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2.5vw,1.5rem); line-height:1.3;}

/* =========================================================================
   5. Qué incluye (producto único)
   ========================================================================= */
.incluye__head{text-align:center; max-width:880px; margin:0 auto var(--s7);}
.incluye__head .titular-2{margin-top:var(--s5);}
/* subtítulo (mismo tamaño que el cierre de la comparativa) */
.incluye__sub{margin:var(--s4) auto 0; max-width:none; color:var(--ink-soft);
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2.5vw,1.5rem); line-height:1.3;}
.incluye__grid{display:grid; grid-template-columns:1fr; gap:var(--s4);
  max-width:880px; margin-inline:auto;}
/* párrafo de cierre bajo las cards */
.incluye__note{max-width:820px; margin:var(--s7) auto 0; text-align:center;
  font-size:1.15rem; line-height:1.7;}
/* card de feature con degradado */
.feat-card{background:linear-gradient(155deg, var(--warm-1), var(--warm-2) 60%, var(--warm-3));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.7rem 1.6rem;
  box-shadow:var(--shadow-soft); transition:transform .35s ease, box-shadow .35s ease;}
.feat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.feat-card .titular-4{margin:0 0 .3rem; text-align:center;}
.feat-card p:last-child{margin:0; color:var(--ink-soft); font-size:.95rem;}
/* chip glassmorphism con el icono (protagonista) */
.feat-card__chip{display:grid; place-items:center; width:76px; height:76px; border-radius:20px;
  margin:0 auto var(--s4);
  background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 16px rgba(51,52,66,.08), inset 0 1px 0 rgba(255,255,255,.6);}
.feat-card__chip .icon{font-size:2.7rem; color:var(--ink);}
.incluye__cta{text-align:center; margin-top:var(--s7);}

/* =========================================================================
   6. Cifras / prueba
   ========================================================================= */
.cifras__head{text-align:center; max-width:40ch; margin:0 auto var(--s7);}
.cifras__head .titular-2{margin-top:var(--s5);}
.cifras__grid{display:grid; grid-template-columns:1fr; gap:var(--s6);
  max-width:880px; margin-inline:auto; text-align:center;}
.cifras__grid .stat .caption{display:block; margin-top:var(--s2);}

/* =========================================================================
   7. Reseñas (estilo Google) — fondo ink
   ========================================================================= */
.resenas{padding-bottom:var(--s9);}   /* más aire al final del bloque */
.resenas__head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s6);}
.resenas__head .titular-2{margin-top:var(--s5); color:#fff; max-width:43rem;}
.resenas__head .eyebrow{color:#b9bac4;}
.resenas__agg{display:flex; align-items:center; gap:.5rem; margin:var(--s3) 0 0;
  font-family:var(--font-ui); font-size:.9rem; color:#c9cad3;}
/* estrellas (rellenas): verdes en las tarjetas, blancas en la media del titular */
.review__stars{display:inline-flex; gap:1px;}
.review__stars .icon{color:var(--go); font-size:1.1rem;   /* verde, ganando al color base de .icon */
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}

/* navegación del slider */
.resenas__nav{display:flex; gap:.6rem; flex:0 0 auto;}
/* flechas del carrusel */
.resenas__nav{display:flex; gap:.6rem; flex:0 0 auto;}
.slider-btn{width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid rgba(255,255,255,.25); color:#fff;
  display:grid; place-items:center; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}
.slider-btn:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5);}
.slider-btn .icon{color:#fff; font-size:1.5rem;}

/* marquee de reseñas: ancho completo, auto-scroll continuo (motor JS por transform) */
.resenas__marquee{margin-top:var(--s6); overflow:hidden; padding-block:var(--s2);
  /* difuminado suave en los bordes (solo afecta a la tarjeta que entra/sale) */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);}
.resenas__track{display:flex; width:max-content; will-change:transform;}
.resenas__track .review{margin-right:var(--s4);}   /* gap como margen → bucle sin saltos */

/* puntos de paginación (blancos) */
.resenas__dots{display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:var(--s6);}
.resenas__dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.3); transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);}
.resenas__dots button:hover{background:rgba(255,255,255,.55);}
.resenas__dots button.is-active{background:#fff; transform:scale(1.25);}

/* tarjeta de reseña (deriva de .card) */
.review{flex:0 0 380px; display:flex; flex-direction:column; gap:var(--s3);}
.review__top{display:flex; align-items:center; gap:.7rem;}
.review__avatar{flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--ink); color:var(--bg); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;}
.review__avatar img{width:100%; height:100%; object-fit:cover;}
.review__who{min-width:0;}
.review__name{margin:0; font-family:var(--font-ui); font-weight:700; font-size:.98rem; color:var(--ink);}
.review__who .caption{display:block; line-height:1.3;}
.review__g{margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center;}
.review__g .icon{color:var(--go); font-size:1.35rem; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}
.review__text{margin:0; color:var(--ink); font-size:.97rem; line-height:1.6;}

/* =========================================================================
   8. Tan fácil como un WhatsApp (recorrido en zigzag)
   ========================================================================= */
.facil__head{text-align:center; max-width:40rem; margin:0 auto var(--s8);}
.facil__head .titular-2{margin-top:var(--s5); margin-bottom:var(--s5);}
.facil__head .lede{margin:var(--s4) auto 0; max-width:48ch;}
/* párrafos de intro: mismo estilo y alineados a la izquierda */
.facil__head .facil__lead{text-align:left; margin-top:var(--s3);}

.zz{position:relative; max-width:820px; margin-inline:auto;}
.zz__line{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;}
#zz-path{fill:none; stroke:var(--go); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;}
.zz__steps{position:relative; z-index:1; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s7);}
.zz-step{display:flex;}
.zz-step--left{justify-content:flex-start;}
.zz-step--right{justify-content:flex-end;}
.zz-card{position:relative; width:46%;}
/* nodo numerado, en la arista interior de la card (sobre la línea) */
.zz-node{position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; z-index:2;
  background:var(--ink); color:var(--bg); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  box-shadow:var(--shadow-soft);}
.zz-step--left .zz-node{right:-21px;}
.zz-step--right .zz-node{left:-21px;}

/* cola vertical con balas + CTA sutil */
.zz-tail{position:relative; min-height:56vh;}
.zz-tail__cta{position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
/* anclaje (invisible) donde termina la línea, centrado, justo encima del CTA */
.zz-node--anchor{position:absolute; left:50%; bottom:64px; width:0; height:0;}
/* balas: a la izquierda de la línea, centradas vertical; aparecen una a una */
.zz-bullet{position:absolute; top:46%; right:54%; transform:translateY(-50%);
  width:40%; max-width:22ch; margin:0; text-align:right; color:var(--ink);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);}
.zz-bullet.is-on{opacity:1;}
/* fallback (sin scroll-trigger o reduced-motion): lista estática bajo el punto 4 */
.zz-tail--static{min-height:0; display:flex; flex-direction:column; align-items:center;
  gap:var(--s3); margin-top:var(--s5);}
.zz-tail--static .zz-bullet{position:static; opacity:1; transform:none; text-align:center;
  width:auto; max-width:30ch;}
.zz-tail--static .zz-tail__cta{position:static; transform:none; margin-top:var(--s3);}

/* =========================================================================
   Transparencia (fondo crema, 2 columnas)
   ========================================================================= */
.about__grid{display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:center;}
.about__media img{width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow-card);}
.transparencia .transp__head{text-align:left; margin:0 0 var(--s5);}
.transparencia .transp__head .titular-2{margin-top:var(--s4);}

.transp__list{list-style:none; margin:0; padding:0;}
.transp__item{display:flex; gap:1rem; align-items:flex-start; padding:var(--s4) 0;
  border-top:1px solid var(--line);}
.transp__item:last-child{border-bottom:1px solid var(--line);}
.transp__chk{color:var(--go); font-size:1.6rem; flex:0 0 auto; margin-top:.05rem;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.transp__item .titular-4{margin:0 0 .15rem;}
.transp__item .caption{display:block; color:var(--ink-soft);}

/* CTA crema al cierre de "Cómo empezamos" */
.empezar-cta{text-align:center; max-width:46ch; margin:var(--s8) auto 0;}
.empezar-cta .lede{margin:var(--s3) auto var(--s5);}
.empezar-cta .titular-3{margin:0;}

/* Informe de resultados (motion graphic de la columna derecha) */
.informe{position:relative; width:100%;}
.informe__stage{position:relative; width:100%; max-width:440px; margin-inline:auto; aspect-ratio:1/1;}

.informe__ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.informe__ring circle{fill:none; stroke:var(--go); stroke-width:1.4; stroke-dasharray:2 11;
  stroke-linecap:round; opacity:.5; transform-origin:50% 50%; animation:informe-spin 36s linear infinite;}
@keyframes informe-spin{to{transform:rotate(360deg);}}

.informe__disc{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64%; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:var(--bg-soft); box-shadow:var(--shadow-card);}
.informe__disc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease-out);}
.informe__disc img.is-active{opacity:1;}

.informe__notes{position:absolute; inset:0; pointer-events:none;}

/* Notificación base */
.inote{position:absolute; display:flex; align-items:center; gap:.55rem; max-width:62%;
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:.5rem .7rem; box-shadow:var(--shadow-soft); will-change:transform,opacity;}
.inote__ic{font-size:1.15rem; color:var(--go); flex:0 0 auto;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20;}
.inote__body{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.inote__big{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink);}
.inote__txt{font-family:var(--font-ui); font-size:.72rem; color:var(--ink-soft);}

/* Variantes de formato */
.inote--stat{flex-direction:column; align-items:flex-start; gap:.1rem;}
.inote--stat .inote__big{font-size:1.6rem; line-height:1;}
.inote--pill{border-radius:var(--radius-pill);}
.inote--list{align-items:flex-start; max-width:70%;}
.inote--list .inote__title{font-family:var(--font-ui); font-weight:700; font-size:.72rem; color:var(--ink); margin:0 0 .2rem;}
.inote--list ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem;}
.inote--list li{font-family:var(--font-ui); font-size:.7rem; color:var(--ink-soft); white-space:nowrap;}

/* Slots alrededor del disco */
.inote--s1{top:2%;    left:0;}
.inote--s2{top:0;     right:0;}
.inote--s3{top:44%;   right:0;}
.inote--s4{bottom:5%; right:3%;}
.inote--s5{bottom:0;  left:0;}
.inote--s6{top:40%;   left:0;}

@media (max-width:560px){
  .inote{max-width:72%;}
  .inote__big{font-size:1.05rem;}
  .inote--stat .inote__big{font-size:1.4rem;}
}
@media (prefers-reduced-motion: reduce){
  .informe__ring circle{animation:none;}
  .informe__disc img{transition:none;}
}

/* =========================================================================
   10. FAQ / objeciones (acordeón)
   ========================================================================= */
.faq__head{text-align:center; margin:0 auto var(--s7);}
.faq__head .titular-2{margin-top:var(--s5);}
.faq__list{max-width:720px; margin-inline:auto;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent; border:0; cursor:pointer; text-align:left; padding:var(--s4) 0;
  font-family:var(--font-ui); font-weight:600; font-size:1.05rem; color:var(--ink);}
.faq__ico{flex:0 0 auto; color:var(--ink-soft); font-size:1.6rem;
  transition:transform var(--dur-base) var(--ease-out);}
.faq__item.is-open .faq__ico{transform:rotate(180deg);}
/* despliegue suave por altura */
.faq__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out);}
.faq__item.is-open .faq__panel{grid-template-rows:1fr;}
.faq__panel-inner{overflow:hidden;}
.faq__panel-inner p{margin:0; padding:0 0 var(--s4); color:var(--ink); max-width:62ch;}

/* =========================================================================
   11. CTA final
   ========================================================================= */
.cta-final .wrap{text-align:center; max-width:46ch;}
.cta-final .titular-2{margin-top:var(--s5);}
.cta-final .lede{margin:var(--s4) auto 0;}
.cta-final__btns{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s6);}

/* =========================================================================
   12. Footer
   ========================================================================= */
.footer{padding-block:var(--s8) var(--s5);}
.footer__grid{display:grid; grid-template-columns:1fr; gap:var(--s6);}
.footer__logo img{height:42px; width:auto; filter:brightness(0) invert(1);}  /* logo en blanco, más grande */
.footer__tag{margin:var(--s3) 0 0; color:#b9bac4; font-size:.9rem; max-width:40ch; line-height:1.6;}
.footer__nav{display:flex; flex-direction:column; gap:.6rem;}
.footer a{color:#d7d7dd; text-decoration:none; font-family:var(--font-ui); font-size:.95rem;
  transition:color var(--dur-fast) var(--ease-out);}
.footer__nav a:hover{color:#fff;}
.footer__bottom{margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.1);}
.footer__bottom p{margin:0; color:#8a8b96; font-family:var(--font-ui); font-size:.82rem;}

/* Tarjeta promo flotante (abajo-derecha, oscura) */
.promo{position:fixed; right:var(--s4); bottom:var(--s4); z-index:90; width:320px; max-width:calc(100vw - var(--s5));
  background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:1rem 1.1rem 1.1rem;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
.promo.is-in{opacity:1; transform:none; pointer-events:auto;}
.promo__top{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem;}
.promo__eyebrow{font-family:var(--font-ui); font-weight:600; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:#b9bac4;}
.promo__close{background:transparent; border:0; cursor:pointer; color:#b9bac4; display:grid; place-items:center;
  border-radius:50%; width:28px; height:28px; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.promo__close:hover{background:rgba(255,255,255,.1); color:#fff;}
.promo__close .icon{font-size:1.2rem; color:inherit;}
.promo__main{display:flex; align-items:center; gap:.9rem;}
.promo__text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;}
.promo__title{margin:0; font-family:var(--font-display); font-weight:600; font-size:1.15rem; line-height:1.2; color:#fff;}
.promo__cta{padding:.55rem 1.1rem; font-size:.9rem;}
.promo__media{flex:0 0 auto; width:64px; height:64px; border-radius:14px; background:var(--warm-1);
  display:grid; place-items:center;}
.promo__media img{width:40px; height:40px;}

/* =========================================================================
   Decoración de fondo (fotos de oficios, B&N) — entre hero y O2O
   ========================================================================= */
.decor-stage{position:relative; overflow:hidden;}
.decor-stage > section{position:relative; z-index:1;}   /* contenido por encima */
.decor{position:absolute; inset:0; z-index:0; pointer-events:none;}  /* detrás del contenido */

/* ----- AJUSTES (edítalos aquí) -----
   --decor-op   : opacidad final de la imagen (0–1)
   --decor-anim : animación de entrada al hacer scroll. Disponibles:
                  bounceInLeft · bounceInRight · fadeIn · fadeInUp · fadeInLeft · fadeInRight · zoomIn
   --decor-dur  : duración de esa animación
   Se pueden poner globales (en .decor__item) o por imagen (.decor--1, etc.). */
.decor__item{position:absolute; opacity:1;
  --decor-op:.9; --decor-anim:bounceInLeft;
  --decor-gap:24px;}   /* separación respecto a la columna de texto (≥0 = nunca bajo el texto; negativo = se mete detrás) */
.decor__item img{display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:var(--shadow-soft); opacity:var(--decor-op);}   /* imagen tal cual, sin filtro de color */

/* Revelado LIGADO AL SCROLL (scroll-driven animations):
   - en reposo (sin scroll) están ocultas → el hero sale limpio.
   - al bajar aparecen 1 → 2 → 3; al subir, se ocultan en orden inverso.
   Ajusta el tramo de scroll de cada una en 'animation-range' (en px desde el inicio). */
@supports (animation-timeline: scroll()){
  .decor__item{
    animation-name:var(--decor-anim); animation-duration:1ms;   /* la duración la marca el scroll */
    animation-timing-function:linear; animation-fill-mode:both;
    animation-timeline:scroll(root);
  }
  .decor--1{animation-range:40px 480px;}
  .decor--2{animation-range:360px 840px;}
  .decor--3{animation-range:360px 840px;}
}

/* colocación + ajustes POR IMAGEN.
   Las imágenes se ANCLAN al borde de la columna de texto (ancho --maxw):
   viven en el margen y, al estrechar la ventana, se salen por el borde (recortadas)
   en vez de taparlo. Controla cada una con:
     --w         : ancho de la imagen (responsive con clamp)
     --decor-gap : separación respecto al texto (≥0 nunca bajo el texto; negativo = detrás)
     top         : posición vertical
     --decor-op  : opacidad (0–1)
     --decor-anim: bounceInLeft · bounceInRight · fadeIn · fadeInUp · fadeInLeft · fadeInRight · zoomIn
   left = pegada al margen izquierdo · right = pegada al margen derecho */
.decor--1{--w:clamp(170px,18vw,290px); width:var(--w); top:24%;
  left:calc(50% - var(--maxw)/2 - var(--w) - var(--decor-gap));
  --decor-op:.8; --decor-anim:fadeInLeft;}
.decor--1 img{transform:rotate(-3deg);}
.decor--2{--w:clamp(110px,12vw,300px); width:var(--w); top:82%;
  left:calc(50% - var(--maxw)/2 - var(--w) - var(--decor-gap));
  --decor-op:.7; --decor-anim:bounceInLeft;}
.decor--2 img{transform:rotate(-6deg);}
.decor--3{--w:clamp(180px,15vw,360px); width:var(--w); top:45%;
  right:calc(50% - var(--maxw)/2 - var(--w) - var(--decor-gap));
  --decor-op:.6; --decor-anim:fadeInRight;}
.decor--3 img{transform:rotate(12deg);}

/* ----- librería de animaciones de entrada (estilo Animate.css) ----- */
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes fadeInUp{from{opacity:0; transform:translate3d(0,30px,0)} to{opacity:1; transform:none}}
@keyframes fadeInLeft{from{opacity:0; transform:translate3d(-40px,0,0)} to{opacity:1; transform:none}}
@keyframes fadeInRight{from{opacity:0; transform:translate3d(40px,0,0)} to{opacity:1; transform:none}}
@keyframes zoomIn{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:none}}
@keyframes bounceInLeft{
  0%{opacity:0; transform:translate3d(-600px,0,0) scaleX(2.4)}
  60%{opacity:1; transform:translate3d(20px,0,0) scaleX(.98)}
  75%{transform:translate3d(-8px,0,0) scaleX(.99)}
  90%{transform:translate3d(4px,0,0)}
  100%{transform:none}
}
@keyframes bounceInRight{
  0%{opacity:0; transform:translate3d(600px,0,0) scaleX(2.4)}
  60%{opacity:1; transform:translate3d(-20px,0,0) scaleX(.98)}
  75%{transform:translate3d(8px,0,0) scaleX(.99)}
  90%{transform:translate3d(-4px,0,0)}
  100%{transform:none}
}

/* slideshow de fotos en móvil (entre hero y O2O); crossfade por JS al hacer scroll */
.decor-m{display:none;}

/* =========================================================================
   Página legal (/legal) — aviso legal · privacidad · cookies
   ========================================================================= */
.legal-head{padding-top:calc(var(--s9) + var(--s5)); padding-bottom:var(--s5); text-align:center;}
.legal-head .titular-2{margin-top:var(--s4);}
.legal-head .lede{margin:var(--s3) auto 0; max-width:52ch;}
.legal-col{max-width:720px; margin-inline:auto;}
.legal-sec{scroll-margin-top:96px; padding-block:var(--s7);}
.legal-sec + .legal-sec{border-top:1px solid var(--line);}
.legal-sec > .legal-col > .titular-2{margin-bottom:var(--s5);}
.legal-col h3{margin:var(--s5) 0 var(--s2); font-family:var(--font-ui); font-weight:700;
  font-size:1.05rem; color:var(--ink);}
.legal-col p{color:var(--ink); max-width:64ch;}
.legal-col ul{margin:0 0 1rem; padding-left:1.2rem;}
.legal-col li{margin-bottom:.4rem;}
.legal-col .legal-meta{list-style:none; padding-left:0;}
.legal-col a{color:var(--ink); text-underline-offset:2px;}

/* ----- Banner de cookies (abajo-izquierda) ----- */
.cookie-banner{position:fixed; left:var(--s4); bottom:var(--s4); z-index:95; max-width:330px;
  background:var(--warm-1); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:1.1rem 1.2rem;
  opacity:0; transform:translateY(16px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
.cookie-banner.is-in{opacity:1; transform:none;}
.cookie-banner p{margin:0 0 .8rem; font-family:var(--font-ui); font-size:.85rem; line-height:1.5; color:var(--ink-soft);}
.cookie-banner a{color:var(--ink); text-underline-offset:2px;}
.cookie-banner .btn{padding:.5rem 1.1rem; font-size:.85rem;}

/* =========================================================================
   Motion graphic "equipo" (dentro de la banda ink)
   ========================================================================= */
/* método: texto + ilustración */
.metodo{display:grid; grid-template-columns:1fr; gap:var(--s7); margin-top:var(--s8); margin-bottom:var(--s8);}
.metodo__text .titular-3{color:#fff;}
.metodo__text p{color:#c9cad3; margin:var(--s3) 0 0;}
.metodo__points{list-style:none; margin:var(--s4) 0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.metodo__points li{display:flex; gap:.7rem; align-items:flex-start; color:#fff; font-family:var(--font-ui); font-size:.95rem;}
.metodo__num{flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--go); color:var(--ink);
  display:grid; place-items:center; font-family:var(--font-ui); font-weight:700; font-size:.8rem; margin-top:.05rem;}

.equipo{margin-top:0;}
.equipo__inner{display:flex; flex-direction:column; gap:var(--s5);}
.equipo__wa{width:16px; height:16px; filter:brightness(0) invert(1);}   /* glifo WhatsApp en blanco */

/* feed (lo que pasa por dentro) */
.equipo__feed{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius); padding:1rem 1.1rem;}
.equipo__feed-title{display:flex; align-items:center; gap:.5rem; margin:0 0 .7rem;
  font-family:var(--font-ui); font-weight:600; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:#b9bac4;}
.equipo__feed-ic{font-size:1.05rem; color:#b9bac4;}
.equipo__feed-list{position:relative; display:flex; flex-direction:column; gap:.5rem;}
.equipo__chip{display:flex; gap:.6rem; align-items:center; min-height:50px;   /* altura fija → sin saltos */
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.5rem .65rem;}
.equipo__chip .eq-av{width:28px; height:28px; font-size:.7rem;}
.equipo__chip p{margin:0; font-family:var(--font-ui); font-size:.82rem; line-height:1.3; color:#d7d7dd;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.equipo__chip b{color:#fff; font-weight:700;}
.equipo__chip .equipo__chip-ic{margin-left:auto; color:var(--go); font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}

/* pipeline */
.equipo__flow{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:.3rem;}
.equipo__node{display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; flex:0 0 auto; z-index:2;}
.equipo__hub{position:relative; height:56px; display:flex; align-items:center; justify-content:center;}
.equipo__label{margin:0; font-family:var(--font-ui); font-weight:700; font-size:.82rem; color:#fff; line-height:1.2;}
.equipo__label span{display:block; font-weight:400; font-size:.7rem; color:#9a9ba6; margin-top:.1rem;}

/* avatares */
.eq-av{position:relative; width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:#23232f; color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;}
.eq-av::before{content:attr(data-i);}
.eq-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.eq-av--lg{width:56px; height:56px; font-size:1.05rem;}
.eq-av--you{background:var(--go);}
.eq-av--you::before{content:none;}
.eq-av--you .icon{color:var(--ink); font-size:1.5rem;}
.equipo__hub--team{gap:0;}
.equipo__hub--team .eq-av{width:34px; height:34px; font-size:.72rem; margin-left:-9px; border:2px solid var(--ink);}
.equipo__hub--team .eq-av:first-child{margin-left:0;}
.eq-dot{position:absolute; right:1px; bottom:1px;}

/* segmentos de línea entre nodos */
.equipo__seg{flex:1 1 auto; height:56px; position:relative; z-index:0; min-width:16px;}
.equipo__seg::before{content:""; position:absolute; top:27px; left:-4px; right:-4px; height:2px; background:rgba(255,255,255,.14);}

/* tokens que recorren la línea */
.equipo__token{position:absolute; top:0; left:0; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; z-index:3; opacity:0; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,.4);}
.equipo__token .icon{font-size:1rem; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;}
.equipo__token{background:var(--go);}                 /* verde marca (description / view_list) */
.equipo__token .icon{color:var(--ink);}
.equipo__token.is-wa{background:#25D366;}             /* verde WhatsApp */
.equipo__node.is-pulse .eq-av{box-shadow:0 0 0 7px rgba(92,195,134,.22);}

/* =========================================================================
   Página /contacto — formulario centrado
   ========================================================================= */
.contacto{padding-block:calc(var(--s9) + var(--s5)) var(--s9);}
.contacto__inner{max-width:560px; margin-inline:auto; text-align:center;}
.contacto__head .titular-2{margin-top:var(--s4);}
.contacto__head .lede{margin:var(--s3) auto 0; max-width:46ch;}
.contacto__form{max-width:520px; margin:var(--s6) auto 0; text-align:left;}
.contacto__alt{margin-top:var(--s5); font-family:var(--font-ui); font-size:.9rem; color:var(--ink-soft);}
.contacto__alt a{color:var(--ink); font-weight:600; text-underline-offset:2px;}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width:760px){
  .incluye__grid{grid-template-columns:1fr 1fr; column-gap:var(--s4);}
  .cifras__grid{grid-template-columns:repeat(3,1fr);}
  .footer__grid{grid-template-columns:minmax(0,1.6fr) auto; gap:var(--s8); align-items:start;}
}
@media (min-width:880px){
  .hero__grid{grid-template-columns:1fr 1.08fr; gap:var(--s7);}   /* el form, algo más ancho */
  .about__grid{grid-template-columns:1.05fr .95fr; gap:var(--s8);}
  /* método: texto a la izquierda + ilustración a la derecha */
  .metodo{grid-template-columns:1fr 1.05fr; gap:var(--s8); align-items:center;}
  /* el stack (chat + badge) se ancla al alto de la columna izquierda, con un
     mínimo suficiente para que el paso más alto se vea sin scroll interno */
  .hero__chat-col{position:relative; min-height:560px;}
  .hero__chat-stack{position:absolute; inset:0;}
}
@media (max-width:899px){
  /* la decoración absoluta es solo para pantallas anchas */
  .decor{display:none;}
  /* en móvil: slideshow de las 3 fotos entre hero y O2O (crossfade por scroll) */
  .decor-m{display:block; position:relative; height:clamp(320px,84vw,460px); margin:var(--s6) 0 0;}
  .decor-m img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    border-radius:var(--radius); box-shadow:var(--shadow-soft);
    opacity:0; transition:opacity .5s var(--ease-out);}
  .decor-m img.is-active{opacity:1;}
}
@media (max-width:879px){
  .cookie-banner{left:var(--s3); right:var(--s3); max-width:none;}
  /* equipo compacto: avatares más pequeños y sin subtítulo */
  .equipo__label span{display:none;}
  .equipo__hub{height:46px;}
  .eq-av--lg{width:46px; height:46px; font-size:.95rem;}
  .equipo__hub--team .eq-av{width:28px; height:28px; margin-left:-8px;}
  .equipo__seg{height:46px; min-width:8px;}
  .equipo__seg::before{top:22px;}
  .equipo__label{font-size:.74rem;}
  .nav__links{display:none;}
  .nav__toggle{display:inline-flex;}
  /* Header móvil: sin scroll → logo + hamburguesa; con scroll (pill) → favicon + CTA con texto + hamburguesa */
  .nav:not(.is-pill) .nav__cta .btn{display:none;}
  .nav.is-pill .nav__logo{display:none;}
  .nav.is-pill .nav__fav{display:block;}
  /* panel desplegable del menú */
  .nav__panel{position:absolute; top:100%; left:var(--s4); right:var(--s4); margin-top:var(--s2);
    display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5) var(--s4);
    background:var(--warm-1); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
  .nav.is-open .nav__panel{opacity:1; transform:none; pointer-events:auto;}
  .nav__panel-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s4);}
  .nav__panel-links a{font-family:var(--font-ui); font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none;}
  .nav__panel-cta{justify-content:center; width:100%;}
  .nav.is-pill .nav__panel-cta{display:none;}   /* con scroll el CTA ya está en la pastilla */
  .hero{padding-block:calc(var(--s9)) var(--s7);}
  /* HERO móvil: una columna, orden a medida.
     eyebrow → claim → lede → "Hablemos" → form → chip +14 → "Cuidamos…" */
  .hero__grid{display:flex; flex-direction:column; gap:var(--s5);}
  .hero__claim-block, .hero__chat-col, .hero__pitch, .hero__chat-stack{display:contents;}
  .hero__claim-block > * + *{margin-top:0;}
  .hero__pitch{margin-top:0;}
  .hero .eyebrow{order:1; font-size:.68rem; letter-spacing:.06em;}
  .hero .claim{order:2;}
  .hero .lede{order:3;}
  .hero__pitch-cta{order:4; margin-top:var(--s2);}
  #site-form, #chat-form{order:5;}
  .hero__badge{order:6; margin-top:0;}
  .hero__pitch-text{order:7;}
  .field-row{grid-template-columns:1fr;}
  /* reseñas: cabecera apilada, flechas ocultas (swipe), tarjetas algo menores */
  .resenas__head{flex-direction:column; align-items:flex-start;}
  .resenas__nav{display:none;}
  /* basis en vw (no %) porque el track es width:max-content y el % colapsa */
  .review{flex-basis:82vw; max-width:340px;}
  /* zigzag: línea a la izquierda, cards a la derecha */
  .zz-step{padding-left:var(--s6);}
  .zz-card{width:auto;}
  .zz-step--left .zz-node,
  .zz-step--right .zz-node{left:0; right:auto; transform:translate(-50%,-50%);}
  /* cola: las balas pasan a lista estática centrada bajo el punto 4 */
  .zz-tail{min-height:0; display:flex; flex-direction:column; align-items:center;
    gap:var(--s3); margin-top:var(--s5); padding-left:0;}
  .zz-bullet{position:static; opacity:1; transform:none; text-align:center; width:auto; max-width:30ch;}
  .zz-tail__cta{position:static; transform:none; margin-top:var(--s3);}
  .zz-node--anchor{display:none;}
  /* en móvil la flecha fluye hacia abajo (y rotada como base para reduced-motion) */
  .hero__pitch-cta .icon{transform:rotate(90deg); animation-name:arrow-glide-down;}
  /* la tabla comparativa entra sin scroll horizontal */
  .dark{padding:1.9rem 1.1rem;}
  .ctab th,.ctab td{padding:.5rem .3rem;}
  .ctab thead th{font-size:.72rem;}
  .ctab tbody th{font-size:.8rem;}
  .ctab .icon{font-size:1.15rem;}
  .reco-pill{display:none;}
  .reco-star{display:inline-flex;}
}

/* =========================================================================
   Reduced motion — se respeta por completo (no-negociable)
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto;}
  [data-anim]{opacity:1!important; transform:none!important;}
  .decor__item{opacity:1!important;}   /* decoración visible, sin animación */
}