/* ============================================================
   LASUS — TEMPLATE ÚNICO DE LANDING B2B
   CSS plano, mobile-first, agnóstico de framework.
   Sin dependencias. Portable a un tema de PrestaShop 9 tal cual.
   Tokens tomados del Lasus Design System (colors_and_type.css).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --lasus-orange:#FF690D; --lasus-charcoal:#323E40;
  --orange-50:#FFF3EB; --orange-100:#FFE2CC; --orange-200:#FFC79A;
  --orange-500:#FF690D; --orange-600:#E55400; --orange-700:#B84300;
  --neutral-0:#FFFFFF; --neutral-50:#F7F8F8; --neutral-100:#EEF0F0;
  --neutral-200:#DDE0E0; --neutral-300:#C4C9C9; --neutral-400:#9AA1A2;
  --neutral-500:#6B7475; --neutral-600:#4B5556; --neutral-700:#3A4445;
  --neutral-800:#323E40; --neutral-900:#1F2627;
  --success:#1FA971; --success-bg:#E5F6EE;

  --bg:var(--neutral-0); --bg-soft:var(--neutral-50); --bg-inverse:var(--neutral-800);
  --fg-1:var(--neutral-900); --fg-2:var(--neutral-700); --fg-3:var(--neutral-500); --fg-4:var(--neutral-400);
  --border-1:var(--neutral-200); --border-2:var(--neutral-300); --divider:var(--neutral-100);
  --accent:var(--lasus-orange); --accent-hover:var(--orange-600); --accent-press:var(--orange-700);

  --font-sans:"Bariol","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;

  --shadow-sm:0 1px 3px rgba(31,38,39,.08),0 1px 2px rgba(31,38,39,.04);
  --shadow-md:0 4px 12px rgba(31,38,39,.08),0 2px 4px rgba(31,38,39,.04);
  --shadow-lg:0 12px 28px rgba(31,38,39,.10),0 4px 8px rgba(31,38,39,.04);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms;

  --wrap:1160px;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg-1);
  font-family:var(--font-sans); font-size:17px; line-height:1.55;
  font-feature-settings:"tnum" 1,"lnum" 1;
  -webkit-font-smoothing:antialiased;
  /* deja aire para la barra fija de móvil */
  padding-bottom:76px;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; letter-spacing:-.02em; text-wrap:balance; color:var(--fg-1)}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0}
a{color:var(--orange-700); text-decoration:none}
a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1{font-size:clamp(30px,7vw,52px); line-height:1.08; font-weight:700}
h2{font-size:clamp(25px,4.2vw,36px); line-height:1.15; font-weight:700}
h3{font-size:clamp(19px,2.4vw,21px); line-height:1.3; font-weight:700}
h4{font-size:17px; line-height:1.35; font-weight:700}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--space-5)}
.section{padding:var(--space-12) 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--bg-inverse); color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section__head{max-width:70ch; margin-bottom:var(--space-6)}
.section__head p{color:var(--fg-2); margin-top:var(--space-3)}
@media(min-width:900px){
  .section{padding:var(--space-20) 0}
  .wrap{padding:0 var(--space-8)}
  .hero .wrap{max-width:1400px}
}

.eyebrow{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); margin-bottom:var(--space-3);
}
.updated{
  display:block; font-size:14px; color:var(--fg-3); margin-top:var(--space-4);
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:12px 22px; border-radius:var(--radius-md);
  font:inherit; font-weight:700; font-size:16px; text-align:center;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-hover); color:#fff}
.btn--primary:active{background:var(--accent-press); transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--fg-1); border-color:var(--border-2)}
.btn--ghost:hover{border-color:var(--fg-3); color:var(--fg-1)}
.section--dark .btn--ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.btn--sm{min-height:40px; padding:8px 14px; font-size:15px}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6)}
.cta-row .btn{flex:1 1 200px}
@media(min-width:640px){.cta-row .btn{flex:0 0 auto}}

/* ---------- RESPUESTA DIRECTA (AEO) ---------- */
.answer{
  background:var(--orange-50); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); margin-bottom:var(--space-8);
  font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--neutral-900);
  max-width:78ch;
}

/* ---------- BREADCRUMB ---------- */
.crumbs{padding:var(--space-4) 0; border-bottom:1px solid var(--divider)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; font-size:14px; color:var(--fg-3)}
.crumbs li+li::before{content:"›"; margin-right:var(--space-2); color:var(--border-2)}
.crumbs a{color:var(--fg-3)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--fg-2); font-weight:600}

/* ---------- HERO ---------- */
.hero{padding:var(--space-10) 0 var(--space-12)}
.hero__grid{display:grid; gap:var(--space-8)}
.hero__lede{font-size:clamp(17px,2.2vw,20px); color:var(--fg-2); margin-top:var(--space-5); max-width:60ch}
.hero__media{
  aspect-ratio:16/10; background:var(--neutral-100); border-radius:var(--radius-lg);
  overflow:hidden; display:grid; place-items:center; color:var(--fg-4);
}
.hero__media img{width:100%; height:100%; object-fit:cover}
.trust-note{
  display:inline-flex; align-items:center; gap:var(--space-2); margin-top:var(--space-5);
  font-size:15px; font-weight:600; color:var(--neutral-700);
}
.trust-note::before{content:"●"; color:var(--success); font-size:11px}
.hero__form{
  background:var(--bg); border:1px solid var(--border-1);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
  padding:var(--space-4); margin-top:var(--space-8);
}
.hero__form-title{
  font-size:clamp(16px,1.9vw,20px); font-weight:700;
  color:var(--fg-1); margin-bottom:var(--space-2);
}
.hero__form-sub{
  font-size:15px; color:var(--fg-2); margin-bottom:var(--space-4);
}
@media(min-width:900px){
  .hero{padding:var(--space-16) 0}
  .hero__grid{grid-template-columns:1.15fr 0.85fr; align-items:start; gap:var(--space-12)}
  .hero__form{margin-top:0; position:sticky; top:var(--space-6)}
}
/* ---------- HERO — FONDO OSCURO ---------- */
.hero{background:#1E2023}
.hero h1{color:#fff}
.hero .hero__lede{color:rgba(255,255,255,.74)}
.hero .eyebrow{color:var(--accent)}
.hero .ticks li{color:rgba(255,255,255,.72)}
.hero .ticks li::before{color:var(--accent)}
.hero .trust-note{color:rgba(255,255,255,.62);font-weight:500}
.hero .trust-note::before{color:#4ade80}
.hero .updated{color:rgba(255,255,255,.42)}
.hero .btn--ghost{color:#fff!important;border-color:rgba(255,255,255,.35)!important}
.hero .btn--ghost:hover{border-color:rgba(255,255,255,.6)!important}
.hero__form{background:#fff!important;border:none!important;outline:none!important;box-shadow:0 20px 60px rgba(0,0,0,.28)!important}
.hero__form-title{color:#1a1a1a!important;font-size:clamp(20px,2.2vw,26px)!important;font-weight:800!important;line-height:1.12!important;margin-bottom:4px!important}
.hero__form-sub{color:#555!important;font-size:13px!important}
.hero__form-sub::after{content:'';display:block;height:1px;background:#f0f0f0;margin-top:14px;margin-bottom:4px}
.hero__form .form-outlet{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}

/* ---------- LISTA CON CHECK ---------- */
.ticks{list-style:none; display:grid; gap:var(--space-3); margin-top:var(--space-6)}
.ticks li{position:relative; padding-left:28px; font-size:16px; color:var(--fg-2)}
.ticks li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--accent); font-weight:700;
}

/* ---------- PRUEBA SOCIAL ---------- */
.proof{padding:var(--space-8) 0; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider)}
.proof__logos{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:var(--space-6) var(--space-10);
}
.proof__logos img{height:30px; width:auto; opacity:.8}
.stats{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin-top:var(--space-8)}
.stat__value{
  display:block; font-size:clamp(28px,4.5vw,40px); font-weight:700; line-height:1;
  letter-spacing:-.025em; color:var(--accent); font-variant-numeric:tabular-nums lining-nums;
}
.stat__label{display:block; font-size:14px; color:var(--fg-3); margin-top:var(--space-2)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- GRIDS DE TARJETAS ---------- */
.cards{list-style:none; display:grid; gap:var(--space-4); grid-template-columns:1fr}
@media(min-width:600px){.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.card{
  background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);
}
.card p{color:var(--fg-2); font-size:16px}
.card__icon{width:22px; height:22px; color:var(--accent); flex:none}
.card__icon svg{width:100%; height:100%; display:block}

/* ---------- PROCESO ---------- */
.steps{list-style:none; counter-reset:step; display:grid; gap:var(--space-4)}
@media(min-width:760px){.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.steps li{
  counter-increment:step; background:#fff; border:1px solid var(--border-1);
  border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm);
}
.steps li::before{
  content:counter(step); display:grid; place-items:center;
  width:32px; height:32px; border-radius:var(--radius-pill);
  background:var(--orange-50); color:var(--orange-700);
  font-weight:700; font-size:15px; margin-bottom:var(--space-4);
}
.steps h3{margin-bottom:var(--space-2)}
.steps p{color:var(--fg-2); font-size:16px}
.process__grid{display:grid; gap:var(--space-8)}
.process__media{aspect-ratio:16/9; background:var(--neutral-100); border-radius:var(--radius-lg); overflow:hidden}
.process__media svg,.process__media img{width:100%; height:100%; display:block}
.note{margin-top:var(--space-6); font-size:14px; color:var(--fg-3); max-width:70ch}

/* ---------- CATÁLOGO ---------- */
.catalog{list-style:none; display:grid; gap:var(--space-4); grid-template-columns:1fr}
@media(min-width:560px){.catalog{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.product{
  background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.product__media{aspect-ratio:4/3; background:var(--neutral-50); overflow:hidden}
.product__media img{width:100%; height:100%; object-fit:contain}
.product__body{padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); flex:1}
.product__name{font-size:17px; font-weight:700; line-height:1.3}
.product__specs{list-style:none; font-size:14px; color:var(--fg-3); display:grid; gap:2px}
.product__body .btn{margin-top:auto}

/* ---------- COMPARATIVA ---------- */
.compare{width:100%; border-collapse:collapse; font-size:16px}
.compare caption{text-align:left; font-size:14px; color:var(--fg-3); padding-bottom:var(--space-3)}
.compare th,.compare td{padding:var(--space-4); text-align:left; vertical-align:top; border-bottom:1px solid var(--border-1)}
.compare thead th{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); font-weight:700}
.compare thead th:nth-child(2){color:var(--orange-700)}
.compare tbody th{font-weight:600; color:var(--fg-1); width:28%}
.compare td{color:var(--fg-2)}
.compare tbody tr:nth-child(odd){background:#fff}
@media(max-width:759px){
  .compare thead{display:none}
  .compare tbody,.compare tr,.compare th,.compare td{display:block; width:auto}
  .compare tr{
    background:#fff!important; border:1px solid var(--border-1); border-radius:var(--radius-lg);
    margin-bottom:var(--space-4); padding:var(--space-4);
  }
  .compare th,.compare td{border:0; padding:0}
  .compare tbody th{font-size:17px; margin-bottom:var(--space-3)}
  .compare td{padding:var(--space-2) 0; border-top:1px solid var(--divider)}
  .compare td::before{
    content:attr(data-col); display:block; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-bottom:2px;
  }
}

/* ---------- CTA INTERMEDIO ---------- */
.midcta{text-align:left}
.midcta p{color:rgba(255,255,255,.72); margin-top:var(--space-4); max-width:60ch}
.midcta h2{max-width:34ch}

/* ---------- OBJECIONES ---------- */
.objections{list-style:none; display:grid; gap:var(--space-5)}
@media(min-width:700px){.objections{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.objection h3{margin-bottom:var(--space-2)}
.objection p{color:var(--fg-2); font-size:16px}

/* ---------- TESTIMONIOS ---------- */
.quotes{list-style:none; display:grid; gap:var(--space-4)}
@media(min-width:760px){.quotes{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.quote{
  background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:var(--space-4);
}
.quote blockquote{margin:0; font-size:17px; line-height:1.55; color:var(--fg-1)}
.quote figcaption{display:flex; align-items:center; gap:var(--space-3); margin-top:auto}
.quote__avatar{
  width:40px; height:40px; border-radius:var(--radius-pill); background:var(--neutral-100);
  flex:none; overflow:hidden;
}
.quote__avatar img{width:100%; height:100%; object-fit:cover}
.quote__who{font-size:14px; line-height:1.35}
.quote__who strong{display:block; font-size:15px; color:var(--fg-1)}
.quote__who span{color:var(--fg-3)}

/* ---------- FAQ ---------- */
.faq__group+.faq__group{margin-top:var(--space-10)}
.faq__group h3{margin-bottom:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--border-1)}
.faq details{border-bottom:1px solid var(--divider)}
.faq summary{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4);
  padding:var(--space-4) 0; cursor:pointer; list-style:none;
  font-size:17px; font-weight:700; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
/* el encabezado de la pregunta hereda el estilo del summary:
   es h3 cuando hay un solo grupo y h4 cuando hay varios */
.faq summary h3,.faq summary h4{font:inherit; letter-spacing:inherit; margin:0}
.faq summary::after{content:"+"; color:var(--accent); font-size:22px; line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 0 var(--space-5); color:var(--fg-2); font-size:16px; max-width:75ch}
.faq__a p+p{margin-top:var(--space-3)}
.faq__a ul{padding-left:20px; margin-top:var(--space-3)}

/* ---------- BLOQUE LOCAL ---------- */
.local__meta{display:grid; gap:var(--space-6); margin-top:var(--space-6)}
@media(min-width:700px){.local__meta{grid-template-columns:1fr 1.4fr}}
.local__delivery{font-size:18px; font-weight:700}
.zones{list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2)}
.zones li{
  font-size:14px; padding:6px 12px; border:1px solid var(--border-1);
  border-radius:var(--radius-pill); background:#fff; color:var(--fg-2);
}

/* ---------- TEXTO LARGO ---------- */
.prose{max-width:74ch}
.prose h3{margin:var(--space-8) 0 var(--space-3)}
.prose h4{margin:var(--space-6) 0 var(--space-2)}
.prose p{color:var(--fg-2); margin-bottom:var(--space-4)}
.prose ul,.prose ol{padding-left:22px; margin-bottom:var(--space-4); color:var(--fg-2)}
.prose li{margin-bottom:var(--space-2)}
.prose__table{overflow-x:auto; margin-bottom:var(--space-6)}
.prose table{border-collapse:collapse; width:100%; font-size:15px; min-width:420px}
.prose caption{text-align:left; font-size:14px; color:var(--fg-3); padding-bottom:var(--space-2)}
.prose th,.prose td{border:1px solid var(--border-1); padding:var(--space-3); text-align:left}
.prose th{background:var(--neutral-50); font-weight:700}

/* ---------- ENTIDAD ---------- */
.entity__grid{display:grid; gap:var(--space-8)}
@media(min-width:800px){.entity__grid{grid-template-columns:1.2fr 1fr; gap:var(--space-12)}}
/* Ajustado: el logo real de Lasus (SVG) es un lockup cuadrado (icono
   arriba, wordmark abajo), no horizontal — 34px de alto lo dejaba
   ilegible. 56px es legible sin desbalancear la columna. */
.entity__logo{height:56px; width:auto; margin-bottom:var(--space-5)}
.entity p{color:var(--fg-2); max-width:64ch}
.creds{list-style:none; display:grid; gap:var(--space-4)}
.creds strong{display:block; font-size:16px}
.creds span{font-size:15px; color:var(--fg-3)}
.entity__sells{list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5)}
.entity__sells li{font-size:14px; padding:6px 12px; border-radius:var(--radius-pill); background:var(--neutral-100); color:var(--fg-2)}
.entity__brands{grid-column:1/-1; margin-top:var(--space-8); padding-top:var(--space-8); border-top:1px solid var(--border-1)}
.entity__brands-label{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); margin-bottom:var(--space-4)}
.entity__brands-list{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-8); padding:0}
.entity__brands-list img{height:32px; width:auto; max-width:120px; object-fit:contain; filter:grayscale(1); opacity:.75}

/* ---------- ENLACES INTERNOS ---------- */
.related{list-style:none; display:grid; gap:var(--space-3)}
@media(min-width:640px){.related{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.related a{
  display:block; height:100%; background:#fff; border:1px solid var(--border-1);
  border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5);
  color:var(--fg-1); text-decoration:none; transition:border-color var(--dur-fast) var(--ease-out);
}
.related a:hover{border-color:var(--accent); text-decoration:none}
.related strong{display:block; font-size:16px; color:var(--orange-700)}
.related span{display:block; font-size:14px; color:var(--fg-3); margin-top:4px}

/* ---------- FORMULARIO (solo contenedor) ---------- */
.formwrap{display:grid; gap:var(--space-8)}
@media(min-width:860px){.formwrap{grid-template-columns:1fr 1.1fr; gap:var(--space-12); align-items:start}}
.formwrap p{color:var(--fg-2); margin-top:var(--space-4); max-width:52ch}
.form-outlet{
  background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:var(--space-6);
}
.form-success{
  margin-top:var(--space-5); padding:var(--space-4); border-radius:var(--radius-md);
  background:var(--success-bg); color:#14603f; font-size:15px;
}

/* ---------- BARRA FIJA MÓVIL ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:var(--space-2);
  padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--border-1);
}
.sticky .btn{flex:1; min-height:48px}
.sticky .btn--ghost{flex:0 0 34%}
@media(min-width:768px){
  .sticky{display:none}
  body{padding-bottom:0}
}

/* ============================================================
   PLACEHOLDERS DE MOCKUP — borrar en producción.
   En producción cada uno es un <img width height> real.
   ============================================================ */
.ph{
  display:grid; place-items:center; text-align:center;
  background:var(--neutral-100); color:var(--neutral-400);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  font-weight:700; padding:var(--space-4); width:100%; height:100%;
}
.logo-ph{
  display:grid; place-items:center; height:30px; min-width:104px; padding:0 var(--space-4);
  background:var(--neutral-100); border-radius:var(--radius-sm);
  color:var(--neutral-400); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.avatar-ph{width:100%; height:100%; display:grid; place-items:center; background:var(--neutral-200); color:var(--neutral-500); font-size:13px; font-weight:700}
.field-ph{display:grid; gap:6px}
.field-ph span{font-size:14px; font-weight:600; color:var(--fg-2)}
.field-ph i{display:block; height:46px; border:1px solid var(--border-2); border-radius:var(--radius-md); background:var(--neutral-50)}
.outlet-note{
  border:1px dashed var(--orange-200); border-radius:var(--radius-md);
  background:var(--orange-50); color:var(--orange-700);
  font-size:13px; line-height:1.5; padding:var(--space-3) var(--space-4); margin-bottom:var(--space-5);
}

/* ---------- NOTA DE MOCKUP (borrar en producción) ---------- */
.mockup-note{
  background:var(--neutral-900); color:#cdd3d3; font-size:13px; line-height:1.5;
  padding:var(--space-3) var(--space-5);
}
.mockup-note strong{color:#fff}
.mockup-note code{
  font-family:ui-monospace,Menlo,monospace; font-size:12px;
  background:rgba(255,255,255,.1); color:#FFC79A; padding:1px 5px; border-radius:4px;
}

/* ============================================================
   FORMULARIO EN HERO — v2 (hero oscuro + 2 columnas + inputs limpios)
   Se aplica únicamente dentro de .hero__form.
   ============================================================ */
/* Limpiar wrappers del cart-widget */
.hero__form .cart-grid.row,.hero__form .cart-grid-body,.hero__form .card.cart-container{margin:0!important;padding:0!important;box-shadow:none!important;border:none!important;border-radius:0!important}
.hero__form .card-block{padding:0!important}
.hero__form #form_cotizacion>.cart-grid{padding:0!important}

/* 2-column grid para campos del formulario */
.hero__form .col-md-12.order-md-1{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:12px!important;align-items:start!important}

/* Ancho completo: tipo cliente, teléfono, checkbox, recaptcha, submit */
.hero__form .card.reventa-card,
.hero__form .mdl-checkbox,
.hero__form #phone-mdl-wrapper,
.hero__form .g-recaptcha,
.hero__form button[type=submit],
.hero__form #btn_cotizar{grid-column:1/-1!important}
/* Empresa y adjuntar: ancho completo (soporte moderno, Chrome 105+/Firefox 121+) */
.hero__form .mdl-textfield:has(input[name="empresa"]),
.hero__form .mdl-textfield:has(input[type="file"]){grid-column:1/-1!important}

/* Tarjeta tipo cliente — compacta y horizontal */
.hero__form .card.reventa-card{margin-bottom:6px!important;box-shadow:none!important;border:1.5px solid #eee!important;border-radius:8px!important}
.hero__form .card-body.p-4{padding:8px!important}
.hero__form .mb-3,.hero__form .mb-4{margin-bottom:4px!important}
.hero__form .mt-3{margin-top:4px!important}
.hero__form .font-weight-normal{font-size:13px!important}
.hero__form .text-muted.small{font-size:12px!important;line-height:1.3}
.hero__form .reventa-options{gap:8px!important;display:flex!important;flex-direction:row!important}
.hero__form .reventa-options>*{flex:1!important}
.hero__form .custom-option-label.p-3{padding:8px 10px!important;font-size:13px!important}
.hero__form .indicator{width:16px!important;height:16px!important;min-width:16px!important}

/* Transformar MDL floating-label → inputs estilo CE Medellín (label estática, placeholder limpio) */
.hero__form .mdl-textfield{position:relative!important;padding:0 0 8px!important;margin:0!important;width:100%!important;overflow:visible!important}
.hero__form .mdl-textfield__label{position:static!important;display:block!important;bottom:auto!important;left:auto!important;transform:none!important;transition:none!important;color:#444!important;font-size:13px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:5px!important;pointer-events:none!important}
.hero__form .mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.hero__form .mdl-textfield--floating-label.is-dirty .mdl-textfield__label{transform:none!important;font-size:13px!important;color:#444!important}
.hero__form .mdl-textfield__input{display:block!important;border:1.5px solid #e2e8f0!important;border-bottom-color:#e2e8f0!important;border-radius:8px!important;height:42px!important;padding:0 12px!important;font-size:14px!important;width:100%!important;box-sizing:border-box!important;background:#fff!important;color:#1a1a1a!important;transition:border-color .15s!important}
.hero__form select.mdl-textfield__input{height:42px!important;padding:0 10px!important;-webkit-appearance:auto!important;appearance:auto!important}
.hero__form .mdl-textfield__input:focus{border-color:var(--accent)!important;outline:none!important;box-shadow:0 0 0 3px rgba(255,105,13,.12)!important}
.hero__form .mdl-textfield::after{display:none!important}

/* Nota "Al enviar — WhatsApp" */
.hero__form-hint{font-size:12px;color:#999;text-align:center;margin:8px 0 0;padding-top:10px;border-top:1px solid #f0f0f0}

/* Checkbox persona natural */
.hero__form .mdl-checkbox{height:24px!important;margin-bottom:4px!important}
.hero__form .mdl-checkbox__label{font-size:13px!important;font-weight:400!important;color:#444!important}

/* reCAPTCHA */
.hero__form .g-recaptcha{margin-top:4px!important;transform:scale(0.82);transform-origin:left}

/* Botón submit — naranja de marca, al estilo CE Medellín */
.hero__form button[type=submit],.hero__form #btn_cotizar{width:100%!important;margin-top:12px!important;padding:14px 16px!important;font-size:15px!important;font-weight:700!important;background:var(--accent)!important;color:#fff!important;border:none!important;border-radius:8px!important;min-height:50px!important;letter-spacing:.01em!important;cursor:pointer!important;text-transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.hero__form button[type=submit]:hover,.hero__form #btn_cotizar:hover{background:var(--accent-hover)!important;color:#fff!important}

/* Ocultar campos opcionales — reducen la altura del form sin perder datos clave */
.hero__form .mdl-textfield:has([name="fecha_necesidad"]),
.hero__form .mdl-textfield:has(select[name="state"]),
.hero__form .mdl-textfield:has(select[name="city"]),
.hero__form .mdl-textfield:has(input[type="file"]),
.hero__form .mdl-textfield:has(textarea){display:none!important}

/* Teléfono en la misma fila que correo (quita full-width heredado) */
.hero__form #phone-mdl-wrapper{grid-column:auto!important}

/* Columna izquierda del hero: flex para empujar stats al fondo */
.hero__col-left{display:flex!important;flex-direction:column!important}

/* Stats inline al pie de la columna izquierda */
.hero__stats-inline{
  list-style:none;margin:auto 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px
}
.hero__stats-inline li{display:flex;flex-direction:column;gap:3px}
.hero__stats-inline strong{font-size:28px;font-weight:900;color:var(--accent);line-height:1}
.hero__stats-inline span{font-size:12px;color:rgba(255,255,255,.65);font-weight:400;line-height:1.3}

/* ============================================================
   CARRUSEL DE CATÁLOGO  (lsu-scrape-carousel)
   Color de botones: teal #0098B8 (≠ naranja de marca — mejor
   contraste en fondo blanco y diferencia visual de CTAs de acción)
   ============================================================ */
.lsu-carousel-section{background:var(--neutral-50);padding:var(--space-12) 0}
.lsu-wrap{--brand:#0098B8;--brand-dk:#007A96;--radius:10px;--gap:14px;font-family:inherit}
.lsu-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:var(--space-6)}
.lsu-title{font-size:22px;font-weight:800;color:var(--neutral-900,#1F2627)}
.lsu-cta{display:flex;align-items:center;gap:12px}
.lsu-link{font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}
.lsu-link:hover{text-decoration:underline}
.lsu-nav{display:flex;gap:6px}
.lsu-btn{
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--brand);
  background:#fff;color:var(--brand);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s;
}
.lsu-btn:hover{background:var(--brand);color:#fff}
.lsu-viewport{overflow:hidden;border-radius:var(--radius)}
.lsu-track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--gap);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.lsu-slide{
  flex:0 0 calc((100% - var(--gap)*2)/3);
  background:#fff;border:1px solid var(--border-1,#e5e7e7);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.06);
}
@media(max-width:900px){.lsu-slide{flex:0 0 calc((100% - var(--gap))/2)}}
@media(max-width:560px){.lsu-slide{flex:0 0 100%}}
.lsu-img{aspect-ratio:4/3;background:#f5f6f6;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lsu-img img{width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.lsu-body{padding:14px 14px 16px;display:flex;flex-direction:column;flex:1;gap:8px}
.lsu-name{font-size:15px;font-weight:700;line-height:1.3;color:var(--neutral-900,#1F2627);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lsu-price{font-size:17px;font-weight:800;color:var(--brand)}
.lsu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.lsu-actions a{
  display:block;text-align:center;text-decoration:none;
  padding:8px 4px;border-radius:8px;font-size:13px;font-weight:700;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s;
}
.lsu-act-primary{background:var(--brand);color:#fff}
.lsu-act-primary:hover{background:var(--brand-dk);color:#fff}
.lsu-act-secondary{border:1.5px solid var(--brand);color:var(--brand);background:#fff}
.lsu-act-secondary:hover{background:var(--brand);color:#fff}
.lsu-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.lsu-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border-1,#e5e7e7);border:none;cursor:pointer;padding:0;
  transition:background .2s,transform .2s;
}
.lsu-dot.active{background:var(--brand);transform:scale(1.3)}
/* Estado de carga */
.lsu-track.loading{opacity:.45}
.lsu-skeleton .lsu-img{animation:lsu-pulse 1.4s ease-in-out infinite}
.lsu-skeleton .lsu-name,.lsu-skeleton .lsu-price{
  background:var(--neutral-100,#f0f1f1);border-radius:4px;
  animation:lsu-pulse 1.4s ease-in-out infinite;color:transparent;
}
@keyframes lsu-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ============================================================
   FORMULARIO LIMPIO (.lf-*) — visual CE, campos PS cotizaciones.
   Sin MDL, sin .card wrappers. Se renderiza dentro de .hero__form.
   ============================================================ */
.lf-form{display:flex;flex-direction:column;gap:14px;width:100%}

/* Grupos de campo */
.lf-field{display:flex;flex-direction:column;gap:5px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:start}
@media(max-width:560px){.lf-row{grid-template-columns:1fr}}

/* Etiquetas */
.lf-label{font-size:13px;font-weight:500;color:#444;line-height:1.3;display:flex;align-items:center;gap:5px}
.lf-label svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:#888;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Inputs */
.lf-input{
  display:block;width:100%;height:42px;padding:0 12px;
  border:1.5px solid #e2e8f0;border-radius:8px;
  font-size:14px;color:#1a1a1a;background:#fff;
  transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
.lf-input:focus{
  outline:none;
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
}
.lf-input:focus-visible{outline:none}
.lf-input::placeholder{color:#aaa}

/* intl-tel-input dentro del form limpio */
.lf-form .iti{width:100%}
.lf-form .iti__flag-container{border-radius:8px 0 0 8px}
.lf-form .lf-phone-input{padding-left:52px}

/* Radio pills */
.lf-radio-group{display:flex;flex-direction:column;gap:6px}
.lf-radio-option{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:8px;
  cursor:pointer;transition:border-color .15s,background .15s;
  font-size:13px;
}
.lf-radio-option:has(input:checked){
  border-color:var(--accent);background:rgba(255,105,13,.05);
}
.lf-radio-option input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.lf-radio-text{color:#1a1a1a;font-size:13px;line-height:1.3}

/* Checkboxes */
.lf-checkbox-row{display:flex;align-items:flex-start;gap:8px}
.lf-check-label{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:#555;line-height:1.45;cursor:pointer;
}
.lf-check-label a{color:var(--accent);text-decoration:none}
.lf-check-label a:hover{text-decoration:underline}
.lf-checkbox{
  width:16px;height:16px;flex-shrink:0;margin-top:1px;
  accent-color:var(--accent);cursor:pointer;
}

/* reCAPTCHA */
.lf-captcha{margin-top:2px;transform:scale(0.82);transform-origin:left}

/* Mensaje de validación */
.lf-validation-msg{font-size:11.5px;color:#999;margin:0}

/* Textarea */
.lf-textarea{
  height:auto;min-height:80px;padding:10px 12px;
  resize:vertical;line-height:1.5;
}

/* File upload */
.lf-optional{font-size:11.5px;color:#aaa;font-weight:400}
.lf-file-input{display:none}
.lf-file-label{
  display:flex;align-items:center;gap:8px;
  padding:0 12px;height:42px;
  border:1.5px dashed #c4c9c9;border-radius:8px;
  font-size:13.5px;color:#6b7475;background:#fafafa;
  cursor:pointer;transition:border-color .15s,background .15s;
  user-select:none;
}
.lf-file-label:hover{border-color:var(--accent);background:#fff3eb;color:var(--accent)}
.lf-file-icon{font-size:16px;line-height:1}

/* Botón submit */
.lf-submit{
  width:100%;height:48px;padding:0 20px;
  background:var(--accent);color:#fff;
  border:none;border-radius:8px;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:background .15s,opacity .15s;
}
.lf-submit:hover:not(:disabled){background:var(--accent-hover)}
.lf-submit:disabled{opacity:.45;cursor:not-allowed}