/* ============================================================
   HERO STUDIO — sistema de diseño
   Base papel hueso · tinta cálida · 1 color firma en bloques
   ============================================================ */

:root{
  /* surfaces */
  --paper:    #F2F0E8;   /* base hueso cálido */
  --paper-2:  #EAE7DC;   /* sombra de papel */
  --card:     #FBFAF5;   /* tarjeta casi blanca cálida */
  --ink:      #16140E;   /* casi negro cálido */
  --ink-soft: #3C382E;   /* texto secundario */
  --ink-mute: #837D6C;   /* texto tenue */
  --line:     rgba(22,20,14,.13);
  --line-2:   rgba(22,20,14,.08);

  /* color firma (lo pisa el panel de Tweaks) */
  --hero:     #FF5436;   /* coral eléctrico */
  --on-hero:  #FFF4EE;   /* texto sobre bloques de color */
  --hero-ink: #E0421F;   /* color firma legible como texto sobre papel */

  /* tipografía */
  --f-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --f-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* ritmo */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 150px);
}

/* reset ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.55;
  font-weight:420;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--hero);color:var(--on-hero)}

/* layout helpers -------------------------------------------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--section-y) }
.section-sm{ padding-block:clamp(48px,7vw,90px) }

/* eyebrow / labels ------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono);
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400;
}
.eyebrow::before{
  content:""; width:.62em; height:.62em; border-radius:2px;
  background:var(--hero); flex:none;
  box-shadow:0 0 0 0 var(--hero);
}
.eyebrow.on-dark{ color:rgba(255,255,255,.66) }

/* type ------------------------------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:760;
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1.display{ font-size:clamp(38px,6.4vw,76px) }
h2.display{ font-size:clamp(34px,5.4vw,68px); line-height:1.0 }
h3.display{ font-size:clamp(24px,2.7vw,34px); line-height:1.04; letter-spacing:-.02em }
.lead{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.5; color:var(--ink-soft);
  max-width:38ch; text-wrap:pretty;
}

/* isotipo H -------------------------------------------------- */
.iso{
  position:relative; display:inline-block;
  width:1em; height:1em; background:var(--hero);
  border-radius:.2em; vertical-align:middle; flex:none;
}
.iso i{ position:absolute; background:var(--on-hero); border-radius:.02em }
.iso .l{ left:.26em; top:.22em;  width:.135em; height:.56em }
.iso .r{ right:.26em; top:.22em; width:.135em; height:.56em }
.iso .c{ left:.26em; right:.26em; top:.4325em; height:.135em }

/* buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.4em; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  letter-spacing:-.01em; border-radius:var(--r-pill);
  line-height:1; white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, filter .18s;
}
.btn svg{ width:1.15em; height:1.15em }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--hero{ background:var(--hero); color:var(--on-hero); box-shadow:0 8px 22px -10px var(--hero) }
.btn--hero:hover{ filter:brightness(1.04); box-shadow:0 14px 30px -10px var(--hero) }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.6px var(--line) }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px var(--ink) }
.btn--lg{ padding:1.08em 1.7em; font-size:1.08rem }
.btn--on-dark{ background:var(--paper); color:var(--ink) }
.btn--ghost-dark{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.28) }
.btn--ghost-dark:hover{ box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.7) }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}
.brand{ display:flex; align-items:center; gap:.55em; font-family:var(--f-display); font-weight:740; font-size:21px; letter-spacing:-.02em; line-height:1.05; white-space:nowrap; flex:none }
.brand .iso{ font-size:30px }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px) }
.nav__links a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .15s }
.nav__links a:hover{ color:var(--ink) }
.nav__cta{ display:flex; align-items:center; gap:14px }
.nav-toggle{ display:none }

@media (max-width:860px){
  .nav__links{ display:none }
  .nav__cta .btn span.full{ display:none }
}
/* en celular: botón del nav más compacto para que la marca quede en 1 línea */
@media (max-width:520px){
  .nav__cta .btn{ padding:.7em 1.05em; font-size:.92rem }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(40px,7vw,88px); padding-bottom:clamp(56px,8vw,110px); padding-inline:var(--gutter) }
.hero__grid{
  display:grid; grid-template-columns:1fr minmax(0,auto);
  gap:clamp(24px,3vw,48px); align-items:center;
  max-width:var(--container); margin-inline:auto;
}
.hero__copy{ position:relative; z-index:2; max-width:720px }
.hero h1{ margin:.36em 0 .5em }
.hero h1 .mark{ color:var(--hero-ink); }
.hero__lead{ max-width:42ch; font-size:clamp(18px,1.5vw,21px) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2em }
.hero__trust{ display:flex; align-items:center; gap:18px; margin-top:2.4em; flex-wrap:wrap }
.hero__trust .stars{ display:flex; gap:3px; color:var(--hero-ink) }
.hero__trust .stars svg{ width:16px; height:16px }
.hero__trust small{ font-size:14px; color:var(--ink-mute); max-width:30ch; line-height:1.35 }

/* floating word accent behind */
.hero__bgword{
  position:absolute; right:-2%; top:-6%; font-family:var(--f-display);
  font-weight:800; font-size:24vw; color:var(--paper-2);
  z-index:0; line-height:1; letter-spacing:-.04em; pointer-events:none; user-select:none;
}

/* arte del hero (imagen) ------------------------------------ */
/* Dos animaciones independientes (X en el div, Y en el contenido) crean
   una trayectoria de Lissajous suave, sin esquinas bruscas */
@keyframes hero-float-x{
  from{ transform:translateX(-7px) rotate(-.3deg) }
  to  { transform:translateX( 7px) rotate( .3deg) }
}
@keyframes hero-float-y{
  from{ transform:translateY(-12px) }
  to  { transform:translateY(  5px) }
}
.hero__art{
  position:relative; z-index:2; justify-self:end; width:clamp(400px,48vw,680px);
  animation:hero-float-x 11s ease-in-out infinite alternate;
}
.hero__art img,
.hero__art video{
  width:100%; height:auto; filter:drop-shadow(0 26px 46px rgba(22,20,14,.16));
  animation:hero-float-y 8s ease-in-out infinite alternate;
}
.hero__art img,
.hero__art video{ width:100%; height:auto; filter:drop-shadow(0 26px 46px rgba(22,20,14,.16)) }

/* phone / chat ---------------------------------------------- */
.phone{
  position:relative; z-index:2; justify-self:center;
  width:min(370px,100%);
  background:var(--ink); border-radius:42px; padding:14px;
  box-shadow:0 40px 80px -36px rgba(22,20,14,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.phone__notch{ position:absolute; top:24px; left:50%; transform:translateX(-50%); width:42%; height:8px; background:rgba(255,255,255,.14); border-radius:99px; z-index:3 }
.phone__screen{
  position:relative; background:#0d1418; border-radius:30px; overflow:hidden;
  height:560px; display:flex; flex-direction:column;
  background-image:radial-gradient(circle at 14px 14px, rgba(255,255,255,.025) 1.4px, transparent 1.5px);
  background-size:26px 26px;
}
.wa__top{
  display:flex; align-items:center; gap:11px; padding:18px 16px 12px;
  background:#11211d; color:#eaf3ef; border-bottom:1px solid rgba(255,255,255,.06);
}
.wa__avatar{ width:40px; height:40px; border-radius:50%; background:var(--hero); display:grid; place-items:center; flex:none }
.wa__avatar .iso{ font-size:26px }
.wa__who{ display:flex; flex-direction:column; line-height:1.25; min-width:0 }
.wa__who b{ font-size:15px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.wa__who small{ font-size:11.5px; color:#79c7a6; font-family:var(--f-mono) }
.wa__back{ margin-left:auto; display:flex; gap:16px; color:rgba(255,255,255,.4) }
.wa__back svg{ width:18px; height:18px }
.wa__body{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:9px; overflow:hidden; justify-content:flex-end }
.bub{
  max-width:78%; padding:9px 13px; font-size:14.5px; line-height:1.4;
  border-radius:16px; opacity:0; transform:translateY(8px) scale(.97);
  animation:bubIn .4s cubic-bezier(.2,.8,.3,1) forwards;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
}
.bub.in{ align-self:flex-start; background:#1f2c2a; color:#e9f1ee; border-bottom-left-radius:5px }
.bub.out{ align-self:flex-end; background:#d8fdd2; color:#11261c; border-bottom-right-radius:5px }
.bub small{ display:block; font-size:10px; opacity:.5; margin-top:3px; text-align:right; font-family:var(--f-mono) }
.bub.typing{ display:inline-flex; gap:4px; padding:13px 15px }
.bub.typing i{ width:7px; height:7px; border-radius:50%; background:#7aa; opacity:.5; animation:typing 1.1s infinite }
.bub.typing i:nth-child(2){ animation-delay:.18s }
.bub.typing i:nth-child(3){ animation-delay:.36s }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:.95 } }
@keyframes bubIn{ to{ opacity:1; transform:none } }
.wa__input{ display:flex; align-items:center; gap:9px; padding:10px 13px 14px; background:#11211d }
.wa__input .field{ flex:1; height:38px; border-radius:99px; background:#1d2b27; display:flex; align-items:center; padding:0 15px; color:rgba(255,255,255,.34); font-size:13px }
.wa__input .send{ width:38px; height:38px; border-radius:50%; background:var(--hero); display:grid; place-items:center; flex:none; color:var(--on-hero) }
.wa__input .send svg{ width:17px; height:17px }

/* floating badge on phone */
.phone__badge{
  position:absolute; left:-26px; bottom:64px; z-index:4;
  background:var(--card); border-radius:14px; padding:11px 14px;
  box-shadow:0 18px 40px -16px rgba(22,20,14,.45);
  display:flex; align-items:center; gap:10px;
}
.phone__badge .dot{ width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18) }
.phone__badge b{ font-size:13px; display:block; line-height:1.1 }
.phone__badge small{ font-size:11px; color:var(--ink-mute); font-family:var(--f-mono) }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:22px }
  .hero__copy{ text-align:left }
  /* en mobile la imagen va PRIMERO (arriba del texto) y centrada */
  .hero__art{ order:-1; justify-self:center; width:min(540px,96%) }
  .hero__bgword{ display:none }
}
/* en celular la imagen va de borde a borde (full-bleed), lo más grande posible */
@media (max-width:560px){
  .hero__art{ justify-self:stretch; width:auto; margin-inline:calc(-1 * var(--gutter)) }
  .hero{ padding-top:16px }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--hero); color:var(--on-hero); overflow:hidden; padding:18px 0; border-block:1px solid rgba(0,0,0,.05) }
.marquee__track{ display:flex; gap:0; width:max-content; animation:scrollx 32s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__item{ display:inline-flex; align-items:center; gap:18px; padding-inline:26px; font-family:var(--f-display); font-weight:680; font-size:clamp(18px,2.1vw,26px); letter-spacing:-.01em; white-space:nowrap }
.marquee__item::after{ content:"✺"; font-size:.8em; opacity:.7 }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ============================================================
   SERVICIOS
   ============================================================ */
.sec-head{ display:flex; flex-direction:column; gap:18px; max-width:46ch; margin-bottom:clamp(40px,5vw,64px) }
.sec-head.center{ align-items:center; text-align:center; margin-inline:auto }
.sec-head .lead{ max-width:50ch }

.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,20px) }
.svc{
  position:relative; background:var(--card); border-radius:var(--r-md);
  padding:clamp(26px,2.6vw,38px); border:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:16px; min-height:280px;
  overflow:hidden; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.svc:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(22,20,14,.4); border-color:var(--line) }
.svc__num{ font-family:var(--f-mono); font-size:13px; color:var(--ink-mute); letter-spacing:.05em }
.svc__ico{ width:52px; height:52px; border-radius:13px; background:var(--paper-2); display:grid; place-items:center; color:var(--ink); margin-bottom:4px }
.svc:hover .svc__ico{ background:var(--hero); color:var(--on-hero); transition:background .25s, color .25s }
.svc__ico svg{ width:26px; height:26px }
.svc h3{ font-family:var(--f-display); font-weight:680; font-size:22px; letter-spacing:-.02em; line-height:1.1 }
.svc p{ color:var(--ink-soft); font-size:15.5px; line-height:1.5; margin:0 }
.svc__tags{ margin-top:auto; display:flex; flex-wrap:wrap; gap:7px; padding-top:8px }
.svc__tags span{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-soft); background:var(--paper-2); padding:5px 9px; border-radius:7px }
.svc--wide{ grid-column:span 2 }

@media (max-width:720px){
  .svc-grid{ grid-template-columns:1fr }
  .svc--wide{ grid-column:auto }
}

/* ============================================================
   PROCESO (sección oscura)
   ============================================================ */
.dark{ background:var(--ink); color:var(--paper) }
.dark .lead{ color:rgba(255,255,255,.66) }
.dark .sec-head h2{ color:var(--paper) }
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:24px }
.proc{ display:flex; flex-direction:column; gap:14px; padding-top:26px; border-top:2px solid rgba(255,255,255,.16); position:relative }
.proc__n{ font-family:var(--f-display); font-weight:740; font-size:clamp(34px,4vw,52px); color:var(--hero); line-height:.9; letter-spacing:-.03em }
.proc h3{ font-family:var(--f-display); font-weight:680; font-size:20px; letter-spacing:-.015em }
.proc p{ color:rgba(255,255,255,.6); font-size:15px; line-height:1.5; margin:0 }
.proc.active{ border-top-color:var(--hero) }
@media (max-width:820px){ .proc-grid{ grid-template-columns:repeat(2,1fr); gap:30px 22px } }
@media (max-width:460px){ .proc-grid{ grid-template-columns:1fr } }

/* ============================================================
   CASO (bloque de color firma)
   ============================================================ */
.case{ background:var(--hero); color:var(--on-hero); border-radius:var(--r-lg); padding:clamp(34px,5vw,72px); position:relative; overflow:hidden }
.case__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,64px); align-items:center; position:relative; z-index:2 }
.case .eyebrow{ color:var(--on-hero) }
.case .eyebrow::before{ background:var(--on-hero) }
.case h2{ font-family:var(--f-display); font-weight:740; font-size:clamp(30px,4.2vw,52px); line-height:1.0; letter-spacing:-.025em; margin:.4em 0 .5em }
.case__quote p{ font-size:clamp(18px,1.8vw,23px); line-height:1.45; font-weight:500; max-width:30ch }
.case__by{ display:flex; align-items:center; gap:12px; margin-top:22px }
.case__by .ph{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:18px }
.case__by b{ display:block; font-size:15px }
.case__by small{ font-size:13px; opacity:.78; font-family:var(--f-mono) }
.case__stats{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(255,255,255,.16); border-radius:var(--r-md); overflow:hidden }
.stat{ background:var(--hero); padding:clamp(20px,2.4vw,30px) }
.stat__n{ font-family:var(--f-display); font-weight:760; font-size:clamp(34px,4.6vw,58px); line-height:.95; letter-spacing:-.03em }
.stat__l{ font-size:14px; line-height:1.35; opacity:.86; margin-top:7px; max-width:18ch }
.case__deco{ position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none }
@media (max-width:820px){ .case__grid{ grid-template-columns:1fr; gap:36px } }

/* ============================================================
   POR QUÉ
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px) }
.why{ padding:clamp(22px,2.4vw,30px); border-radius:var(--r-md); background:var(--card); border:1px solid var(--line-2); display:flex; flex-direction:column; gap:12px }
.why__ico{ width:38px; height:38px; color:var(--hero-ink) }
.why__ico svg{ width:34px; height:34px }
.why h3{ font-family:var(--f-display); font-weight:660; font-size:18.5px; letter-spacing:-.015em; line-height:1.15 }
.why p{ color:var(--ink-soft); font-size:14.5px; line-height:1.48; margin:0 }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .why-grid{ grid-template-columns:1fr } }

/* ============================================================
   PLANES
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); align-items:stretch }
.plan{
  display:flex; flex-direction:column; gap:18px; padding:clamp(26px,2.6vw,34px);
  border-radius:var(--r-md); background:var(--card); border:1px solid var(--line);
}
.plan--feat{ background:var(--ink); color:var(--paper); border-color:var(--ink); position:relative }
.plan--feat .plan__price small,.plan--feat .plan__desc{ color:rgba(255,255,255,.62) }
.plan__tag{ position:absolute; top:18px; right:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--hero); color:var(--on-hero); padding:5px 9px; border-radius:7px }
.plan__name{ font-family:var(--f-display); font-weight:680; font-size:21px; letter-spacing:-.015em }
.plan__desc{ font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.45 }
.plan__price{ display:flex; align-items:baseline; gap:8px; font-family:var(--f-display) }
.plan__price b{ font-size:clamp(32px,3.6vw,42px); font-weight:760; letter-spacing:-.03em }
.plan__price small{ font-size:14px; color:var(--ink-mute); font-family:var(--f-body) }
.plan__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14.5px }
.plan__list li{ display:flex; gap:10px; align-items:flex-start; line-height:1.4 }
.plan__list li::before{ content:""; width:18px; height:18px; flex:none; margin-top:1px; border-radius:50%; background:var(--hero); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8 1.4 1.4z'/></svg>") center/16px no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8 1.4 1.4z'/></svg>") center/16px no-repeat }
.plan__note{ text-align:center; margin-top:26px; font-size:14px; color:var(--ink-mute) }
.plan .btn{ margin-top:auto; width:100% ; justify-content:center }
.plans--2{ grid-template-columns:repeat(2,1fr); max-width:880px; margin-inline:auto }
.plan__step{ font-family:var(--f-mono); font-size:13px; letter-spacing:.05em; color:var(--hero-ink) }
.plan--feat .plan__step{ color:var(--hero) }
.plan__head{ display:flex; align-items:center; gap:13px }
.plan__head .iso{ font-size:34px }
.invest-cta{ max-width:620px; margin:clamp(30px,4vw,46px) auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px }
.invest-cta p{ margin:0; color:var(--ink-soft); font-size:clamp(16px,1.4vw,19px); line-height:1.5; text-wrap:pretty }
@media (max-width:820px){ .plans{ grid-template-columns:1fr } .plans--2{ grid-template-columns:1fr } .plan--feat{ order:0 } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,5vw,72px); align-items:start }
.faq-list{ display:flex; flex-direction:column }
.faq{ border-top:1px solid var(--line); }
.faq:last-child{ border-bottom:1px solid var(--line) }
.faq__q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 0; display:flex; align-items:center; gap:18px; font-family:var(--f-display); font-weight:600; font-size:clamp(18px,1.9vw,22px); color:var(--ink); letter-spacing:-.015em }
.faq__q .pm{ margin-left:auto; flex:none; width:26px; height:26px; position:relative; transition:transform .3s }
.faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; inset:0; margin:auto }
.faq__q .pm::before{ width:15px; height:2.4px }
.faq__q .pm::after{ width:2.4px; height:15px; transition:transform .3s }
.faq.open .pm{ transform:rotate(90deg) }
.faq.open .pm::after{ transform:scaleY(0) }
.faq__a{ overflow:hidden; max-height:0; transition:max-height .35s ease }
.faq__a p{ margin:0 0 24px; color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:54ch }
@media (max-width:760px){ .faq-wrap{ grid-template-columns:1fr; gap:24px } }
/* FAQ legible sobre fondo oscuro (sino el texto queda oscuro sobre oscuro) */
.dark .faq{ border-top-color:rgba(255,255,255,.14) }
.dark .faq:last-child{ border-bottom-color:rgba(255,255,255,.14) }
.dark .faq__q{ color:var(--paper) }
.dark .faq__q .pm::before, .dark .faq__q .pm::after{ background:var(--paper) }
.dark .faq__a p{ color:rgba(255,255,255,.66) }

/* ============================================================
   CIERRE
   ============================================================ */
.cta-final{ background:var(--ink); color:var(--paper); border-radius:var(--r-lg); padding:clamp(40px,6vw,90px); text-align:center; position:relative; overflow:hidden }
.cta-final h2{ font-family:var(--f-display); font-weight:760; font-size:clamp(34px,6vw,76px); line-height:.98; letter-spacing:-.03em; margin:.3em auto .5em; max-width:16ch }
.cta-final .lead{ color:rgba(255,255,255,.68); margin-inline:auto; max-width:46ch; text-align:center }
.cta-final__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:2.2em }
.cta-final__contact{ display:flex; gap:clamp(20px,4vw,46px); justify-content:center; flex-wrap:wrap; margin-top:2.6em; font-size:14.5px; color:rgba(255,255,255,.6) }
.cta-final__contact a{ display:inline-flex; align-items:center; gap:8px; color:var(--paper); font-weight:500 }
.cta-final__contact a:hover{ color:var(--hero) }
.cta-final__contact svg{ width:17px; height:17px; color:var(--hero) }
.cta-final__word{ position:absolute; left:50%; bottom:-14%; transform:translateX(-50%); font-family:var(--f-display); font-weight:800; font-size:30vw; color:rgba(255,255,255,.04); line-height:1; pointer-events:none; user-select:none }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--paper); padding:clamp(40px,5vw,70px) 0 36px }
.foot__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12) }
.foot__brand{ max-width:30ch }
.foot__brand .brand{ color:var(--paper); margin-bottom:14px }
.foot__brand p{ color:rgba(255,255,255,.55); font-size:15px; line-height:1.5 }
.foot__cols{ display:flex; gap:clamp(40px,6vw,90px); flex-wrap:wrap }
.foot__col h4{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 16px; font-weight:400 }
.foot__col a{ display:block; color:rgba(255,255,255,.72); font-size:15px; margin-bottom:11px; transition:color .15s }
.foot__col a:hover{ color:var(--hero) }
.foot__bot{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:28px; color:rgba(255,255,255,.4); font-size:13.5px; font-family:var(--f-mono) }

/* ============================================================
   REVEAL (scroll)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1) }
.reveal.show{ opacity:1; transform:none }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .marquee__track{ animation:none }
  .bub{ opacity:1 !important; transform:none !important; animation:none }
  .bub.typing i{ animation:none }
  .hero__art, .hero__art img, .hero__art video{ animation:none }
  *{ scroll-behavior:auto }
}

/* floating whatsapp button (mobile) */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:var(--hero); color:var(--on-hero);
  display:none; place-items:center; box-shadow:0 14px 30px -10px var(--hero);
  transition:transform .2s;
}
.fab:hover{ transform:scale(1.06) }
.fab svg{ width:28px; height:28px }
@media (max-width:860px){ .fab{ display:none } }

/* ============================================================
   MODAL + FORMULARIO DE DIAGNÓSTICO
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:flex-start; justify-content:center; padding:clamp(16px,5vh,60px) 16px; overflow-y:auto }
.modal.open{ display:flex }
.modal__backdrop{ position:fixed; inset:0; background:rgba(22,20,14,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.modal__dialog{ position:relative; z-index:1; width:100%; max-width:520px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,4vw,42px); box-shadow:0 40px 90px -30px rgba(22,20,14,.5); animation:modalIn .25s cubic-bezier(.2,.8,.3,1) }
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
.modal__close{ position:absolute; top:12px; right:15px; background:none; border:none; font-size:30px; line-height:1; color:var(--ink-mute); cursor:pointer; padding:4px 6px }
.modal__close:hover{ color:var(--ink) }
.modal__title{ font-family:var(--f-display); font-weight:740; font-size:clamp(24px,3.4vw,32px); line-height:1.05; letter-spacing:-.02em; margin:10px 0 8px }
.modal__lead{ color:var(--ink-soft); font-size:15.5px; line-height:1.5; margin:0 0 20px }
.diag__form{ display:flex; flex-direction:column; gap:14px }
.diag__form .field{ display:flex; flex-direction:column; gap:6px }
.diag__form label{ font-size:13.5px; font-weight:600; color:var(--ink) }
.diag__form input, .diag__form textarea{ font-family:var(--f-body); font-size:16px; color:var(--ink); background:var(--paper); border:1.6px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; width:100%; resize:vertical; transition:border-color .15s, box-shadow .15s }
.diag__form input::placeholder, .diag__form textarea::placeholder{ color:var(--ink-mute) }
.diag__form input:focus, .diag__form textarea:focus{ outline:none; border-color:var(--hero); box-shadow:0 0 0 3px color-mix(in srgb, var(--hero) 18%, transparent) }
.tools-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:2px }
.tool-check{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:400; cursor:pointer; color:var(--ink) }
.tool-check input[type=checkbox]{ width:15px; height:15px; accent-color:var(--hero); cursor:pointer; flex-shrink:0 }
.tools-other{ font-family:var(--f-body); font-size:15px; color:var(--ink); background:var(--paper); border:1.6px solid var(--line); border-radius:var(--r-sm); padding:10px 13px; width:100%; margin-top:8px; transition:border-color .15s, box-shadow .15s }
.tools-other::placeholder{ color:var(--ink-mute) }
.tools-other:focus{ outline:none; border-color:var(--hero); box-shadow:0 0 0 3px color-mix(in srgb, var(--hero) 18%, transparent) }
.diag__form button[type=submit]{ margin-top:6px; justify-content:center }
.diag__status{ margin:2px 0 0; font-size:14px; min-height:1.1em; line-height:1.4 }
.diag__status.ok{ color:#22c55e; font-weight:600 }
.diag__status.err{ color:var(--hero-ink) }
body.modal-open{ overflow:hidden }
.fab{ border:none; cursor:pointer }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.tst-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px) }
.tst{ margin:0; display:flex; flex-direction:column; gap:12px }
.tst__bubble{ position:relative; align-self:flex-start; background:#dcf8c6; color:#1b2a17; border-radius:16px; border-top-left-radius:5px; padding:14px 16px 9px; box-shadow:0 1px 2px rgba(22,20,14,.14); font-size:clamp(15px,1.4vw,16.5px); line-height:1.5 }
.tst__bubble p{ margin:0 }
.tst__time{ display:block; text-align:right; font-size:11px; color:#6b9a5c; margin-top:4px; font-family:var(--f-mono) }
.tst__time b{ color:#53bdeb; font-weight:700; letter-spacing:-3px; margin-left:3px }
.tst figcaption{ display:flex; align-items:center; gap:11px; padding-left:4px }
.tst__av{ width:42px; height:42px; border-radius:50%; background:var(--hero); color:var(--on-hero); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:17px; flex:none }
.tst__who{ display:flex; flex-direction:column; line-height:1.25 }
.tst__who b{ font-size:14.5px; color:var(--ink) }
.tst__who small{ font-size:12.5px; color:var(--ink-mute); font-family:var(--f-mono) }
@media (max-width:720px){ .tst-grid{ grid-template-columns:1fr } }

/* ===== WHATSAPP FLOTANTE ===== */
.wpp-float{
  position:fixed; bottom:28px; right:28px; z-index:9999;
  width:56px; height:56px; border-radius:50%;
  background:#FF5436;
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  transition:transform .2s, box-shadow .2s;
  text-decoration:none;
}
.wpp-float:hover{
  transform:scale(1.08);
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}