/* ============================================
   Market Planet 8 — Landing
   Sistema de diseño · Órbita editorial
   ============================================ */
:root{
  /* --- Marca --- */
  --mp8-navy-900:#1D2B59;
  --mp8-navy-700:#2A3D77;
  --mp8-navy-dark:#141F42;
  --mp8-navy-grad-end:#3657A4;
  --mp8-magenta-500:#E6007E;
  --mp8-magenta-hover:#C40069;
  --mp8-magenta-deep:#A3005A;
  --mp8-rosa:#FF7DBF;
  --mp8-grey-100:#F0F2F7;
  --mp8-grey-50:#F7F9FC;
  --mp8-white:#FFFFFF;

  /* --- Texto (contraste AA verificado) --- */
  --text-body:#3B4467;      /* 9.4:1 sobre blanco */
  --text-muted:#5A6280;     /* 6.0:1 blanco · 5.4:1 gris */
  --text-muted-2:#4E5670;   /* 6.5:1 sobre gris */
  --link-ink:#C40069;       /* 5.8:1 sobre blanco */
  --border-subtle:#DEE3ED;
  --border-strong:#C9D1E0;

  /* --- Tipografía --- */
  --font-display:'Montserrat',sans-serif;
  --font-body:'Poppins',sans-serif;
  --fs-xs:0.75rem;      /* 12 */
  --fs-sm:0.875rem;     /* 14 */
  --fs-base:1rem;       /* 16 */
  --fs-md:1.0625rem;    /* 17 */
  --fs-lg:1.25rem;      /* 20 */
  --fs-xl:1.5rem;       /* 24 */
  --fs-2xl:clamp(1.75rem,2.8vw,2.5rem);
  --fs-hero:clamp(2.5rem,5vw,4rem);
  --lh-tight:1.05;
  --lh-heading:1.15;
  --lh-body:1.65;
  --ls-caps:0.14em;
  --ls-tight:-0.02em;

  /* --- Espaciado (escala 8) --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --gutter:24px;
  --maxw:1180px;

  /* --- Elevación --- */
  --shadow-sm:0 1px 2px rgba(29,43,89,.08);
  --shadow-md:0 4px 16px rgba(29,43,89,.10);
  --shadow-hover:0 12px 32px rgba(29,43,89,.14);
  --shadow-bar:0 -4px 16px rgba(29,43,89,.18);
  --shadow-accent:0 6px 20px rgba(230,0,126,.28);
  --shadow-accent-sm:0 3px 10px rgba(230,0,126,.22);

  --radius-md:8px;
  --radius-lg:14px;
  --radius-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --dur:200ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mp8-grey-100);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:var(--link-ink);text-decoration:none}
a:hover{color:var(--mp8-magenta-deep)}
a:focus-visible,button:focus-visible{
  outline:2.5px solid var(--mp8-magenta-500);
  outline-offset:3px;
  border-radius:var(--radius-sm,4px);
}
h1,h2,h3{margin:0;font-family:var(--font-display);color:var(--mp8-navy-900);line-height:var(--lh-heading)}
p{margin:0}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:var(--radius-pill);
  padding:var(--sp-4) var(--sp-6);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-base);
  line-height:1;letter-spacing:.005em;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}

/* Acento — el único elemento con sombra de color (regla del 10%) */
.btn--magenta{
  background:var(--mp8-magenta-500);color:var(--mp8-white);
  box-shadow:var(--shadow-accent-sm);
}
.btn--magenta:hover{
  background:var(--mp8-magenta-hover);color:var(--mp8-white);
  box-shadow:var(--shadow-accent);
}
.btn--magenta:active{background:var(--mp8-magenta-deep);box-shadow:var(--shadow-accent-sm)}

.btn--navy{background:var(--mp8-navy-900);color:var(--mp8-white)}
.btn--navy:hover{background:var(--mp8-navy-dark);color:var(--mp8-white);box-shadow:var(--shadow-md)}
.btn--navy:active{background:var(--mp8-navy-dark);box-shadow:var(--shadow-sm)}

.btn--ghost{background:transparent;color:var(--mp8-white);border:1.5px solid rgba(255,255,255,.45)}
.btn--ghost:hover{border-color:var(--mp8-white);background:rgba(255,255,255,.08);color:var(--mp8-white)}
.btn--ghost:active{background:rgba(255,255,255,.14)}

.btn--blanco{background:var(--mp8-white);color:var(--mp8-navy-900)}
.btn--blanco:hover{background:var(--mp8-grey-100);color:var(--mp8-navy-900);box-shadow:var(--shadow-md)}
.btn--blanco:active{background:var(--border-subtle)}

.btn--sm{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm)}
.btn--lg{padding:var(--sp-5) var(--sp-7);font-size:var(--fs-md)}

/* ---------- Kickers y cabeceras de sección ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);
}
.kicker::before{
  content:"";width:28px;height:2px;flex:none;
  background:var(--mp8-magenta-500);border-radius:2px;
}
.kicker--grey{color:var(--text-muted-2)}
.kicker--rosa{color:var(--mp8-rosa);letter-spacing:.1em}
.kicker--rosa::before{background:var(--mp8-rosa)}

.section__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-9) var(--gutter);
  display:flex;flex-direction:column;gap:var(--sp-7);
}
.section__head{display:flex;flex-direction:column;gap:var(--sp-4);max-width:660px}
.section__title{display:flex;align-items:center;gap:var(--sp-4)}
.section__title h2{
  font-weight:800;font-size:var(--fs-2xl);
  letter-spacing:var(--ls-tight);text-wrap:balance;
}
.orbit-dot{
  flex:none;width:12px;height:12px;border-radius:var(--radius-pill);
  border:1.5px solid var(--mp8-magenta-500);
  box-shadow:0 0 0 5px rgba(230,0,126,.12);
}

/* ---------- Banner superior ---------- */
.banner{
  background:var(--mp8-magenta-500);color:var(--mp8-white);text-align:center;
  padding:var(--sp-3) var(--gutter);
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-xs);letter-spacing:.06em;line-height:1.4;
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--mp8-navy-900);box-shadow:var(--shadow-sm);
}
.header__row{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
}
.header__brand{display:flex;align-items:center}
.header__brand img{height:44px;width:auto;display:block}
.header__nav{display:flex;align-items:center;gap:var(--sp-6)}
.header__nav a{
  position:relative;
  color:rgba(255,255,255,.82);font-family:var(--font-display);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.01em;
  padding:var(--sp-2) 0;
  transition:color var(--dur) var(--ease);
}
.header__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--mp8-magenta-500);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.header__nav a:hover{color:var(--mp8-white)}
.header__nav a:hover::after{transform:scaleX(1)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--mp8-white)}
.hero__dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--border-subtle) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(115deg,#000 18%,transparent 72%);
  mask-image:linear-gradient(115deg,#000 18%,transparent 72%);
  opacity:.9;
}
.hero__orbitas{
  position:absolute;right:-190px;top:48%;transform:translateY(-50%);
  width:760px;height:760px;pointer-events:none;
}
.hero__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-10) var(--gutter);position:relative;
}
.hero__content{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-5);max-width:700px;
}
.hero__content h1{
  font-weight:900;font-size:var(--fs-hero);
  line-height:var(--lh-tight);letter-spacing:-0.03em;
  text-wrap:balance;margin-top:var(--sp-1);
}
.hero__content>p{
  font-size:var(--fs-md);line-height:var(--lh-body);
  max-width:560px;color:var(--text-body);
}
/* Separación real antes del punto de decisión */
.hero__ctas{
  display:flex;gap:var(--sp-4);flex-wrap:wrap;
  margin-top:var(--sp-3);
}
.hero__note{font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--sp-1)}

/* ---------- Franja de confianza ---------- */
.trust{background:var(--mp8-grey-100);border-top:1px solid var(--border-subtle)}
.trust__grid{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-7) var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.trust__item{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:0 var(--sp-6);border-left:1px solid var(--border-subtle);
}
.trust__item:first-child{border-left:none;padding-left:0}
.trust__item svg{opacity:.9}
.trust__item h3{margin-top:var(--sp-1);font-weight:700;font-size:var(--fs-sm);letter-spacing:.005em}
.trust__item p{font-size:var(--fs-sm);line-height:1.55;color:var(--text-muted-2)}

/* ---------- Clientes (prueba social) ---------- */
.clientes{background:var(--mp8-white);border-top:1px solid var(--border-subtle)}
.clientes .section__inner{padding:var(--sp-8) var(--gutter);gap:var(--sp-6)}
.clientes__sub{font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text-muted)}
.clientes__badges{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.clientes__badges a,.clientes__badges span{
  background:var(--mp8-grey-100);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:var(--sp-3) var(--sp-5);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--mp8-navy-900);line-height:1;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.clientes__badges a:hover{
  background:var(--mp8-white);border-color:var(--mp8-magenta-500);
  box-shadow:var(--shadow-md);color:var(--mp8-navy-900);
}
.clientes__badges a:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

/* ---------- Categorías ---------- */
.categorias{background:var(--mp8-grey-100);border-top:1px solid var(--border-subtle)}
.categorias__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-5)}
.cat-card{
  background:var(--mp8-white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  box-shadow:var(--shadow-sm);padding:0;text-align:left;
  font-family:var(--font-body);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.cat-card:hover{
  box-shadow:var(--shadow-hover);
  border-color:var(--border-strong);
}
.cat-card:active{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cat-card__img{
  aspect-ratio:4/3;background:var(--mp8-white);
  padding:var(--sp-4);border-bottom:1px solid var(--mp8-grey-100);
}
.cat-card__img img{width:100%;height:100%;object-fit:contain;display:block}
.cat-card__body{padding:var(--sp-4) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1)}
.cat-card__body h3{font-weight:700;font-size:var(--fs-base);letter-spacing:-0.005em}
.cat-card__body span{font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- Catálogo ---------- */
.catalogo{
  background:var(--mp8-white);
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
}
.catalogo__head{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-8) var(--gutter) 0;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--sp-5);flex-wrap:wrap;
}
.catalogo__nota{font-size:var(--fs-sm);color:var(--text-muted)}
.catalogo__filtros-wrap{
  position:sticky;top:76px;z-index:40;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle);margin-top:var(--sp-6);
}
.catalogo__filtros{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-3) var(--gutter);display:flex;gap:var(--sp-3);flex-wrap:wrap;
}
.filtro{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-pill);cursor:pointer;
  background:var(--mp8-white);color:var(--mp8-navy-900);
  border:1.5px solid var(--border-subtle);line-height:1;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.filtro:hover{border-color:var(--mp8-magenta-500);box-shadow:var(--shadow-sm)}
.filtro:active{transform:translateY(0)}
.filtro[aria-pressed="true"]{
  background:var(--mp8-navy-900);color:var(--mp8-white);
  border-color:var(--mp8-navy-900);box-shadow:var(--shadow-sm);
}
.catalogo__grupos{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-7) var(--gutter) var(--sp-9);
  display:flex;flex-direction:column;gap:var(--sp-8);
}
.grupo{display:flex;flex-direction:column;gap:var(--sp-5)}
.grupo__title{display:flex;align-items:center;gap:var(--sp-4)}
.grupo__title h3{font-weight:800;font-size:var(--fs-xl);letter-spacing:var(--ls-tight)}
.grupo__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-5)}

.producto{
  background:var(--mp8-white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.producto:hover{
  box-shadow:var(--shadow-hover);
  border-color:var(--border-strong);
}
.producto__img{
  aspect-ratio:1/1;background:var(--mp8-grey-50);
  padding:var(--sp-5);border-bottom:1px solid var(--mp8-grey-100);overflow:hidden;
}
.producto__img>div{width:100%;height:100%;transition:transform var(--dur) var(--ease)}
/* zoom de imagen gateado por puntero — ver bloque de movimiento */
.producto__img img{width:100%;height:100%;object-fit:contain;display:block}
.producto__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1);flex:1}
.producto__body h3{font-weight:700;font-size:var(--fs-base);line-height:1.35;letter-spacing:-0.005em}
.producto__pres{font-size:var(--fs-sm);color:var(--text-muted)}
/* El precio es el dato que el comprador busca — máxima jerarquía en la tarjeta */
.producto__precio{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--mp8-magenta-500);letter-spacing:-0.02em;
  margin-top:var(--sp-2);line-height:1.1;
}
.producto__cotizar{
  font-size:var(--fs-base);font-style:italic;color:var(--text-muted);
  margin-top:var(--sp-2);
}
.producto__acciones{margin-top:auto;padding-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3)}
.producto__guia{
  font-size:var(--fs-sm);color:var(--link-ink);text-decoration:underline;
  text-underline-offset:3px;align-self:flex-start;
  transition:color var(--dur) var(--ease);
}
.producto__guia:hover{color:var(--mp8-magenta-deep)}
.producto__agregar{
  min-height:48px;
  width:100%;background:var(--mp8-white);
  border:1.5px solid var(--mp8-navy-900);border-radius:var(--radius-pill);
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--mp8-navy-900);cursor:pointer;line-height:1;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.producto__agregar:hover{background:var(--mp8-navy-900);color:var(--mp8-white);box-shadow:var(--shadow-md)}
.producto__agregar:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.producto__qty{
  min-height:48px;  display:flex;align-items:center;justify-content:space-between;
  border:1.5px solid var(--mp8-navy-900);border-radius:var(--radius-pill);padding:5px 6px;
}
.producto__qty button{
  width:36px;height:36px;border:none;background:var(--mp8-grey-100);
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
  color:var(--mp8-navy-900);cursor:pointer;line-height:1;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.producto__qty button:hover{background:var(--border-subtle)}
.producto__qty button:active{transform:scale(.92)}
.producto__qty span{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);
  color:var(--mp8-navy-900);
}

/* ---------- LyoPro ---------- */
.lyopro{
  background:linear-gradient(135deg,var(--mp8-navy-900) 0%,var(--mp8-navy-grad-end) 100%);
  position:relative;overflow:hidden;
}
.lyopro__orbita{position:absolute;pointer-events:none}
.lyopro__orbita--izq{left:-140px;bottom:-160px;width:520px;height:520px}
.lyopro__orbita--der{right:-120px;top:-120px;width:400px;height:400px}
.lyopro__grid{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-9) var(--gutter);position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center;
}
.lyopro__content{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
.lyopro__content h2{
  color:var(--mp8-white);font-weight:800;font-size:var(--fs-2xl);
  letter-spacing:var(--ls-tight);text-wrap:balance;
}
.lyopro__content>p{
  font-size:var(--fs-base);line-height:var(--lh-body);
  color:rgba(255,255,255,.85);max-width:480px;
}
.lyopro__badges{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.lyopro__badges span{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.04em;color:var(--mp8-white);line-height:1.4;
}
.lyopro__ctas{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-1)}
.lyopro__card{
  display:flex;align-items:center;gap:var(--sp-4);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);padding:var(--sp-4);
  width:100%;max-width:560px;
}
.lyopro__card-icon{
  flex:none;width:40px;height:52px;background:var(--mp8-white);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;color:var(--mp8-navy-900);
}
.lyopro__card-text{flex:1;display:flex;flex-direction:column;gap:2px}
.lyopro__card-title{
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--mp8-white);line-height:1.4;
}
.lyopro__card-sub{font-size:var(--fs-xs);color:rgba(255,255,255,.82);line-height:1.5}
.lyopro__card .btn{flex:none;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm)}
/* ---------- Asesor LyoPro ---------- */
.lyopro__selector{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-4);
  min-height:420px;
}
.asesor__head{display:flex;align-items:center;min-height:24px}
.asesor__label{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--mp8-rosa);
}
.asesor__label::before{
  content:"";width:20px;height:2px;background:var(--mp8-rosa);border-radius:2px;
}
.asesor__volver{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:rgba(255,255,255,.75);
  transition:color var(--dur) var(--ease);
}
.asesor__volver:hover{color:var(--mp8-white)}
.asesor__titulo{
  color:var(--mp8-white);font-weight:800;font-size:var(--fs-lg);
  letter-spacing:var(--ls-tight);text-wrap:balance;
}
.asesor__paso{
  font-size:var(--fs-xs);color:rgba(255,255,255,.6);
  letter-spacing:.06em;text-transform:uppercase;
  margin-top:calc(var(--sp-3) * -1);
}
.asesor__opciones{display:flex;flex-direction:column;gap:var(--sp-3)}
.asesor__opcion{
  width:100%;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);
  color:var(--mp8-white);line-height:1.35;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.asesor__opcion em{
  font-family:var(--font-body);font-style:normal;font-weight:400;
  font-size:var(--fs-xs);color:rgba(255,255,255,.65);
}
.asesor__opcion:active{transform:translateY(1px)}
.asesor__datos{margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.asesor__dato{
  display:flex;flex-direction:column;gap:2px;
  padding-bottom:var(--sp-3);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.asesor__dato:last-child{border-bottom:none;padding-bottom:0}
.asesor__dato dt{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--mp8-rosa);
}
.asesor__dato dd{
  margin:0;font-size:var(--fs-sm);line-height:1.5;color:rgba(255,255,255,.9);
}
.asesor__texto{font-size:var(--fs-sm);line-height:1.6;color:rgba(255,255,255,.85)}
.asesor__nota{font-size:var(--fs-xs);line-height:1.5;color:rgba(255,255,255,.6)}
.asesor__aviso{
  font-size:var(--fs-xs);line-height:1.55;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);
  border-left:2px solid var(--mp8-rosa);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:var(--sp-3) var(--sp-4);
}
.asesor__aviso strong{font-family:var(--font-display);font-weight:800;color:var(--mp8-rosa)}
.asesor__resultado{
  display:flex;align-items:center;gap:var(--sp-4);
  background:var(--mp8-white);border-radius:var(--radius-md);padding:var(--sp-4);
}
.asesor__resultado img{
  flex:none;width:84px;height:84px;object-fit:contain;display:block;
}
.asesor__resultado-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.asesor__resultado-info strong{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);
  color:var(--mp8-navy-900);line-height:1.25;
}
.asesor__resultado-para{font-size:var(--fs-xs);line-height:1.45;color:var(--text-muted)}
.asesor__resultado-precio{
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);
  color:var(--mp8-magenta-500);margin-top:var(--sp-1);
}
.asesor__resultado-cotizar{
  font-size:var(--fs-sm);font-style:italic;color:var(--text-muted);margin-top:var(--sp-1);
}
.asesor__cta{margin-top:auto;width:100%}
.asesor__link{
  align-self:center;background:none;border:none;padding:var(--sp-1) 0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-sm);color:rgba(255,255,255,.75);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur) var(--ease);
}
.asesor__link:hover{color:var(--mp8-white)}

/* ---------- Cómo comprar ---------- */
.pasos{background:var(--mp8-white);border-top:1px solid var(--border-subtle)}
.pasos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);position:relative}
.pasos__linea{
  position:absolute;top:26px;left:16%;right:16%;
  border-top:2px dashed var(--border-subtle);
}
.paso{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;position:relative}
.paso__num{
  width:52px;height:52px;border-radius:var(--radius-pill);
  background:var(--mp8-navy-900);color:var(--mp8-white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);
  box-shadow:0 0 0 6px var(--mp8-white);
}
.paso h3{font-weight:700;font-size:var(--fs-md);letter-spacing:-0.005em;line-height:1.35}
.paso p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-muted);max-width:300px}

/* ---------- CTA final ---------- */
.cta-final{background:var(--mp8-grey-100);border-top:1px solid var(--border-subtle)}
.cta-final__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-9) var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center;
}
.cta-final__inner h2{
  font-weight:800;font-size:var(--fs-2xl);
  letter-spacing:var(--ls-tight);text-wrap:balance;
}
.cta-final__inner p{
  font-size:var(--fs-md);line-height:var(--lh-body);max-width:540px;color:var(--text-body);
}
.cta-final__inner .btn{margin-top:var(--sp-2)}

/* ---------- Footer ---------- */
.footer{background:var(--mp8-navy-900)}
.footer__grid{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-8) var(--gutter);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-7);
}
.footer__logo{height:72px;width:auto;display:block}
.footer__info{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3);text-align:right}
.footer__info span{font-size:var(--fs-base);line-height:1.55;color:rgba(255,255,255,.88)}
.footer__info span.footer__razon{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--fs-md);letter-spacing:.01em;
  color:var(--mp8-white);line-height:1.35;
  margin-bottom:var(--sp-1);
}
.footer__info a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-base);color:var(--mp8-white);
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity var(--dur) var(--ease);
}
.footer__info a:hover{opacity:.72;color:var(--mp8-white)}

/* ---------- Barra de pedido ---------- */
.order-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--mp8-navy-900);box-shadow:var(--shadow-bar);
  transition:transform var(--dur) var(--ease);
}
.order-bar[data-visible="false"]{transform:translateY(110%);pointer-events:none}
.order-bar__row{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--sp-3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
}
.order-bar__resumen{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  color:var(--mp8-white);letter-spacing:.005em;
}
.order-bar__actions{display:flex;align-items:center;gap:var(--sp-5)}
.order-bar__vaciar{
  background:none;border:none;padding:var(--sp-1) 0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-sm);color:rgba(255,255,255,.72);
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur) var(--ease);
}
.order-bar__vaciar:hover{color:var(--mp8-white)}

/* ---------- WhatsApp FAB ---------- */
/* Elevación (raise) y press se componen en una sola transform vía variables,
   para que hover y raise no se pisen entre sí. */
.wa-fab{
  --fab-y:0px;
  --fab-s:1;
  position:fixed;right:20px;bottom:20px;z-index:61;
  width:58px;height:58px;border-radius:var(--radius-pill);
  background:var(--mp8-magenta-500);
  box-shadow:var(--shadow-accent);
  display:flex;align-items:center;justify-content:center;color:var(--mp8-white);
  transform:translateY(var(--fab-y)) scale(var(--fab-s));
  transition:transform 260ms var(--ease-out),background var(--dur) var(--ease);
}
.wa-fab:hover{background:var(--mp8-magenta-hover);color:var(--mp8-white)}
.wa-fab:active{--fab-s:.97}
.wa-fab[data-raised="true"]{--fab-y:-64px}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero__inner{padding:var(--sp-9) var(--gutter)}
  .hero__orbitas{right:-280px;opacity:.7}
  .lyopro__grid{gap:var(--sp-7)}
}
@media (max-width:900px){
  .header__nav{display:none}
  .trust__grid{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6);column-gap:var(--sp-5)}
  .trust__item{padding:0 var(--sp-5)}
  .trust__item:nth-child(odd){border-left:none;padding-left:0}
}
@media (max-width:720px){
  :root{--gutter:20px}
  .header__row{height:64px}
  .header__brand img{height:36px}
  .catalogo__filtros-wrap{top:64px}
  .catalogo__filtros{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .section__inner{padding:var(--sp-8) var(--gutter);gap:var(--sp-6)}
  .hero__inner{padding:var(--sp-8) var(--gutter)}
  .hero__dots,.hero__orbitas{display:none}
  .hero__content{gap:var(--sp-4)}
  .hero__ctas{flex-direction:column;align-items:stretch;align-self:stretch;width:100%}
  .hero__ctas .btn{justify-content:center;width:100%}
  .trust__grid{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6)}
  .trust__item{border-left:none;padding:0}
  .catalogo__head{padding-top:var(--sp-7)}
  .catalogo__grupos{padding:var(--sp-6) var(--gutter) var(--sp-8);gap:var(--sp-7)}
  .grupo__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-4)}
  .producto__body{padding:var(--sp-4)}
  .lyopro__grid{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-8) var(--gutter)}
  .lyopro__ctas{flex-direction:column;align-items:stretch;width:100%}
  .lyopro__ctas .btn{text-align:center;justify-content:center;width:100%}
  .lyopro__card{flex-wrap:wrap}
  .lyopro__card .btn{width:100%}
  .lyopro__selector{min-height:0;padding:var(--sp-4)}
  .pasos__linea{display:none}
  .pasos__grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .cta-final__inner{padding:var(--sp-8) var(--gutter)}
  .cta-final__inner .btn{align-self:stretch;justify-content:center;width:100%}
  .footer__grid{flex-direction:column;align-items:center;gap:var(--sp-6);padding:var(--sp-7) var(--gutter)}
  .footer__info{align-items:center;text-align:center}
  .order-bar__row{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .order-bar__actions{justify-content:space-between}
  .order-bar__actions .btn{flex:1;text-align:center;justify-content:center}
  .wa-fab[data-raised="true"]{--fab-y:-128px}
}

/* ============================================
   MOVIMIENTO
   Entradas: --ease-out (.23,1,.32,1)
   Estados:  --ease     (.2,.8,.2,1)
   Sólo transform y opacity.
   ============================================ */

/* --- Hover con desplazamiento: sólo en punteros finos --- */
@media (hover:hover) and (pointer:fine){
  .clientes__badges a:hover{transform:translateY(-2px)}
  .cat-card:hover{transform:translateY(-4px)}
  .filtro:hover{transform:translateY(-1px)}
  .producto:hover{transform:translateY(-3px)}
  .producto:hover .producto__img>div{transform:scale(1.05)}
  .asesor__opcion:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38)}
  .wa-fab:hover{--fab-s:1.06}
}

/* --- #3 Hero: orquestación al cargar (CSS puro, sin depender de JS) --- */
@keyframes mp8RiseIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.hero__content>*{animation:mp8RiseIn 520ms var(--ease-out) both}
.hero__content>*:nth-child(1){animation-delay:40ms}
.hero__content>*:nth-child(2){animation-delay:90ms}
.hero__content>*:nth-child(3){animation-delay:140ms}
.hero__content>*:nth-child(4){animation-delay:190ms}
.hero__content>*:nth-child(5){animation-delay:240ms}

/* --- #5 Reveal al scroll: sólo secciones narrativas --- */
.js .reveal{opacity:0;transform:translateY(12px)}
.js .reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out);
}

/* --- #2 Entrada escalonada al cambiar de filtro --- */
.js .producto--enter{opacity:0;transform:translateY(8px)}
.js .producto--enter.is-in{
  opacity:1;transform:none;
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);
}

/* --- #4 Cross-fade Agregar <-> stepper --- */
.producto__acciones{position:relative}
.control--saliente{
  position:absolute;left:0;right:0;bottom:0;
  pointer-events:none;
  transition:opacity 120ms var(--ease-out);
}
.control--saliente.is-out{opacity:0}
.control--entrante{opacity:0;transform:scale(.98)}
.control--entrante.is-in{
  opacity:1;transform:none;
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);
}

/* ---------- Movimiento reducido ----------
   Más suave, no cero: se conservan los cambios de opacidad y color
   que aportan comprensión; se elimina todo desplazamiento. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wa-fab{transition:none}
  .wa-fab:hover,.wa-fab:active{--fab-s:1}

  .hero__content>*{animation:none;opacity:1;transform:none}

  .js .reveal{opacity:0;transform:none}
  .js .reveal.is-visible{transform:none;transition:opacity 200ms var(--ease)}

  .js .producto--enter{transform:none}
  .js .producto--enter.is-in{transform:none;transition:opacity 160ms var(--ease)}

  .control--entrante{transform:none}
  .control--entrante.is-in{transform:none;transition:opacity 160ms var(--ease)}

  /* Sin desplazamiento en hover/press, se mantiene el feedback de color */
  .clientes__badges a:hover,.cat-card:hover,.filtro:hover,
  .producto:hover,.btn:active,.cat-card:active,
  .filtro:active,.producto__agregar:active{transform:none}
  .producto:hover .producto__img>div{transform:none}
  .producto__qty button:active{transform:none}
}