/* ============================================================
   Publinovo — Landing "Posicionamiento Local en Buscadores"
   Hereda tokens y componentes de styles.css.
   Solo añade lo específico de esta landing (prefijo slo-).
   ============================================================ */

/* ---------- Utilidades locales ---------- */
.slo-soft{ background:var(--bg-soft) }
.slo-proc{ padding-top:clamp(40px,5vw,72px) }

/* ============================================================
   1 · HERO (split: copy + maqueta SERP)
   ============================================================ */
.slo-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(28px,4vw,52px) clamp(56px,7vw,96px);
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.16), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.slo-hero__blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0 }
.slo-hero__blob--1{ width:340px; height:340px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(28,157,215,.30), transparent 70%) }
.slo-hero__blob--2{ width:300px; height:300px; bottom:-130px; left:-90px; background:radial-gradient(circle, rgba(140,198,63,.30), transparent 70%) }
.slo-hero .wrap{ position:relative; z-index:2 }

.slo-crumbs{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3); margin-bottom:clamp(20px,3vw,32px);
}
.slo-crumbs a{ color:var(--ink-3); transition:color .2s }
.slo-crumbs a:hover{ color:var(--blue-d) }
.slo-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.slo-crumbs i{ font-style:normal; color:var(--line-2) }

.slo-hero__grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.slo-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; margin-bottom:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.slo-badge .dot{ width:9px; height:9px; border-radius:50%; background:#8CC63F; box-shadow:0 0 0 4px rgba(140,198,63,.25); animation:pulse 2s infinite }
.slo-hero__copy h1{ font-size:clamp(34px,4.8vw,56px); letter-spacing:-.03em; text-wrap:balance }
.slo-hero__copy .lead{ margin-top:20px; max-width:54ch }

/* flash de precio en el hero */
.slo-price-flash{
  display:inline-flex; align-items:center; gap:18px; margin-top:26px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 20px; box-shadow:var(--shadow-md);
}
.slo-price-flash__nums{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.slo-price-flash__old{ font-family:var(--ff-head); font-weight:600; font-size:19px; color:var(--muted); text-decoration:line-through }
.slo-price-flash__now{ font-family:var(--ff-head); font-weight:700; font-size:34px; line-height:1; color:var(--ink); letter-spacing:-.02em }
.slo-price-flash__now small{ font-size:15px; font-weight:600; color:var(--ink-3) }
.slo-price-flash__tag{
  font-family:var(--ff-head); font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff;
  background:var(--grad); padding:8px 14px; border-radius:var(--r-pill); box-shadow:var(--shadow-brand);
}
.slo-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px }

/* media / maqueta SERP (imagen) */
.slo-hero__media{ position:relative; display:flex; justify-content:center }
.slo-serp{
  position:relative; z-index:1; width:min(100%,440px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 60px -22px rgba(28,40,64,.34), 0 10px 24px -16px rgba(28,40,64,.22);
  padding:clamp(18px,2.4vw,26px);
  animation:slo-floaty 6s ease-in-out infinite;
}
.slo-serp::before{
  content:""; position:absolute; inset:-6%; z-index:-1; border-radius:var(--r-xl);
  background:
    radial-gradient(60% 60% at 30% 26%, rgba(28,157,215,.40), transparent 68%),
    radial-gradient(58% 58% at 74% 78%, rgba(140,198,63,.38), transparent 68%);
  filter:blur(46px); opacity:.8; animation:slo-glow 8s ease-in-out infinite;
}
@keyframes slo-floaty{ 50%{ transform:translateY(-14px) } }
@keyframes slo-glow{ 50%{ transform:scale(1.06); opacity:1 } }

.slo-serp--img{ width:min(100%,480px); padding:clamp(10px,1.3vw,14px) }
.slo-serp__shot{ display:block; width:100%; height:auto; border-radius:calc(var(--r-lg) - 8px) }

.slo-float{
  position:absolute; z-index:2; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:13px 17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line);
}
.slo-float small{ display:block; font-size:11px; color:var(--ink-3) }
.slo-float b{ font-family:var(--ff-head); font-size:15px; color:var(--ink) }
.slo-float__ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff; background:var(--grad) }
.slo-float__ic svg{ width:21px; height:21px }
.slo-float--1{ top:-12%; left:-5%; animation:slo-bob 5s ease-in-out infinite }
.slo-float--2{ bottom:6%; right:-5%; animation:slo-bob 5s ease-in-out infinite .8s }
@keyframes slo-bob{ 50%{ transform:translateY(-9px) } }
@media (prefers-reduced-motion:reduce){
  .slo-float--1,.slo-float--2,.slo-serp,.slo-serp::before{ animation:none }
}

/* ============================================================
   2 · QUÉ ES / FÓRMULA
   ============================================================ */
.slo-formula__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.slo-formula__intro h2{ font-size:clamp(28px,3.4vw,42px); margin:14px 0 18px; letter-spacing:-.02em; text-wrap:balance }
.slo-formula__intro .lead{ max-width:50ch }
.slo-formula__note{
  margin:18px 0 26px; padding:14px 18px; border-radius:var(--r-md);
  background:var(--bg-soft); border:1px solid var(--line);
  font-size:14.5px; color:var(--ink-2);
}

/* tarjeta visual de la fórmula */
.slo-formula__visual{
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(26px,3vw,40px); box-shadow:var(--shadow-md);
}
.slo-fchip{
  border-radius:var(--r-md); padding:16px 20px; border:1px solid var(--line);
  background:var(--bg-soft);
}
.slo-fchip small{ display:block; font-family:var(--ff-head); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-d); margin-bottom:4px }
.slo-fchip b{ display:block; font-family:var(--ff-head); font-size:clamp(16px,1.6vw,19px); color:var(--ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.slo-fchip--city small{ color:var(--green-d) }
.slo-fplus{
  align-self:center; font-family:var(--ff-head); font-weight:700; font-size:26px; line-height:1;
  color:var(--ink-3); width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg-soft-2);
}
.slo-farrow{ align-self:center; color:var(--blue-d) }
.slo-farrow svg{ width:30px; height:30px }
.slo-fresult{
  display:flex; align-items:center; gap:18px; position:relative; overflow:hidden;
  border-radius:var(--r-lg); padding:20px 24px; color:#fff;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(28,157,215,.22), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.18), transparent 55%), var(--ink);
  box-shadow:var(--shadow-md);
}
.slo-fresult__rank{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(34px,4vw,46px); line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; flex:none;
}
.slo-fresult small{ display:block; font-size:12px; color:rgba(255,255,255,.6); margin-bottom:3px }
.slo-fresult b{ font-family:var(--ff-head); font-size:clamp(16px,1.7vw,20px); color:#fff; letter-spacing:-.01em }

/* ============================================================
   3.5 · POSICIONAMIENTO EN IA — recurso visual "dos mundos"
   (reutiliza slo-rcard__query y slo-fresult; el chat es lo nuevo)
   ============================================================ */
.slo-worlds{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,28px);
  align-items:stretch; margin:clamp(6px,1.5vw,16px) 0 clamp(26px,3.4vw,40px);
}
.slo-world{
  display:flex; flex-direction:column; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,32px); box-shadow:var(--shadow-md);
}
.slo-world__label{
  font-family:var(--ff-head); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-d);
}
.slo-world__label--ai{ color:var(--green-d) }
/* chat de IA — único elemento nuevo */
.slo-chat{ display:flex; flex-direction:column; gap:12px; justify-content:center; flex:1 }
.slo-chat__q,.slo-chat__a{
  font-size:14.5px; line-height:1.55; padding:13px 17px;
  border-radius:var(--r-lg); max-width:90%;
}
.slo-chat__q{
  align-self:flex-end; background:var(--grad); color:#fff;
  border-bottom-right-radius:var(--r-sm); box-shadow:var(--shadow-brand);
}
.slo-chat__a{
  align-self:flex-start; background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink-2); border-bottom-left-radius:var(--r-sm);
}
.slo-chat__a b{ color:var(--ink) }
@media (max-width:980px){
  .slo-worlds{ grid-template-columns:1fr }
}

/* ============================================================
   3 · QUÉ INCLUYE (procesos) — grid de tarjetas
   ============================================================ */
.slo-feats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px);
}
.slo-feat{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2vw,26px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.slo-feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent }
.slo-feat__ic{
  width:50px; height:50px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--grad-soft); color:var(--blue-d);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.slo-feat:hover .slo-feat__ic{ transform:translateY(-2px) scale(1.06) rotate(-4deg) }
.slo-feat__ic svg{ width:26px; height:26px }
.slo-feat h3{ font-size:17px; margin-bottom:6px; letter-spacing:-.01em }
.slo-feat p{ font-size:14px; color:var(--ink-3); line-height:1.55 }

/* franja destacada: reporte de resultados */
.slo-bonus{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(20px,2.4vw,28px); padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px);
  border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  box-shadow:var(--shadow-lg);
}
.slo-bonus__ic{
  width:64px; height:64px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.slo-bonus__ic svg{ width:34px; height:34px }
.slo-bonus__txt{ flex:1; min-width:0 }
.slo-bonus__txt h3{ color:#fff; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.02em }
.slo-bonus__txt .grad-text{ background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text }
.slo-bonus__txt p{ color:rgba(255,255,255,.74); font-size:14.5px; line-height:1.55; margin-top:8px; max-width:64ch }
.slo-bonus__tag{
  flex:none; align-self:flex-start; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:8px 16px; border-radius:var(--r-pill);
}

/* ============================================================
   4 · PROCESO (flujo horizontal)
   ============================================================ */
.slo-flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); position:relative;
}
.slo-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center }
.slo-step:not(:last-child)::before{
  content:""; position:absolute; top:38px; left:calc(50% + 46px); right:calc(-50% + 46px);
  height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); z-index:0;
}
.slo-step__node{
  position:relative; z-index:1; width:76px; height:76px; border-radius:22px;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--line);
  color:var(--blue-d); box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, color .4s, background .4s;
}
.slo-step__node svg{ width:34px; height:34px }
.slo-step__num{
  position:absolute; top:-9px; right:-9px; z-index:2;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:13px;
  box-shadow:0 6px 14px -5px rgba(43,45,58,.5); transition:background .4s;
}
.slo-step:hover .slo-step__node{
  transform:translateY(-6px); border-color:transparent; background:var(--grad); color:#fff;
  box-shadow:0 20px 38px -14px rgba(28,157,215,.5);
}
.slo-step:hover .slo-step__num{ background:var(--green-d) }
.slo-step h3{ font-size:18px; margin:22px 0 9px }
.slo-step p{ font-size:14px; color:var(--ink-3); line-height:1.58; max-width:26ch }

/* ============================================================
   5 · CASOS DE ÉXITO — tablero de resultados
   ============================================================ */
.slo-cases{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px);
}
.slo-rcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,28px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.slo-rcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent }
.slo-rcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px }
.slo-rcard__pos{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(44px,5vw,58px); line-height:.85; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.slo-rcard__pos i{ font-style:normal; font-size:.5em; vertical-align:super; -webkit-text-fill-color:var(--ink-3); color:var(--ink-3); margin-right:4px; letter-spacing:normal }
.slo-rcard__badge{
  flex:none; font-family:var(--ff-head); font-weight:700; font-size:11.5px; letter-spacing:.04em;
  color:var(--ink-2); background:var(--bg-soft-2); padding:6px 12px; border-radius:var(--r-pill);
}
.slo-rcard__badge--win{ color:#0e1320; background:linear-gradient(120deg,#a6d957,#5bc4e6) }
.slo-rcard__query{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:10px 16px;
}
.slo-rcard__query svg{ width:15px; height:15px; flex:none; color:var(--green-d) }
.slo-rcard__query span{ font-family:var(--ff-head); font-size:13.5px; font-weight:500; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.slo-rcard__client{ margin-bottom:18px }
.slo-rcard__client b{ display:block; font-family:var(--ff-head); font-size:19px; color:var(--ink); letter-spacing:-.01em }
.slo-rcard__sector{ font-size:13px; color:var(--ink-3) }
.slo-rcard__foot{
  display:flex; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
}
.slo-rcard__stat{ flex:1; min-width:0 }
.slo-rcard__stat b{ display:block; font-family:var(--ff-head); font-size:16px; color:var(--green-d); line-height:1.1; letter-spacing:-.01em }
.slo-rcard__stat:nth-child(2) b{ color:var(--blue-d) }
.slo-rcard__stat small{ font-size:12px; color:var(--ink-3) }

/* tarjeta-CTA al final del tablero */
.slo-rcard--cta{
  align-items:flex-start; justify-content:center; text-align:left; color:#fff; border-color:transparent;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(28,157,215,.22), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.18), transparent 55%), var(--ink);
}
.slo-rcard--cta:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.slo-rcard__cta-ic{
  width:54px; height:54px; border-radius:var(--r-md); display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); margin-bottom:18px;
}
.slo-rcard__cta-ic svg{ width:28px; height:28px }
.slo-rcard--cta h3{ color:#fff; font-size:21px; letter-spacing:-.01em; margin-bottom:8px }
.slo-rcard--cta p{ color:rgba(255,255,255,.74); font-size:14px; line-height:1.55; margin-bottom:22px }
.slo-rcard__cta-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  font-family:var(--ff-head); font-weight:700; font-size:14.5px; color:#0e1320;
  background:linear-gradient(100deg,#a6d957 0%,#7fd0c0 50%,#5bc4e6 100%);
  padding:13px 22px; border-radius:var(--r-pill); transition:transform .25s, box-shadow .25s;
}
.slo-rcard__cta-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(91,196,230,.7) }

/* ============================================================
   6 · PRECIO / OFERTA
   ============================================================ */
.slo-pricing__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3vw,40px); align-items:stretch;
}
.slo-plan{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 110% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  color:#fff; border-radius:var(--r-xl); padding:clamp(30px,3.4vw,46px);
  box-shadow:var(--shadow-lg);
}
.slo-plan__flag{
  display:inline-block; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.slo-plan__title{ color:#fff; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em }
.slo-plan__sub{ color:rgba(255,255,255,.72); font-size:15.5px; margin-top:8px }
.slo-plan__price{ display:flex; align-items:flex-end; gap:16px; margin:26px 0 6px; flex-wrap:wrap }
.slo-plan__old{ font-family:var(--ff-head); font-weight:600; font-size:24px; color:rgba(255,255,255,.45); text-decoration:line-through }
.slo-plan__now{ display:flex; align-items:baseline; gap:8px }
.slo-plan__now b{ font-family:var(--ff-head); font-weight:700; font-size:clamp(48px,6vw,68px); line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.slo-plan__now span{ font-family:var(--ff-head); font-weight:600; font-size:18px; color:rgba(255,255,255,.7) }
.slo-plan__once{ color:rgba(255,255,255,.55); font-size:13.5px; margin-bottom:26px }
.slo-plan__list{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px }
.slo-plan__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:rgba(255,255,255,.9) }
.slo-plan__list svg{ width:20px; height:20px; flex:none; margin-top:1px; color:#a6d957 }
.slo-plan__hl b{ color:#fff; font-weight:700 }
.slo-plan__hl{ font-weight:600 }
.slo-plan__cta{ width:100% }
.slo-plan__guarantee{ text-align:center; color:rgba(255,255,255,.55); font-size:13px; margin-top:16px }

/* aside (claro): cómo empezamos */
.slo-aside{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(28px,3.2vw,42px); display:flex; flex-direction:column;
}
.slo-aside__title{ font-size:clamp(20px,2vw,25px); letter-spacing:-.02em }
.slo-aside__intro{ color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:12px 0 24px }
.slo-aside__list{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px }
.slo-aside__list li{ display:flex; gap:15px; align-items:flex-start }
.slo-aside__num{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--ff-head); font-weight:700; font-size:16px; color:#fff; background:var(--grad); box-shadow:var(--shadow-brand);
}
.slo-aside__list b{ display:block; font-family:var(--ff-head); font-size:16px; color:var(--ink); margin-bottom:2px }
.slo-aside__list span{ font-size:13.5px; color:var(--ink-3); line-height:1.5 }
.slo-aside__cta{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--blue-d);
  padding:12px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.slo-aside__cta:hover{ border-color:transparent; color:#fff; background:var(--grad); transform:translateX(2px) }

/* campo opcional del formulario — NO usa .lf-field para que app.js no lo
   valide como obligatorio. Replica el estilo de input de la sección oscura. */
.lf-optional{ margin-top:18px }
.lf-optional input{
  width:100%; height:58px; padding:0 20px; border:1.5px solid transparent;
  border-radius:14px; background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  transition:box-shadow .2s, border-color .2s; -webkit-appearance:none; appearance:none;
}
.lf-optional input::placeholder{ color:var(--muted) }
.lf-optional input:focus{ outline:none; border-color:#5bc4e6; box-shadow:0 0 0 4px rgba(91,196,230,.22) }
.lf-optional textarea{
  width:100%; padding:16px 20px; border:1.5px solid transparent;
  border-radius:14px; background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  line-height:1.5; resize:vertical; min-height:116px;
  transition:box-shadow .2s, border-color .2s; -webkit-appearance:none; appearance:none;
}
.lf-optional textarea::placeholder{ color:var(--muted) }
.lf-optional textarea:focus{ outline:none; border-color:#5bc4e6; box-shadow:0 0 0 4px rgba(91,196,230,.22) }

/* ============================================================
   8 · FAQ (acordeón nativo)
   ============================================================ */
.slo-faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px }
.slo-faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:4px 22px; box-shadow:var(--shadow-sm); transition:box-shadow .25s, border-color .25s;
}
.slo-faq__item[open]{ box-shadow:var(--shadow-md); border-color:transparent }
.slo-faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:var(--ink);
}
.slo-faq__item summary::-webkit-details-marker{ display:none }
.slo-faq__item summary::after{
  content:"+"; flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:22px; font-weight:400; line-height:1;
  background:var(--grad-soft); color:var(--blue-d); transition:transform .3s, background .3s, color .3s;
}
.slo-faq__item[open] summary::after{ content:"−"; background:var(--grad); color:#fff; transform:rotate(180deg) }
.slo-faq__item p{ padding:0 0 20px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:62ch }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .slo-hero__grid{ grid-template-columns:1fr; gap:44px }
  .slo-hero__media{ order:1; width:min(100%,420px); margin-inline:auto; padding-top:44px }
  .slo-float--1{ top:0 }
  .slo-feats{ grid-template-columns:repeat(2,1fr) }
  .slo-formula__grid{ grid-template-columns:1fr; gap:36px }
  .slo-cases{ grid-template-columns:repeat(2,1fr) }
  .slo-pricing__grid{ grid-template-columns:1fr }
  .slo-flow{ grid-template-columns:repeat(2,1fr); gap:40px 24px }
  .slo-step:not(:last-child)::before{ display:none }
}
@media (max-width:620px){
  .slo-bonus{ flex-direction:column; text-align:center }
  .slo-bonus__tag{ align-self:center }
  .slo-feats{ grid-template-columns:1fr; max-width:440px; margin-inline:auto }
  .slo-cases{ grid-template-columns:1fr; max-width:380px; margin-inline:auto }
  .slo-flow{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; gap:34px }
  .slo-price-flash{ width:100% }
  .slo-float{ transform:scale(.85) }
  .slo-float--1{ left:-2% }
  .slo-float--2{ right:-2% }
}