/* ============================================================================
   OUTFIT DESIGN SYSTEM — serenna.es (web-lab)
   Sistema compartido extraído de home-outfit/index.html (patrón "Outfit").
   Contiene SOLO lo común a todas las páginas: tokens, base, chrome (nav,
   sticky bar, footer), botones, eyebrow, shell de sección, card, primitivas.
   Lo bespoke de una página (hero parallax, demos de pilares, carrusel,
   calculadora de precios, tablas comparativas) NO vive aquí.

   Fuente: web-lab/home-outfit/index.html — valores EXACTOS, sin redondear.
   Font requerida: Google "Outfit" (wght 300..800). Ver _SYSTEM-SPEC.md.
   IMPORTANTE: las páginas NO deben redeclarar los tokens por sección
   (el patrón lo hacía en cada .sNN — eso es el bloqueante nº1 a evitar).
   ============================================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* Tinta / base oscura */
  --tinta:#0E1A17;          /* fondo oscuro principal (hero top, footer)        */
  --tinta-2:#15241F;        /* tinta un punto más clara                         */

  /* Crema / lienzo claro */
  --crema:#F4F1EA;          /* fondo de página (body)                           */
  --crema-2:#ECE6D8;        /* crema sombreada (tags, fondos suaves)            */

  /* Teal (color de marca) */
  --teal:#2E8B7E;           /* teal base                                        */
  --teal-deep:#0F5249;      /* teal profundo (texto sobre claro, cabeceras)     */
  --teal-mid:#15756A;       /* teal medio                                       */
  --teal-soft:#84C2B5;      /* teal claro (acentos sobre oscuro)                */

  /* Cobre (acento / CTA) */
  --cobre:#B9682E;          /* cobre — color de TODOS los CTA primarios         */
  --cobre-2:#E0975A;        /* cobre claro (estrellas, glows, hovers)           */

  /* Neutros de texto */
  --ink-soft:#C7D2CC;       /* texto claro sobre fondo oscuro                   */
  --muted:#8A968F;          /* texto secundario sobre claro                     */
  --dim:#5E6E68;            /* texto terciario / labels                         */

  /* Líneas / bordes (derivados — usados como rgba literal en el patrón) */
  --line:rgba(14,26,23,.08);      /* divisores sobre claro                     */
  --line-2:rgba(14,26,23,.07);    /* borde de cards blancas                    */
  --line-dark:rgba(199,210,204,.16); /* divisores sobre oscuro (footer/hero)   */

  /* Easings (del patrón) */
  --eout:cubic-bezier(.16,1,.3,1);     /* entrada suave — el easing dominante  */
  --ease:cubic-bezier(.62,.05,.01,.99);/* in-out — pulsos / breathe            */

  /* Type scale (derivado de los clamp() del patrón) */
  --fs-display:clamp(44px,5.5vw,78px); /* h1 hero                              */
  --fs-h2:clamp(31px,4.1vw,53px);      /* h2 de sección (el más común)         */
  --fs-h2-lg:clamp(33px,4.7vw,60px);   /* h2 grande (CTA final)                */
  --fs-h3:clamp(24px,2.5vw,33px);      /* h3                                   */
  --fs-lead:clamp(16px,1.4vw,19px);    /* subtítulo / lead                     */
  --fs-body:16px;                      /* cuerpo                               */
  --fs-sm:13.5px;                      /* texto pequeño                        */
  --fs-eyebrow:12px;                   /* eyebrow / labels                     */

  /* Radii (derivados) */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:24px;
  --r-2xl:36px;            /* cards grandes (CTA card, pq-card)                 */
  --r-pill:100px;          /* pills, botones, eyebrows                          */

  /* Spacing (derivado — sección típica 42–82px vertical, wrap 0 32px) */
  --wrap-max:1320px;       /* ancho de contenido por defecto                   */
  --wrap-pad:32px;         /* padding horizontal del wrap                      */
  --sec-pad-y:48px;        /* padding vertical de sección por defecto          */

  /* Sombras */
  --sh-card:0 24px 50px -34px rgba(14,26,23,.35);  /* card blanca              */
  --sh-card-hover:0 30px 60px -30px rgba(14,26,23,.4);
  --sh-cta:0 16px 38px -12px rgba(185,104,46,.7);  /* botón cobre (reposo)     */
  /* glow de hover del botón cobre (reutilizado en todos los CTA): */
  --sh-cta-hover:0 0 0 1px rgba(224,151,90,.5),0 0 20px rgba(224,151,90,.6),0 0 48px 9px rgba(185,104,46,.48),0 12px 30px -8px rgba(185,104,46,.55);
}

/* ── RESET + BASE ─────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--tinta);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  margin:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* Foco accesible (no estaba explícito en el patrón; añadido como base segura) */
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px;border-radius:4px}

/* Titulares: saltos equilibrados; H2 de sección más grandes en móvil */
h1,h2,h3{text-wrap:balance}
@media(max-width:600px){
  .sec h2{font-size:clamp(31px,8.4vw,38px)!important;line-height:1.12}
}

/* Tipografía display compartida (Outfit, tracking negativo) */
.disp,h1.disp{font-family:'Outfit',sans-serif;letter-spacing:-.035em;line-height:1;font-weight:600}
em{font-style:normal} /* el patrón usa <em> como acento de color, no cursiva */

/* ── SHELL DE SECCIÓN ─────────────────────────────────────────────────────── */
/* Cada sección del patrón es un <div class="sec sNN"> a pantalla completa,
   con fondo transparente sobre el lienzo crema del body. El padding vertical
   y los gradientes de fondo los pone cada sección. */
.sec{position:relative;width:100%;display:block}

/* Contenedor de contenido. max-width por defecto 1320; variantes 1180–1420. */
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);position:relative}
.wrap--wide{max-width:1400px}   /* hero, carrusel, CTA final */
.wrap--narrow{max-width:1180px} /* precios */

/* Padding vertical de sección (clase utilitaria; el patrón usa valores ad-hoc) */
.sec-pad{padding:var(--sec-pad-y) 0}

/* Cabecera de sección centrada (head + eyebrow + h2 + sub) */
.head{text-align:center;max-width:680px;margin:0 auto 42px}
.head h2{font-size:var(--fs-h2);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin-bottom:16px}
.head h2 em{color:var(--teal-deep)}
.head p{font-size:18px;color:var(--muted);line-height:1.6;max-width:560px;margin:0 auto}

/* ── FLECHA CTA (.arr / .sb-arr) ──────────────────────────────────────────── */
/* Sustituye el "→" del HTML por un SVG con máscara (hereda currentColor).
   Va dentro de cualquier botón/enlace; se desplaza en :hover del contenedor. */
.arr,.sb-arr{
  display:inline-block;width:1.5em;height:.82em;flex:0 0 auto;vertical-align:middle;
  text-indent:-999px;overflow:hidden;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h23'/%3E%3Cpath d='M17.5 1.5 24 7l-6.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h23'/%3E%3Cpath d='M17.5 1.5 24 7l-6.5 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── EYEBROW (pill de etiqueta) ───────────────────────────────────────────── */
/* En el patrón hay ~8 variantes (s02 .eyebrow, s07 .fc-eyebrow, s08/s09/s11
   .*-eyebrow, s12 .cta-eyebrow, s03/s13 planas). Aquí se unifican:
   - .eyebrow            → pill claro (sobre crema), teal-mid, con punto .p
   - .eyebrow--deep      → variante teal-deep (CTA / carrusel)
   - .eyebrow--hero      → sobre fondo OSCURO (hero), teal-soft, con pulso
   - .eyebrow--plain     → sin pill, uppercase tracking ancho (cintas) */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal-mid);
  padding:7px 15px 7px 11px;border-radius:var(--r-pill);
  background:rgba(46,139,126,.1);border:1px solid rgba(46,139,126,.22);
  margin-bottom:20px;
}
.eyebrow .p{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0}
.eyebrow--deep{color:var(--teal-deep);background:rgba(46,139,126,.10);border-color:rgba(46,139,126,.26)}

/* Eyebrow sobre fondo oscuro (hero): teal-soft + halo + punto que respira */
.eyebrow--hero{
  color:var(--teal-soft);letter-spacing:.05em;
  background:rgba(46,139,126,.14);border:1px solid rgba(160,214,202,.65);
  box-shadow:0 0 0 1px rgba(132,194,181,.12),0 6px 20px -10px rgba(132,194,181,.35);
  margin-bottom:30px;
}
.eyebrow--hero .p{background:var(--teal-soft);position:relative}
.eyebrow--hero .p::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:rgba(132,194,181,.4);animation:breathe 2.8s var(--ease) infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(2);opacity:0}}

/* Eyebrow plano (cintas/insignias): sin pill, uppercase, tracking ancho */
.eyebrow--plain{
  display:block;text-align:center;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}
@media(prefers-reduced-motion:reduce){.eyebrow--hero .p::after{animation:none!important}}

/* ── BOTONES ──────────────────────────────────────────────────────────────── */
/* CTA primario cobre. Unifica s02 .btn, s05 .pcta, s09 .mo-cta, s12 .cta-primary.
   Estructura HTML: <a class="btn"><span class="row">Texto <span class="arr"></span></span></a>
   Variante de 2 líneas: añade <small> tras .row (label + subcopy). */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--cobre);color:#fff;
  padding:14px 30px;border-radius:var(--r-pill);
  box-shadow:var(--sh-cta);
  transition:transform .35s var(--eout),box-shadow .35s var(--eout),background .25s;
  cursor:pointer;border:none;font-family:inherit;
}
.btn .row{display:inline-flex;align-items:center;gap:.5em;font-size:17px;font-weight:600}
.btn small{font-size:11.5px;font-weight:500;opacity:.85}
.btn .arr{transition:transform .35s var(--eout)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-cta-hover)}
.btn:hover .arr{transform:translateX(4px)}

/* Tamaño compacto (s05 .pcta) */
.btn--sm{padding:13px 26px}
.btn--sm .row{font-size:14.5px}

/* Botón secundario fantasma (s02 .btn-ghost) — sobre fondo OSCURO */
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:15px;font-weight:600;color:var(--crema);
  padding:15px 26px;border-radius:var(--r-pill);
  border:1px solid rgba(199,210,204,.34);
  transition:border-color .25s,background .25s,transform .3s var(--eout);
}
.btn-ghost:hover{border-color:rgba(132,194,181,.65);background:rgba(132,194,181,.10);transform:translateY(-2px)}

/* ── NAV / HEADER ─────────────────────────────────────────────────────────── */
/* Nav del patrón (s02 .nav): absoluta sobre el hero oscuro. Logo en blanco
   (filtro invert), enlaces claros, CTA cobre compacto.
   OJO: el patrón NO tiene menú hamburguesa móvil — ver Bloqueantes en SPEC. */
.nav{position:absolute;top:0;left:0;right:0;z-index:50;height:110px;display:flex;align-items:center}
.nav .wrap{max-width:1420px;display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{display:flex;align-items:center}
.logo img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.96}
.nav-r{display:flex;align-items:center;gap:34px}
.nav-r a.link{font-size:18px;font-weight:500;color:var(--ink-soft);transition:color .25s}
.nav-r a.link:hover{color:var(--crema)}
.nav-cta{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:17px;font-weight:600;color:#fff;background:var(--cobre);
  padding:14px 30px;border-radius:var(--r-pill);
  transition:transform .3s var(--eout),background .25s,box-shadow .3s var(--eout);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(224,151,90,.5),0 0 16px rgba(224,151,90,.55),0 0 38px 7px rgba(185,104,46,.45)}

/* ── STICKY CTA BAR (s00) ─────────────────────────────────────────────────── */
/* Barra fija superior que aparece (.sb-show) al pasar ~82% del viewport.
   La revela un script (ver SPEC). Fondo teal, botón cobre con anillo blanco. */
.sb-bar{
  position:fixed;top:0;left:0;right:0;z-index:80;transform:translateY(-100%);
  transition:transform .5s var(--eout);
  background:var(--teal);
  box-shadow:0 10px 30px -12px rgba(15,82,73,.5);
}
.sb-bar.sb-show{transform:translateY(0)}
.sb-inner{position:relative;max-width:1320px;margin:0 auto;padding:10px 36px;display:flex;align-items:center;justify-content:center;gap:30px}
.sb-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sb-txt strong{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.015em}
.sb-cta{
  flex-shrink:0;display:inline-flex;flex-direction:column;align-items:center;gap:0;color:#fff;
  background:var(--cobre);padding:9px 28px;border-radius:var(--r-pill);text-decoration:none;
  box-shadow:0 8px 22px -6px rgba(120,55,15,.5),0 0 0 2px rgba(255,255,255,.20);
  transition:transform .3s var(--eout),background .25s,box-shadow .3s var(--eout);
}
.sb-cta-main{display:inline-flex;align-items:center;gap:.45em;font-size:15.5px;font-weight:700}
.sb-cta-sub{font-size:11px;font-weight:500;opacity:.9;margin-top:1px}
.sb-cta:hover{transform:translateY(-1px);background:#CB752F;box-shadow:0 0 0 2px rgba(255,255,255,.32),0 0 20px rgba(224,151,90,.7),0 10px 26px -6px rgba(120,55,15,.55)}
.sb-cta .sb-arr{transition:transform .3s var(--eout)}
.sb-cta:hover .sb-arr{transform:translateX(3px)}
@media(max-width:760px){
  .sb-inner{flex-direction:column;padding:13px 18px 15px;gap:11px;text-align:center}
  .sb-txt{align-items:center}
  .sb-txt strong{font-size:17px;line-height:1.22}
  .sb-cta{width:auto;padding:12px 30px}
}
@media(prefers-reduced-motion:reduce){.sb-bar{transition:none}}

/* ── CARD GENÉRICA ────────────────────────────────────────────────────────── */
/* Patrón base de las cards blancas (s08 .ab-card, s11 .te-card, s07 .fc-card):
   fondo blanco, borde fino, radio 20, sombra suave, lift en hover. */
.card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transition:transform .4s var(--eout),box-shadow .4s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-card-hover)}

/* ── LISTA CON CHECK ──────────────────────────────────────────────────────── */
/* Item de lista con círculo + tick (patrón s05 .pane li / .ck). */
.check-list{list-style:none;display:grid;gap:7px}
.check-list li{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--tinta-2);line-height:1.3}
.check-list .ck{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:rgba(46,139,126,.16);display:flex;align-items:center;justify-content:center;
}
.check-list .ck svg{width:9px;height:9px;stroke:var(--teal-deep);stroke-width:3.5;fill:none}

/* ── TRUST ROW (cifra + estrellas + sello) ────────────────────────────────── */
/* Fila de prueba social del hero (s02 .trust). Sobre fondo oscuro. */
.trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.trust .tr{display:flex;align-items:center;gap:9px}
.trust .tr .n{font-family:'Outfit';font-size:26px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--crema)}
.trust .tr .stars{display:flex;gap:2px}
.trust .tr .stars svg{width:14px;height:14px;fill:var(--cobre-2)}
.trust .tr .t{font-size:13px;color:var(--ink-soft);line-height:1.25;max-width:96px}
.trust .tr-div{width:1px;height:32px;background:rgba(199,210,204,.18)}

/* ── MARQUEE / CINTA DE LOGOS ─────────────────────────────────────────────── */
/* Primitiva de cinta infinita (s03 insignias, s13 integraciones).
   Estructura: .marquee > .marquee-track x2 (la 2ª aria-hidden). El JS duplica. */
.marquee{
  display:flex;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;align-items:center;gap:16px;padding-right:16px;flex-shrink:0;animation:mq-scroll 30s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq-scroll{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ── PANEL OSCURO (gradiente de marca) ────────────────────────────────────── */
/* Fondo de las cards grandes oscuras (s06 .pq-card, s09 .mo-card): degradado
   tinta→teal + halo + textura de ruido. Reutilizable como contenedor. */
.dark-panel{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;color:var(--crema);
  background:linear-gradient(180deg,var(--tinta) 0%,#0F2620 38%,var(--teal-deep) 68%,var(--teal-mid) 88%,var(--teal) 100%);
}
.dark-panel::before{
  content:'';position:absolute;left:50%;bottom:-32%;width:1100px;height:680px;transform:translateX(-50%);
  pointer-events:none;z-index:1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(132,194,181,.34), rgba(132,194,181,.10) 55%, transparent 75%);
}
.dark-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark-panel>*{position:relative;z-index:3}

/* ── BANDA CTA FINAL (s12) ────────────────────────────────────────────────── */
/* Sección de cierre reutilizable: card clara con halos teal+cobre, h2, sub,
   botón cobre y línea de "fine print" con ticks. */
.cta-sec{position:relative;padding:40px 0 64px;overflow:hidden}
.cta-card{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;text-align:center;padding:84px 48px 78px;
  background:radial-gradient(80% 85% at 10% -2%, rgba(46,139,126,.34), transparent 56%),radial-gradient(85% 90% at 94% 108%, rgba(185,104,46,.30), transparent 56%),linear-gradient(168deg,#FBFAF6,var(--crema-2));
  border:1px solid rgba(46,139,126,.18);box-shadow:0 40px 96px -44px rgba(15,82,73,.45);
}
.cta-card::before{content:'';position:absolute;left:50%;top:-30%;width:980px;height:660px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(50% 50% at 50% 50%, rgba(46,139,126,.42), transparent 66%)}
.cta-card::after{content:'';position:absolute;left:50%;bottom:-46%;width:820px;height:560px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(50% 50% at 50% 50%, rgba(185,104,46,.34), transparent 68%)}
.cta-in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.cta-card h2{font-size:var(--fs-h2-lg);font-weight:600;line-height:1.0;letter-spacing:-.04em;margin-bottom:22px}
.cta-card h2 em{color:var(--teal-deep);font-weight:600}
.cta-card .sub{font-size:var(--fs-lead);line-height:1.55;color:#55605A;max-width:520px;margin:0 auto 40px}
.cta-card .sub b{color:var(--tinta);font-weight:600}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.cta-fine{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:13.5px;color:var(--dim)}
.cta-fine .it{display:inline-flex;align-items:center;gap:7px}
.cta-fine svg{width:15px;height:15px;fill:none;stroke:var(--teal-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta-fine .div{width:1px;height:14px;background:rgba(14,26,23,.14)}
@media(max-width:920px){.cta-card{padding:64px 28px 58px;border-radius:28px}}
@media(max-width:560px){
  .cta-btns{flex-direction:column;align-items:stretch}
  .cta-fine{flex-direction:column;gap:10px}
  .cta-fine .div{display:none}
}

/* ── FOOTER (s14) ─────────────────────────────────────────────────────────── */
/* Footer oscuro: banda de comparativas (pills) + brand + 4 columnas + bottom. */
.ft-sec{background:var(--tinta);color:var(--crema)}
.ft-wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.ft-comp{padding:30px 0 6px}
.ft-comp .lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px;text-align:center}
.ft-comp .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ft-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  padding:8px 16px;border-radius:var(--r-pill);border:1px solid rgba(199,210,204,.16);
  background:rgba(132,194,181,.04);transition:border-color .25s,color .25s,background .25s;
}
.ft-pill:hover{color:var(--crema);border-color:rgba(132,194,181,.45);background:rgba(132,194,181,.09)}
.ft-pill b{font-weight:600;color:var(--teal-soft)}
.ft{border-top:1px solid rgba(199,210,204,.1);margin-top:34px;padding:56px 0 34px}
.ft-top{display:grid;grid-template-columns:1.3fr 2.7fr;gap:60px}
.ft-brand img{height:34px;width:auto;display:block;margin-bottom:18px}
.ft-brand p{font-size:14px;line-height:1.6;color:var(--muted);max-width:34ch}
.ft-social{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;font-weight:600;color:var(--teal-soft);
  padding:9px 16px;border-radius:var(--r-pill);border:1px solid rgba(132,194,181,.28);
  transition:background .25s,transform .3s var(--eout);
}
.ft-social:hover{background:rgba(132,194,181,.1);transform:translateY(-1px)}
.ft-social svg{width:16px;height:16px;fill:currentColor}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.ft-col h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--crema);margin-bottom:16px}
.ft-col a{display:block;font-size:14px;color:var(--muted);margin-bottom:11px;transition:color .22s}
.ft-col a:hover{color:var(--teal-soft)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid rgba(199,210,204,.1);font-size:13px;color:var(--dim)}
.ft-bot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ft-bot a:hover{color:var(--teal-soft)}
@media(max-width:920px){
  .ft-wrap{padding:0 26px}
  .ft-top{grid-template-columns:1fr;gap:38px}
  .ft-cols{grid-template-columns:repeat(2,1fr);gap:28px}
  .ft-brand p{max-width:none}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:480px){.ft-cols{grid-template-columns:1fr}}

/* ── REVEAL ON SCROLL ─────────────────────────────────────────────────────── */
/* CANÓNICO unificado. El patrón usa ~9 clases distintas (.ci-rv→in,
   .pq-rv→pq-vis, .te-rv→te-vis, .cta-rv→cta-vis...) con un observer cada una.
   Sistema: una sola clase .reveal + .reveal.in y UN observer (ver SPEC).
   Soporta retardo escalonado con style="--i:N". */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--eout),transform .8s var(--eout);transition-delay:calc(var(--i,0)*.1s)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none!important}}

/* ── RESPONSIVE GLOBAL ────────────────────────────────────────────────────── */
@media(max-width:920px){
  :root{--wrap-pad:28px}
  .nav{height:84px}
  .nav .wrap{padding:0 28px}
  .head{margin-bottom:36px}
}
@media(max-width:560px){
  :root{--wrap-pad:20px}
  .btn{align-items:center}
  .nav-r{gap:18px}
  .nav-r a.link{font-size:15px}
  .nav-cta{font-size:14px;padding:11px 20px}
}


/* ============================================================================
   COMPONENTES PROMOVIDOS (de golden page)
   ----------------------------------------------------------------------------
   Extraídos de new-site/software-clinicas-fisioterapia/index.html, que los
   construyó bespoke por faltar en el sistema. Valores fieles a la golden page;
   sólo se generaliza lo imprescindible (nº de columnas de la tabla y el scoping
   del CTA móvil) para que las ~53 páginas del fan-out los reutilicen sin
   reinventarlos. Snippets de uso en _SYSTEM-SPEC.md §3.14–§3.20.
   ============================================================================ */

/* ── SKIP LINK (a11y) ─────────────────────────────────────────────────────── */
/* Primer focusable del <body>: <a class="skip" href="#contenido">…</a>. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cobre);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ── NAV: HAMBURGUESA MÓVIL + PANEL (resuelve B2) ─────────────────────────── */
/* El patrón no traía menú móvil. Botón .nav-burger (3 barras → X), panel
   desplegable .nav-panel y velo .nav-backdrop. Los enlaces de escritorio llevan
   .nav-d (se ocultan ≤920) y el burger aparece ≤920. Requiere el <script> de
   _SYSTEM-SPEC.md §3.14 (toggle de aria-expanded). */
/* Nav por encima del panel (z70) para que la X siga clicable al abrir. */
.nav{z-index:90}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:10px;border:1px solid rgba(199,210,204,.30);border-radius:12px;background:rgba(244,241,234,.08);cursor:pointer}
.nav-burger span{display:block;height:2px;width:100%;background:var(--crema);border-radius:2px;transition:transform .3s var(--eout),opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{position:fixed;inset:0;z-index:65;background:rgba(8,14,12,.55);opacity:0;visibility:hidden;transition:opacity .35s;display:none}
.nav-backdrop.open{opacity:1;visibility:visible}
.nav-panel{position:fixed;top:0;left:0;right:0;z-index:70;display:none;background:linear-gradient(180deg,var(--tinta),var(--tinta-2));padding:94px 22px 26px;transform:translateY(-100%);visibility:hidden;transition:transform .42s var(--eout),visibility .42s;box-shadow:0 26px 60px -24px rgba(0,0,0,.7)}
.nav-panel.open{transform:translateY(0);visibility:visible}
.nav-panel ul{list-style:none;display:grid;gap:2px}
.nav-panel ul a{display:block;font-size:18px;font-weight:500;color:var(--ink-soft);padding:14px 6px;border-bottom:1px solid var(--line-dark)}
.nav-panel ul a:hover{color:var(--crema)}
.nav-panel .btn{display:flex;margin-top:22px}
@media(max-width:920px){
  .nav-d{display:none}
  .nav-burger{display:flex}
  .nav-panel,.nav-backdrop{display:block}
}
/* Con burger presente, el CTA inline no cabe junto a logo+burger en móvil
   estrecho (sigue dentro del panel). Scoped con :has() a navs CON burger para
   no ocultar el CTA en páginas sin menú móvil (p.ej. el home). */
@media(max-width:560px){
  .nav-r:has(.nav-burger) .nav-cta{display:none}
}

/* ── ENLACE SECUNDARIO SOBRE CLARO (.lnk) ─────────────────────────────────── */
/* Acción de texto sobre fondo CLARO (teal-deep + flecha). Complementa a
   .btn-ghost, que sólo va sobre fondo OSCURO. */
.lnk{display:inline-flex;align-items:center;gap:.5em;font-size:15px;font-weight:600;color:var(--teal-deep)}
.lnk .arr{transition:transform .3s var(--eout)}
.lnk:hover .arr{transform:translateX(4px)}

/* ── EYEBROW CON ICONO ────────────────────────────────────────────────────── */
/* Permite un <svg> dentro de cualquier .eyebrow (sustituye al punto .p). Lo usan
   las eyebrows de .feat-row. Sólo afecta a eyebrows que contienen un svg. */
.eyebrow svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── PADDING DE SECCIÓN XL (.sec-pad--xl) ─────────────────────────────────── */
/* Modificador de .sec-pad (úsese junto a ella): 74px arriba/abajo. Va después
   de .sec-pad para que el longhand gane sobre el shorthand. */
.sec-pad--xl{padding-top:74px;padding-bottom:74px}

/* ── FILA DE FUNCIONES (.feat-row) + MARCO NAVEGADOR (.browser) ───────────── */
/* Espina dorsal de las páginas de producto: fila alterna copy + captura.
   .feat-row.flip invierte el orden (copy a la derecha). .browser = marco tipo
   navegador (barra de puntos + url + imagen). Colapsa a 1 columna ≤920. */
.feat-row{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:center;margin-bottom:90px}
.feat-row>*{min-width:0}
.feat-row:last-child{margin-bottom:0}
.feat-row.flip .feat-copy{order:2}
.feat-copy h3{font-size:var(--fs-h3);font-weight:600;line-height:1.1;letter-spacing:-.03em;margin:18px 0 16px}
.feat-copy h3 em{color:var(--teal-deep)}
.feat-desc{font-size:16px;line-height:1.6;color:var(--muted);max-width:440px;margin-bottom:22px}
.feat-copy .check-list{margin-bottom:26px;gap:11px}
.feat-copy .check-list li{font-size:14px}
.feat-media{position:relative}
.browser{position:relative;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 44px 90px -34px rgba(8,18,15,.62),0 0 0 1px rgba(255,255,255,.05)}
.browser-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#EDF0EF;border-bottom:1px solid rgba(14,26,23,.07)}
.b-dots{display:flex;gap:6px}
.b-dots i{width:10px;height:10px;border-radius:50%;background:#CBD3D0}
.b-url{font-size:12px;color:#6A7A74;background:#fff;border-radius:6px;padding:4px 12px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser img{display:block;width:100%;height:auto}
@media(max-width:920px){
  .feat-row,.feat-row.flip{grid-template-columns:1fr;gap:30px;margin-bottom:60px}
  .feat-row.flip .feat-copy{order:0}
}

/* ── PANEL OSCURO: padding interno + cabecera sobre oscuro ─────────────────── */
/* .dark-panel--pad: .dark-panel (§3.10) con padding interno (62/56; 46/30 ≤920).
   .head--on-dark: recolorea una .head dentro de .dark-panel sin reescribir
   colores por página (h2→crema, em→teal-soft, p→ink-soft). */
.dark-panel--pad{padding:62px 56px}
.head--on-dark h2{color:var(--crema)}
.head--on-dark h2 em{color:var(--teal-soft)}
.head--on-dark p{color:var(--ink-soft)}

/* ── TABLA COMPARATIVA (.cm) ──────────────────────────────────────────────── */
/* Serenna vs competidores (la usan las páginas alternativa- y comparativa del
   fan-out). Columnas generalizadas con --cm-cols (nº de columnas de datos,
   def. 5) y --cm-min (ancho mínimo antes del scroll horizontal interno,
   def. 660px). Para un 1-vs-1: style="--cm-cols:2;--cm-min:420px". Celdas:
   .cm-ok (tick), .cm-no (cruz gris), .cm-partial (texto cobre). Columna Serenna
   resaltada: .cm-h.sr (cabecera) / .cm-sr (valor); header con .cm-row.hr. */
.cm{max-width:940px;margin:0 auto;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden}
.cm-scroll{overflow-x:auto}
.cm-row{display:grid;grid-template-columns:1.7fr repeat(var(--cm-cols,5),1fr);min-width:var(--cm-min,660px)}
.cm-row+.cm-row{border-top:1px solid var(--line)}
.cm-row.hr{background:var(--crema-2)}
.cm-cell{padding:13px 10px;font-size:13.5px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--tinta-2);line-height:1.25}
.cm-cell:first-child{justify-content:flex-start;text-align:left;color:var(--muted);font-weight:500}
.cm-h{padding:15px 10px;font-size:14px;font-weight:700;color:var(--tinta);display:flex;align-items:center;justify-content:center;text-align:center}
.cm-h:first-child{justify-content:flex-start}
.cm-h.sr{color:var(--teal-deep)}
.cm-sr{font-weight:700;color:var(--teal-deep)}
.cm-ok svg{width:20px;height:20px;fill:none;stroke:var(--teal-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cm-no svg{width:16px;height:16px;fill:none;stroke:#C3CCC8;stroke-width:2.4;stroke-linecap:round}
.cm-partial{font-size:11.5px;font-weight:600;color:var(--cobre);line-height:1.2}

/* ── FAQ (acordeón <details>) ─────────────────────────────────────────────── */
/* Acordeón accesible nativo: .faq > details > (summary + p). Chevron CSS que
   rota al abrir; marker nativo oculto. */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-card)}
.faq summary{list-style:none;cursor:pointer;padding:19px 24px;font-size:16px;font-weight:600;color:var(--tinta);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:10px;height:10px;border-right:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);transform:rotate(45deg);transition:transform .3s var(--eout);flex-shrink:0;margin-top:-3px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.faq p{padding:0 24px 22px;font-size:14.5px;line-height:1.66;color:var(--muted)}

/* ── NOSCRIPT REVEAL FALLBACK (recordatorio; va en el HTML, no es CSS) ─────── */
/* .reveal depende del observer JS. Si JS está desactivado, cada página debe
   incluir en su <body> un bloque noscript con un style en línea que fuerce
   .reveal a opacity:1 / transform:none. Snippet exacto en _SYSTEM-SPEC.md §3.20. */

/* Responsive de los componentes promovidos (minor) */
@media(max-width:920px){
  .dark-panel--pad{padding:46px 30px}
  .sec-pad--xl{padding-top:56px;padding-bottom:56px}
}


/* === Cookie banner (port analitica) === */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:560px;margin:0 auto;background:var(--tinta,#0E1A17);color:var(--ink-soft,#C7D2CC);border:1px solid var(--line-dark,rgba(199,210,204,.16));border-radius:14px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.28);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;transform:translateY(160%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s;font-size:13.5px;line-height:1.5}
.cookie-banner.visible{transform:translateY(0);opacity:1}
.cookie-banner p{margin:0;flex:1;min-width:200px}
.cookie-banner a{color:var(--teal-soft,#84C2B5);text-decoration:underline}
.cookie-btns{display:flex;gap:16px;align-items:center;flex-shrink:0}
.cookie-btn-prefs{background:none;border:0;color:#8A968F;font-size:12px;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:4px 2px;opacity:.75;order:1}
.cookie-btn-prefs:hover{color:#C7D2CC;opacity:1}
.cookie-btn-accept{background:#B9682E;color:#fff;border:0;border-radius:9px;padding:13px 34px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap;order:2;box-shadow:0 4px 16px rgba(185,104,46,.28)}
.cookie-btn-accept:hover{background:#C97B3E;transform:translateY(-1px);box-shadow:0 8px 28px rgba(185,104,46,.45)}