/* ==========================================================================
   MIL ASADOS — Secciones
   --------------------------------------------------------------------------
   Estilos de layout de cada sección, en el MISMO ORDEN que el DOM de
   index.html. Si agregás una sección, agregala en su posición del orden.
   Los media queries de todo esto viven en responsive.css.

   Orden: Header · Hero · Atributos · Concepto · Tres pasos · Video demo ·
          Usos · Antes vs Después · El producto · Lo que recibís ·
          Advertencia (el componente vive en base.css) · Compra ·
          Set Parrillero · Comunidad · FAQ ·
          Entrada al blog · Footer ·
          UI flotante (WhatsApp + sticky CTA)
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg,rgba(10,9,8,.92),rgba(10,9,8,.55) 70%,transparent);
  backdrop-filter:blur(8px);
  transition:background .3s,box-shadow .3s;
}
header.scrolled{background:rgba(10,9,8,.92);box-shadow:0 8px 26px rgba(0,0,0,.30)}
.bar{
  max-width:var(--maxw);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;
}
.lockup{display:inline-flex;align-items:center;gap:11px}
.lockup .iso{height:34px;width:auto}
.lockup .word{font-family:var(--f-ui);line-height:1;display:flex;flex-direction:column}
.lockup .word b{font-weight:700;letter-spacing:.18em;font-size:16px}
.lockup .word i{
  font-style:normal;font-weight:500;letter-spacing:.34em;font-size:11px;
  color:var(--steel-d);margin-top:2px;
}
.nav{
  display:flex;align-items:center;gap:26px;
  font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:.04em;
}
.nav .nav-links{display:flex;align-items:center;gap:26px}
.nav a{color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--ink)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:96px;overflow:hidden;
  background:radial-gradient(120% 90% at 60% 0%,#1b1612 0%,var(--bg) 58%),var(--bg);
}
/* Trama de puntos sutil sobre el video */
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);
  background-size:22px 22px;
  mask-image:radial-gradient(80% 70% at 55% 45%,#000,transparent);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:right center;z-index:0;
  animation:ignite 1.8s ease-out both;
}
/* Degradado que sostiene la legibilidad del copy sobre el video */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(44% 54% at 80% 72%,rgba(255,106,26,.16),transparent 62%),
    linear-gradient(90deg,rgba(12,11,10,.92) 0%,rgba(12,11,10,.62) 34%,rgba(12,11,10,.14) 58%,transparent 74%),
    linear-gradient(0deg,rgba(12,11,10,.58),transparent 30%);
}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-copy{max-width:60%}
.hero-copy .kicker{
  font-family:var(--f-ui);font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;font-size:12px;color:var(--ember);
  margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.hero-copy .kicker::before{content:"";width:34px;height:1px;background:var(--ember)}
.hero h1{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,8.2vw,96px);line-height:.92;margin:0 0 20px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero h1 .em{
  background:linear-gradient(180deg,#fff,var(--ember-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.badge-row{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.prodname{
  font-family:var(--f-ui);font-weight:600;letter-spacing:.14em;font-size:14px;
  text-transform:uppercase;color:var(--steel);margin:0 0 26px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* color --ink y no --muted: sobre las llamas del hero, --muted medía 3.43:1
   y --steel 4.48:1, ambos por debajo del mínimo AA de 4.5:1 para texto chico. */
.scrollcue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  font-family:var(--f-ui);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scrollcue span{
  width:1px;height:32px;background:linear-gradient(var(--ember),transparent);
  animation:cue 1.8s ease-in-out infinite;
}

@keyframes ignite{0%{opacity:0}55%{opacity:.5}100%{opacity:1}}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ==========================================================================
   BARRA DE ATRIBUTOS
   ========================================================================== */
/* Tira editorial, no grilla: sin celdas ni bordes internos, los seis
   atributos fluyen en línea. Las celdas con borde competían en peso con las
   cards de producto de más abajo; así la barra queda como una línea de
   respiro entre el hero y el concepto. Al fluir, seis ítems se acomodan
   solos y no queda ninguno huérfano. */
.attrs{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg2),var(--bg));
}
.attrs-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 30px;padding:26px 22px;
}
.attr{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-ui);font-weight:600;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
}
.attr-ic{display:inline-flex}
.attr-ic svg{width:21px;height:21px;color:var(--ember)}

/* ==========================================================================
   CONCEPTO
   ========================================================================== */
.concept{background:linear-gradient(160deg,#1c140b,#0c0b0a 72%);overflow:hidden}
/* Isotipo como marca de agua */
.concept .wm{
  position:absolute;right:-3%;top:50%;transform:translateY(-50%);
  width:min(440px,46vw);opacity:.05;pointer-events:none;filter:grayscale(1);
}
.concept-ember{
  position:absolute;right:0;bottom:-40px;width:70%;height:420px;pointer-events:none;
  background:radial-gradient(60% 100% at 70% 100%,rgba(255,106,26,.22),transparent 70%);
}
.concept-flame{
  position:absolute;right:6%;bottom:-30px;width:min(420px,52vw);opacity:.5;
  mix-blend-mode:screen;filter:blur(3px);pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent);
  mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent);
}
/* Transición hacia "Cómo funciona".
   Sin esto la llama y la brasa se cortaban de golpe contra el negro en el
   borde de la sección (.concept tiene overflow:hidden). Este velo las apaga
   progresivamente: naranja muy tenue → negro profundo.
   z-index 1 lo deja por encima de la llama y por debajo del texto (z-index 2). */
.concept::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:190px;
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,106,26,.045) 26%,
    rgba(12,11,10,.62) 66%,
    var(--bg) 100%);
}
.concept-inner{position:relative;z-index:2;max-width:760px}
.concept h2{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,6.2vw,68px);line-height:1.0;margin:0 0 20px;
}
.concept h2 .hl{color:var(--ember)}
.concept .sub{
  font-family:var(--f-ui);font-weight:600;color:var(--steel);
  font-size:clamp(16px,2.6vw,21px);margin:0 0 20px;
}

/* ==========================================================================
   TRES PASOS
   ========================================================================== */
.steps{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.steps-head{margin-bottom:40px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;transition:transform .2s,border-color .2s;
}
.step:hover{transform:translateY(-4px);border-color:var(--line2)}
.step-img{position:relative;aspect-ratio:4/5;overflow:hidden}
.step-img img{width:100%;height:100%;object-fit:cover}
.step-num{
  position:absolute;top:12px;left:12px;
  font-family:var(--f-disp);font-weight:800;font-size:30px;line-height:1;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  padding-left:8px;border-left:3px solid var(--ember);
}
.step h3{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  font-size:22px;margin:18px 18px 8px;
}
.step p{color:var(--muted);font-size:14.5px;margin:0 18px 20px}

/* ==========================================================================
   VIDEO DEMO
   ========================================================================== */
.video{background:radial-gradient(120% 90% at 50% 8%,#1f1611,var(--bg2) 62%)}
.video-head{text-align:center;margin-bottom:34px}
.video-head .lead{margin:0 auto}
.player-stage{position:relative;display:flex;justify-content:center;padding:34px 0 10px}
/* Halo de brasa detrás del reproductor */
.player-stage::before{
  content:"";position:absolute;width:min(620px,86vw);height:108%;top:-4%;left:50%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,106,26,.34),rgba(216,71,15,.08) 55%,transparent 74%);
  filter:blur(22px);pointer-events:none;z-index:0;
}
.video-flame{
  position:absolute;bottom:-26px;width:min(560px,80vw);opacity:.55;
  mix-blend-mode:screen;filter:blur(3px);pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent);
  mask-image:radial-gradient(70% 80% at 50% 60%,#000,transparent);
  animation:flick 5s ease-in-out infinite;
}
.player{
  position:relative;z-index:1;max-width:560px;aspect-ratio:1/1;margin:0 auto;
  border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,140,60,.18);background:#000;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(255,106,26,.20),inset 0 0 0 1px rgba(255,170,90,.10);
}
.player video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;background:#000;
}
.player .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.40));
}
.player .disc{
  pointer-events:auto;cursor:pointer;width:76px;height:76px;border-radius:50%;
  background:linear-gradient(180deg,#ff7a2a,#e34d10);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 34px rgba(216,71,15,.5);transition:transform .2s;
}
.player .disc:hover{transform:scale(1.07)}
.player .disc svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.player.playing .play{opacity:0;visibility:hidden;transition:opacity .25s}

@keyframes flick{0%,100%{opacity:.62;transform:scaleY(1)}50%{opacity:.8;transform:scaleY(1.05)}}

/* ==========================================================================
   USOS
   ========================================================================== */
.usos{background:linear-gradient(180deg,var(--bg2),#0e0d0c)}
.usos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.uso{
  background:rgba(255,255,255,.018);border:1px solid var(--line);border-radius:6px;
  padding:24px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--f-ui);font-weight:600;font-size:13px;color:var(--steel);
  transition:border-color .2s,transform .2s,color .2s;
}
.uso:hover{border-color:var(--ember-d);transform:translateY(-3px);color:var(--ink)}
.uso-ic svg{width:34px;height:34px;color:var(--steel-d);transition:color .2s}
.uso:hover .uso-ic svg{color:var(--ember)}

/* ==========================================================================
   ANTES VS DESPUÉS
   ========================================================================== */
.vs{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.vs-head{text-align:center;margin-bottom:38px}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto}
.vs-card{border:1px solid var(--line);border-radius:12px;padding:28px 26px;background:var(--panel)}
.vs-card h3{
  font-family:var(--f-ui);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;color:var(--muted);
}
.vs-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vs-card li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--muted)}
.vs-card li svg{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.vs-card.before li svg{color:#6e655c}
.vs-card.after{
  border-color:rgba(216,71,15,.45);
  background:linear-gradient(180deg,#1d1510,var(--panel));
  box-shadow:0 0 44px rgba(255,106,26,.10);
}
.vs-card.after h3{color:var(--ember)}
.vs-card.after li{color:var(--steel)}
.vs-card.after li svg{color:var(--ember)}

/* ==========================================================================
   EL PRODUCTO
   ========================================================================== */
.detail{background:linear-gradient(180deg,#0e0d0c,var(--bg2))}
.detail-head{margin-bottom:44px;max-width:34ch}
.detail-stage{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}
.detail-photo{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 50px rgba(255,106,26,.08);
}
.detail-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Figura vertical que se usa sólo en mobile (scrollytelling) */
.co-figure{display:none;position:relative}
.co-figure img{
  height:520px;width:auto;max-width:none;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.6));
}
.co-callouts{display:grid;grid-template-columns:1fr 1fr;gap:30px 30px}
.callout{max-width:none}
.callout .co-line{display:block;width:30px;height:2px;background:var(--ember);margin-bottom:9px}
.callout h3{
  font-family:var(--f-ui);font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 5px;
}
.callout p{color:var(--muted);font-size:13.5px;margin:0}
.detail-claim{
  margin:46px auto 0;max-width:62ch;text-align:center;
  font-family:var(--f-ui);font-weight:600;font-size:clamp(15px,2.4vw,18px);
  color:var(--steel);letter-spacing:.01em;
}

/* --- Lockup variante B: el sello de autenticidad ------------------------
   Isotipo + wordmark + cinta "El original", igual que en el packaging.
   Cierra "El producto". La variante A —con "Tecnología by Expando"— vive
   en el footer; las dos nunca comparten pantalla, así que no se pisan.  */
.lockup-b{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  margin:34px auto 0;
}
.lockup-b .iso-b{height:54px;width:auto;opacity:.92}
.lockup-b .word-b{
  font-family:var(--f-ui);line-height:1;display:flex;flex-direction:column;
  align-items:center;color:var(--ink);
}
.lockup-b .word-b b{font-weight:700;letter-spacing:.2em;font-size:21px}
.lockup-b .word-b i{
  font-style:normal;font-weight:500;letter-spacing:.34em;font-size:12px;
  color:var(--steel-d);margin-top:4px;
}

/* --- La cinta ------------------------------------------------------------
   Réplica del packaging en CSS, no en imagen: el clip-path es vectorial
   igual que un SVG, el texto sigue siendo texto seleccionable e indexable,
   y no suma ningún asset. La muesca en V se recorta hacia adentro en las
   dos puntas; el padding lateral la compensa para que la letra no la toque.
   El rojo entra por token: ver --red en tokens.css.                      */
.ribbon{
  display:inline-block;
  padding:9px 30px;
  background:linear-gradient(180deg,var(--red-3),var(--red-2));
  color:#fff;-webkit-text-fill-color:#fff;
  font-family:var(--f-ui);font-weight:700;font-size:12px;
  letter-spacing:.30em;text-transform:uppercase;line-height:1;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);
}
.ribbon.sm{
  padding:7px 24px;font-size:10px;letter-spacing:.26em;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 50%,100% 100%,0 100%,11px 50%);
}

/* ==========================================================================
   LO QUE RECIBÍS  (sección clara / crema)
   ========================================================================== */
.receive{background:linear-gradient(180deg,var(--cream),var(--cream2));color:var(--ink-dark)}
.receive .eyebrow{color:var(--ember-d)}
.receive .title{color:var(--ink-dark)}
.receive .title .thin{color:#8a8276}
.receive-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:30px}
.inc-label{
  font-family:var(--f-ui);font-weight:700;font-size:10.5px;
  letter-spacing:.3em;text-transform:uppercase;color:#a4937e;margin:0 0 10px;
  display:inline-flex;align-items:center;gap:8px;
}
.inc-label::before{content:"";width:18px;height:1px;background:var(--ember-d)}
.receive-shots{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:center}
.shot{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:16px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/4;overflow:hidden;box-shadow:0 14px 34px rgba(60,40,20,.10);
}
.shot img{max-height:100%;width:auto;object-fit:contain}
.shot.tall{aspect-ratio:3/4.3}
.receive-copy .lead{color:#5c544a;max-width:46ch}

/* ==========================================================================
   COMPRA
   ========================================================================== */
.buy{background:radial-gradient(120% 90% at 50% 0%,#1a1410,var(--bg) 60%)}
.buy-value{text-align:center;margin:0 auto 36px;max-width:640px}
.buy-value h3{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,4.2vw,38px);line-height:1.02;margin:0 0 10px;
}
.buy-value p{color:var(--muted);font-size:15px;margin:0}
.buy-card{
  max-width:680px;margin:0 auto;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:12px;
  padding:clamp(30px,5vw,50px);text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.buy-card .price-block{margin-bottom:24px}
.buy-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.buy-cta .btn{padding:15px 26px;font-size:14px}
/* Aclara que la compra se cierra en la tienda de Expando: baja la fricción de
   ver otro dominio al tocar el CTA. Va entre los botones y el microcopy. */
.buy-note{
  font-family:var(--f-ui);font-size:12px;letter-spacing:.04em;
  color:var(--muted);margin:0 0 18px;
}
.micro{
  display:flex;gap:24px;justify-content:center;flex-wrap:wrap;
  font-family:var(--f-ui);font-size:12.5px;letter-spacing:.03em;color:var(--steel);
}
.micro span{display:inline-flex;align-items:center;gap:8px}
.micro svg{width:17px;height:17px;color:var(--ember)}

/* ==========================================================================
   SET PARRILLERO (upsell)
   ========================================================================== */
/* SIN STOCK. El bloque baja de peso a propósito: el Set no puede competir
   con el Iniciador, que sí está disponible. Se fue el carrusel de seis fotos
   —que además cargaba ~1 MB— y quedó una sola imagen más chica. */
.set{background:linear-gradient(180deg,#14110e,#0e0d0c);border-top:1px solid var(--line)}
.set-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;align-items:center}
.set-shot{
  position:relative;margin:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/5;background:#000;
}
/* Sin glow ni sombra profunda: eso queda para lo que se puede comprar. */
.set-shot img{width:100%;height:100%;object-fit:cover;opacity:.72}
.stock-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--f-ui);font-weight:700;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  background:rgba(12,11,10,.82);border:1px solid var(--line2);border-radius:3px;
  padding:5px 11px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.set h2{
  font-family:var(--f-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,4vw,40px);line-height:1.0;margin:0 0 14px;
}
.set .lead{margin-bottom:20px}
.set-includes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;list-style:none}
.set-includes li{
  font-family:var(--f-ui);font-weight:600;font-size:12.5px;color:var(--steel);
  border:1px solid var(--line2);border-radius:30px;padding:7px 14px;
  display:inline-flex;align-items:center;gap:8px;
}
.set-includes li .d{width:5px;height:5px;border-radius:50%;background:var(--muted-d)}
/* Texto, no botón: no hay nada que comprar. */
.set-stock-note{
  margin:0 0 12px;max-width:46ch;
  font-family:var(--f-ui);font-size:14px;line-height:1.55;color:var(--muted);
}
/* Único enlace del bloque, y es secundario: subrayado, no botón. */
.set-stock-cta{
  position:relative;display:inline-block;
  font-family:var(--f-ui);font-weight:600;font-size:13.5px;
  color:var(--steel);border-bottom:1px solid var(--line2);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.set-stock-cta:hover{color:var(--ink);border-color:var(--steel-d)}
.set-stock-cta::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* ==========================================================================
   COMUNIDAD
   ========================================================================== */
.community{background:radial-gradient(110% 90% at 50% 100%,#1a120b,var(--bg2) 60%);text-align:center}
.community .lead{margin:0 auto 30px}
.socials{display:flex;gap:16px;justify-content:center}
.socials a{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;color:var(--steel);
  transition:transform .2s,border-color .2s,color .2s,background .2s;
}
.socials a:hover{
  transform:translateY(-3px);border-color:var(--ember-d);
  color:var(--ember);background:var(--ember-soft);
}
.socials svg{width:24px;height:24px}
.handle{
  font-family:var(--f-ui);font-weight:600;letter-spacing:.08em;
  color:var(--ember);margin-top:18px;font-size:14px;
}

/* ==========================================================================
   FAQ (acordeón)
   ========================================================================== */
.faq{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.acc{max-width:780px;margin:34px auto 0}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:first-child{border-top:1px solid var(--line)}
.acc-q{
  width:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 4px;text-align:left;color:var(--ink);
  font-family:var(--f-ui);font-weight:600;font-size:clamp(15px,2.4vw,17px);
}
.acc-ico{width:20px;height:20px;flex:0 0 auto;color:var(--ember);transition:transform .3s}
.acc-item.open .acc-ico{transform:rotate(180deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc-item.open .acc-a{max-height:340px}
.acc-a p{margin:0;padding:0 4px 24px;color:var(--muted);font-size:15px;max-width:64ch}

/* ==========================================================================
   ENTRADA AL BLOG
   --------------------------------------------------------------------------
   Banda entre la FAQ y el footer. El botón es .btn-ghost y no primario:
   el único primario de la página tiene que seguir siendo comprar.
   ========================================================================== */
/* Padding propio, más chico que el de .sec-sm: es una banda de paso, no una
   sección. Con el aire de .sec-sm medía 245px en desktop y estiraba la
   página más de lo que vale. */
.blogband{
  border-top:1px solid var(--line);background:var(--bg2);
  padding:clamp(30px,4vw,40px) 0;
}
.blogband-inner{
  display:flex;align-items:center;justify-content:space-between;gap:26px 40px;
}
.blogband .eyebrow{margin:0 0 10px}
.blogband-title{
  margin:0;max-width:46ch;
  font-family:var(--f-ui);font-weight:600;line-height:1.35;
  font-size:clamp(17px,2.4vw,22px);letter-spacing:.01em;color:var(--ink);
}
.blogband .btn{flex:0 0 auto}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  background:var(--bg);border-top:1px solid var(--line);
  padding:60px 22px 120px;text-align:center;
}
.foot-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.foot-logo{height:96px;width:auto;margin-bottom:22px;opacity:.96}
.foot-claim{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(20px,3.6vw,28px);margin:0 0 26px;color:var(--steel);
}
.foot-nav{
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-bottom:26px;
  font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:.04em;
}
.foot-nav a{color:var(--muted);transition:color .2s}
.foot-nav a:hover{color:var(--ink)}
.exp-badge{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line2);border-radius:30px;padding:8px 16px;
  font-family:var(--f-ui);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel-d);
  margin-bottom:24px;transition:border-color .2s,color .2s;
}
.exp-badge:hover{border-color:var(--ember-d);color:var(--ember)}
.exp-badge b{color:var(--steel);font-weight:700}
.foot-data{color:var(--muted);font-size:13px;line-height:1.9;font-family:var(--f-ui)}
.foot-data a:hover{color:var(--ember)}
/* #6b645c daba 3.37:1 sobre --bg y no llegaba al mínimo AA. */
.foot-copy{
  margin-top:20px;font-family:var(--f-ui);font-size:11px;
  letter-spacing:.08em;color:var(--muted-d);
}
.sep{color:var(--line2);margin:0 6px}

/* ==========================================================================
   UI FLOTANTE — WhatsApp + sticky CTA
   --------------------------------------------------------------------------
   En mobile el botón de WhatsApp se eleva por encima del sticky CTA para que
   no se pisen (ver responsive.css, breakpoint 760px). No bajar ese bottom.
   ========================================================================== */
.wa-float{
  position:fixed;right:18px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,#2bb35a,#1d7a42);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 26px rgba(43,179,90,.30);
  transition:transform .2s,box-shadow .2s;
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 32px rgba(0,0,0,.55),0 0 34px rgba(43,179,90,.42);
}
.wa-float svg{width:29px;height:29px;fill:#fff}

/* Sólo visible en mobile (ver responsive.css) */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,9,8,.35),rgba(10,9,8,.97) 40%);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);
}
.sticky .btn{width:100%;justify-content:center;padding:16px;font-size:14px}
.sticky .btn small{font-weight:600;opacity:.9;text-transform:none}