/* ==========================================================================
   NERON · Sistema de diseño
   Jerarquía cromática: Blanco → Burgundy → Gris/Negro → Dorado
   Un solo archivo compartido por index.html, faq.html y contacto.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Superficies */
  --bg:#ffffff;
  --bg-soft:#fbf9f7;          /* secciones alternas, blanco cálido */
  --bg-tint:#f6f1ec;          /* bloques sutiles */
  --bg-wine:#f9eff1;          /* lavado burgundy muy tenue */

  /* Tinta */
  --ink:#14100f;              /* texto principal */
  --ink-2:#514845;            /* texto secundario */
  --ink-3:#786c69;            /* texto terciario / labels (AA sobre blanco y crema) */

  /* Burgundy — color de identidad */
  --wine:#7a1225;
  --wine-700:#5e0d1c;
  --wine-900:#3d0812;
  --wine-300:#c48a96;
  --wine-50:#f7ebee;

  /* Dorado — acento de lujo, nunca dominante */
  --gold:#a5842f;             /* iconos y marcas (>=3:1 sobre blanco) */
  --gold-ink:#8a6820;         /* texto pequeño dorado (contraste AA) */
  --gold-soft:#e8d5a3;
  --gold-50:#fcf7ea;

  /* Líneas */
  --line:#ece5df;
  --line-2:#e0d6cd;

  /* WhatsApp */
  --wa:#1faa56;
  --wa-700:#0f7539;

  /* Tipografía */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Espaciado (escala fija, sin valores arbitrarios) */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:80px;  --s10:96px; --s11:120px;

  /* Radios */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* Sombras — extremadamente sutiles, tintadas en cálido */
  --sh-1:0 1px 2px rgba(20,16,15,.04), 0 1px 1px rgba(20,16,15,.03);
  --sh-2:0 4px 16px -4px rgba(20,16,15,.07), 0 2px 6px -2px rgba(20,16,15,.04);
  --sh-3:0 18px 44px -14px rgba(20,16,15,.14), 0 6px 16px -8px rgba(20,16,15,.07);
  --sh-4:0 40px 80px -24px rgba(20,16,15,.20), 0 12px 30px -12px rgba(20,16,15,.10);
  --sh-wine:0 12px 26px -10px rgba(122,18,37,.42);

  /* Movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-micro:180ms;
  --t-hover:240ms;
  --t-menu:300ms;
  --t-enter:600ms;

  /* Layout */
  --wrap:1180px;
  --header-h:78px;
  --header-h-sticky:64px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  /* Compensa el header fijo al saltar a una sección */
  scroll-padding-top:calc(var(--header-h-sticky) + var(--s5));
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}

/* Foco visible y consistente en toda la página */
:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--wine);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}

/* Salto de accesibilidad al contenido */
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:300;
  background:var(--wine);color:#fff;padding:12px 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;transition:top var(--t-micro) var(--ease);
}
.skip:focus{top:var(--s4)}

.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;
}

/* Iconos del sprite */
.ic{
  width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.135em;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA / JERARQUÍA
   -------------------------------------------------------------------------- */
.h-display{font-size:clamp(38px,6.4vw,68px);letter-spacing:-.028em;line-height:1.06}
.h-section{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.022em}
.h-card{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.012em}

/* Palabra destacada dentro de un título */
.mark{
  font-style:normal;color:var(--wine);position:relative;white-space:nowrap;
}
.mark::after{
  content:'';position:absolute;left:2%;right:2%;bottom:.06em;height:.075em;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--gold) 50%,var(--gold-soft) 82%,transparent);
  border-radius:2px;transform:scaleX(0);transform-origin:left center;
  animation:markIn 900ms var(--ease) 700ms forwards;
}
@keyframes markIn{to{transform:scaleX(1)}}

/* Etiqueta superior de sección */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);
}
.eyebrow .ic{font-size:14px;color:var(--gold)}
.eyebrow--rule::before,.eyebrow--rule::after{
  content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft));
}
.eyebrow--rule::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}

.lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--ink-2);line-height:1.68;text-wrap:pretty}

/* Encabezado de sección centrado */
.sec-head{text-align:center;max-width:680px;margin:0 auto var(--s8)}
.sec-head .eyebrow{margin-bottom:var(--s3)}
.sec-head h2{margin-bottom:var(--s4)}
.sec-head p{color:var(--ink-2);font-size:17px;text-wrap:pretty}

section{scroll-margin-top:calc(var(--header-h-sticky) + var(--s4))}
.band{padding-block:clamp(64px,9vw,var(--s11))}
.band--soft{background:var(--bg-soft);border-block:1px solid var(--line)}

/* --------------------------------------------------------------------------
   4. BOTONES — sistema único
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:48px;padding-inline:var(--s5);
  border-radius:var(--r-full);border:1.5px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;cursor:pointer;position:relative;
  transition:background var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease);
}
.btn .ic{font-size:18px;stroke-width:1.9}
.btn--lg{height:54px;padding-inline:var(--s6);font-size:16px}
.btn--sm{height:40px;padding-inline:var(--s4);font-size:14px}
.btn--block{width:100%}
.btn:active{transform:translateY(0) scale(.99)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* Primario: burgundy */
.btn--primary{background:var(--wine);color:#fff;box-shadow:var(--sh-wine)}
.btn--primary:hover{background:var(--wine-700);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(122,18,37,.5)}

/* Secundario: blanco con borde burgundy */
.btn--secondary{background:#fff;color:var(--wine);border-color:var(--wine-300);box-shadow:var(--sh-1)}
.btn--secondary:hover{border-color:var(--wine);background:var(--wine-50);transform:translateY(-2px);box-shadow:var(--sh-2)}

/* Fantasma: para el header */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--wine);color:var(--wine);background:var(--wine-50)}

/* Acento dorado */
.btn--gold{background:linear-gradient(180deg,#e2c274,var(--gold));color:#2a1f06;box-shadow:0 10px 24px -10px rgba(184,147,63,.6)}
.btn--gold:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(184,147,63,.7)}

/* WhatsApp */
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -10px rgba(31,170,86,.55)}
.btn--wa:hover{background:var(--wa-700);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(31,170,86,.6)}

/* Sobre fondo burgundy */
.on-wine .btn--secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.on-wine .btn--secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Enlace con flecha */
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:600;color:var(--wine);
  transition:gap var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.link-arrow .ic{font-size:16px;transition:transform var(--t-hover) var(--ease)}
.link-arrow:hover{gap:10px}
.link-arrow:hover .ic{transform:translateX(2px)}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--t-menu) var(--ease),
             border-color var(--t-menu) var(--ease),
             box-shadow var(--t-menu) var(--ease),
             backdrop-filter var(--t-menu) var(--ease);
}
.hdr__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  height:var(--header-h);
  transition:height var(--t-menu) var(--ease);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 3px rgba(20,16,15,.05);
}
.hdr.is-stuck .hdr__inner{height:var(--header-h-sticky)}

/* Logo: se usa el archivo original sin alterar; brightness(0) sólo lo pinta
   en negro sólido conservando forma, proporciones y transparencia. */
.brand{display:flex;align-items:center;flex:none}
.brand img{
  height:44px;width:auto;
  filter:brightness(0);
  transition:height var(--t-menu) var(--ease),opacity var(--t-hover) var(--ease);
}
.hdr.is-stuck .brand img{height:38px}
.brand:hover img{opacity:.72}
/* Sobre fondos oscuros el logo va tal cual (ya es blanco) */
.brand--light img{filter:none}

/* Navegación desktop */
.nav{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;border-radius:var(--r-xs);
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:color var(--t-hover) var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--wine);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-hover) var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(.55);background:var(--gold)}
.nav__link.is-active{color:var(--wine);font-weight:600}
.nav__link.is-active::after{transform:scaleX(1)}

.hdr__actions{display:flex;align-items:center;gap:var(--s3);flex:none}

/* Botón hamburguesa */
.burger{
  display:none;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;border:1px solid var(--line-2);
  transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease);
}
.burger:hover{border-color:var(--wine);background:var(--wine-50)}
.burger span{
  display:block;width:19px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform var(--t-menu) var(--ease),opacity var(--t-micro) var(--ease);
}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   6. DRAWER MÓVIL
   -------------------------------------------------------------------------- */
.drawer{
  /* Por encima del header fijo (z-index 100) para que no se superpongan
     los dos logotipos ni los dos botones de cierre. */
  position:fixed;inset:0;z-index:110;background:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-menu) var(--ease),
             transform var(--t-menu) var(--ease),
             visibility var(--t-menu);
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding-inline:var(--s5);
  max-width:var(--wrap);width:100%;margin-inline:auto;
  border-bottom:1px solid var(--line);
}
.drawer__close{
  width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink);
  transition:border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.drawer__close:hover{border-color:var(--wine);color:var(--wine)}
.drawer__body{
  flex:1;overflow-y:auto;padding:var(--s6) var(--s5) var(--s5);
  max-width:var(--wrap);width:100%;margin-inline:auto;
}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(12px);
}
.drawer.is-open .drawer__link{
  animation:drawerIn 420ms var(--ease) forwards;
  animation-delay:calc(60ms + var(--i,0) * 45ms);
}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer__link .ic{font-size:18px;color:var(--gold);opacity:.7}
.drawer__link.is-active{color:var(--wine)}
.drawer__cta{display:grid;gap:var(--s3);margin-top:var(--s7)}
.drawer__cta .btn{height:52px}

/* --------------------------------------------------------------------------
   7. DECORACIÓN DE FONDO (sutil, complementaria)
   -------------------------------------------------------------------------- */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco svg{position:absolute;opacity:.5}
.deco__glow{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
}
.deco__glow--wine{background:radial-gradient(circle,rgba(122,18,37,.10),transparent 68%)}
.deco__glow--gold{background:radial-gradient(circle,rgba(184,147,63,.13),transparent 68%)}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(40px,6vw,var(--s9)));
  padding-bottom:clamp(48px,6vw,var(--s9));
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 62%,#fff 100%);
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,4vw,var(--s8));align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px 16px;border-radius:var(--r-full);
  border:1px solid var(--gold-soft);background:var(--gold-50);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:var(--s5);
}
.hero__badge .ic{font-size:14px;color:var(--gold)}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{max-width:56ch;margin-bottom:var(--s6)}
.hero .lead em{font-style:italic;color:var(--ink);font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Fila de confianza — ancho completo bajo el hero */
.trust{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s6);
  margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line);
}
.trust__item{display:flex;align-items:center;gap:var(--s3);min-width:0}
.trust__ic{
  flex:none;width:40px;height:40px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:19px;
  background:var(--wine-50);color:var(--wine);
}
.trust__t{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.trust__d{display:block;font-size:13px;color:var(--ink-3);line-height:1.4}

/* --------------------------------------------------------------------------
   9. MOCKUP DEL PRODUCTO (SVG puro — sin imágenes externas)
   -------------------------------------------------------------------------- */
.mock{position:relative;z-index:1;padding-block:var(--s5)}
.mock__float{animation:floaty 7s var(--ease-soft) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.mock__laptop{position:relative;filter:drop-shadow(0 30px 44px rgba(20,16,15,.18))}
.mock__lid{
  position:relative;padding:15px 12px;
  background:linear-gradient(145deg,#2c2527,#171314 48%,#241e20);
  border-radius:18px 18px 6px 6px;
}
.mock__cam{
  position:absolute;top:6.5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#463d3f;
}
.mock__screen{
  aspect-ratio:800/500;border-radius:7px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.mock__screen svg{width:100%;height:100%;display:block}
.mock__base{
  position:relative;height:15px;width:112%;margin-left:-6%;
  background:linear-gradient(180deg,#3a3234,#211b1d 55%,#100d0e);
  clip-path:polygon(0 0,100% 0,97.4% 100%,2.6% 100%);
  border-radius:0 0 8px 8px;
}
.mock__notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14%;height:6px;border-radius:0 0 7px 7px;background:rgba(0,0,0,.55);
}
.mock__phone{
  position:absolute;right:-7%;bottom:-4%;width:22%;z-index:2;
  filter:drop-shadow(0 24px 36px rgba(20,16,15,.22));
  animation:floaty 7s var(--ease-soft) .9s infinite;
}
.mock__halo{
  position:absolute;left:50%;top:52%;width:88%;aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(184,147,63,.14),rgba(122,18,37,.05) 42%,transparent 68%);
  filter:blur(46px);
}

/* --------------------------------------------------------------------------
   10. MÉTRICAS
   -------------------------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden;
}
.stat{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s6) var(--s5);
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:0}
.stat__ic{
  flex:none;width:44px;height:44px;border-radius:var(--r);
  display:grid;place-items:center;font-size:21px;
  background:var(--gold-50);color:var(--gold-ink);border:1px solid var(--gold-soft);
}
.stat__n{
  display:block;
  font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:700;
  color:var(--wine);line-height:1.1;letter-spacing:-.02em;
}
.stat__l{display:block;font-size:13px;color:var(--ink-3);line-height:1.4;margin-top:3px}

/* --------------------------------------------------------------------------
   11. TARJETAS DE SISTEMAS
   -------------------------------------------------------------------------- */
.systems{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}

.sys{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.sys:hover{transform:translateY(-6px);border-color:var(--wine-300);box-shadow:var(--sh-3)}
.sys:focus-within{border-color:var(--wine-300);box-shadow:var(--sh-3)}

.sys__media{
  position:relative;aspect-ratio:16/9;background:var(--bg-tint);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.sys__media svg{width:100%;height:100%}
.sys__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 78%,rgba(255,255,255,.55));
}
.sys__body{display:flex;flex-direction:column;flex:1;padding:var(--s5) var(--s5) var(--s6)}
.sys__top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.sys__ic{
  flex:none;width:46px;height:46px;border-radius:var(--r);
  display:grid;place-items:center;font-size:23px;
  background:var(--wine);color:#fff;box-shadow:var(--sh-wine);
}
.sys__cat{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink)}
.sys__body h3{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.015em}
.sys__desc{font-size:14.5px;color:var(--ink-2);margin-bottom:var(--s4);text-wrap:pretty}
.sys__feats{display:grid;gap:9px;margin-bottom:var(--s5)}
.sys__feats li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2);line-height:1.5}
.sys__feats .ic{font-size:16px;color:var(--gold);margin-top:3px;stroke-width:2.2}
.sys__price{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line);
  margin-bottom:var(--s4);font-size:13px;color:var(--ink-3);
}
.sys__price b{font-family:var(--display);font-size:29px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.sys__price .per{font-size:13.5px;color:var(--ink-3)}
.sys__note{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--wa-700);
  background:rgba(31,170,86,.09);padding:2px 9px;border-radius:var(--r-full);
}
.sys .btn{width:100%}
.sys:hover .btn--primary{background:var(--wine-700)}

/* --------------------------------------------------------------------------
   12. BENEFICIOS
   -------------------------------------------------------------------------- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.benefit{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.benefit:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:var(--sh-2)}
.benefit__ic{
  width:52px;height:52px;border-radius:var(--r);margin-bottom:var(--s4);
  display:grid;place-items:center;font-size:24px;
  background:var(--wine-50);color:var(--wine);
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.benefit:hover .benefit__ic{background:var(--wine);color:#fff}
.benefit h3{font-family:var(--display);font-size:20px;margin-bottom:var(--s2)}
.benefit p{font-size:14.5px;color:var(--ink-2);text-wrap:pretty}

/* --------------------------------------------------------------------------
   13. PRECIOS
   -------------------------------------------------------------------------- */
.toggle{
  display:inline-flex;padding:4px;gap:2px;margin:0 auto var(--s7);
  background:var(--bg-tint);border:1px solid var(--line);border-radius:var(--r-full);
}
.toggle__btn{
  padding:9px 20px;border-radius:var(--r-full);
  font-size:14px;font-weight:600;color:var(--ink-3);
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease);
}
.toggle__btn[aria-selected="true"]{background:#fff;color:var(--wine);box-shadow:var(--sh-1)}
.toggle__save{
  font-size:10.5px;font-weight:700;color:var(--wa-700);
  background:rgba(31,170,86,.12);padding:1px 7px;border-radius:var(--r-full);margin-left:6px;
}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6) var(--s5);
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--wine-300)}
.plan--featured{border-color:var(--wine);box-shadow:var(--sh-2)}
.plan__tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:var(--wine);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 13px;border-radius:var(--r-full);
  box-shadow:var(--sh-wine);
}
.plan__tag .ic{font-size:12px;color:var(--gold-soft)}
.plan__name{font-family:var(--display);font-size:22px;font-weight:600;margin-bottom:2px}
.plan__desc{font-size:13.5px;color:var(--ink-3);margin-bottom:var(--s4);min-height:1.4em}
.plan__price{display:flex;align-items:baseline;gap:5px;margin-bottom:var(--s2)}
.plan__price b{font-family:var(--display);font-size:44px;font-weight:700;color:var(--wine);line-height:1;letter-spacing:-.03em}
.plan__price span{font-size:14px;color:var(--ink-3);font-weight:500}
.plan__save{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:11.5px;font-weight:700;color:var(--wa-700);
  background:rgba(31,170,86,.1);padding:3px 10px;border-radius:var(--r-full);margin-bottom:var(--s3);
}
.plan__trial{font-size:12.5px;font-weight:600;margin-bottom:var(--s4);color:var(--ink-3)}
.plan__trial.yes{color:var(--wa-700)}
.plan__feats{display:grid;gap:8px;margin-bottom:var(--s6)}
.plan__feats li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.plan__feats .ic{font-size:15px;color:var(--gold);margin-top:3px;stroke-width:2.4}
.plan .btn{margin-top:auto;width:100%}

.plans-note{
  display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;
  justify-content:center;text-align:center;
  margin-top:var(--s6);font-size:13.5px;color:var(--ink-3);
}
.plans-other{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);margin-top:var(--s7);
}
.price-mini{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),transform var(--t-hover) var(--ease);
}
.price-mini:hover{border-color:var(--wine-300);box-shadow:var(--sh-2);transform:translateY(-3px)}
.price-mini__l{display:flex;align-items:center;gap:var(--s4);min-width:0}
.price-mini__ic{
  flex:none;width:46px;height:46px;border-radius:var(--r);
  display:grid;place-items:center;font-size:22px;background:var(--wine);color:#fff;
}
.price-mini h3{font-family:var(--display);font-size:20px;margin-bottom:1px}
.price-mini p{font-size:13px;color:var(--ink-3)}
.price-mini__r{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.price-mini__p{font-family:var(--display);font-size:26px;font-weight:700;color:var(--wine);letter-spacing:-.02em}
.price-mini__p small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   14. FAQ (acordeón)
   -------------------------------------------------------------------------- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  width:100%;text-align:left;padding:var(--s5) 0;
  font-family:var(--display);font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--ink);
  transition:color var(--t-hover) var(--ease);
}
.faq__q:hover{color:var(--wine)}
.faq__q[aria-expanded="true"]{color:var(--wine)}
.faq__chev{
  flex:none;width:30px;height:30px;border-radius:50%;margin-top:1px;
  display:grid;place-items:center;font-size:16px;
  border:1px solid var(--line-2);color:var(--wine);
  transition:transform var(--t-menu) var(--ease),
             background var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease);
}
.faq__q[aria-expanded="true"] .faq__chev{transform:rotate(180deg);background:var(--wine);color:#fff;border-color:var(--wine)}
.faq__a{
  overflow:hidden;height:0;
  transition:height var(--t-menu) var(--ease),opacity var(--t-hover) var(--ease);
  opacity:0;
}
.faq__q[aria-expanded="true"]+.faq__a{opacity:1}
.faq__a p{padding:0 56px var(--s5) 0;font-size:15.5px;color:var(--ink-2);text-wrap:pretty}

/* --------------------------------------------------------------------------
   15. CONTACTO (sección en la landing)
   WhatsApp es el único canal de atención: ocupa el bloque principal.
   -------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:stretch}

.wa-panel{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 var(--s5);align-content:start;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6) var(--s6) var(--s6) calc(var(--s6) + 4px);overflow:hidden;
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.wa-panel::before{
  content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--wa),var(--wa-700));
}
.wa-panel:hover{transform:translateY(-4px);border-color:rgba(31,170,86,.45);box-shadow:var(--sh-3)}
.wa-panel__ic{
  flex:none;width:64px;height:64px;border-radius:var(--r-lg);
  display:grid;place-items:center;font-size:31px;
  background:var(--wa);color:#fff;box-shadow:0 10px 24px -10px rgba(31,170,86,.6);
}
.wa-panel__ic{grid-column:1;grid-row:1}
.wa-panel__body{grid-column:2;grid-row:1;min-width:0}
.wa-panel__tag{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wa-700);background:rgba(31,170,86,.1);
  padding:3px 10px;border-radius:var(--r-full);margin-bottom:var(--s3);
}
.wa-panel h3{font-family:var(--display);font-size:24px;margin-bottom:2px}
.wa-panel__num{
  display:block;font-size:20px;font-weight:700;color:var(--wine);
  letter-spacing:.02em;margin-bottom:var(--s3);
}
.wa-panel p{font-size:14.5px;color:var(--ink-2);text-wrap:pretty}
.wa-panel .btn{
  grid-column:2;grid-row:2;justify-self:start;
  margin-top:var(--s5);pointer-events:none;
}
.wa-panel:hover .btn--wa{background:var(--wa-700)}
.contact-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease);
}
.contact-card:hover{transform:translateY(-4px);border-color:var(--wine-300);box-shadow:var(--sh-2)}
.contact-card__ic{
  width:50px;height:50px;border-radius:var(--r);margin-bottom:var(--s4);
  display:grid;place-items:center;font-size:23px;background:var(--wine-50);color:var(--wine);
}
.contact-card__ic.wa{background:rgba(31,170,86,.1);color:var(--wa-700)}
.contact-card h3{font-family:var(--display);font-size:19px;margin-bottom:6px}
.contact-card p{font-size:14px;color:var(--ink-2);margin-bottom:var(--s5);flex:1;text-wrap:pretty}
.contact-card .link-arrow{margin-top:auto}

/* --------------------------------------------------------------------------
   16. CTA FINAL
   -------------------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--wine-900) 0%,var(--wine) 55%,var(--wine-700) 100%);
  padding-block:clamp(64px,8vw,var(--s10));
}
.cta__deco{position:absolute;inset:0;pointer-events:none;opacity:.5}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:var(--s4)}
.cta h2 .mark{color:var(--gold-soft)}
.cta h2 .mark::after{background:linear-gradient(90deg,transparent,rgba(232,213,163,.7),transparent)}
.cta p{color:rgba(255,255,255,.82);font-size:18px;margin-bottom:var(--s6);text-wrap:pretty}
.cta__btns{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.cta__rule{
  width:56px;height:1px;margin:0 auto var(--s5);
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.ftr{background:var(--bg-soft);border-top:1px solid var(--line);padding-block:var(--s8) var(--s5)}
.ftr__top{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s7) var(--s5);
  padding-bottom:var(--s7);border-bottom:1px solid var(--line);
}
.ftr__brand img{height:44px;width:auto;filter:brightness(0);margin-bottom:var(--s4)}
.ftr__brand p{font-size:14px;color:var(--ink-3);max-width:34ch;text-wrap:pretty}
.ftr__col h4{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s4);
}
.ftr__col a{
  display:block;font-size:14.5px;color:var(--ink-2);padding-block:6px;
  transition:color var(--t-hover) var(--ease),padding-left var(--t-hover) var(--ease);
}
.ftr__col a:hover{color:var(--wine);padding-left:4px}
.ftr__bot{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);
  align-items:center;justify-content:space-between;
  padding-top:var(--s5);font-size:13.5px;color:var(--ink-3);
}
.ftr__legal{display:flex;flex-wrap:wrap;gap:var(--s5)}
.ftr__legal a{transition:color var(--t-hover) var(--ease)}
.ftr__legal a:hover{color:var(--wine)}

/* --------------------------------------------------------------------------
   18. WHATSAPP FLOTANTE + BARRA MÓVIL
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;z-index:90;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;font-size:27px;
  background:var(--wa);color:#fff;box-shadow:0 10px 28px -8px rgba(31,170,86,.6);
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease);
}
.wa-float:hover{transform:scale(1.07);box-shadow:0 16px 36px -8px rgba(31,170,86,.7)}
.wa-float::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(31,170,86,.45);
  animation:waPing 2.6s var(--ease-soft) infinite;
}
@keyframes waPing{0%{box-shadow:0 0 0 0 rgba(31,170,86,.45)}70%,100%{box-shadow:0 0 0 16px rgba(31,170,86,0)}}
.wa-float__tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;background:var(--ink);color:#fff;
  font-size:13px;font-weight:500;padding:7px 13px;border-radius:var(--r-xs);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-hover) var(--ease),transform var(--t-hover) var(--ease);
}
.wa-float:hover .wa-float__tip,.wa-float:focus-visible .wa-float__tip{opacity:1;transform:translateY(-50%)}

/* Barra inferior sólo en móvil */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;gap:var(--s3);
  padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform var(--t-menu) var(--ease);
}
.mbar.is-visible{transform:none}
.mbar .btn{flex:1;height:46px;font-size:14.5px}
.mbar .btn--wa{flex:0 0 46px;padding:0}

/* --------------------------------------------------------------------------
   19. MODAL
   -------------------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:var(--s5);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-menu) var(--ease),visibility var(--t-menu);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__overlay{
  position:absolute;inset:0;background:rgba(20,16,15,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal__panel{
  position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 48px);
  overflow-y:auto;background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-4);padding:var(--s6);
  transform:translateY(14px) scale(.98);
  transition:transform var(--t-menu) var(--ease);
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:var(--s4);right:var(--s4);
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);font-size:18px;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.modal__close:hover{background:var(--bg-tint);color:var(--ink)}
.modal__head{text-align:center;margin-bottom:var(--s5)}
.modal__head h2{font-size:24px;margin-bottom:6px}
.modal__head p{font-size:14.5px;color:var(--ink-2)}
.modal__list{display:grid;gap:var(--s3)}
.modal__opt{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),transform var(--t-hover) var(--ease);
}
.modal__opt:hover{border-color:var(--wine);background:var(--wine-50);transform:translateX(3px)}
.modal__opt .ic{font-size:22px;color:var(--wine);flex:none}
.modal__opt b{display:block;font-size:15px;font-weight:600}
.modal__opt span{display:block;font-size:13px;color:var(--ink-3)}
.modal__opt .link-arrow{margin-left:auto}
.modal__foot{margin-top:var(--s5);text-align:center;font-size:13.5px;color:var(--ink-3)}

body.is-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   20. ANIMACIONES DE ENTRADA
   -------------------------------------------------------------------------- */
.rv{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease);
  transition-delay:calc(var(--d,0) * 80ms);
}
.rv.is-in{opacity:1;transform:none}
.rv--scale{transform:translateY(20px) scale(.985)}
.rv--scale.is-in{transform:none}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .benefits{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  :root{--header-h:70px;--header-h-sticky:60px}
  .nav{display:none}
  .hdr__actions .btn--ghost{display:none}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:var(--s6)}
  .hero{text-align:left;padding-bottom:var(--s7)}
  .hero .lead{max-width:none}
  .mock{order:2;max-width:560px;margin-inline:auto;width:100%}
  .mock__phone{width:21%;right:0}
  .systems{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .plan--featured{order:-1}
  .plans-other{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .ftr__top{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
  .ftr__brand{grid-column:1/-1}
  .mbar{display:flex}
  .wa-float{display:none}
}

@media (max-width:720px){
  :root{--wrap:100%}
  .wrap{padding-inline:var(--s4)}
  .band{padding-block:var(--s9) var(--s8)}
  .sec-head{margin-bottom:var(--s7)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .trust{grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s7);padding-top:var(--s5)}
  .stats{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:var(--s5)}
  .stat:last-child{border-bottom:0}
  .benefits{grid-template-columns:1fr;gap:var(--s4)}
  .faq__a p{padding-right:var(--s4)}
  /* El bloque de WhatsApp pasa a una sola columna en móvil */
  .wa-panel{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 4px)}
  .wa-panel__ic{grid-column:1;grid-row:1;width:56px;height:56px;font-size:27px}
  .wa-panel__body{grid-column:1;grid-row:2}
  .wa-panel .btn{grid-column:1;grid-row:3;width:100%;margin-top:var(--s4)}
  .price-mini{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .price-mini__r{width:100%;justify-content:space-between}
  .ftr__top{grid-template-columns:1fr}
  .ftr__bot{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .drawer__link{font-size:21px}
}

@media (max-width:600px){
  /* El CTA vive en la barra inferior fija: el header queda compacto. */
  .hdr__actions .btn--primary{display:none}
}

@media (max-width:400px){
  .wrap{padding-inline:var(--s3)}
  .btn{padding-inline:var(--s4);font-size:14.5px}
  .btn--lg{height:50px;padding-inline:var(--s5)}
  .sys__body,.plan{padding-inline:var(--s4)}
  .mbar .btn{font-size:13.5px}
}

/* --------------------------------------------------------------------------
   22. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .mark::after{transform:scaleX(1)}
  .drawer.is-open .drawer__link{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   23. IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print{
  .hdr,.drawer,.wa-float,.mbar,.modal,.mock,.deco{display:none !important}
  .rv{opacity:1;transform:none}
  body{background:#fff}
}

/* Footer: la atención (WhatsApp) va separada de los perfiles de marca */
.ftr__hint{font-size:12.5px;color:var(--ink-3);margin:2px 0 var(--s5);line-height:1.45}
.ftr__h4--2{margin-top:var(--s2)}