/* =============================================================
   LM Matic — styles.css
   Dirección: "Sala de operaciones" — oscuro, cinematográfico.
   ADN de marca conservado: verde + coral (sobre lienzo verde-negro,
   texto crema). Tipografía: Space Grotesk (display) + Manrope (texto).
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Lienzo verde-negro (derivado de --green-deep #06392A) */
  --bg:        #06231A;
  --bg-2:      #08291F;
  --bg-3:      #041A14;
  --surface:   #0C3327;
  --surface-2: #0F3C2E;

  /* Marca */
  --green:      #17B083;   /* verde señal (brillante para fondo oscuro) */
  --green-core: #0B6B4E;   /* verde marca */
  --green-deep: #06392A;
  --coral:      #F0603A;   /* acento vivo (textos/acentos sobre oscuro) */
  --coral-2:    #FF7A4D;
  --coral-btn:  #C93B18;   /* relleno de botón: blanco legible AA (~5:1) */
  --coral-btn2: #B93A1C;   /* hover: oscurece (mantiene contraste) */
  --coral-deep: #B93A1C;
  --gold:       #D0A23A;
  --btn-text:   #FFFFFF;

  /* Texto / líneas (crema cálida = la "arena" de la marca) */
  --cream:     #F2ECDE;
  --text:      #EFE9DB;
  --text-mute: #A9B8AD;
  --text-dim:  #7E9088;
  --line:       rgba(242,236,222,0.12);
  --line-soft:  rgba(242,236,222,0.07);
  --line-strong:rgba(242,236,222,0.24);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --ease-soft:  cubic-bezier(0.4,0,0.2,1);

  --container: 1240px;
  --wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px;

  --sp: clamp(3.75rem, 7vw, 6.5rem);   /* espacio vertical de sección */

  --sh-1: 0 2px 10px -4px rgba(0,0,0,.5);
  --sh-2: 0 30px 60px -30px rgba(0,0,0,.7);
  --sh-3: 0 50px 110px -40px rgba(0,0,0,.8);
  --glow-coral: 0 20px 60px -18px rgba(240,96,58,.55);
  --glow-green: 0 24px 70px -24px rgba(23,176,131,.5);
}

/* ---------- 2. Fuentes ---------- */
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("assets/fonts/spacegrotesk-var.woff2?v=20260802b") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400 800;
  font-display:swap; src:url("assets/fonts/manrope-var.woff2?v=20260802b") format("woff2");
}

/* ---------- 3. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{
  font-size:clamp(16px,0.28vw + 15.2px,18.5px);
  -webkit-text-size-adjust:100%; tab-size:2;
  scroll-behavior:smooth; overflow-x:clip;
  scroll-padding-top:90px;
}
body{
  font-family:var(--font-body);
  line-height:1.6; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font:inherit; color:inherit; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600; line-height:1.14;
  letter-spacing:-0.02em; text-wrap:balance;
}
ul,ol{ list-style:none; padding:0; }
::selection{ background:var(--coral); color:#180b06; }

*{ scrollbar-color:var(--green-core) var(--bg-3); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--bg-3); }
::-webkit-scrollbar-thumb{ background:var(--green-core); border-radius:99px; border:3px solid var(--bg-3); }
::-webkit-scrollbar-thumb:hover{ background:var(--green); }

:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:5px; }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--coral); color:#180b06;
  border-radius:var(--r-sm); font-weight:700; transition:top .25s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ---------- 4. Utilidades ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--wide); }
.container--narrow{ max-width:760px; }

.section{ position:relative; padding-block:var(--sp); }
.section--flush{ padding-block:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green);
  margin-bottom:1.3rem;
}
.eyebrow::before{ content:""; width:1.9rem; height:1px; background:var(--coral); }
.eyebrow--coral{ color:var(--coral); }

.h-lead{ font-size:clamp(1.7rem,1.1rem + 1.7vw,2.55rem); color:var(--cream); letter-spacing:-0.02em; line-height:1.1; }
.h-lead em{ font-style:normal; color:var(--coral); }
.sub{ margin-top:1.2rem; font-size:clamp(1.08rem,1rem + .4vw,1.24rem); color:var(--text-mute); max-width:54ch; line-height:1.6; }

/* reveal (gated por .js -> sin JS todo visible) */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-d="1"]{ transition-delay:.09s; }
.js .reveal[data-d="2"]{ transition-delay:.18s; }
.js .reveal[data-d="3"]{ transition-delay:.27s; }
.js .reveal[data-d="4"]{ transition-delay:.36s; }
.js .reveal[data-d="5"]{ transition-delay:.45s; }

.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:700; font-size:1rem; line-height:1.1;
  white-space:nowrap;
  padding:1rem 1.65rem; border-radius:999px;
  background:var(--coral-btn); color:var(--btn-text); border:1px solid transparent;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn svg{ width:1.15em; height:1.15em; }
.icon-wa{ width:1.2em; height:1.2em; fill:currentColor; }
.btn--primary{ background:var(--coral-btn); color:var(--btn-text); box-shadow:var(--glow-coral); }
.btn--primary:hover{ background:var(--coral-btn2); box-shadow:0 26px 66px -18px rgba(240,96,58,.7); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--green); color:var(--cream); background:rgba(23,176,131,.08); }
.btn--green{ background:var(--green-core); color:var(--btn-text); box-shadow:var(--glow-green); }
.btn--green:hover{ background:#0e7d5b; }
.btn--sm{ padding:.68rem 1.15rem; font-size:.9rem; }
.btn--lg{ padding:1.15rem 1.95rem; font-size:1.06rem; }
.btn--block{ width:100%; }
.btn__short{ display:none; }
.btn__chev{ width:1.05em; height:1.05em; transition:transform .25s var(--ease-out); }
.btn--ghost:hover .btn__chev{ transform:translateY(2px); }

/* ---------- 5. Nav ---------- */
.nav{ position:sticky; top:0; z-index:900; transition:background .3s var(--ease-out), border-color .3s, box-shadow .3s; border-bottom:1px solid transparent; }
@supports (backdrop-filter:blur(10px)){
  .nav.is-stuck{ background:rgba(6,35,26,.72); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); }
}
.nav.is-stuck{ background:rgba(6,35,26,.9); border-color:var(--line-soft); box-shadow:0 12px 40px -28px #000; }
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:76px; }
.nav__brand{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-0.03em; color:var(--cream); margin-right:auto; white-space:nowrap; }
.nav__links a{ white-space:nowrap; }
.nav__brand span{ color:var(--coral); }
.nav__links{ display:flex; gap:1.7rem; }
.nav__links a{ font-size:.98rem; font-weight:500; color:var(--text-mute); position:relative; padding:.35rem 0; transition:color .2s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__toggle{ display:none; width:46px; height:46px; align-items:center; justify-content:center; color:var(--cream); }
.nav__toggle svg{ width:26px; height:26px; }
.nav__toggle-icon--close{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open{ display:none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close{ display:block; }
.nav__mobile{ background:var(--bg-2); border-top:1px solid var(--line); padding:1rem var(--gutter) 1.6rem; }
.nav__mobile[hidden]{ display:none; }
.nav__mobile nav{ display:flex; flex-direction:column; }
.nav__mobile nav a{ padding:.95rem .2rem; font-size:1.1rem; font-weight:600; color:var(--cream); border-bottom:1px solid var(--line-soft); }
.nav__mobile .btn{ margin-top:1.2rem; }

/* ---------- 6. Hero ---------- */
.hero{ position:relative; overflow:clip; min-height:min(92vh,900px); display:flex; align-items:center; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; }
.hero__canvas.is-on{ opacity:1; }
/* halo estático (fallback + base bajo el canvas) */
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 78% 42%, rgba(23,176,131,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 80%, rgba(240,96,58,.14), transparent 62%);
}
/* scrim para legibilidad del texto (izquierda) */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--bg) 0%, var(--bg) 30%, rgba(6,35,26,.72) 52%, rgba(6,35,26,0) 78%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:clamp(5rem,10vw,7rem); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__copy{ max-width:40rem; }
.hero__title{ font-size:clamp(2rem,1.2rem + 2.2vw,3.35rem); line-height:1.05; letter-spacing:-0.025em; color:var(--cream); font-weight:600; max-width:15ch; }
.hero__title em{ font-style:normal; color:var(--coral); }
.hero__sub{ margin-top:1.5rem; font-size:clamp(1.05rem,1rem + .4vw,1.22rem); color:var(--text-mute); max-width:46ch; line-height:1.6; }
.hero__cta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__note{ margin-top:1.2rem; font-size:.9rem; color:var(--text-dim); display:flex; align-items:center; gap:.5rem; }
.hero__note::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(23,176,131,.18); }

/* Panel antes/después del hero (a la derecha, foco visual) */
.hero__panel{ position:relative; }
.opcard{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.2vw,1.8rem); box-shadow:var(--sh-3);
  backdrop-filter:blur(4px);
}
.opcard__top{ display:flex; align-items:center; justify-content:space-between; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); padding-bottom:1rem; border-bottom:1px solid var(--line-soft); }
.opcard__top b{ color:var(--green); }
.opcard__row{ padding:1.15rem 0; display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; }
.opcard__row+.opcard__row{ border-top:1px solid var(--line-soft); }
.opcard__dot{ grid-row:1/span 3; width:12px; height:12px; border-radius:50%; margin-top:.35rem; }
.opcard__row--before .opcard__dot{ background:var(--coral); box-shadow:0 0 0 4px rgba(240,96,58,.16); }
.opcard__row--after .opcard__dot{ background:var(--green); box-shadow:0 0 0 4px rgba(23,176,131,.18); }
.opcard__tag{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.opcard__row--before .opcard__tag{ color:var(--coral); }
.opcard__row--after .opcard__tag{ color:var(--green); }
.opcard__val{ font-family:var(--font-display); font-weight:500; font-size:1.12rem; color:var(--cream); line-height:1.25; }
.opcard__desc{ font-size:.95rem; color:var(--text-mute); margin-top:.4rem; line-height:1.5; }
.opcard__foot{ margin-top:.2rem; padding-top:1rem; border-top:1px solid var(--line-soft); font-size:.92rem; color:var(--text-mute); display:flex; gap:.55rem; align-items:flex-start; }
.opcard__foot svg{ width:1.05rem; height:1.05rem; color:var(--coral); flex:none; margin-top:.1rem; }

.hero__stats{ margin-top:2.4rem; display:flex; gap:clamp(1.2rem,3vw,2.6rem); border-top:1px solid var(--line-soft); padding-top:1.6rem; flex-wrap:wrap; }
.hero__stat{ display:flex; flex-direction:column; }
.hero__stat b{ font-family:var(--font-display); font-size:1.18rem; color:var(--cream); font-weight:600; }
.hero__stat span{ font-size:.92rem; color:var(--text-mute); }

/* ---------- 7. Banda cinematográfica ---------- */
.band{ position:relative; min-height:clamp(360px,52vw,560px); display:flex; align-items:center; overflow:clip; }
.band__media{ position:absolute; inset:0; z-index:0; }
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
.band__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(125% 105% at 50% 50%, rgba(4,26,20,.62), rgba(4,26,20,.9) 100%); }
.band__inner{ position:relative; z-index:2; padding-block:clamp(3rem,7vw,6rem); text-align:center; }
.band__quote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem); line-height:1.18; color:var(--cream); max-width:26ch; margin-inline:auto; letter-spacing:-0.02em; }
.band__quote em{ font-style:normal; color:var(--coral); }
.band__by{ margin-top:1.3rem; font-size:1rem; color:var(--text-mute); margin-inline:auto; }

/* ---------- 8. Problemas (índice editorial) ---------- */
.prob__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem); }
.prob__title{ font-size:clamp(1.65rem,1.1rem + 1.6vw,2.45rem); color:var(--cream); max-width:20ch; line-height:1.12; }
.prob__title em{ font-style:normal; color:var(--coral); }
.prob__list{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:0 clamp(2rem,5vw,4.5rem); }
.prob__item{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.3rem; padding:1.7rem 0; border-top:1px solid var(--line); }
.prob__num{ grid-row:1/span 2; font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--coral); padding-top:.1rem; }
.prob__item h3{ font-size:1.24rem; font-weight:600; color:var(--cream); letter-spacing:-0.01em; }
.prob__item p{ margin-top:.4rem; color:var(--text-mute); font-size:1.03rem; line-height:1.55; }
.prob__cta{ margin-top:clamp(2.5rem,5vw,3.5rem); display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.prob__cta p{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); }

/* ---------- 9. Soluciones ---------- */
.sol{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4.5rem); align-items:center; padding-block:clamp(2rem,4vw,3.4rem); border-top:1px solid var(--line); }
.sol:last-of-type{ border-bottom:1px solid var(--line); }
.sol:nth-child(even) .sol__visual{ order:-1; }
.sol__body{ max-width:44ch; }
.sol__tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:.7rem; }
.sol__tag--coral{ color:var(--coral); }
.sol h3{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); font-weight:600; color:var(--cream); }
.sol p{ margin-top:.7rem; color:var(--text-mute); font-size:1.05rem; line-height:1.6; }
.sol__tag{ font-size:.8rem; }
.sol__visual{ display:flex; justify-content:center; }
.sol__panel{
  position:relative; width:100%; max-width:400px; aspect-ratio:4/3;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:radial-gradient(120% 120% at 20% 15%, var(--surface-2), var(--bg-2));
  display:grid; place-items:center; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s;
  box-shadow:var(--sh-2);
}
.sol__index{ position:absolute; top:1rem; left:1.3rem; font-family:var(--font-display); font-size:3.2rem; font-weight:400; color:transparent; -webkit-text-stroke:1px var(--line-strong); }
.sol__glyph{ width:clamp(72px,8vw,110px); height:clamp(72px,8vw,110px); color:var(--green); }
/* Secuencia de color: 1 y 3 en coral, 2 y 4 en verde (etiquetas e íconos) */
.solutions .sol:nth-of-type(odd) .sol__tag{ color:var(--coral); }
.solutions .sol:nth-of-type(even) .sol__tag{ color:var(--green); }
.solutions .sol:nth-of-type(odd) .sol__glyph{ color:var(--coral); }
.solutions .sol:nth-of-type(even) .sol__glyph{ color:var(--green); }
.sol:hover .sol__panel{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:var(--line-strong); }

/* Para quién es */
.audience{ margin-top:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding-top:clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line); }
.audience h3{ font-size:clamp(1.35rem,1rem + 1.3vw,2rem); color:var(--cream); max-width:20ch; line-height:1.2; }
.audience__chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.1rem; }
.audience__chips li{ padding:.62rem 1.15rem; border-radius:999px; border:1px solid var(--line-strong); background:rgba(23,176,131,.06); font-size:.98rem; font-weight:600; color:var(--cream); }
.audience__note{ color:var(--text-mute); font-size:1.04rem; max-width:54ch; line-height:1.6; }

/* Solución personalizada */
.custom{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; padding:clamp(1.4rem,3vw,2rem); border-radius:var(--r-md); border:1px solid var(--line); border-left:4px solid var(--coral); background:linear-gradient(180deg,var(--surface),var(--bg-2)); box-shadow:var(--sh-1); }
.custom__ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(240,96,58,.14); color:var(--coral); }
.custom__ic svg{ width:26px; height:26px; }
.custom__label{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); }
.custom h3{ font-size:1.3rem; font-weight:600; color:var(--cream); margin-top:.15rem; }
.custom p{ color:var(--text-mute); font-size:1.03rem; margin-top:.35rem; max-width:50ch; line-height:1.55; }

/* ---------- 10. Demostraciones (chat) ---------- */
.demo__head{ text-align:center; max-width:60ch; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.demo__head .eyebrow{ justify-content:center; }
.demo__head .sub{ margin-inline:auto; }

.chat-toggle-row{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2.4rem; }
.chat-toggle{ display:inline-flex; padding:5px; gap:4px; background:var(--bg-3); border:1px solid var(--line); border-radius:999px; }
.chat-toggle__btn{ padding:.6rem 1.35rem; border-radius:999px; font-size:.9rem; font-weight:600; color:var(--text-mute); white-space:nowrap; transition:.25s var(--ease-out); }
.chat-toggle__btn.is-active{ background:var(--surface-2); color:var(--cream); box-shadow:var(--sh-1); }
.chat-toggle__btn[data-chat-state="after"].is-active{ background:rgba(240,96,58,.18); color:var(--coral); box-shadow:0 1px 0 rgba(240,96,58,.25) inset, var(--sh-1); }
.chat-state-arrow,.chat-cat-arrow{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--cream); transition:.25s var(--ease-out); }
.chat-state-arrow:hover,.chat-cat-arrow:hover{ background:var(--coral); color:#fff; border-color:var(--coral); transform:scale(1.06); }
.chat-state-arrow svg,.chat-cat-arrow svg{ width:20px; height:20px; }

.chat-demo__wide{ display:none; }
.demo-wide__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2.2rem); align-items:start; }
.demo-wide__item{ display:flex; flex-direction:column; align-items:center; }
.demo-wide__head{ min-height:6.5rem; text-align:center; margin-bottom:1.2rem; }
.demo-wide__title{ font-size:1.2rem; font-weight:700; color:var(--cream); }
.demo-wide__desc{ margin-top:.4rem; font-size:1rem; color:var(--text-mute); line-height:1.5; }

.chat-demo__compact{ max-width:348px; margin-inline:auto; }
.chat-demo__compact .phone__body{ height:420px; }
.demo-tabs{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.6rem; }
.demo-tabs__btn{ padding:.55rem 1.15rem; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--text-mute); border:1px solid var(--line); background:var(--surface); transition:.25s var(--ease-out); }
.demo-tabs__btn.is-active{ background:var(--green-core); color:#fff; border-color:var(--green-core); }
.chat-demo__meta{ text-align:center; min-height:5rem; margin-bottom:1.2rem; }
.chat-demo__title{ font-size:1.25rem; font-weight:700; color:var(--cream); }
.chat-demo__desc{ margin-top:.4rem; font-size:1rem; color:var(--text-mute); line-height:1.5; }
.chat-demo__compact .chat-toggle{ display:flex; width:100%; max-width:340px; margin:0 auto 1.5rem; }
.chat-demo__compact .chat-toggle__btn{ flex:1; padding:.62rem .5rem; font-size:.86rem; text-align:center; }
.chat-phone-stage{ display:flex; align-items:center; justify-content:center; gap:.7rem; }

/* Teléfono — TAMAÑO FIJO E IDÉNTICO en las 3 columnas */
.phone{
  position:relative;
  width:100%; max-width:330px;
  display:flex; flex-direction:column;
  background:#06231a; border:1px solid rgba(0,0,0,.5);
  border-radius:34px; padding:9px;
  box-shadow:var(--sh-3), inset 0 0 0 1px rgba(242,236,222,.06);
  transition:filter .4s var(--ease-out);
}
.chat-phone-stage .phone{ flex:0 1 auto; }
/* "Sin automatizar" = velo gris desaturado (sensación de peor opción, sin vida).
   "Con LM Matic" = a todo color, normal. Ambos comparten el mismo estilo base. */
.phone.is-before{ filter:grayscale(.82) brightness(.9) contrast(.96); }
.phone.is-before::after{
  content:""; position:absolute; inset:0; border-radius:34px; z-index:3;
  background:rgba(120,129,124,.26); pointer-events:none;
}
/* Estética WhatsApp real: cabecera verde WA, chat beige, burbujas blanca/verde-claro */
.phone__bar{ display:flex; align-items:center; gap:.7rem; background:#075E54; color:#fff; padding:.8rem 1rem; border-radius:26px 26px 6px 6px; flex:none; }
.phone__avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--coral); color:#fff; font-weight:700; font-size:.92rem; }
.phone__who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.phone__name{ font-weight:700; font-size:.92rem; }
.phone__status{ font-size:.7rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone__body{
  flex:none; height:460px; overflow:hidden;
  background:#ECE5DD;
  background-image:radial-gradient(rgba(11,20,26,.045) 1px, transparent 0);
  background-size:16px 16px;
  padding:1rem .8rem; border-radius:6px 6px 26px 26px;
  display:flex; flex-direction:column; gap:.5rem;
}
.bubble{ max-width:84%; padding:.5rem .7rem .42rem; border-radius:12px; font-size:.83rem; line-height:1.38; box-shadow:0 1px .6px rgba(11,20,26,.16); color:#111b21; }
.bubble p{ margin:0; }
.bubble--in{ align-self:flex-start; background:#fff; border-top-left-radius:4px; }
.bubble--out{ align-self:flex-end; background:#DCF8C6; border-top-right-radius:4px; }
.bubble__time{ display:block; margin-top:.15rem; font-size:.62rem; color:#667781; text-align:right; }
.chat-gap{ align-self:center; margin:.3rem 0; }
.chat-gap span{ font-size:.66rem; font-weight:500; color:#54656f; background:rgba(255,255,255,.92); padding:.28rem .7rem; border-radius:8px; box-shadow:0 1px .5px rgba(11,20,26,.13); }

.chat-demo__disclaimer{ margin-top:2rem; text-align:center; font-size:.9rem; color:var(--text-dim); max-width:66ch; margin-inline:auto; line-height:1.5; }
.chat-demo__disclaimer--full{ display:none; }
.demo__cta{ margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.demo__cta p{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); }

/* ---------- 11. Método (pipeline / señal) ---------- */
.flow{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-top:clamp(3rem,6vw,4.5rem); }
.flow__line{ position:absolute; left:35px; right:35px; top:34px; height:2px; z-index:0; background:var(--line-strong); overflow:hidden; }
.flow__prog{ position:absolute; inset:0; background:var(--coral); transform-origin:left center; transform:scaleX(var(--p,0)); transition:transform .1s linear; }
.step{ position:relative; z-index:1; }
.step__dot{ width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:var(--bg-2); border:2px solid var(--line-strong); color:var(--green); font-family:var(--font-display); font-weight:600; font-size:1.4rem; transition:.5s var(--ease-out); }
.step.is-in .step__dot{ background:var(--green); color:#052018; border-color:var(--green); box-shadow:var(--glow-green); }
.step h3{ margin-top:1.3rem; font-size:1.2rem; font-weight:700; color:var(--cream); }
.step p{ margin-top:.5rem; font-size:1.02rem; color:var(--text-mute); line-height:1.55; }

/* ---------- 12. Por qué (con foto) ---------- */
.why__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.why__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-3); aspect-ratio:3/2; }
.why__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.why__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(4,26,20,.55)); }
.why__lead{ margin-top:1.2rem; font-size:1.13rem; color:var(--text-mute); line-height:1.6; }
.why__lead b{ color:var(--cream); font-weight:700; }
.perks{ margin-top:clamp(2.5rem,5vw,3.5rem); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.4rem); }
.perk{ border-top:2px solid var(--line); padding-top:1.3rem; }
.perk__ic{ color:var(--coral); margin-bottom:.9rem; }
.perk__ic svg{ width:30px; height:30px; }
.perk h3{ font-size:1.2rem; font-weight:700; color:var(--cream); }
.perk p{ margin-top:.5rem; color:var(--text-mute); font-size:1.02rem; line-height:1.55; }
.philosophy{ margin-top:clamp(3rem,6vw,4.5rem); font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,1rem + 1.8vw,2.3rem); line-height:1.28; color:var(--cream); max-width:24ch; padding-left:1.6rem; border-left:3px solid var(--coral); }
.philosophy em{ font-style:normal; color:var(--coral); }
.why__cta{ margin-top:2.6rem; }

/* ---------- 13. FAQ ---------- */
.faq{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem .2rem; font-family:var(--font-display); font-size:clamp(1.05rem,1rem + .4vw,1.3rem); font-weight:600; color:var(--cream); transition:color .2s; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; flex:none; width:22px; height:22px; transition:transform .3s var(--ease-out); background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317B083' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item summary:hover{ color:var(--green); }
.faq__answer p{ padding:0 .2rem 1.4rem; color:var(--text-mute); max-width:70ch; }
.js .faq__item[open] .faq__answer{ animation:faqO .35s var(--ease-out); }
@keyframes faqO{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.faq__more{ margin-top:2rem; color:var(--text-mute); }
.faq__more a{ color:var(--green); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--coral); }

/* ---------- 14. Cierre + formulario ---------- */
.close{ background:var(--bg-2); }
.close__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.close__copy>p{ margin-top:1rem; color:var(--text-mute); font-size:1.05rem; line-height:1.6; }
.close__steps{ margin-top:1.9rem; display:flex; flex-direction:column; gap:1rem; counter-reset:s; }
.close__steps li{ position:relative; padding-left:2.7rem; color:var(--cream); font-weight:500; font-size:1.05rem; }
.close__steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-.1em; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--green); color:#052018; display:grid; place-items:center; font-size:.85rem; font-weight:800; }
.close__note{ margin-top:1.4rem; padding-left:1rem; border-left:3px solid var(--coral); font-size:1.02rem; color:var(--text-mute); line-height:1.55; }
.close__aux{ margin-top:.9rem; font-size:.92rem; color:var(--text-dim); }
.close__alt{ margin-top:1.9rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.close__alt p{ font-family:var(--font-display); font-size:1.15rem; color:var(--cream); margin-bottom:.9rem; }

.form{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--sh-2); }
.form__title{ font-size:1.55rem; font-weight:700; color:var(--cream); }
.form__intro{ margin-top:.5rem; margin-bottom:1.6rem; font-size:.98rem; color:var(--text-mute); line-height:1.5; }
.form__row{ margin-bottom:1.05rem; display:flex; flex-direction:column; gap:.45rem; }
.form__row label{ font-size:.92rem; font-weight:600; color:var(--text-mute); }
.form__optional{ font-weight:400; color:var(--text-dim); }
.form__row input,.form__row select,.form__row textarea{ width:100%; padding:.82rem .95rem; background:var(--bg-3); border:1px solid var(--line-strong); border-radius:var(--r-sm); color:var(--cream); transition:border-color .2s, box-shadow .2s, background .2s; }
.form__row select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8AD' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; background-size:18px; padding-right:2.6rem; }
.form__row textarea{ resize:vertical; min-height:86px; }
.form__row input::placeholder,.form__row textarea::placeholder{ color:var(--text-dim); }
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{ outline:none; border-color:var(--green); background:var(--bg); box-shadow:0 0 0 4px rgba(23,176,131,.16); }
.form__row input:user-invalid,.form__row select:user-invalid{ border-color:var(--coral); box-shadow:0 0 0 4px rgba(240,96,58,.14); }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__status{ margin-top:1rem; font-size:.9rem; min-height:1.2em; }
.form__status[data-state="ok"]{ color:var(--green); font-weight:700; }
.form__status[data-state="error"]{ color:var(--coral); font-weight:700; }
.form__status a{ text-decoration:underline; color:var(--green); }

/* ---------- 15. Footer ---------- */
.footer{ background:var(--bg-3); padding-top:clamp(3.5rem,6vw,5rem); padding-bottom:2rem; }
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem); padding-bottom:3rem; border-bottom:1px solid var(--line-soft); }
.footer__brand{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--cream); }
.footer__brand span{ color:var(--coral); }
.footer__tag{ margin-top:1rem; font-size:.98rem; color:var(--text-mute); max-width:36ch; line-height:1.55; }
.footer__heading{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1rem; }
.footer__nav,.footer__legal{ display:flex; flex-direction:column; }
.footer__col a{ font-size:1rem; color:var(--text-mute); padding:.32rem 0; width:fit-content; transition:color .2s; }
.footer__col a:hover{ color:var(--coral); }
.footer__copy{ margin-top:2rem; font-size:.84rem; color:var(--text-dim); }

.whatsapp-float{ position:fixed; right:max(1.1rem,env(safe-area-inset-right)); bottom:max(1.1rem,env(safe-area-inset-bottom)); z-index:800; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--coral-btn); color:#fff; box-shadow:var(--glow-coral); transition:transform .3s var(--ease-out), opacity .3s, background .25s; }
.whatsapp-float:hover{ background:var(--coral-btn2); transform:scale(1.08); }
.whatsapp-float svg{ width:31px; height:31px; fill:currentColor; }
.whatsapp-float.is-hidden{ opacity:0; transform:scale(.6); pointer-events:none; }

/* ---------- 16. Páginas legales ---------- */
.legal{ padding-block:clamp(3rem,6vw,5rem) var(--sp); }
.legal__title{ font-size:clamp(2rem,1.2rem + 3vw,3.2rem); margin-top:.6rem; color:var(--cream); }
.legal__updated{ margin-top:.8rem; color:var(--text-dim); font-size:.92rem; }
.legal__body{ margin-top:2.5rem; }
.legal__body h2{ font-family:var(--font-display); font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); font-weight:600; color:var(--green); margin-top:2.4rem; margin-bottom:.6rem; }
.legal__body p{ margin-bottom:1rem; color:var(--text-mute); }
.legal__body a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--coral); }
.legal__list{ margin:0 0 1rem; display:flex; flex-direction:column; gap:.6rem; }
.legal__list li{ position:relative; padding-left:1.6rem; color:var(--text-mute); }
.legal__list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--coral); }
.legal__back{ display:inline-flex; margin-top:3rem; font-weight:700; color:var(--green); border-bottom:2px solid transparent; transition:border-color .2s; }
.legal__back:hover{ border-color:var(--coral); }

/* ---------- 17. Responsive ---------- */
@media (min-width:1200px){
  .chat-demo__wide{ display:block; }
  .chat-demo__compact{ display:none; }
  .chat-demo__disclaimer--full{ display:block; }
  .chat-demo__disclaimer--short{ display:none; }
}
@media (max-width:1023px){
  .hero{ min-height:auto; }
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__panel{ max-width:460px; }
  .hero__bg::after{ background:linear-gradient(180deg, rgba(6,35,26,.5), var(--bg) 82%); }
  .prob__head{ grid-template-columns:1fr; gap:1.2rem; }
  .prob__list{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; gap:0; }
  .sol{ grid-template-columns:1fr; gap:1.5rem; }
  .sol:nth-child(even) .sol__visual{ order:0; }
  .sol__visual{ grid-row:auto; }
  .sol__panel{ max-width:none; width:100%; aspect-ratio:3/1; }
  .sol__index{ font-size:2.6rem; top:.9rem; left:1.2rem; }
  .audience{ grid-template-columns:1fr; }
  .audience h3{ max-width:none; }
  .why__grid,.close__grid{ grid-template-columns:1fr; }
  .why__media{ max-width:none; aspect-ratio:3/2; }
  .flow{ grid-template-columns:1fr; gap:0; padding-left:0; }
  .flow__line{ left:34px; right:auto; top:35px; bottom:35px; width:2px; height:auto; }
  .flow__prog{ transform-origin:center top; transform:scaleY(var(--p,0)); }
  .step{ display:grid; grid-template-columns:auto 1fr; gap:.2rem 1.4rem; padding-bottom:2rem; }
  .step__dot{ grid-row:1/span 2; width:60px; height:60px; font-size:1.2rem; }
  .step h3{ margin-top:.3rem; }
}
@media (max-width:1200px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
}
@media (max-width:820px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__col:first-child{ grid-column:1/-1; }
}
@media (max-width:600px){
  .btn__full{ display:none; }
  .btn__short{ display:inline; }
  .hero__cta .btn{ width:100%; }
  .prob__cta{ flex-direction:column; align-items:center; text-align:center; gap:1.1rem; }
  .demo__cta{ align-items:center; text-align:center; }
  .why__cta{ text-align:center; }
  .custom{ grid-template-columns:1fr; text-align:left; }
  .custom .btn{ width:100%; }
  .perks{ grid-template-columns:1fr; }
  /* Teléfono un poco más angosto para dejar margen a los lados; las flechas
     van en ese margen (junto al borde del teléfono, sin tapar el mensaje). */
  .chat-phone-stage{ gap:0; position:relative; }
  .chat-demo__compact .phone{ max-width:268px; }
  .chat-phone-stage .chat-cat-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6;
    width:40px; height:40px;
    background:var(--surface); color:var(--cream); border-color:var(--line-strong);
    box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  }
  .chat-phone-stage .chat-cat-arrow[data-chat-state-nav="prev"]{ left:0; right:auto; }
  .chat-phone-stage .chat-cat-arrow[data-chat-state-nav="next"]{ right:0; left:auto; }
  .chat-phone-stage .chat-cat-arrow:hover{ transform:translateY(-50%) scale(1.06); }
  .footer__grid{ grid-template-columns:1fr; }
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .js .reveal{ opacity:1; transform:none; }
  .flow__prog{ transform:scaleX(1); }
  .step__dot{ background:var(--green); color:#052018; border-color:var(--green); }
}