/* ================================================================
   GRUPO MHL — hoja de estilos
   Viene del prototipo de web/, que sirvió para decidir cómo se ve
   cada pantalla. Aquí ya es la hoja real de la tienda.
   ================================================================ */


/* ==================================================================
   GRUPO MHL
   Arquitectura y layout replicando el portal de Omnilife.
   Identidad propia: negro y blanco. El único color es la bandera.
   ================================================================== */
:root{
  color-scheme: light;
  --ink:#141414;        /* donde Omnilife pone morado, aquí va negro */
  --ink-2:#2E2E2E;
  --g7:#474545;
  --g5:#757575;
  --g3:#AAAAAA;
  --g1:#E4E4E4;
  --wash:#F4F4F4;       /* el equivalente a su lavanda de fondo */
  --paper:#FFFFFF;
  --body:#FAFAFA;
  --f:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(14px,3.5vw,40px);
  --maxw:1300px;
  --r:16px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); min-height:100vh; display:flex; flex-direction:column; color:var(--g7); font-family:var(--f);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4{ margin:0; line-height:1.15; color:var(--ink); font-weight:700; text-wrap:balance; }
p{ margin:0; }
img,svg,canvas{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* marca de agua tipográfica: el recuadro sólido sobre una palabra */
.mark{ background:var(--ink); color:#fff; padding:.06em .28em .12em; display:inline-block; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-size:.86rem; font-weight:600; padding:13px 28px; border-radius:999px;
  border:2px solid var(--ink); background:var(--ink); color:#fff;
  text-decoration:none; cursor:pointer; transition:background .2s,color .2s; }
.btn:hover{ background:#fff; color:var(--ink); }
.btn-o{ background:transparent; color:var(--ink); }
.btn-o:hover{ background:var(--ink); color:#fff; }
.btn-w{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-w:hover{ background:transparent; color:#fff; }
.btn-sm{ padding:10px 20px; font-size:.78rem; }

/* ===================== modal ubicación ===================== */
.geo{ position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.55);
  display:grid; place-items:center; padding:18px; }
.geo-box{ background:#fff; width:100%; max-width:430px; border-radius:var(--r);
  padding:clamp(26px,5vw,40px); text-align:center; position:relative; }
.geo-box h2{ font-size:1.6rem; }
.geo-box > p{ font-size:.86rem; color:var(--g5); margin-top:8px; }
.geo-x{ position:absolute; top:14px; right:16px; border:0; background:transparent;
  font-size:1.3rem; cursor:pointer; color:var(--g5); line-height:1; }
.gf{ text-align:left; margin-top:22px; position:relative; }
.gf label{ position:absolute; top:-8px; left:14px; background:#fff; padding:0 6px;
  font-size:.7rem; color:var(--g5); }
.gf .box{ display:flex; align-items:center; gap:10px; border:1px solid var(--g1);
  border-radius:8px; padding:14px 15px; }
.gf .box b{ font-weight:500; font-size:.95rem; color:var(--ink); }
.gf .box small{ margin-left:auto; font-size:.7rem; color:var(--g5); }
.gf input{ width:100%; border:1px solid var(--g1); border-radius:8px; padding:14px 15px;
  font:inherit; font-size:.95rem; color:var(--ink); }
.gf input:focus{ outline:none; border-color:var(--ink); }
.geo-acts{ display:flex; gap:12px; margin-top:26px; }
.geo-acts .btn{ flex:1; }
.geo-note{ font-size:.75rem; color:var(--g5); margin-top:16px; }
.flag{ border-radius:2px; flex:none; }

/* ===================== header ===================== */
.head{ background:#fff; }
.head .wrap{ display:flex; align-items:center; gap:clamp(10px,2vw,26px); padding-block:16px; }
.logo{ text-decoration:none; line-height:1; flex:none; }
.logo b{ display:block; font-size:1.5rem; font-weight:800; letter-spacing:.1em; color:var(--ink); }
.logo span{ display:block; font-size:.5rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--g5); margin-top:4px; font-weight:600; }
.lema-pie{ font-style:italic; color:rgba(255,255,255,.85); }

.sbox{ flex:1; min-width:0; display:flex; align-items:center;
  background:#fff; border:1px solid var(--g1); border-radius:999px; padding:5px 5px 5px 20px; }
.sbox input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:.86rem; }
.sbox input:focus{ outline:none; }
.sbox button{ width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; }
@media (max-width:980px){ .sbox{ display:none; } }
/* sin la caja de arriba, en pantallas chicas: la lupa y el buscador dentro del menú */
.bus-movil{ display:none; }
@media (max-width:980px){ .bus-movil{ display:block; } }
.mmenu .mm-buscar{ display:flex; flex:none; margin:14px 16px 8px; }

.hacts{ display:flex; align-items:center; gap:clamp(10px,1.8vw,22px); margin-left:auto; }
.hlink{ display:flex; align-items:center; gap:7px; font-size:.82rem; text-decoration:none;
  color:var(--g7); border:0; background:transparent; cursor:pointer; padding:0; }
.hlink:hover{ color:var(--ink); }
.hlink u{ text-underline-offset:3px; }
.cart{ position:relative; border:0; background:transparent; cursor:pointer; padding:2px; color:var(--ink); }
.cart .n{ position:absolute; top:-5px; right:-6px; background:var(--ink); color:#fff;
  font-size:.6rem; font-weight:700; min-width:17px; height:17px; border-radius:999px;
  display:grid; place-items:center; padding-inline:4px; }
@media (max-width:760px){ .hlink.seg{ display:none; } }
@media (max-width:560px){ .hacts .btn{ display:none; } }

/* ===================== nav ===================== */
.nav{ background:var(--ink); position:sticky; top:env(safe-area-inset-top,0px); z-index:120; }
.nav .row{ display:flex; align-items:stretch; gap:clamp(10px,2.4vw,30px);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  overflow-x:auto; scrollbar-width:none; }
.nav .row::-webkit-scrollbar{ display:none; }
.nitem{ position:relative; }
.nitem > a{ display:flex; align-items:center; gap:7px; color:#fff; text-decoration:none;
  font-size:.82rem; font-weight:500; padding:15px 0; white-space:nowrap; }
.nitem > a:hover{ color:var(--g3); }
.nitem .chev{ transition:transform .2s; }
.nitem:hover .chev{ transform:rotate(180deg); }
.mega{ position:absolute; top:100%; left:-18px; min-width:250px; background:#fff;
  border-radius:0 0 var(--r) var(--r); box-shadow:0 18px 40px rgba(0,0,0,.16);
  padding:16px 8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s; z-index:5; }
/* Abierto con el mouse encima, o con el teclado (focus-visible). Con
   :focus-within a secas, el clic dejaba el menú abierto "pegado" y al
   pasar a otra sección se abría la nueva encima de la anterior. */
.nitem:hover .mega, .nitem:has(:focus-visible) .mega{ opacity:1; visibility:visible; transform:none; }
.nav .row:hover .nitem:not(:hover) .mega{ opacity:0; visibility:hidden; }
.mega a{ display:block; padding:9px 18px; font-size:.83rem; color:var(--g7); text-decoration:none; }
.mega a:hover{ background:var(--wash); color:var(--ink); }
.mega .hd{ padding:6px 18px 8px; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g3); font-weight:700; }
@media (max-width:900px){ .mega{ display:none; } }

/* ===================== carrusel ===================== */
.hero{ position:relative; background:var(--wash); overflow:hidden; }
.slides{ position:relative; min-height:clamp(400px,44vw,520px); }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease; }
.slide.on{ opacity:1; visibility:visible; }
.sin{ height:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(30px,4vw,48px); display:grid; gap:clamp(18px,3.5vw,48px); align-items:center; }
@media (min-width:900px){ .sin{ grid-template-columns:1fr 1fr; } }
.slide .kick{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--g5); }
.slide h2{ font-size:clamp(2rem,4.8vw,3.5rem); font-weight:300; margin-top:14px; }
.slide h2 strong{ font-weight:800; }
.slide p.sub{ font-size:clamp(.92rem,1.5vw,1.02rem); color:var(--g7); max-width:42ch; margin-top:18px; }
.slide .cta{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.plate{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--g1); }
.plate canvas{ position:absolute; inset:0; width:100%; height:100%; }
.plate .cap{ position:absolute; left:14px; bottom:12px; font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.5); }
@media (max-width:899px){ .plate{ aspect-ratio:16/9; } }
.arrow{ position:absolute; bottom:18px; z-index:9; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--g3); background:#fff; color:var(--ink); cursor:pointer;
  display:grid; place-items:center; font-size:1.2rem; }
.arrow:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.arrow.prev{ left:calc(50% - 96px); } .arrow.next{ left:calc(50% + 56px); }
.dots{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:9; display:flex; gap:8px; }
.dots button{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--g3); transition:width .25s,background .25s; }
.dots button.on{ width:26px; border-radius:999px; background:var(--ink); }

/* ===================== bandas ===================== */
.sec{ padding-block:clamp(44px,5.5vw,84px); }
.shead{ text-align:center; max-width:60ch; margin-inline:auto; }
.shead h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:300; }
.shead h2 strong{ font-weight:800; }
.shead p{ color:var(--g5); font-size:.95rem; margin-top:12px; }
.shead .btn{ margin-top:22px; }
.center{ text-align:center; }

/* productos — mosaico con recuadro de texto dentro de la retícula */
.prods{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(250px,auto); margin-top:clamp(24px,3vw,40px); }
@media (min-width:780px){ .prods{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1080px){ .prods{ grid-template-columns:repeat(4,1fr); } }
.m-intro{ display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding-right:clamp(0px,1.5vw,18px); grid-column:span 2; }
@media (min-width:780px){ .m-intro{ grid-column:span 1; } }
.m-intro h2{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:300; }
.m-intro h2 strong{ font-weight:800; }
.m-intro p{ font-size:.9rem; color:var(--g5); }
.m-intro .btn{ align-self:flex-start; }

.prod{ background:#fff; border:1px solid var(--g1); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.prod:hover{ box-shadow:0 14px 30px rgba(0,0,0,.09); transform:translateY(-3px); }
.prod.tall{ grid-row:span 2; }
.prod .shot{ position:relative; flex:1; min-height:170px; background:var(--wash);
  display:grid; place-items:center; padding:18px; }
.prod .shot svg{ max-height:230px; height:100%; width:auto; }
.prod.tall .shot svg{ max-height:340px; }
.prod .tag{ position:absolute; top:12px; left:12px; font-size:.62rem; font-weight:700;
  background:#fff; border-radius:999px; padding:5px 12px; color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.08); }
.prod .chip{ position:absolute; top:12px; right:12px; font-size:.62rem; font-weight:700;
  background:var(--ink); color:#fff; border-radius:999px; padding:5px 12px; }
.prod .b{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.prod .cl{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g5); }
.prod h3{ font-size:.96rem; font-weight:700; }
.prod .d{ font-size:.8rem; color:var(--g5); }
.prod .pr{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:auto; padding-top:10px; }
.prod .pz{ font-size:1.12rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.pts{ font-size:.64rem; font-weight:700; border:1px solid var(--g1); border-radius:999px;
  padding:3px 9px; color:var(--g7); white-space:nowrap; }
.prod .btn{ width:100%; margin-top:12px; }

/* Flex centrado: con una o dos marcas no se estiran a todo lo ancho;
   cada tarjeta mide como mucho 320px y van en medio. */
.mbrands{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:clamp(28px,3.5vw,44px); }
.mbrands .mbrand{ flex:1 1 230px; max-width:320px; }
.mbrand{ border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--g1);
  text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.mbrand:hover{ box-shadow:0 14px 30px rgba(0,0,0,.1); transform:translateY(-3px); }
.mbrand .ph{ position:relative; aspect-ratio:4/3; background:var(--ink); overflow:hidden; }
.mbrand .ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.mbrand .t{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mbrand .cl{ font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g5); }
.mbrand b{ font-size:1.16rem; font-weight:800; color:var(--ink); letter-spacing:.02em; }
.mbrand p{ font-size:.82rem; color:var(--g5); }
.mbrand .u{ margin-top:auto; padding-top:12px; font-size:.7rem; font-weight:600; color:var(--ink); }
.mbrand.soon{ opacity:.6; }

/* oportunidad */
.opp{ background:var(--ink); color:#fff; }
.opp .wrap{ padding-block:clamp(46px,6vw,86px); display:grid; gap:clamp(28px,4vw,60px); align-items:center; }
@media (min-width:900px){ .opp .wrap{ grid-template-columns:1fr 1fr; } }
.opp h2{ color:#fff; font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:300; }
.opp h2 strong{ font-weight:800; }
.opp p{ color:var(--g3); margin-top:16px; max-width:42ch; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.stat b{ display:block; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.stat span{ font-size:.72rem; color:var(--g3); }
.opp .btn{ margin-top:30px; }
.opp-art{ position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; background:#000; }
.opp-art canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* testimonios */
.tests{ display:grid; gap:18px; margin-top:clamp(28px,3.5vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.test{ background:#fff; border:1px solid var(--g1); border-radius:var(--r); padding:24px 22px; }
.test .who{ display:flex; align-items:center; gap:12px; }
.test .av{ width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--g1); position:relative; flex:none; }
.test .av canvas{ position:absolute; inset:0; width:100%; height:100%; }
.test b{ display:block; font-size:.88rem; color:var(--ink); }
.test .loc{ font-size:.72rem; color:var(--g5); }
.test q{ display:block; font-size:.87rem; color:var(--g7); margin-top:16px; font-style:italic; }
.test .ej{ display:inline-block; margin-top:14px; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--g3); }

/* corporativo */
.corp{ background:var(--wash); }
.corp .wrap{ padding-block:clamp(44px,5.5vw,84px); display:grid; gap:clamp(26px,4vw,56px); align-items:center; }
@media (min-width:900px){ .corp .wrap{ grid-template-columns:1fr 1fr; } }
.corp h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:300; }
.corp h2 strong{ font-weight:800; }
.corp .lines{ margin-top:20px; }
.corp .lines li{ padding-block:11px; border-bottom:1px solid var(--g1); font-size:.95rem; color:var(--g7); }
.corp .lines li:first-child{ border-top:1px solid var(--g1); }
.corp .btn{ margin-top:26px; }
.corp-art{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--ink); }
.corp-art canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* tira de cifras */
.strip{ background:#fff; border-block:1px solid var(--g1); }
.strip .wrap{ display:grid; gap:20px; padding-block:clamp(28px,3.5vw,44px); align-items:center; }
@media (min-width:820px){ .strip .wrap{ grid-template-columns:auto repeat(3,1fr); gap:clamp(24px,4vw,56px); } }
.strip .claim b{ display:block; font-size:1.25rem; font-weight:800; color:var(--ink); letter-spacing:.06em; }
.strip .claim span{ font-size:.82rem; color:var(--g5); }
.sfig{ border-left:1px solid var(--g1); padding-left:clamp(16px,2.4vw,28px); }
@media (max-width:819px){ .sfig{ border-left:0; border-top:1px solid var(--g1); padding-left:0; padding-top:16px; } }
.sfig b{ display:block; font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.sfig span{ font-size:.8rem; color:var(--g5); }

/* novedades — mosaico: destacado + lista */
.news{ display:grid; gap:18px; margin-top:clamp(28px,3.5vw,44px); }
@media (min-width:900px){ .news{ grid-template-columns:1.15fr .85fr; } }
.feat{ border-radius:var(--r); overflow:hidden; border:1px solid var(--g1); background:#fff;
  text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .2s; }
.feat:hover{ box-shadow:0 14px 30px rgba(0,0,0,.09); }
.feat .ph{ position:relative; aspect-ratio:16/10; background:var(--ink); overflow:hidden; }
.feat .ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.feat .t{ padding:20px 22px 24px; }
.feat h3{ font-size:1.3rem; margin-top:8px; }
.newslist{ display:flex; flex-direction:column; gap:12px; }
.nw{ display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center;
  border:1px solid var(--g1); border-radius:var(--r); background:#fff; overflow:hidden;
  text-decoration:none; padding:10px 16px 10px 10px; transition:box-shadow .2s; flex:1; }
.nw:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); }
.nw .ph{ position:relative; aspect-ratio:1/1; background:var(--wash); border-radius:10px; overflow:hidden; }
.nw .ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.lbl{ font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--g5); }
.nw h3{ font-size:.94rem; margin-top:4px; }
.nw p{ font-size:.79rem; color:var(--g5); margin-top:3px; }
.nw .go, .feat .go{ display:inline-block; margin-top:8px; font-size:.75rem; font-weight:700;
  color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:2px; }
.feat p{ font-size:.88rem; color:var(--g5); margin-top:8px; }

/* banda de subcategorías */
.band{ background:var(--ink); color:#fff; }
.band .wrap{ padding-block:clamp(44px,5.5vw,80px); }
.band h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:300; }
.band h2 strong{ font-weight:800; }
.band .shead p{ color:var(--g3); }
/* Flex centrado: 6 por renglón en PC (3 en tableta) como antes; con menos, crecen
   hasta 300px y quedan en medio, no pegadas a la izquierda; en celular, dos por renglón. */
.subcats{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(26px,3.4vw,40px); }
.subcats .sc{ flex:0 1 calc(50% - 7px); }
@media (min-width:720px){ .subcats .sc{ flex:1 0 calc((100% - 28px) / 3); max-width:300px; } }
@media (min-width:1080px){ .subcats .sc{ flex-basis:calc((100% - 70px) / 6); } }
.sc{ border:1px solid rgba(255,255,255,.22); border-radius:var(--r); overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column; transition:background .2s, border-color .2s; }
.sc:hover{ background:rgba(255,255,255,.07); border-color:#fff; }
.sc .ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#000; }
.sc .ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sc .t{ padding:14px 14px 18px; }
.sc b{ display:block; font-size:.92rem; color:#fff; }
.sc small{ display:block; font-size:.72rem; color:var(--g3); margin-top:4px; }
.sc .go{ display:inline-block; margin-top:10px; font-size:.7rem; font-weight:700; color:#fff;
  border-bottom:2px solid #fff; padding-bottom:2px; }

/* tira de marcas */
.logostrip{ background:#fff; border-block:1px solid var(--g1); }
.logostrip .wrap{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); align-items:center;
  justify-content:center; padding-block:clamp(24px,3vw,40px); }
.logostrip .lbl2{ font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g5); width:100%; text-align:center; }
.lgo{ font-size:clamp(1.05rem,2.2vw,1.5rem); font-weight:800; letter-spacing:.14em;
  color:var(--ink); text-decoration:none; opacity:.72; transition:opacity .2s; white-space:nowrap; }
.lgo:hover{ opacity:1; }
.lgo.soon{ opacity:.3; }

/* carta de color */
.lvband{ background:var(--wash); }
.lvband .wrap{ padding-block:clamp(44px,5.5vw,80px); }
.carta{ display:grid; gap:clamp(26px,3.5vw,48px); margin-top:clamp(26px,3.4vw,40px); }
@media (min-width:900px){ .carta{ grid-template-columns:1.25fr .75fr; } }
.carta h3{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--g5); margin-bottom:14px; }
.bar{ display:grid; grid-template-columns:repeat(10,1fr); border-radius:10px; overflow:hidden; }
.lv{ aspect-ratio:1/1.6; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; }
.lv span{ font-size:.62rem; font-weight:700; font-variant-numeric:tabular-nums; }
.lvcap{ display:flex; justify-content:space-between; margin-top:9px; font-size:.7rem; color:var(--g5); }
.reflejos{ display:grid; gap:8px; }
.rf{ display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--g1); border-radius:10px; padding:9px 14px; }
.rf .sw{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.rf .cd{ font-size:.78rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; min-width:1.8em; }
.rf .nm{ font-size:.82rem; color:var(--g7); }
.carta-note{ margin-top:14px; font-size:.74rem; color:var(--g5); }

/* por qué */
.why{ display:grid; gap:18px; margin-top:clamp(26px,3.4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.wh{ background:#fff; border:1px solid var(--g1); border-radius:var(--r); padding:26px 24px 28px; }
.wh .ic{ width:42px; height:42px; border-radius:12px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.9rem; }
.wh b{ display:block; font-size:1rem; color:var(--ink); margin-top:16px; }
.wh p{ font-size:.86rem; color:var(--g5); margin-top:8px; }

/* Cuántas promociones hay lo decide el panel: de dos en dos en PC, y si
   sobra una (número impar) va centrada del mismo tamaño, no a todo lo ancho. */
.promos{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:clamp(26px,3.4vw,40px); }
.promos > .pm{ flex:1 1 100%; }
@media (min-width:860px){ .promos > .pm{ flex:0 1 calc(50% - 9px); } }
.pm{ position:relative; border-radius:var(--r); overflow:hidden; min-height:240px;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:clamp(26px,3.4vw,44px); text-decoration:none; }
.pm canvas{ position:absolute; inset:0; width:100%; height:100%; }
.pm .in{ position:relative; z-index:2; }
.pm .lbl3{ font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.pm h3{ font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; margin-top:10px; }
.pm p{ font-size:.88rem; margin-top:8px; max-width:32ch; }
.pm .btn{ margin-top:20px; }
.pm.dark{ background:var(--ink); }
.pm.dark .lbl3{ color:var(--g3); } .pm.dark h3{ color:#fff; } .pm.dark p{ color:var(--g3); }
.pm.light{ background:var(--wash); }
.pm.light .lbl3{ color:var(--g5); } .pm.light h3{ color:var(--ink); } .pm.light p{ color:var(--g7); }

/* footer */
footer{ background:var(--ink); color:var(--g3); }
.fmeta{ border-bottom:1px solid rgba(255,255,255,.14); }
.fmeta .wrap{ display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center;
  justify-content:space-between; padding-block:22px; font-size:.78rem; }
.social{ display:flex; gap:14px; align-items:center; }
.social a{ color:var(--g3); }
.social a:hover{ color:#fff; }
.fgrid{ display:grid; gap:28px; padding-block:clamp(32px,4vw,52px); }
@media (min-width:760px){ .fgrid{ grid-template-columns:repeat(3,1fr) auto; } }
.fgrid h4{ color:#fff; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.fgrid a{ display:block; font-size:.82rem; color:var(--g3); text-decoration:none; padding-block:5px; }
.fgrid a:hover{ color:#fff; }
.fpais{ text-align:center; }
.fpais b{ display:block; font-size:1.5rem; color:#fff; font-weight:800; }
.fpais span{ font-size:.72rem; }
.fbot{ border-top:1px solid rgba(255,255,255,.14); }
.fbot .wrap{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-block:18px; font-size:.72rem; color:var(--g5); }
.fbot a{ color:var(--g5); text-decoration:underline; text-underline-offset:3px; }

/* flotantes */
.wa{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150;
  width:54px; height:54px; border-radius:50%; background:#25D366; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22); text-decoration:none; }
.cookie{ position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150;
  max-width:330px; background:#fff; border:1px solid var(--g1); border-radius:10px;
  padding:16px 18px 18px; box-shadow:0 10px 30px rgba(0,0,0,.14); font-size:.76rem; color:var(--g5); }
.cookie b{ display:block; color:var(--ink); font-size:.82rem; margin-bottom:6px; }
.cookie .x{ position:absolute; top:8px; right:10px; border:0; background:transparent;
  cursor:pointer; font-size:1.1rem; color:var(--g5); line-height:1; }
.cookie a{ color:var(--ink); }
@media (max-width:640px){ .cookie{ display:none; } }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }


/* ===================== vistas ===================== */
[data-view][hidden]{ display:none !important; }

/* migas */
.crumb{ border-bottom:1px solid var(--g1); background:#fff; }
.crumb .wrap{ display:flex; gap:10px; align-items:center; padding-block:14px; font-size:.8rem; color:var(--g5); }
.crumb a{ color:var(--g5); text-decoration:none; }
.crumb a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* encabezado de listado */
.plhead{ display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; }
.plhead h1{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:300; }
.plhead h1 strong{ font-weight:800; }
.plhead .count{ font-size:.85rem; color:var(--g5); }
.plhead .count b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }

/* barra de filtros */
.fbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:clamp(18px,2.4vw,28px); padding-bottom:18px; border-bottom:1px solid var(--g1); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--g1); background:#fff; border-radius:999px; padding:9px 18px;
  font-size:.82rem; font-weight:600; color:var(--g7); cursor:pointer; transition:.18s; }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* En la tarjeta de producto la etiqueta de categoría es negra: al pasar el mouse no se le cambia el color (si no, se borra el texto). */
.prod .chip:hover, .prod .chip{ color:#fff; border-color:var(--ink); }
.fbtn{ display:inline-flex; align-items:center; gap:8px; border:0; background:transparent;
  cursor:pointer; font-size:.85rem; font-weight:600; color:var(--ink);
  text-decoration:underline; text-underline-offset:4px; position:relative; }
.fbtn .badge{ background:var(--ink); color:#fff; border-radius:999px; font-size:.62rem;
  min-width:17px; height:17px; display:grid; place-items:center; padding-inline:4px; }
.sortwrap{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--g5); }
.sortwrap select{ border:0; background:transparent; font:inherit; font-size:.85rem;
  font-weight:600; color:var(--ink); cursor:pointer; }
.sortwrap select:focus{ outline:none; }
.psearch{ display:flex; align-items:center; margin-left:auto; border:1px solid var(--g1);
  border-radius:999px; padding:4px 4px 4px 18px; min-width:min(100%,280px); }
.psearch input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:.84rem; }
.psearch input:focus{ outline:none; }
.psearch button{ width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center; flex:none; }

/* catálogo: panel + retícula */
.catalog{ display:grid; gap:clamp(20px,2.6vw,36px); margin-top:clamp(22px,2.8vw,34px); align-items:start; }
@media (min-width:1000px){ .catalog{ grid-template-columns:250px 1fr; } }
.fpanel{ border:1px solid var(--g1); border-radius:var(--r); background:#fff; padding:6px 0 0; }
@media (max-width:999px){
  .fpanel{ position:fixed; inset:0 auto 0 0; width:min(320px,88vw); z-index:250; border-radius:0;
    overflow-y:auto; transform:translateX(-102%); transition:transform .28s ease;
    box-shadow:0 0 40px rgba(0,0,0,.2); }
  .fpanel.open{ transform:none; }
}
.fpanel-head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--g1); }
.fpanel-head b{ color:var(--ink); }
.fx{ border:0; background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--g5); }
@media (min-width:1000px){ .fx{ display:none; } }
.fgroup{ border-bottom:1px solid var(--g1); }
.fgroup > button{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; border:0; background:transparent; cursor:pointer; padding:15px 18px;
  font-size:.85rem; font-weight:700; color:var(--ink); text-align:left; }
.fgroup .arw{ transition:transform .2s; color:var(--g5); }
.fgroup.open .arw{ transform:rotate(180deg); }
.fgroup .items{ padding:0 18px 14px; display:none; }
.fgroup.open .items{ display:block; }
.fopt{ display:flex; align-items:center; gap:10px; padding-block:7px; font-size:.83rem;
  color:var(--g7); cursor:pointer; }
.fopt input{ width:16px; height:16px; accent-color:var(--ink); cursor:pointer; flex:none; }
.fopt .qty{ margin-left:auto; font-size:.72rem; color:var(--g3); font-variant-numeric:tabular-nums; }
.fpanel-foot{ padding:14px 18px 18px; }
.fpanel-foot .btn{ width:100%; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:240; }
@media (min-width:1000px){ .scrim{ display:none; } }

.cgrid{ grid-auto-rows:auto; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .cgrid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px){ .cgrid{ grid-template-columns:repeat(4,1fr); } }
.cgrid .prod .shot{ min-height:0; aspect-ratio:1/1; }
.empty{ padding:60px 20px; text-align:center; color:var(--g5); font-size:.9rem; }


/* ===================== encabezado de categoría ===================== */
.cathero{ background:var(--wash); border-bottom:1px solid var(--g1); }
.cathero .wrap{ padding-block:clamp(26px,3.4vw,44px); }
.cathero h1{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:300; }
.cathero h1 strong{ font-weight:800; }
.cathero p{ color:var(--g5); font-size:.92rem; margin-top:10px; max-width:60ch; }
.subnav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.subnav a{ border:1px solid var(--g1); background:#fff; border-radius:999px;
  padding:8px 17px; font-size:.81rem; font-weight:600; color:var(--g7);
  text-decoration:none; transition:.18s; }
.subnav a:hover{ border-color:var(--ink); color:var(--ink); }
.subnav a.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ===================== ficha de producto ===================== */
.pdp{ display:grid; gap:clamp(24px,3.4vw,52px); align-items:start;
  padding-block:clamp(24px,3vw,40px); }
@media (min-width:900px){ .pdp{ grid-template-columns:1.05fr .95fr; } }

.pdp-media{ position:relative; }
.pdp-shot{ position:relative; background:var(--wash); border-radius:var(--r);
  aspect-ratio:1/1; display:grid; place-items:center; padding:clamp(24px,4vw,56px); }
.pdp-shot svg{ max-height:100%; width:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.14)); }
.pdp-flag{ position:absolute; top:16px; left:16px; background:var(--ink); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 15px; border-radius:999px; }
.pdp-share{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center;
  gap:7px; border:0; background:transparent; cursor:pointer; font-size:.78rem;
  font-weight:600; color:var(--g7); text-decoration:underline; text-underline-offset:4px; }
.pdp-share:hover{ color:var(--ink); }
.thumbs{ display:flex; gap:10px; margin-top:12px; }
.thumbs span{ width:64px; height:64px; border-radius:10px; background:var(--wash);
  border:1px solid var(--g1); display:grid; place-items:center; padding:8px; }
.thumbs span svg{ max-height:100%; width:auto; }
.thumbs span.on{ border-color:var(--ink); }

.pdp-info h1{ font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800; }
.pdp-info .short{ color:var(--g5); font-size:.95rem; margin-top:10px; }
.pdp-info .verdet{ display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:.82rem; font-weight:600; color:var(--ink);
  border:0; background:transparent; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.pdp-sep{ height:1px; background:var(--g1); margin-block:22px; }
.pdp-price{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pdp-price b{ font-size:clamp(1.6rem,3vw,2.1rem); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.pdp-size{ font-size:.86rem; color:var(--g5); margin-top:8px; }
.pdp-cp{ display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  border:1px solid var(--g1); border-radius:999px; padding:9px 16px; font-size:.82rem; }
.pdp-cp .ok{ color:#127A43; font-weight:700; }
.pdp-buy{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--g1); border-radius:999px; }
.qty button{ width:40px; height:44px; border:0; background:transparent; cursor:pointer;
  font-size:1.1rem; color:var(--ink); }
.qty span{ min-width:34px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.pdp-buy .btn{ flex:1; min-width:180px; }
.pdp-promo{ margin-top:22px; border:1px solid var(--g1); border-left:4px solid var(--ink);
  border-radius:8px; padding:16px 18px; background:var(--wash); }
.pdp-promo b{ color:var(--ink); font-size:.9rem; }
.pdp-promo p{ font-size:.84rem; color:var(--g5); margin-top:5px; }
.pdp-promo a{ display:inline-block; margin-top:9px; font-size:.79rem; font-weight:700;
  color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:2px; text-decoration:none; }

/* acordeón de detalle */
.acc{ margin-top:clamp(30px,4vw,52px); border-top:1px solid var(--g1); }
.acc-item{ border-bottom:1px solid var(--g1); }
.acc-item > button{ width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; border:0; background:transparent; cursor:pointer; padding:20px 2px;
  font-size:1rem; font-weight:700; color:var(--ink); text-align:left; }
.acc-item .arw{ color:var(--g5); transition:transform .2s; }
.acc-item.open .arw{ transform:rotate(180deg); }
.acc-body{ display:none; padding:0 2px 24px; }
.acc-item.open .acc-body{ display:block; }
.acc-body li{ padding-block:7px; padding-left:20px; position:relative; font-size:.9rem; color:var(--g7); }
.acc-body li::before{ content:""; position:absolute; left:2px; top:16px; width:7px; height:1px; background:var(--ink); }
.acc-body p{ font-size:.86rem; color:var(--g5); line-height:1.8; }
.inci{ font-size:.78rem; color:var(--g5); line-height:1.9; word-spacing:.05em; }

/* complementarios */
.compl{ margin-top:clamp(36px,4.5vw,64px); }
.compl h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:300; }
.compl h2 strong{ font-weight:800; }
.compl p.sub2{ color:var(--g5); font-size:.9rem; margin-top:8px; }

/* ===================== megamenú: clic, y visible en móvil ===================== */
.mega{ min-width:240px; padding:10px 6px; }
.mega a{ padding:13px 20px; font-size:.86rem; }
.mega .hd{ padding:8px 20px 10px; }
.nitem.open > a{ color:#fff; }
.nitem.open .mega{ opacity:1; visibility:visible; transform:none; }
.nitem > a .chev{ pointer-events:none; }
.nitem.open .chev{ transform:rotate(180deg); }

@media (max-width:900px){
  .mega{ display:block; position:fixed; left:0; right:0; width:100%;
    min-width:0; border-radius:0; max-height:62vh; overflow-y:auto;
    box-shadow:0 14px 30px rgba(0,0,0,.24); padding:8px 0 14px; }
  .mega a{ padding:15px 22px; border-bottom:1px solid var(--g1); }
  .mega a:last-child{ border-bottom:0; }
}


/* el nav solo se desliza en móvil: en escritorio no debe recortar el desplegable */
.nav .row{ overflow:visible; }
@media (max-width:900px){ .nav .row{ overflow-x:auto; overflow-y:visible; } }


/* ===================== carrito: cajón lateral ===================== */
.cart-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:290; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,92vw); z-index:300;
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .3s ease;
  box-shadow:-10px 0 40px rgba(0,0,0,.18);
}
.drawer.open{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; border-bottom:1px solid var(--g1); }
.drawer-head b{ font-size:1.15rem; color:var(--ink); }
.drawer-x{ border:0; background:transparent; font-size:1.6rem; line-height:1;
  cursor:pointer; color:var(--g5); }
.drawer-body{ flex:1; overflow-y:auto; padding:6px 22px; }
.drawer-foot{ border-top:1px solid var(--g1); padding:18px 22px 22px; }
.ci{ display:grid; grid-template-columns:76px 1fr auto; gap:14px;
  padding-block:18px; border-bottom:1px solid var(--g1); align-items:start; }
.ci .im{ background:var(--wash); border-radius:10px; aspect-ratio:1; display:grid;
  place-items:center; padding:8px; }
.ci .im svg{ max-height:100%; width:auto; }
.ci h4{ font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.3; }
.ci .meta{ font-size:.75rem; color:var(--g5); margin-top:3px; }
.ci .row2{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ci .pz{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.ci .del{ border:0; background:transparent; cursor:pointer; color:var(--g5); padding:2px; }
.ci .del:hover{ color:#B3261E; }
.qmini{ display:inline-flex; align-items:center; border:1px solid var(--g1); border-radius:999px; }
.qmini button{ width:30px; height:32px; border:0; background:transparent; cursor:pointer; font-size:1rem; }
.qmini span{ min-width:26px; text-align:center; font-size:.85rem; font-weight:700;
  font-variant-numeric:tabular-nums; }
.tot{ display:flex; justify-content:space-between; padding-block:6px; font-size:.92rem; }
.tot.big{ font-size:1.12rem; font-weight:800; color:var(--ink); padding-top:12px;
  border-top:1px solid var(--g1); margin-top:8px; }
.tot b{ font-variant-numeric:tabular-nums; }
.drawer-foot .btn{ width:100%; margin-top:14px; }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--g5); font-size:.9rem; }

/* ===================== checkout ===================== */
.steps-bar{ border-bottom:1px solid var(--g1); background:#fff; }
.steps-bar .wrap{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.steps-bar .wrap::-webkit-scrollbar{ display:none; }
.stp{ flex:1; min-width:140px; text-align:center; padding:18px 10px;
  font-size:.84rem; font-weight:600; color:var(--g3); border-bottom:3px solid transparent;
  white-space:nowrap; }
.stp.on{ color:var(--ink); border-bottom-color:var(--ink); }
.stp.done{ color:var(--g7); }

.cko{ display:grid; gap:clamp(24px,3.4vw,48px); align-items:start;
  padding-block:clamp(26px,3.4vw,48px); }
@media (min-width:940px){ .cko{ grid-template-columns:1.25fr .75fr; } }
.cko h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:800; }
.cko .hint2{ color:var(--g5); font-size:.87rem; margin-top:8px; }
.cko-form{ display:grid; gap:18px; margin-top:24px; }
@media (min-width:620px){ .cko-form{ grid-template-columns:1fr 1fr; } .cko-form .full{ grid-column:1/-1; } }
.cko-form .field label{ color:var(--ink); }
.cko-form .field input, .cko-form .field select{
  font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--g1); border-radius:10px; padding:13px 14px; width:100%; }
.cko-form .field input:focus, .cko-form .field select:focus{ outline:none; border-color:var(--ink); }
.cko-nav{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.opts{ display:grid; gap:12px; margin-top:22px; }
.opt{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  border:1.5px solid var(--g1); border-radius:12px; padding:16px 18px; cursor:pointer; }
.opt:hover{ border-color:var(--g3); }
.opt.on{ border-color:var(--ink); background:var(--wash); }
.opt input{ width:18px; height:18px; accent-color:var(--ink); }
.opt b{ display:block; font-size:.93rem; color:var(--ink); }
.opt span{ display:block; font-size:.8rem; color:var(--g5); margin-top:2px; }
.opt .pz2{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

.gwbox{ margin-top:20px; border:1.5px dashed var(--g3); border-radius:12px;
  padding:24px 22px; background:var(--wash); }
.gwbox b{ display:block; color:var(--ink); font-size:.92rem; }
.gwbox p{ font-size:.84rem; color:var(--g5); margin-top:8px; }
.gwbox .lock{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:.78rem; font-weight:700; color:var(--ink); }

.summary{ border:1px solid var(--g1); border-radius:var(--r); padding:22px 20px 24px;
  background:#fff; position:sticky; top:96px; }
.summary h3{ font-size:1rem; font-weight:800; }
.summary .lines{ margin-top:16px; }
.sline{ display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;
  padding-block:12px; border-bottom:1px solid var(--g1); }
.sline .im{ background:var(--wash); border-radius:8px; aspect-ratio:1; display:grid;
  place-items:center; padding:6px; }
.sline .im svg{ max-height:100%; width:auto; }
.sline b{ font-size:.82rem; color:var(--ink); display:block; line-height:1.3; }
.sline span{ font-size:.73rem; color:var(--g5); }
.sline .pz{ font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
.summary .tot{ font-size:.87rem; }
.summary .tot.big{ font-size:1.1rem; }
.freeship{ margin-top:14px; font-size:.78rem; color:var(--g5);
  background:var(--wash); border-radius:8px; padding:11px 14px; }

.done-box{ text-align:center; padding-block:clamp(40px,6vw,80px); max-width:56ch; margin-inline:auto; }
.done-box .tick2{ width:62px; height:62px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; margin:0 auto 22px; font-size:1.6rem; }
.done-box h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; }
.done-box p{ color:var(--g5); margin-top:12px; }
.done-box .folio{ display:inline-block; margin-top:20px; border:1px solid var(--g1);
  border-radius:999px; padding:10px 22px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.done-box .btn{ margin-top:26px; }


/* ===================== auth: registro e inicio de sesión ===================== */
.auth{ display:grid; gap:1px; background:var(--g1); border:1px solid var(--g1);
  border-radius:var(--r); overflow:hidden; margin-block:clamp(26px,3.4vw,48px); }
/* La columna no crece más que la pantalla: algo ancho adentro (el selector de foto, un select largo) empujaba el formulario 20px fuera del celular. */
.auth{ grid-template-columns:minmax(0, 1fr); }
.auth-pane{ min-width:0; }
@media (min-width:900px){ .auth{ grid-template-columns:1fr 1fr; } }
.auth-pane{ background:#fff; padding:clamp(26px,3.6vw,44px); }
.auth-pane.dark{ background:var(--ink); color:var(--g3); }
.auth-pane h2{ font-size:clamp(1.4rem,2.8vw,1.9rem); font-weight:800; }
.auth-pane.dark h2{ color:#fff; }
.auth-pane .hint2{ color:var(--g5); font-size:.87rem; margin-top:10px; }
.auth-pane.dark .hint2{ color:var(--g3); }
.tabs{ display:flex; gap:0; border:1px solid var(--g1); border-radius:999px;
  padding:4px; margin-top:20px; background:var(--wash); }
.tabs button{ flex:1; border:0; background:transparent; cursor:pointer; padding:11px 10px;
  border-radius:999px; font-size:.85rem; font-weight:700; color:var(--g5); }
.tabs button.on{ background:var(--ink); color:#fff; }
.auth-form{ display:grid; gap:16px; margin-top:22px; }
@media (min-width:560px){ .auth-form{ grid-template-columns:1fr 1fr; } .auth-form .full{ grid-column:1/-1; } }
.auth-form .field input, .auth-form .field select{
  font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--g1); border-radius:10px; padding:13px 14px; width:100%; }
.auth-form .field input:focus, .auth-form .field select:focus{ outline:none; border-color:var(--ink); }
.auth-form .field label{ color:var(--ink); }
.radios{ display:flex; gap:10px; flex-wrap:wrap; }
.radios label{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--g1);
  border-radius:999px; padding:10px 18px; cursor:pointer; font-size:.86rem; font-weight:600; }
.radios label.on{ border-color:var(--ink); background:var(--wash); }
.radios input{ accent-color:var(--ink); }
.bens li{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding-block:12px;
  border-bottom:1px solid rgba(255,255,255,.14); font-size:.88rem; }
.bens li:first-child{ border-top:1px solid rgba(255,255,255,.14); }
.bens .tk{ color:#fff; font-weight:800; }
.bens b{ color:#fff; font-weight:600; }
.auth-err{ margin-top:14px; font-size:.84rem; font-weight:700; color:#B3261E; }

/* ===================== mi cuenta ===================== */
.acct{ display:grid; gap:clamp(20px,3vw,40px); align-items:start;
  padding-block:clamp(24px,3vw,44px); }
@media (min-width:920px){ .acct{ grid-template-columns:250px 1fr; } }
.acct-nav{ border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff; }
.acct-who{ padding:20px 18px; border-bottom:1px solid var(--g1); }
.acct-who b{ display:block; font-size:1rem; color:var(--ink); }
.acct-who span{ font-size:.78rem; color:var(--g5); }
.acct-who .tipo{ display:inline-block; margin-top:8px; font-size:.64rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:#fff;
  border-radius:999px; padding:4px 11px; }
.acct-nav a{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; font-size:.87rem; color:var(--g7); text-decoration:none;
  border-bottom:1px solid var(--g1); }
.acct-nav a:hover{ background:var(--wash); color:var(--ink); }
.acct-nav a.on{ background:var(--wash); color:var(--ink); font-weight:700;
  box-shadow:inset 3px 0 0 var(--ink); }
.acct-nav a.salir{ color:#B3261E; border-bottom:0; }

.acct-body h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:800; }
.acct-body .hint2{ color:var(--g5); font-size:.87rem; margin-top:8px; }

.kpis{ display:grid; gap:14px; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.kpi{ border:1px solid var(--g1); border-radius:var(--r); padding:20px 18px; background:#fff; }
.kpi span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g5); font-weight:700; }
.kpi b{ display:block; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--ink);
  margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi small{ display:block; font-size:.76rem; color:var(--g5); margin-top:4px; }

.nivel{ border:1px solid var(--g1); border-radius:var(--r); padding:22px 20px; background:#fff; margin-top:22px; }
.nivel-top{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:baseline; }
.nivel-top b{ font-size:1.1rem; color:var(--ink); }
.nivel-top span{ font-size:.82rem; color:var(--g5); }
.barra{ height:8px; background:var(--g1); border-radius:999px; margin-top:16px; overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--ink); border-radius:999px; }
.escala{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px; }
.esc{ border:1px solid var(--g1); border-radius:10px; padding:12px 10px; text-align:center; }
.esc.on{ border-color:var(--ink); background:var(--wash); }
.esc b{ display:block; font-size:.84rem; color:var(--ink); }
.esc span{ display:block; font-size:.7rem; color:var(--g5); margin-top:3px; }

.codigo-box{ border:1px solid var(--g1); border-radius:var(--r); padding:22px 20px;
  background:var(--wash); margin-top:22px; }
.codigo-box b{ display:block; font-size:.9rem; color:var(--ink); }
.codigo-box .cod{ font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; letter-spacing:.14em;
  color:var(--ink); margin-top:10px; font-variant-numeric:tabular-nums; }
.codigo-box .liga{ display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.codigo-box input{ flex:1; min-width:200px; font:inherit; font-size:.82rem; color:var(--g7);
  border:1px solid var(--g1); border-radius:8px; padding:10px 12px; background:#fff; }

.tabla{ margin-top:22px; border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff; }
.fila{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; padding:16px 18px;
  border-bottom:1px solid var(--g1); align-items:center; text-decoration:none; }
.fila:last-child{ border-bottom:0; }
.fila:hover{ background:var(--wash); }
.fila b{ font-size:.9rem; color:var(--ink); }
.fila span{ display:block; font-size:.78rem; color:var(--g5); margin-top:3px; }
.fila .der{ text-align:right; }
.fila .mto{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.badge2{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:5px 11px; }
.badge2.pag{ background:#E6F4EC; color:#0B6B44; }
.badge2.env{ background:#E9EEF9; color:#1B3F8B; }
.badge2.ent{ background:var(--wash); color:var(--g7); }
.vacio{ padding:50px 20px; text-align:center; color:var(--g5); font-size:.88rem; }

/* seguimiento */
.track{ max-width:620px; margin-inline:auto; padding-block:clamp(30px,4vw,60px); }
.track-form{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.track-form input{ flex:1; min-width:200px; font:inherit; font-size:.95rem;
  border:1.5px solid var(--g1); border-radius:10px; padding:13px 14px; }
.track-form input:focus{ outline:none; border-color:var(--ink); }
.linea{ margin-top:28px; }
.hito{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding-bottom:24px; position:relative; }
.hito::before{ content:""; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--g1); }
.hito:last-child::before{ display:none; }
.hito .pt{ width:24px; height:24px; border-radius:50%; border:2px solid var(--g1);
  background:#fff; display:grid; place-items:center; font-size:.7rem; z-index:1; }
.hito.ok .pt{ background:var(--ink); border-color:var(--ink); color:#fff; }
.hito b{ font-size:.92rem; color:var(--g5); }
.hito.ok b{ color:var(--ink); }
.hito span{ display:block; font-size:.78rem; color:var(--g5); margin-top:3px; }

/* ===================== variantes ===================== */
.varsel{ margin-top:22px; padding-top:22px; border-top:1px solid var(--g1); }
.varsel-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.varsel-top b{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g5); }
.varsel-top span{ font-size:.88rem; font-weight:700; color:var(--ink); }
.swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.sw{ width:42px; height:42px; border-radius:50%; border:2px solid var(--g1);
  background:#fff; cursor:pointer; padding:3px; position:relative; transition:.15s; }
.sw span{ display:block; width:100%; height:100%; border-radius:50%; }
.sw:hover{ border-color:var(--g3); transform:translateY(-2px); }
.sw.on{ border-color:var(--ink); }
.sw.agotado{ opacity:.4; cursor:not-allowed; }
.sw.agotado::after{ content:""; position:absolute; inset:-1px; border-radius:50%;
  background:linear-gradient(to bottom right, transparent 47%, #B3261E 47%, #B3261E 53%, transparent 53%); }
.sizes{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.sz{ border:1.5px solid var(--g1); background:#fff; border-radius:10px;
  padding:11px 18px; font-size:.86rem; font-weight:600; color:var(--g7); cursor:pointer; transition:.15s; }
.sz:hover{ border-color:var(--g3); }
.sz.on{ border-color:var(--ink); background:var(--wash); color:var(--ink); }
.sz.agotado{ opacity:.45; cursor:not-allowed; text-decoration:line-through; }
.sz small{ font-size:.7rem; font-weight:700; text-decoration:none; display:block; }
.varsel-stock{ font-size:.8rem; color:var(--g5); margin-top:12px; }
.varsel-stock.poco{ color:#8A5200; font-weight:700; }
.varsel-stock.cero{ color:#B3261E; font-weight:700; }

/* etiqueta de variantes en la tarjeta */
.prod .vtag{ font-size:.7rem; font-weight:700; color:var(--g5); }
.prod .minis{ display:flex; gap:4px; margin-top:6px; }
.prod .minis i{ width:14px; height:14px; border-radius:50%; border:1px solid var(--g1); display:block; }
.prod .minis em{ font-size:.66rem; color:var(--g5); font-style:normal; align-self:center; margin-left:3px; }
.ci .vari{ display:block; font-size:.74rem; color:var(--ink); font-weight:700; margin-top:2px; }

/* ===================== menú móvil ===================== */
.burger{ display:none; border:0; background:transparent; cursor:pointer;
  color:var(--ink); padding:6px; margin-right:-4px; }
@media (max-width:900px){
  .burger{ display:block; order:-1; }
  .nav{ display:none; }
}

.mmenu{
  position:fixed; top:0; left:0; bottom:0; width:min(340px,86vw); z-index:300;
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(-102%); transition:transform .28s ease;
  box-shadow:10px 0 40px rgba(0,0,0,.2);
}
.mmenu.open{ transform:none; }
.mm-head{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--g1); flex:none; }
.mm-head b{ font-size:1.05rem; color:var(--ink); }
.mm-x{ border:0; background:transparent; font-size:1.6rem; line-height:1;
  cursor:pointer; color:var(--g5); padding:0 4px; }
.mm-body{ flex:1; overflow-y:auto; padding-bottom:20px; }

.mm-l{ display:block; padding:15px 20px; font-size:.92rem; font-weight:600;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--g1); }
.mm-l:hover{ background:var(--wash); }
.mm-l.sub{ padding-left:32px; font-weight:400; font-size:.87rem; color:var(--g7); }
.mm-l.sub span{ font-size:.72rem; color:var(--g3); }

.mm-g{ border-bottom:1px solid var(--g1); }
.mm-g > summary{
  list-style:none; cursor:pointer; padding:15px 20px;
  font-size:.92rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.mm-g > summary::-webkit-details-marker{ display:none; }
.mm-g > summary::after{
  content:""; width:8px; height:8px; margin-left:10px; flex:none;
  border-right:2px solid var(--g5); border-bottom:2px solid var(--g5);
  transform:rotate(45deg); transition:transform .2s;
}
.mm-g[open] > summary::after{ transform:rotate(-135deg); }
.mm-g[open] > summary{ background:var(--wash); }
.mm-g .mm-l{ border-bottom:0; }
.mm-g .mm-l:last-child{ border-bottom:1px solid var(--g1); }

.mm-foot{ display:flex; flex-direction:column; gap:10px; padding:22px 20px; }
.mm-foot .btn{ width:100%; }

/* ===================== recompensas por puntos ===================== */
.rws{ display:grid; gap:14px; margin-top:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.rw{ border:1px solid var(--g1); border-radius:var(--r); padding:20px 18px 22px; background:#fff;
  display:flex; flex-direction:column; gap:10px; }
.rw.listo{ border-color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.07); }
.rw-top{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; }
.rw-ic{ font-size:1.5rem; line-height:1; }
.rw-t b{ display:block; font-size:.95rem; color:var(--ink); line-height:1.3; }
.rw-meta{ display:block; font-size:.72rem; color:var(--g5); margin-top:3px; }
.rw-p{ font-size:1.2rem; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; text-align:right; }
.rw-p small{ display:block; font-size:.6rem; font-weight:700; color:var(--g5); letter-spacing:.08em; }
.rw-d{ font-size:.83rem; color:var(--g5); }
.rw-barra{ height:6px; background:var(--g1); border-radius:999px; overflow:hidden; }
.rw-barra i{ display:block; height:100%; background:var(--ink); border-radius:999px; }
.rw-est{ font-size:.78rem; color:var(--g5); }
.rw .btn{ margin-top:auto; }

/* ===================== panel administrativo ===================== */
.adm{ display:grid; min-height:100vh; }
@media (min-width:900px){ .adm{ grid-template-columns:252px 1fr; } }
.adm-side{ background:var(--ink); color:var(--g3); display:flex; flex-direction:column; }
.adm-logo{ padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.14); }
.adm-logo b{ display:block; color:#fff; font-size:1.1rem; font-weight:800; letter-spacing:.1em; }
.adm-logo span{ display:block; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g5); margin-top:5px; }
.adm-nav{ flex:1; overflow-y:auto; padding-block:8px; }
.adm-nav a{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px; font-size:.87rem; color:var(--g3); text-decoration:none; }
.adm-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.adm-nav a.on{ background:#fff; color:var(--ink); font-weight:700; }
.adm-nav em{ font-style:normal; font-size:.72rem; color:var(--g5); font-variant-numeric:tabular-nums; }
.adm-nav a.on em{ color:var(--g5); }
.adm-foot{ padding:16px 18px; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:9px; }
.adm-foot .btn{ border-color:rgba(255,255,255,.4); color:#fff; }
.adm-foot .btn:hover{ background:#fff; color:var(--ink); }

.adm-body{ background:var(--body); padding:clamp(20px,3vw,34px); min-width:0; }
.adm-top{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:flex-end;
  padding-bottom:20px; border-bottom:1px solid var(--g1); margin-bottom:22px; }
.adm-top h1{ font-size:clamp(1.4rem,2.8vw,1.9rem); font-weight:800; }
.adm-top p{ font-size:.85rem; color:var(--g5); margin-top:6px; }

.adm-aviso{ margin-top:22px; border:1px dashed var(--g3); border-radius:var(--r);
  padding:20px 22px; background:#fff; }
.adm-aviso b{ color:var(--ink); font-size:.92rem; }
.adm-aviso p{ font-size:.85rem; color:var(--g5); margin-top:7px; }

.adm-lista{ border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff; }
.adm-fila{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--g1); }
.adm-fila:last-child{ border-bottom:0; }
.adm-fila.off{ opacity:.5; }
.adm-ord{ display:flex; flex-direction:column; gap:2px; }
.adm-ord button{ border:1px solid var(--g1); background:#fff; cursor:pointer; width:24px; height:17px;
  font-size:.5rem; line-height:1; color:var(--g5); border-radius:4px; padding:0; }
.adm-ord button:hover{ border-color:var(--ink); color:var(--ink); }
.adm-t{ min-width:0; }
.adm-t b{ display:block; font-size:.92rem; color:var(--ink); }
.adm-t span{ display:block; font-size:.76rem; color:var(--g5); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-acc{ display:flex; align-items:center; gap:10px; flex:none; }
.sw-onoff{ width:42px; height:24px; border-radius:999px; border:0; background:var(--g3);
  cursor:pointer; padding:3px; display:flex; transition:background .2s; }
.sw-onoff i{ width:18px; height:18px; border-radius:50%; background:#fff; display:block;
  transition:transform .2s; }
.sw-onoff.on{ background:var(--ink); }
.sw-onoff.on i{ transform:translateX(18px); }
@media (max-width:620px){
  .adm-fila{ grid-template-columns:auto 1fr; }
  .adm-acc{ grid-column:2; justify-content:flex-start; }
}

.adm-edit{ position:fixed; top:0; right:0; bottom:0; width:min(430px,94vw); z-index:320;
  background:#fff; display:flex; flex-direction:column; transform:translateX(102%);
  transition:transform .28s ease; box-shadow:-10px 0 40px rgba(0,0,0,.2); }
.adm-edit.open{ transform:none; }
.adm-edit .drawer-foot{ display:grid; grid-template-columns:1fr auto; gap:10px; }
.adm-edit .drawer-foot .btn{ margin-top:0; }
.adm-edit textarea, .adm-edit input, .adm-edit select{
  font:inherit; font-size:.92rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--g1); border-radius:10px; padding:11px 13px; width:100%; }
.adm-edit textarea:focus, .adm-edit input:focus, .adm-edit select:focus{
  outline:none; border-color:var(--ink); }
.adm-edit .field label{ color:var(--ink); }

/* ===================== página de marca ===================== */
.mk-hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.mk-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.mk-hero .wrap{ position:relative; z-index:2; padding-block:clamp(44px,6vw,86px); }
.mk-hero .cl{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g3); font-weight:700; }
.mk-hero h1{ font-size:clamp(2rem,5vw,3.4rem); font-weight:800; color:#fff; margin-top:14px; letter-spacing:.02em; }
.mk-hero p{ color:var(--g3); font-size:1rem; margin-top:14px; max-width:52ch; }
.mk-sub{ display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:9px 18px;
  font-size:.82rem; color:#fff; }
.mk-cifras{ display:grid; gap:1px; background:var(--g1); border-block:1px solid var(--g1); }
@media (min-width:640px){ .mk-cifras{ grid-template-columns:repeat(3,1fr); } }
.mk-cif{ background:#fff; padding:22px 20px; }
.mk-cif b{ display:block; font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.mk-cif span{ font-size:.78rem; color:var(--g5); }

/* ===================== perfil público ===================== */
.pf-hero{ position:relative; overflow:hidden; background:var(--wash);
  border-bottom:1px solid var(--g1); }
.pf-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; }
.pf-hero .wrap{ position:relative; z-index:2; padding-block:clamp(34px,4.5vw,60px);
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.pf-av{ width:104px; height:104px; border-radius:50%; overflow:hidden; position:relative;
  border:4px solid #fff; box-shadow:0 8px 24px rgba(0,0,0,.14); flex:none; background:var(--g1); }
.pf-av canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:1; }
.pf-id{ min-width:0; }
.pf-id .cl{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g5); font-weight:700; }
.pf-id h1{ font-size:clamp(1.6rem,3.6vw,2.4rem); font-weight:800; margin-top:8px; }
.pf-id .loc{ font-size:.9rem; color:var(--g5); margin-top:6px; }
.pf-id .cod{ display:inline-block; margin-top:12px; font-size:.72rem; font-weight:800;
  letter-spacing:.1em; background:var(--ink); color:#fff; border-radius:999px; padding:6px 14px; }
.pf-acc{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.wa-btn{ display:inline-flex; align-items:center; gap:9px; background:#1FAF62; color:#fff;
  border-radius:999px; padding:13px 24px; font-size:.86rem; font-weight:700;
  text-decoration:none; border:2px solid #1FAF62; }
.wa-btn:hover{ background:#178a4e; border-color:#178a4e; }
.pf-aviso{ background:var(--ink); color:var(--g3); }
.pf-aviso .wrap{ padding-block:13px; font-size:.78rem; text-align:center; }
.pf-aviso b{ color:#fff; }

/* selector de favoritos en Mi negocio */
.favs{ display:grid; gap:10px; margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.fav{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:center;
  border:1.5px solid var(--g1); border-radius:12px; padding:12px 14px; cursor:pointer; }
.fav.on{ border-color:var(--ink); background:var(--wash); }
.fav input{ width:17px; height:17px; accent-color:var(--ink); }
.fav b{ display:block; font-size:.85rem; color:var(--ink); line-height:1.3; }
.fav span{ font-size:.72rem; color:var(--g5); }

/* aviso de puntos para quien todavía no es colaborador */
.pts-nota{ font-size:.82rem; color:var(--g5); margin-top:10px;
  background:var(--wash); border-radius:8px; padding:11px 14px; }
.pts-nota strong{ color:var(--ink); }
.pts-nota a{ color:var(--ink); font-weight:700; text-underline-offset:3px; }

/* ===================== detalle de pedido centrado ===================== */
.ped-caja{ max-width:720px; margin-inline:auto; padding-block:clamp(24px,3vw,44px); }
.ped-caja .hint2{ text-align:center; color:var(--g5); font-size:.87rem; margin-top:10px; }
.ped-caja .cko-nav{ justify-content:center; }

/* ===================== giros del kit ===================== */
.giros{ display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .giros{ grid-template-columns:repeat(4,1fr); } }
.giro{ border:1.5px solid var(--g1); border-radius:14px; background:#fff; cursor:pointer;
  padding:0 0 16px; overflow:hidden; text-align:left; transition:.18s; }
.giro:hover{ border-color:var(--g3); }
.giro.on{ border-color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.09); }
.giro-ph{ display:block; position:relative; aspect-ratio:16/9; background:var(--ink); overflow:hidden; }
.giro-ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.giro b{ display:block; font-size:.9rem; color:var(--ink); padding:14px 14px 0; }
.giro span:not(.giro-ph){ display:block; font-size:.75rem; color:var(--g5); padding:4px 14px 0; }

/* ===================== comparativa de beneficios ===================== */
.bencmp{ display:grid; gap:18px; margin-top:clamp(26px,3.4vw,42px); align-items:stretch; }
@media (min-width:860px){ .bencmp{ grid-template-columns:1fr 1.05fr; } }
.bc{ position:relative; border:1.5px solid var(--g1); border-radius:var(--r);
  background:#fff; padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.bc.destacada{ border-color:var(--ink); box-shadow:0 12px 36px rgba(0,0,0,.1); }
.bc-flag{ position:absolute; top:-12px; left:clamp(24px,3vw,34px); background:var(--ink); color:#fff;
  font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; padding:6px 14px; }
.bc-head{ padding-bottom:18px; border-bottom:1px solid var(--g1); }
.bc-tag{ display:inline-block; font-size:.66rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--g5); }
.bc-head b{ display:block; font-size:clamp(1.15rem,2.2vw,1.45rem); color:var(--ink);
  font-weight:800; margin-top:8px; }
.bc-sub{ display:block; font-size:.82rem; color:var(--g5); margin-top:5px; }
.bc-gr{ font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g5); margin-top:22px; }
.bc ul{ margin-top:10px; }
/* La viñeta va absoluta, no como celda de rejilla.
   Con display:grid cada hijo del <li> ocupaba su propia celda: un
   <strong> seguido de texto suelto partía el renglón en dos y el
   texto caía debajo de la viñeta. */
.bc li{ position:relative; padding-left:23px; padding-block:9px;
  font-size:.88rem; line-height:1.55; color:var(--g7); }
.bc li::before{ content:"✦"; position:absolute; left:0; top:9px;
  color:var(--ink); font-size:.75rem; line-height:1.55; }
.bc li strong{ color:var(--ink); }
.bc .btn{ margin-top:auto; width:100%; }
.bc ul + .btn{ margin-top:26px; }
.bc-nota{ text-align:center; font-size:.83rem; color:var(--g5); margin-top:20px; }

/* ===================== armador de kits ===================== */
.kb-tot{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  background:var(--wash); border-radius:10px; padding:12px 15px; margin-bottom:12px; font-size:.8rem; color:var(--g5); }
.kb-tot b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.kb-tot .ok{ color:#0B6B44; font-weight:700; }
.kb-tot .mal{ color:#B3261E; font-weight:700; }
.kb{ max-height:330px; overflow-y:auto; border:1.5px solid var(--g1); border-radius:10px; }
.kb-i{ display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  padding:10px 13px; border-bottom:1px solid var(--g1); cursor:pointer; }
.kb-i:last-child{ border-bottom:0; }
.kb-i.on{ background:var(--wash); }
.kb-i input[type=checkbox]{ width:16px; height:16px; accent-color:var(--ink); }
.kb-n b{ display:block; font-size:.83rem; color:var(--ink); line-height:1.3; }
.kb-n span{ font-size:.72rem; color:var(--g5); }
.kb-q{ width:62px; text-align:center; font:inherit; font-size:.82rem;
  border:1px solid var(--g1); border-radius:8px; padding:6px 4px; }
.kb-q:focus{ outline:none; border-color:var(--ink); }

/* precio de colaborador en la ficha */
.precio-colab{ margin-top:12px; background:var(--ink); color:#fff; border-radius:10px;
  padding:12px 16px; font-size:.88rem; }
.precio-colab b{ font-size:1.1rem; font-variant-numeric:tabular-nums; }
.precio-colab span{ font-size:.76rem; color:var(--g3); }
.tot.desc b{ color:#0B6B44; }

/* ===================== novedades ===================== */
.nv-lista{ display:grid; gap:18px; margin-top:clamp(24px,3vw,40px); }
@media (min-width:760px){ .nv-lista{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .nv-lista{ grid-template-columns:repeat(3,1fr); } }
.nv-i{ border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff;
  text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.nv-i:hover{ box-shadow:0 14px 30px rgba(0,0,0,.09); transform:translateY(-3px); }
.nv-ph{ position:relative; aspect-ratio:16/10; background:var(--ink); overflow:hidden; display:block; }
.nv-ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.nv-t{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:7px; flex:1; }
.nv-t h3{ font-size:1.05rem; }
.nv-t p{ font-size:.85rem; color:var(--g5); }
.nv-t .go{ margin-top:auto; padding-top:10px; }

.nota{ max-width:720px; margin-inline:auto; padding-inline:var(--gutter);
  padding-block:clamp(26px,3.4vw,50px); }
.nota .lbl{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g5); }
.nota h1{ font-size:clamp(1.7rem,3.8vw,2.6rem); font-weight:800; margin-top:12px; }
.nota-sum{ font-size:1.05rem; color:var(--g5); margin-top:14px; }
.nota-ph{ position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:var(--ink); margin-block:26px; }
.nota-ph canvas{ position:absolute; inset:0; width:100%; height:100%; }
.nota p:not(.lbl):not(.nota-sum){ font-size:.98rem; color:var(--g7); margin-top:18px; line-height:1.8; }
.nota .cko-nav{ margin-top:34px; }

/* ===================== páginas de contenido: columna de lectura ===================== */
#cms .cathero .wrap{ max-width:860px; margin-inline:auto; text-align:center; }
#cms .cathero p{ margin-inline:auto; }
#cms section.sec.wrap{ max-width:900px; }
#cms .sec-head{ text-align:center; display:block; }
#cms .sec-head h2{ margin-inline:auto; }
#cms .lede{ max-width:66ch; margin-inline:auto; }
#cms .shead{ text-align:center; }
#cms .acc{ max-width:760px; margin-inline:auto; }
#cms .tabla{ max-width:700px; margin-inline:auto; }
#cms .steps{ max-width:820px; margin-inline:auto; }
#cms .why{ max-width:900px; margin-inline:auto; }
#cms .opp .wrap{ max-width:720px; }

/* la ficha de marca también con su columna */
#mk .sec-head{ text-align:center; display:block; }
#mk .sec-head h2, #mk .sec-head .lede{ margin-inline:auto; }

/* perfil público: recomendados centrados */
#pf .shead{ text-align:center; }

/* páginas transaccionales: contenedor más estrecho para que no se abran de más */
.cko{ max-width:1060px; margin-inline:auto; }
.acct{ max-width:1080px; margin-inline:auto; }
.auth{ max-width:1080px; margin-inline:auto; }
#benef .bencmp{ max-width:1000px; margin-inline:auto; }
#benef .shead{ max-width:60ch; }

/* ===================== cupones ===================== */
.cup-form{ display:flex; gap:8px; margin-block:16px; }
.cup-form input{ flex:1; min-width:0; font:inherit; font-size:.85rem;
  border:1.5px solid var(--g1); border-radius:10px; padding:10px 13px; }
.cup-form input:focus{ outline:none; border-color:var(--ink); }
.cup-msg{ font-size:.78rem; color:#B3261E; font-weight:700; margin-bottom:12px; }
.cup-on{ display:flex; align-items:center; gap:10px; margin-block:16px;
  border:1.5px dashed var(--ink); border-radius:10px; padding:11px 14px; }
.cup-on b{ font-size:.84rem; color:var(--ink); letter-spacing:.06em; }
.cup-on span{ font-size:.78rem; color:var(--g5); }
.cup-on button{ margin-left:auto; border:0; background:transparent; cursor:pointer;
  font-size:.76rem; font-weight:700; color:#B3261E; text-decoration:underline; }
.badge2.can{ background:#FDECEA; color:#B3261E; }

/* pedidos en el panel */
.ped-adm{ grid-template-columns:1fr auto auto; }
.ped-acc{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ped-acc select, .ped-acc input{ font:inherit; font-size:.8rem; border:1px solid var(--g1);
  border-radius:8px; padding:7px 10px; background:#fff; }
.ped-acc select:focus, .ped-acc input:focus{ outline:none; border-color:var(--ink); }
.ped-acc input{ width:150px; }
@media (max-width:760px){ .ped-adm{ grid-template-columns:1fr auto; } .ped-acc{ grid-column:1/-1; } }

/* ===================== reseñas ===================== */
.estrellas{ display:inline-flex; gap:1px; }
.est{ color:var(--g3); font-size:.95rem; line-height:1; }
.est.on{ color:#E8A317; }
.estrellas.grande .est{ font-size:1.5rem; }
.estrellas.mini .est{ font-size:.75rem; }

.res-link{ display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  text-decoration:none; font-size:.82rem; color:var(--g7); }
.res-link:hover{ color:var(--ink); }
.card-res{ display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--g5); }

.res{ margin-top:clamp(36px,4.5vw,60px); padding-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--g1); }
.res-top{ display:grid; gap:clamp(20px,3vw,44px); align-items:center; }
@media (min-width:640px){ .res-top{ grid-template-columns:auto 1fr; } }
.res-prom{ text-align:center; }
.res-prom b{ display:block; font-size:clamp(2.4rem,5vw,3.2rem); font-weight:800;
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums; }
.res-prom .estrellas{ margin-top:8px; }
.res-prom span{ display:block; font-size:.8rem; color:var(--g5); margin-top:6px; }
.res-barras{ display:grid; gap:6px; }
.res-b{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  font-size:.76rem; color:var(--g5); }
.res-b i{ display:block; height:7px; background:var(--g1); border-radius:999px; overflow:hidden; }
.res-b em{ display:block; height:100%; background:#E8A317; border-radius:999px; }
.res-c{ font-variant-numeric:tabular-nums; min-width:1.4em; text-align:right; }

.res-form{ margin-top:clamp(24px,3vw,36px); border:1.5px solid var(--g1);
  border-radius:var(--r); padding:22px 20px; background:#fff; }
.res-form b{ font-size:.95rem; color:var(--ink); }
.res-form p{ font-size:.82rem; color:var(--g5); margin-top:5px; }
.res-pick{ display:flex; gap:4px; margin-top:14px; }
.res-pick button{ border:0; background:transparent; cursor:pointer; font-size:1.7rem;
  line-height:1; color:var(--g3); padding:0 2px; }
.res-pick button.on{ color:#E8A317; }
.res-form textarea{ width:100%; margin-top:14px; font:inherit; font-size:.9rem;
  border:1.5px solid var(--g1); border-radius:10px; padding:12px 14px; resize:vertical; }
.res-form textarea:focus{ outline:none; border-color:var(--ink); }
.res-err{ font-size:.8rem; color:#B3261E; font-weight:700; margin-top:10px; }
.res-form .btn{ margin-top:14px; }
.res-nota{ margin-top:22px; font-size:.85rem; color:var(--g5);
  background:var(--wash); border-radius:10px; padding:14px 16px; }
.res-nota a{ color:var(--ink); font-weight:700; }

.res-lista{ margin-top:clamp(24px,3vw,36px); display:grid; gap:1px; background:var(--g1);
  border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; }
.res-i{ background:#fff; padding:20px 22px; }
.res-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.res-h b{ font-size:.9rem; color:var(--ink); }
.res-ver{ font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#0B6B44; background:#E6F4EC; border-radius:999px; padding:4px 10px; }
.res-meta{ font-size:.76rem; color:var(--g5); margin-top:5px; }
.res-txt{ font-size:.9rem; color:var(--g7); margin-top:10px; line-height:1.7; }

/* ===================== favoritos ===================== */
.fav-btn{ position:absolute; top:10px; right:10px; z-index:3; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--g1); background:rgba(255,255,255,.94);
  cursor:pointer; display:grid; place-items:center; color:var(--g5); transition:.18s; }
.fav-btn:hover{ color:var(--ink); border-color:var(--ink); transform:scale(1.06); }
.fav-btn.on{ color:#D6336C; border-color:#D6336C; }
.pdp-shot .fav-btn{ top:16px; right:auto; left:16px; width:38px; height:38px; }
.pdp-shot .pdp-flag{ left:auto; right:16px; }
.agotado-tag{ position:absolute; bottom:10px; left:10px; z-index:2;
  font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:#fff; border-radius:999px; padding:5px 11px; }

/* ===================== avísame cuando llegue ===================== */
.avisame{ margin-top:22px; border:1.5px dashed var(--g3); border-radius:12px;
  padding:20px 18px; background:var(--wash); }
.avisame b{ display:block; font-size:.95rem; color:var(--ink); }
.avisame p{ font-size:.84rem; color:var(--g5); margin-top:6px; }
.av-form{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.av-form input{ flex:1; min-width:180px; font:inherit; font-size:.88rem;
  border:1.5px solid var(--g1); border-radius:10px; padding:11px 13px; background:#fff; }
.av-form input:focus{ outline:none; border-color:var(--ink); }
.av-msg{ font-size:.8rem; color:#B3261E; font-weight:700; margin-top:10px; }
.av-ok{ font-size:.85rem; color:#0B6B44; font-weight:700; margin-top:12px; }

/* ===================== galería de producto ===================== */
.gal{ display:grid; gap:12px; }
@media (min-width:560px){ .gal{ grid-template-columns:78px 1fr; } }
.gal-thumbs{ display:flex; gap:10px; order:2; overflow-x:auto; scrollbar-width:none; }
.gal-thumbs::-webkit-scrollbar{ display:none; }
@media (min-width:560px){ .gal-thumbs{ order:0; flex-direction:column; overflow:visible; } }
.gt{ width:72px; height:82px; flex:none; border:1.5px solid var(--g1); border-radius:10px;
  background:var(--wash); cursor:pointer; padding:8px; display:grid; place-items:center; }
.gt svg{ max-height:100%; width:auto; }
.gt:hover{ border-color:var(--g3); }
.gt.on{ border-color:var(--ink); }
.gal-main{ position:relative; background:var(--wash); border-radius:var(--r);
  aspect-ratio:1/1; display:grid; place-items:center; padding:clamp(24px,4vw,56px); order:1; }
.gal-img{ display:grid; place-items:center; width:100%; height:100%; }
.gal-img svg{ max-height:100%; width:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.14)); }
.gal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--g1);
  background:rgba(255,255,255,.94); cursor:pointer; font-size:1.2rem; color:var(--ink);
  display:grid; place-items:center; }
.gal-nav:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.gal-nav.prev{ left:10px; } .gal-nav.next{ right:10px; }
.gal-dots{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2; }
.gal-dots span{ width:7px; height:7px; border-radius:50%; background:var(--g3); }
.gal-dots span.on{ background:var(--ink); width:20px; border-radius:999px; }
.gal-main .fav-btn{ top:14px; left:14px; right:auto; }
.gal-main .pdp-flag{ left:auto; right:14px; }

/* precio por medida y estado */
.pdp-medida{ font-size:.82rem; color:var(--g5); margin-top:6px; }
.pdp-stock{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:.84rem; font-weight:600; }
.pdp-stock i{ width:9px; height:9px; border-radius:50%; flex:none; }
.pdp-stock.si{ color:#0B6B44; } .pdp-stock.si i{ background:#17A05E; }
.pdp-stock.poco{ color:#8A5200; } .pdp-stock.poco i{ background:#E8A317; }
.pdp-stock.no{ color:#B3261E; } .pdp-stock.no i{ background:#B3261E; }

/* ===================== beneficios en tarjetas ===================== */
.ben3{ margin-top:clamp(34px,4.4vw,56px); }
.ben3-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:700px){ .ben3-grid{ grid-template-columns:repeat(3,1fr); } }
.b3{ border:1px solid var(--g1); border-radius:var(--r); padding:24px 22px; background:#fff; }
.b3 b{ display:block; font-size:1.05rem; color:var(--ink); }
.b3 p{ font-size:.86rem; color:var(--g5); margin-top:10px; line-height:1.65; }

/* ===================== preguntas del producto ===================== */
.pfaq{ margin-top:clamp(34px,4.4vw,56px); }
.pfaq h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:300; }
.pfaq h2 strong{ font-weight:800; }

/* ===================== barra fija de compra en móvil ===================== */
.buy-bar{ display:none; }
@media (max-width:760px){
  .buy-bar{ display:flex; position:fixed; left:0; right:0; z-index:130;
    bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97); border-top:1px solid var(--g1);
    box-shadow:0 -6px 20px rgba(0,0,0,.08); align-items:center; gap:12px; }
  .bb-i{ min-width:0; flex:1; }
  .bb-i b{ display:block; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .bb-i span{ display:block; font-size:.74rem; color:var(--g5);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .buy-bar .btn{ flex:none; padding-inline:24px; }
  #view-producto{ padding-bottom:86px; }
  .wa{ bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
}

/* la galería no debe empujar el ancho en móvil */
.gal, .gal > *, .gal-main, .gal-img, .gal-thumbs{ min-width:0; max-width:100%; }
.gal-img svg{ max-width:100%; }
.pdp, .pdp > *, .pdp-media, .pdp-info{ min-width:0; }
@media (max-width:559px){
  .gal-thumbs{ padding-bottom:4px; }
  .gt{ width:62px; height:70px; }
}

/* --- bloques de abajo de la ficha: columna de lectura centrada --- */
#pdp .acc{ max-width:860px; margin-inline:auto; }
#pdp .pfaq{ max-width:860px; margin-inline:auto; }
#pdp .pfaq h2{ text-align:center; }
#pdp .ben3-grid{ max-width:1120px; margin-inline:auto; }
#pdp .res{ max-width:1040px; margin-inline:auto; }

/* ================= PANEL · PUNTOS Y SIMULADOR ================= */
.adm-h3{ font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--g5); margin:34px 0 14px; }
.adm-h3:first-child{ margin-top:0; }
.pts-campos{ display:grid; gap:18px 22px; margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.pts-nota2{ color:var(--g5); font-size:.87rem; line-height:1.6; max-width:680px; margin-bottom:16px; }

.simw{ margin-top:18px; overflow-x:auto; border:1px solid var(--g1); border-radius:var(--r); }
table.sim{ width:100%; border-collapse:collapse; font-size:.86rem; min-width:720px; }
table.sim th{ text-align:right; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--g5); font-weight:800; padding:13px 14px; background:var(--wash);
  border-bottom:1px solid var(--g1); white-space:nowrap; }
table.sim th:first-child{ text-align:left; }
table.sim td{ text-align:right; padding:13px 14px; border-bottom:1px solid var(--g1);
  white-space:nowrap; color:var(--g6); }
table.sim td:first-child{ text-align:left; color:var(--ink); }
table.sim tbody tr:last-child td{ border-bottom:0; }
table.sim td.neto{ font-weight:800; color:var(--ink); }
table.sim td.neto span{ display:block; font-weight:600; font-size:.74rem; color:var(--g5); }
table.sim tr.bien td:first-child{ box-shadow:inset 3px 0 0 #1f9d55; }
table.sim tr.ojo  td:first-child{ box-shadow:inset 3px 0 0 #c98a00; }
table.sim tr.mal  td:first-child{ box-shadow:inset 3px 0 0 #c0392b; }
table.sim tr.mal td.neto{ color:#c0392b; }

.sim-leyenda{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:12px; font-size:.78rem; color:var(--g5); }
.sim-leyenda i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-left:14px; }
.sim-leyenda i:first-child{ margin-left:0; }
.sim-leyenda i.bien{ background:#1f9d55; }
.sim-leyenda i.ojo{ background:#c98a00; }
.sim-leyenda i.mal{ background:#c0392b; }

/* --- etiquetas de la tarjeta: apiladas y fuera del corazón --- */
.prod .tags{ position:absolute; top:12px; left:12px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  max-width:calc(100% - 62px); }
.prod .tags:empty{ display:none; }
.prod .tags .tag, .prod .tags .chip{ position:static; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- comisión por invitado --- */
.sw-row{ display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  border:1px solid var(--g1); border-radius:var(--r); padding:16px 18px; margin-bottom:18px; }
.sw-row input{ margin-top:3px; width:17px; height:17px; accent-color:var(--ink); flex:none; }
.sw-row b{ display:block; font-size:.92rem; }
.sw-row span span{ display:block; font-size:.82rem; color:var(--g5); margin-top:3px; line-height:1.5; }
.sim-tit{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--g5); margin:26px 0 0; }
.sim-off{ margin-top:14px; border:1px dashed var(--g1); border-radius:var(--r);
  padding:18px; color:var(--g5); font-size:.87rem; line-height:1.6; }

/* --- campos del panel de puntos: label arriba, ayuda abajo --- */
.pts-campos .field, #pf-sim-w{ display:block; }
.pts-campos .field label, #pf-sim-w label{ display:block; font-size:.76rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
.pts-campos .field input, .pts-campos .field select,
#pf-sim-w input{ display:block; width:100%; border:1px solid var(--g1); border-radius:10px;
  padding:11px 13px; font:inherit; font-size:.92rem; color:var(--ink); background:#fff; }
.pts-campos .field input:focus, .pts-campos .field select:focus,
#pf-sim-w input:focus{ outline:none; border-color:var(--ink); }
.pts-campos .field .hint{ display:block; font-size:.78rem; color:var(--g5);
  line-height:1.5; margin-top:7px; }

/* --- aviso de datos que apuntan a algo que no existe --- */
.adm-aviso.malo{ border-color:#e5b4ae; background:#fdf4f3; }
.adm-aviso.malo b{ color:#a3342a; }
.tax-list{ margin-top:12px; display:flex; flex-direction:column; gap:7px; list-style:none; padding:0; }
.tax-list li{ font-size:.84rem; color:var(--g6); line-height:1.5; }
.tax-list li b{ color:var(--ink); font-weight:700; }
.tax-list li span{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--g5); border:1px solid var(--g1); border-radius:999px; padding:2px 8px; margin:0 4px; }
.adm-aviso.bueno{ border-color:#b6ddc4; background:#f2faf5; }
.adm-aviso.bueno b{ color:#1f7a45; }

/* --- la galería manda sobre el dibujo, no al revés ---
   sin esto el svg estira la caja y el envase queda gigante */
.gal-main{ min-height:0; overflow:hidden; }
.gal-img{ min-height:0; min-width:0; }
.gal-img svg{ width:100%; height:100%; max-width:100%; max-height:100%; display:block; }

/* ---------- carrusel del inicio: apilado por rejilla ----------
   Antes cada slide era position:absolute dentro de una caja de alto
   fijo. En teléfono el texto y los botones no caben y se cortaban.
   Apilados en la misma celda, la caja crece con el slide más alto. */
.slides{ display:grid; }
.slide{ grid-area:1/1; position:relative; inset:auto; }
.sin{ width:100%; }
@media (max-width:939px){
  .slides{ min-height:0; }
  /* Una sola columna de todo el ancho: si no, la foto del banner quedaba corrida a la izquierda. */
  .sin{ padding-block:clamp(26px,6vw,40px); gap:clamp(22px,5vw,32px); grid-template-columns:minmax(0, 1fr); }
  .sin > .plate{ width:100%; justify-self:stretch; }
  .slide .cta{ margin-top:22px; }
  .slide .cta .btn{ flex:1 1 auto; justify-content:center; text-align:center; }
}

/* ---------- miga de pan en teléfono ----------
   La cadena completa no cabe en 375px y empujaba toda la página
   a scroll horizontal. Ahora se desliza dentro de su propia franja. */
.crumb .wrap{ flex-wrap:nowrap; min-width:0; }
.crumb a, .crumb span{ white-space:nowrap; flex:none; }
@media (max-width:760px){
  .crumb{ overflow:hidden; }
  .crumb .wrap{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .crumb .wrap::-webkit-scrollbar{ display:none; }
  /* el último tramo no se corta a la mitad */
  .crumb .wrap > :last-child{ padding-right:var(--gutter); }
}

/* ---------- paso a paso en teléfono ----------
   min-width:140px por paso son 560px: no caben en 375. Se encogen,
   se deslizan y el paso activo se centra solo (ver centrarPaso). */
@media (max-width:620px){
  .stp{ flex:0 0 auto; min-width:0; padding:15px 14px; font-size:.78rem; }
  .steps-bar{ position:relative; }
  .steps-bar::after{ content:''; position:absolute; top:0; right:0; bottom:3px; width:34px;
    background:linear-gradient(90deg, rgba(255,255,255,0), #fff 72%); pointer-events:none; }
}

/* ---------- banner con foto ---------- */
.plate.con-foto{ background:var(--g1); }
.plate.con-foto picture, .plate.con-foto img{ position:absolute; inset:0;
  width:100%; height:100%; display:block; }
.plate.con-foto img{ object-fit:cover; object-position:center; }
/* encuadre elegido en el panel */
.plate.enc-arriba img{ object-position:center top; }
.plate.enc-abajo img{ object-position:center bottom; }
.plate.enc-completa picture img{ object-fit:contain; }
.plate.con-foto img.fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(28px) saturate(1.1); transform:scale(1.15); opacity:.55; }
.plate.con-foto{ overflow:hidden; }
@media (max-width:939px){
  /* en teléfono la foto vertical manda la altura */
  .plate.con-foto{ aspect-ratio:3/4; max-height:62vh; }
  .plate.con-foto.solo-movil{ aspect-ratio:3/4; }
}

/* ---------- campo de imagen en el panel ---------- */
.campo-img .img-caja{ margin-top:8px; border:1px solid var(--g1); border-radius:var(--r);
  padding:12px; display:grid; gap:12px; }
.campo-img .img-vista{ border-radius:10px; background:var(--wash); overflow:hidden;
  display:grid; place-items:center; aspect-ratio:2/1; }
.campo-img .img-caja.telefono .img-vista{ aspect-ratio:3/4; max-width:190px; }
.campo-img .img-vista img{ width:100%; height:100%; object-fit:cover; display:block; }
.campo-img .img-nada{ font-size:.8rem; color:var(--g5); }
.campo-img .img-acc{ display:flex; gap:8px; flex-wrap:wrap; }
.campo-img .img-subir{ cursor:pointer; }
.campo-img .img-url{ margin-top:10px; width:100%; border:1px solid var(--g1);
  border-radius:10px; padding:10px 12px; font:inherit; font-size:.86rem; }
.campo-img .img-url:focus{ outline:none; border-color:var(--ink); }
.campo-img .img-peso{ color:var(--g7); font-weight:600; }

/* ---------- elección de pasarela ---------- */
.pasarelas{ display:grid; gap:10px; margin:14px 0 16px; }
@media (min-width:560px){ .pasarelas{ grid-template-columns:1fr 1fr; } }
.pas{ border:1.5px solid var(--g1); border-radius:var(--r); padding:14px 16px;
  cursor:pointer; display:block; transition:border-color .15s, background .15s; }
.pas:hover{ border-color:var(--g3); }
.pas.on{ border-color:var(--ink); background:var(--wash); }
.pas input{ position:absolute; opacity:0; pointer-events:none; }
.pas-n{ display:block; font-weight:800; font-size:.95rem; }
.pas-d{ display:block; font-size:.79rem; color:var(--g5); margin-top:3px; line-height:1.45; }

/* ---------- simulación de la página de la pasarela ---------- */
.gw-sim{ max-width:460px; margin-inline:auto; border:1px solid var(--g1);
  border-radius:var(--r); padding:clamp(24px,4vw,36px); background:#fff; text-align:center; }
.gw-marca{ font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
.gw-dom{ font-size:.76rem; color:var(--g5); margin-top:4px; font-variant-numeric:tabular-nums; }
.gw-monto{ margin:22px 0; padding:18px; border-radius:12px; background:var(--wash); }
.gw-monto span{ display:block; font-size:.78rem; color:var(--g5); }
.gw-monto b{ display:block; font-size:1.9rem; font-weight:800; margin-top:4px; }
.gw-nota{ font-size:.82rem; color:var(--g5); line-height:1.6; }
.gw-btns{ display:grid; gap:9px; margin-top:22px; }

/* ---------- esperando la confirmación ---------- */
.done-box.esperando .spin{ width:36px; height:36px; border-radius:50%;
  border:3px solid var(--g1); border-top-color:var(--ink);
  display:block; margin:0 auto 18px; animation:girar .8s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .done-box.esperando .spin{ animation:none; } }
.tick2.mal{ background:#B3261E; }
.done-box.fallo .folio{ opacity:.7; }

/* ---------- enlaces: el subrayado se pide, no se hereda ----------
   El subrayado de un <a> lo pinta el ancestro sobre todo su contenido.
   Poner text-decoration:none en los hijos NO lo quita: hay que
   apagarlo en el propio enlace. Por eso las tarjetas de producto
   salían con el nombre y la descripción subrayados. */
a{ text-decoration:none; color:inherit; }
/* donde sí queremos subrayado, se pide a mano */
a.sub, .lede a, .acc-body a, .nov-cuerpo a, .pfaq a{
  text-decoration:underline; text-underline-offset:3px;
}

/* ===================== EDITOR DE BLOQUES ===================== */
.blq-top{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.blq{ border:1px solid var(--g1); border-radius:var(--r); margin-bottom:10px; background:#fff; }
.blq.abierto{ border-color:var(--ink); box-shadow:0 8px 26px rgba(0,0,0,.07); }
.blq-cab{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
.blq-ord{ display:flex; flex-direction:column; gap:2px; flex:none; }
.blq-ord button{ width:22px; height:17px; border:1px solid var(--g1); background:#fff;
  border-radius:5px; cursor:pointer; font-size:.52rem; color:var(--g5); line-height:1; }
.blq-ord button:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.blq-ord button:disabled{ opacity:.3; cursor:default; }
.blq-t{ flex:1; min-width:0; }
.blq-t b{ display:block; font-size:.92rem; }
.blq-t span{ display:block; font-size:.79rem; color:var(--g5); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blq-acc{ display:flex; align-items:center; gap:8px; flex:none; }
.blq-x{ width:28px; height:28px; border:1px solid var(--g1); background:#fff; border-radius:8px;
  cursor:pointer; color:var(--g5); font-size:.8rem; line-height:1; flex:none; }
.blq-x:hover{ border-color:#B3261E; color:#B3261E; }
.blq-cuerpo{ padding:6px 16px 18px; border-top:1px solid var(--g1); }
.blq-pista{ font-size:.79rem; color:var(--g5); line-height:1.5; margin:12px 0; }
.blq-campo{ margin-top:16px; }
.blq-campo label{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
.blq-campo input[type=text], .blq-campo textarea{ width:100%; border:1px solid var(--g1);
  border-radius:9px; padding:10px 12px; font:inherit; font-size:.88rem; resize:vertical; }
.blq-campo input:focus, .blq-campo textarea:focus{ outline:none; border-color:var(--ink); }
.blq-guardar{ margin-top:20px; }
.blq-mas{ margin-top:9px; }
.blq-nuevo{ margin-top:22px; padding-top:20px; border-top:1px solid var(--g1); }
.blq-nuevo label{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--g5); margin-bottom:10px; }
.blq-tipos{ display:flex; gap:8px; flex-wrap:wrap; }

/* pares: dos columnas de campos */
.pares-cab{ display:grid; grid-template-columns:1fr 1.4fr 30px; gap:8px; margin-bottom:6px; }
.pares-cab span{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g5); }
.par{ display:grid; grid-template-columns:1fr 1.4fr 30px; gap:8px; align-items:start; margin-bottom:8px; }

/* comparativa */
.cols{ display:grid; gap:14px; }
@media (min-width:820px){ .cols{ grid-template-columns:1fr 1fr; } }
.colx{ border:1px solid var(--g1); border-radius:10px; padding:14px; display:grid; gap:9px; }
.colx-cab{ display:flex; align-items:center; gap:10px; }
.colx-cab b{ flex:1; font-size:.84rem; }
.colx-dest{ display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--g5); }
.colx input[type=text]{ width:100%; border:1px solid var(--g1); border-radius:8px;
  padding:9px 11px; font:inherit; font-size:.84rem; }
.colx input:focus, .grupo textarea:focus{ outline:none; border-color:var(--ink); }
.grupos{ display:grid; gap:10px; }
.grupo{ background:var(--wash); border-radius:9px; padding:11px; }
.grupo-cab{ display:flex; gap:8px; align-items:center; }
.grupo-cab input{ flex:1; }
.grupo textarea{ width:100%; border:1px solid var(--g1); border-radius:8px;
  padding:9px 11px; font:inherit; font-size:.84rem; resize:vertical; }
.grupo .blq-pista{ margin:8px 0 6px; font-size:.74rem; }

/* ===================== PANEL: INICIO ===================== */
.ini-heads{ border:1px solid var(--g1); border-radius:var(--r); overflow-x:auto; }
.ini-cab, .ini-fila{ display:grid; grid-template-columns:190px 1fr 1fr 1.6fr;
  gap:10px; align-items:center; padding:10px 14px; min-width:820px; }
.ini-cab{ background:var(--wash); border-bottom:1px solid var(--g1); }
.ini-cab span{ font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--g5); font-weight:800; }
.ini-fila{ border-bottom:1px solid var(--g1); }
.ini-fila:last-child{ border-bottom:0; }
.ini-n{ font-size:.85rem; font-weight:700; color:var(--ink); }
.ini-fila input{ width:100%; border:1px solid var(--g1); border-radius:8px;
  padding:9px 11px; font:inherit; font-size:.84rem; }
.ini-fila input:focus{ outline:none; border-color:var(--ink); }

.cifras-cab, .cifra{ display:grid; grid-template-columns:110px 1fr 200px 30px;
  gap:8px; align-items:center; }
.cifras-cab{ margin-bottom:6px; }
.cifras-cab span{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--g5); }
.cifra{ margin-bottom:8px; }
.cifra input, .cifra select{ width:100%; border:1px solid var(--g1); border-radius:8px;
  padding:9px 11px; font:inherit; font-size:.84rem; background:#fff; }
.cifra input:disabled{ background:var(--wash); color:var(--g5); }
.cifra input:focus, .cifra select:focus{ outline:none; border-color:var(--ink); }

/* el antetítulo del bloque de oportunidad */
.kick2{ color:var(--g3); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; }

/* --- rejillas que se adaptan al número de tarjetas ---
   auto-fill deja las columnas vacías ocupando espacio: con 3 tarjetas
   en una rejilla de 4, todo quedaba recargado a la izquierda.
   auto-fit colapsa las vacías y reparte el ancho entre las que hay. */
.why, .mbrands, .tests, .rws, .favs{ justify-items:stretch; }

/* ---------- acceso al panel ---------- */
.adm-login{ max-width:420px; margin:clamp(20px,5vh,60px) auto; }
.adm-login h3{ font-size:1.3rem; font-weight:800; }
.adm-login > p{ font-size:.88rem; color:var(--g5); line-height:1.6; margin-top:8px; }
.adm-login-mal{ margin-top:14px; background:#fdf4f3; border:1px solid #e5b4ae; color:#a3342a;
  border-radius:10px; padding:11px 14px; font-size:.85rem; font-weight:600; }
.adm-login input{ width:100%; border:1px solid var(--g1); border-radius:10px;
  padding:11px 13px; font:inherit; font-size:.92rem; }
.adm-login input:focus{ outline:none; border-color:var(--ink); }
.adm-login code{ background:var(--wash); border-radius:5px; padding:1px 6px;
  font-size:.86em; font-family:ui-monospace,monospace; }
#adm-salir{ margin-top:18px; border-top:1px solid rgba(255,255,255,.14); padding-top:16px !important; }

/* ---------- el ahorro de colaborador en el checkout ---------- */
.ahorro-colab{ margin-top:14px; border:1px solid var(--g1); border-left:4px solid var(--ink);
  border-radius:10px; padding:14px 16px; background:var(--wash); }
.ahorro-colab b{ display:block; font-size:.9rem; color:var(--ink); line-height:1.45; }
.ahorro-colab p{ font-size:.83rem; color:var(--g5); margin-top:6px; line-height:1.55; }
.ahorro-colab strong{ color:var(--ink); }
.ahorro-colab a{ display:inline-block; margin-top:9px; font-size:.79rem; font-weight:700;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* ===================== FORMULARIO DE PAGO INCRUSTADO =====================
   En producción esta caja es un iframe de Stripe (Payment Element) o de
   Mercado Pago (Bricks): los campos viven en el dominio de ellos, pero
   la clienta nunca sale del sitio. Cada salto fuera pierde gente. */
.pagobox{ margin-top:16px; border:1px solid var(--g1); border-radius:var(--r);
  padding:clamp(16px,2.4vw,22px); background:#fff; }
.pg-cab{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--g1); }
.pg-marca{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.pg-seguro{ display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--g5); font-weight:600; }

.pg-campos{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:16px; }
.pg-c{ display:block; min-width:0; }
.pg-c.pg-full{ grid-column:1 / -1; }
.pg-c span{ display:block; font-size:.74rem; font-weight:700; color:var(--g6);
  margin-bottom:6px; }
.pg-c input{ width:100%; border:1px solid var(--g1); border-radius:10px;
  padding:12px 13px; font:inherit; font-size:.94rem; background:#fff;
  font-variant-numeric:tabular-nums; }
.pg-c input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,20,20,.07); }

.pg-msi, .pg-otro{ margin-top:12px; border-radius:10px; padding:12px 14px; background:var(--wash); }
.pg-msi b, .pg-otro b{ display:block; font-size:.84rem; }
.pg-msi span, .pg-otro span{ display:block; font-size:.79rem; color:var(--g5);
  margin-top:3px; line-height:1.5; }

.pg-nota{ font-size:.78rem; color:var(--g5); line-height:1.55; margin-top:14px; }
.pg-nota strong{ color:var(--ink); }

.pg-sim{ margin-top:16px; border:1px dashed var(--g3); border-radius:10px; padding:13px 15px; }
.pg-sim b{ display:block; font-size:.79rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g5); }
.pg-sim > span{ display:block; font-size:.79rem; color:var(--g5);
  margin-top:5px; line-height:1.5; }
.pg-sim-op{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }
.pg-r{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; cursor:pointer; }
.pg-r input{ accent-color:var(--ink); }

.pg-espera{ text-align:center; padding:26px 10px; }
.pg-espera .spin{ width:30px; height:30px; border-radius:50%;
  border:3px solid var(--g1); border-top-color:var(--ink);
  display:block; margin:0 auto 14px; animation:girar .8s linear infinite; }
.pg-espera b{ display:block; font-size:.98rem; }
.pg-espera p{ font-size:.82rem; color:var(--g5); margin-top:7px;
  line-height:1.55; max-width:44ch; margin-inline:auto; }

.pg-mal{ text-align:center; padding:22px 10px; }
.pg-mal b{ display:block; font-size:.98rem; color:#B3261E; }
.pg-mal p{ font-size:.83rem; color:var(--g5); margin-top:7px; line-height:1.55; }
.pg-mal .btn{ margin-top:14px; }

/* En la confirmación el resumen se oculta: la rejilla deja de ser de
   dos columnas para que el contenido no se quede pegado a la izquierda. */
.cko:has(#summary[hidden]){ grid-template-columns:1fr; max-width:720px; }

/* ---------- campos con sufijo o prefijo ----------
   Se escribe 25 y se ve "25 %". El panel deja de pedir el formato
   interno del dato ("0.25 = 25%") y pide el número que la persona
   tiene en la cabeza. */
.con-sufijo, .con-prefijo{ display:flex; align-items:stretch; }
.con-sufijo input, .con-prefijo input{ flex:1; min-width:0; }
.con-sufijo i, .con-prefijo i{ display:grid; place-items:center; padding:0 13px;
  font-style:normal; font-size:.9rem; font-weight:700; color:var(--g5);
  background:var(--wash); border:1px solid var(--g1); }
.con-sufijo i{ border-left:0; border-radius:0 10px 10px 0; }
.con-prefijo i{ border-right:0; border-radius:10px 0 0 10px; }
.con-sufijo input{ border-radius:10px 0 0 10px !important; }
.con-prefijo input{ border-radius:0 10px 10px 0 !important; }

/* ---------- la cuenta del administrador ---------- */
.acct-who .tipo.es-admin{ background:var(--ink); color:#fff; }
.ir-panel{ margin-top:14px; font-weight:700 !important; color:var(--ink) !important; }

/* ===================== PASOS NUMERADOS =====================
   El bloque existía y se pintaba, pero .step nunca tuvo ni una regla:
   los números salían como texto suelto encima del título y todo el
   bloque se veía plano y descuadrado. */
.steps{ display:grid; gap:14px; counter-reset:paso; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.step{ position:relative; background:#fff; border:1px solid var(--g1);
  border-radius:var(--r); padding:24px 22px 26px; display:flex;
  flex-direction:column; gap:14px; }
.step .n{ display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:12px; background:var(--ink); color:#fff;
  font-size:.82rem; font-weight:800; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; }
.step > div{ min-width:0; }
.step b{ display:block; font-size:1rem; color:var(--ink); line-height:1.35; }
.step p{ font-size:.86rem; color:var(--g5); margin-top:8px; line-height:1.6; }

/* la línea que une los pasos, solo cuando van en fila */
@media (min-width:1080px){
  .step::after{ content:''; position:absolute; top:45px; right:-15px; width:14px;
    height:1px; background:var(--g1); }
  .step:last-child::after{ display:none; }
}

/* ---------- reportes ---------- */
.rep-rango{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; }
.opt.chico{ flex:0 0 auto; padding:9px 16px; }
.opt.chico b{ font-size:.84rem; }
.opt.chico .pz2{ display:none; }
.barra{ display:block; height:5px; border-radius:3px; background:var(--g1);
  margin-top:7px; max-width:280px; overflow:hidden; }
.barra i{ display:block; height:100%; background:var(--ink); border-radius:3px; }

/* ===================== añadidos del sitio en Laravel ===================== */

/* El precio de lista tachado, junto al del colaborador. */
.pz-lista{ font-size:.8rem; color:var(--g5); text-decoration:line-through;
  font-variant-numeric:tabular-nums; margin-left:6px; }

/* Avisos de una acción que ya pasó: "tu cuenta quedó lista". */
.aviso{ background:#EEF6EE; border:1px solid #CFE3CF; color:#1E4620;
  border-radius:10px; padding:13px 16px; font-size:.9rem; margin-bottom:18px; }
.aviso.malo{ background:#FDEDED; border-color:#F3C8C6; color:#7A1B16; }

/* Errores de validación bajo un campo. */
.err{ display:block; color:#B3261E; font-size:.78rem; margin-top:6px; }
.field input.malo, .field select.malo{ border-color:#B3261E; }

/* Paginación del catálogo. */
.pager{ display:flex; gap:8px; justify-content:center; align-items:center;
  margin-top:34px; flex-wrap:wrap; }
.pager a, .pager span{ min-width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--g1); border-radius:9px; font-size:.85rem; padding-inline:10px; }
.pager .on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pager .off{ color:var(--g3); }

/* Cerrar sesión va en un formulario POST, así que es un botón y no una
   liga: se le dan los mismos modos que a las demás filas del menú. */
.acct-nav-salir{ display:block; width:100%; text-align:left; border:0; background:transparent;
  cursor:pointer; font:inherit; font-size:.87rem; color:#B3261E; padding:14px 18px; }
.acct-nav-salir:hover{ background:var(--wash); }

/* Cupón del carrito. */
.cupon{ margin-top:18px; padding-top:18px; border-top:1px solid var(--g1); }
.cupon label{ font-size:.78rem; font-weight:700; color:var(--g5); }
.cupon-row{ display:flex; gap:8px; margin-top:9px; }
.cupon-row input{ flex:1; min-width:0; font:inherit; font-size:.86rem; text-transform:uppercase;
  border:1.5px solid var(--g1); border-radius:10px; padding:11px 13px; background:#fff; }
.cupon-row input:focus{ outline:none; border-color:var(--ink); }
.cupon-msg{ font-size:.79rem; margin-top:9px; }
.cupon-msg.malo{ color:#B3261E; font-weight:700; }
.cupon-msg.bien{ color:#0B6B44; font-weight:700; }

/* La página del carrito reusa la rejilla del checkout. */
.cart-lineas{ margin-top:18px; }

/* Aviso breve abajo de la pantalla: "agregado", "guardado". */
.tost{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:400;
  background:var(--ink); color:#fff; border-radius:999px; padding:12px 22px; font-size:.86rem;
  font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  max-width:calc(100vw - 32px); text-align:center; }
.tost.on{ opacity:1; transform:translate(-50%,0); }
.tost.malo{ background:#B3261E; }

/* El renglón del carrito lleva canvas en vez de envase. */
.ci .im canvas, .sline .im canvas{ width:100%; height:100%; border-radius:6px; }
.ci .im img, .sline .im img{ width:100%; height:100%; object-fit:contain; border-radius:6px; background:#fff; }
.ci h4 a{ color:inherit; }
.qmini button:disabled{ opacity:.35; cursor:not-allowed; }


/* Precio de colaborador en la ficha: la liga va en blanco sobre negro. */
.precio-colab a{ margin-left:8px; font-weight:700; text-underline-offset:3px; text-decoration:underline; }

/* Tarjeta de nivel del colaborador. */
.nivel-meta{ font-size:.88rem; color:var(--g7); margin-top:12px; line-height:1.6; }
.nivel-meta b{ color:var(--ink); }
.nivel-como{ margin-top:16px; padding-top:14px; border-top:1px solid var(--g1); display:grid; gap:8px; }
.nivel-como li{ font-size:.82rem; color:var(--g5); position:relative; padding-left:18px; }
.nivel-como li::before{ content:"✦"; position:absolute; left:0; color:var(--ink); font-size:.7rem; top:2px; }
.nivel .liga{ display:flex; gap:10px; flex-wrap:wrap; }
.nivel .liga input{ flex:1; min-width:200px; font:inherit; font-size:.82rem; color:var(--g7);
  border:1px solid var(--g1); border-radius:8px; padding:10px 12px; background:var(--wash); }
@media (max-width:560px){ .escala{ grid-template-columns:repeat(2,1fr); } }

/* Acciones de cada dirección guardada. */
.dir-acc{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.dir-acc form{ margin:0; }
.dir-borrar{ color:#B3261E; }
.fila span + span{ margin-top:2px; }
@media (max-width:620px){ .fila{ grid-template-columns:1fr; } .dir-acc{ justify-content:flex-start; } }

/* Dirección guardada como opción en el pago. */
.opt .dir-linea{ font-size:.8rem; color:var(--g5); display:block; margin-top:2px; }

/* ---------- escribir una reseña ---------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.resena-form{ display:grid; gap:10px; margin-top:10px; }
.resena-form textarea{ font:inherit; font-size:.88rem; border:1.5px solid var(--g1); border-radius:10px;
  padding:11px 13px; resize:vertical; width:100%; }
.resena-form textarea:focus{ outline:none; border-color:var(--ink); }
.resena-form .btn{ justify-self:start; }
.elige-estrellas{ border:0; padding:0; margin:0; display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; }
.elige-estrellas input{ position:absolute; opacity:0; width:1px; height:1px; }
.elige-estrellas label{ font-size:1.6rem; line-height:1; color:var(--g1); cursor:pointer; transition:color .12s; }
.elige-estrellas label:hover, .elige-estrellas label:hover ~ label,
.elige-estrellas input:checked ~ label{ color:#E0A800; }
.elige-estrellas input:focus-visible + label{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }

/* Foto real del producto en la tarjeta y en la ficha. */
.prod .shot .prod-foto{ width:100%; height:100%; object-fit:contain; max-height:260px; }
.pdp-shot > img{ width:100%; height:100%; object-fit:contain; }
.thumbs span img{ width:100%; height:100%; object-fit:contain; }

/* ===================== eventos y capacitación ===================== */
.ev-sub{ font-size:1.15rem; font-weight:800; margin-top:clamp(28px,3.5vw,44px); }
.ev-sub + .nv-lista, .ev-sub + .empty{ margin-top:16px; }
.ev-i .nv-ph{ position:relative; }
.ev-fecha{ position:absolute; top:12px; left:12px; z-index:2; background:#fff; color:var(--ink);
  border-radius:10px; padding:6px 10px; text-align:center; line-height:1; min-width:48px;
  box-shadow:0 4px 14px rgba(0,0,0,.18); }
.ev-fecha b{ display:block; font-size:1.35rem; font-weight:800; }
.ev-fecha small{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.12em; margin-top:3px; }
.ev-pasados .nv-i{ opacity:.7; }
.ev-pasados .nv-i:hover{ opacity:1; }
.ev-datos{ display:grid; gap:1px; background:var(--g1); border:1px solid var(--g1); border-radius:var(--r);
  overflow:hidden; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ev-datos > div{ background:#fff; padding:14px 16px; }
.ev-datos span{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g5); }
.ev-datos b{ display:block; font-size:.92rem; color:var(--ink); margin-top:5px; line-height:1.35; }
.ev-datos small{ display:block; font-size:.76rem; color:var(--g5); margin-top:3px; }
.ev-temario{ margin-top:12px; display:grid; gap:8px; }
.ev-temario li{ position:relative; padding-left:22px; font-size:.95rem; color:var(--g7); }
.ev-temario li::before{ content:"✦"; position:absolute; left:0; color:var(--ink); font-size:.75rem; top:3px; }

/* Eventos y novedades: el encabezado va centrado, así que filtros,
   subtítulos y tarjetas también. Y la rejilla se acomoda a cuántas haya:
   con 2 eventos quedaban pegados a la izquierda y un hueco vacío a la
   derecha. Ahora las columnas miden lo que miden y el grupo se centra. */
.ev-filtros{ justify-content:center; }
.ev-sub{ text-align:center; }
@media (min-width:760px){
  .nv-lista{ grid-template-columns:repeat(auto-fit, minmax(300px, 400px)); justify-content:center; }
}
.empty{ text-align:center; }

/* Código que pide cuenta: dos botones debajo del mensaje. */
.cupon-acc{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cupon-msg.malo .cupon-acc a{ font-weight:700; }

/* Crear cuenta después de comprar. */
.cuenta-rapida{ margin-top:34px; text-align:left; border:1px solid var(--g1); border-radius:var(--r);
  padding:22px; background:var(--wash); }
.cuenta-rapida b{ color:var(--ink); }
.cuenta-rapida > b{ display:block; font-size:1rem; }
.cuenta-rapida p{ font-size:.86rem; margin-top:6px !important; }
.cuenta-rapida-campos{ display:grid; gap:8px; margin-top:14px; }
@media (min-width:620px){ .cuenta-rapida-campos{ grid-template-columns:1fr 1fr auto; } }
.cuenta-rapida input{ font:inherit; font-size:.9rem; border:1.5px solid var(--g1); border-radius:10px; padding:11px 13px; background:#fff; min-width:0; }
.cuenta-rapida .btn{ margin-top:0 !important; }
.cuenta-rapida small{ display:block; font-size:.74rem; color:var(--g5); margin-top:8px; }

/* Lista de beneficios (registro y login): el número o la estrella en su
   columna y la frase completa en la otra. Antes la palabra en negrita y
   el resto de la frase caían en celdas distintas de la rejilla. */
.bens li{ align-items:baseline; }
.bens li > span:last-child{ color:var(--g3); line-height:1.55; }
.bens .tk{ min-width:14px; }

/* ¿Alguien te invitó? */
.invitacion{ border:0; padding:0; margin:0; display:grid; gap:12px; }
.invitacion legend{ font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:8px; padding:0; }
.invitacion .radios label{ min-width:90px; justify-content:center; }
.inv-si, .inv-no{ display:grid; gap:6px; }
.inv-si[hidden], .inv-no[hidden]{ display:none; }
.inv-si label, .inv-no label{ font-size:.8rem; font-weight:700; color:var(--ink); }
.inv-quien{ font-size:.82rem; min-height:1.2em; }
.inv-quien.bien{ color:#0B6B44; font-weight:700; }
.inv-quien.malo{ color:#B3261E; font-weight:700; }

/* Lista de beneficios: el número en un círculo, alineado con su frase. */
.bens .tk{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center; font-size:.78rem; font-weight:800; flex:none; }
.bens li{ align-items:center; gap:14px; }

/* ===================== campanita ===================== */
.campana{ position:relative; }
.campana-lista{ position:absolute; right:-8px; top:calc(100% + 10px); width:min(360px, calc(100vw - 24px));
  background:#fff; border:1px solid var(--g1); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.16);
  z-index:260; overflow:hidden; }
.campana-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--g1); }
.campana-cab b{ font-size:.92rem; color:var(--ink); }
.campana-cab button{ border:0; background:none; cursor:pointer; font:inherit; font-size:.74rem;
  color:var(--g5); text-decoration:underline; text-underline-offset:3px; }
#campana-items{ max-height:min(60vh, 420px); overflow-y:auto; }
.campana-i{ display:grid; grid-template-columns:22px 1fr; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--g1); text-decoration:none; }
.campana-i:hover{ background:var(--wash); }
.campana-i b{ display:block; font-size:.84rem; color:var(--g7); font-weight:600; line-height:1.35; }
.campana-i.nueva b{ color:var(--ink); font-weight:800; }
.campana-i.nueva{ background:#FBFBF6; }
.campana-i small{ display:block; font-size:.76rem; color:var(--g5); margin-top:3px; line-height:1.45; }
.campana-i em{ display:block; font-style:normal; font-size:.68rem; color:var(--g3); margin-top:4px; }
.ci-ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.62rem;
  background:var(--wash); color:var(--g5); }
.campana-i.nueva .ci-ic{ background:var(--ink); color:#fff; }
.campana-vacia{ padding:26px 16px; text-align:center; font-size:.84rem; color:var(--g5); }
.campana-pie{ display:flex; justify-content:space-between; padding:12px 16px; background:var(--wash); }
.campana-pie a{ font-size:.8rem; font-weight:700; color:var(--ink); }
@media (max-width:560px){ .campana-lista{ position:fixed; left:12px; right:12px; top:64px; width:auto; } }

/* ===================== mensajes ===================== */
.hilo{ display:grid; gap:12px; margin-top:20px; }
.burbuja{ max-width:78%; padding:12px 16px; border-radius:16px; font-size:.9rem; line-height:1.6; white-space:pre-wrap; }
.burbuja small{ display:block; font-size:.7rem; margin-top:6px; opacity:.7; }
.burbuja.equipo{ background:var(--wash); color:var(--ink); border-bottom-left-radius:4px; justify-self:start; }
.burbuja.mio{ background:var(--ink); color:#fff; border-bottom-right-radius:4px; justify-self:end; }
.responder{ display:grid; gap:10px; margin-top:22px; }
.responder textarea, .responder input{ font:inherit; font-size:.9rem; border:1.5px solid var(--g1); border-radius:12px;
  padding:12px 14px; width:100%; resize:vertical; }
.responder textarea:focus, .responder input:focus{ outline:none; border-color:var(--ink); }
.responder .btn{ justify-self:start; }
.acct-n{ font-style:normal; background:var(--ink); color:#fff; border-radius:999px; font-size:.68rem;
  font-weight:800; min-width:20px; height:20px; display:inline-grid; place-items:center; padding-inline:6px; }

/* Pie siempre abajo: en páginas cortas (devoluciones, seguimiento) el
   contenido crece y el pie no deja una franja blanca debajo. */
main.principal{ flex:1 0 auto; }
body > *{ flex-shrink:0; }
#pie{ margin-top:auto; }

/* Aviso de correo sin confirmar */
.acct-verificar{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#fff8e6; border:1px solid #f0d58a; border-radius:12px; padding:12px 16px; margin-bottom:20px; font-size:.9rem; }

/* ---------------- seguimiento de pedido ---------------- */
.track.con-pedido{ max-width:1080px; }
.track-h1{ font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; }
.track-sub{ color:var(--g5); font-size:.92rem; margin-top:10px; }
.track-form.compacto{ margin-top:14px; }
.track-form.compacto input{ padding-block:9px; font-size:.88rem; }
.track-nada{ margin-top:18px; padding:14px 16px; border-radius:12px; background:#fdf1f1; border:1px solid #efc9c9;
  display:grid; gap:4px; font-size:.9rem; }
.track-nada span{ color:var(--g5); }
.track-ayuda{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:10px; font-size:.88rem; color:var(--g5); }
.track-ayuda a{ color:var(--ink); font-weight:600; }

.track-card{ background:#fff; border:1px solid var(--g1); border-radius:16px; padding:clamp(16px,2.4vw,26px); margin-top:22px; }
.track-card h2{ font-size:1rem; font-weight:800; margin-bottom:12px; }
.track-card h2 small{ color:var(--g5); font-weight:600; }
.track-card p{ font-size:.9rem; line-height:1.55; }
.track-card .btn{ margin:6px 6px 0 0; }
.track-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--g1); }
.track-cab > div{ display:grid; gap:2px; }
.track-cab .der{ justify-items:end; gap:8px; }
.track-eti{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g5); }
.track-folio{ font-size:1.5rem; font-weight:800; letter-spacing:.02em; }
.track-fecha{ color:var(--g5); font-size:.85rem; }
.track-total{ font-size:1.25rem; }

.track-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:0 22px; align-items:start; }
.track-lado .track-card:first-child{ margin-top:22px; }
@media (max-width:820px){ .track-grid{ grid-template-columns:1fr; } }

.track-items{ list-style:none; margin:0; padding:0; }
.track-items li{ display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center;
  padding:12px 0; border-top:1px solid var(--g1); }
.track-items li:first-child{ border-top:0; padding-top:0; }
.track-items li > div{ display:grid; gap:1px; font-size:.86rem; min-width:0; }
.track-items li > div span{ color:var(--g5); font-size:.8rem; }
.track-img{ width:56px; height:56px; border-radius:10px; overflow:hidden; background:#f4f1ec; display:grid; place-items:center; }
.track-img img, .track-img svg{ width:100%; height:100%; object-fit:cover; }
.track-totales{ margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--g1); display:grid; gap:6px; font-size:.88rem; }
.track-totales div{ display:flex; justify-content:space-between; }
.track-totales dt{ color:var(--g5); } .track-totales dd{ margin:0; }
.track-totales .tot{ font-weight:800; font-size:1rem; padding-top:6px; }
.track-totales .tot dt{ color:var(--ink); }

/* la línea de tiempo (también en Mis pedidos) */
.rastreo{ padding-top:18px; }
.rastreo-resumen{ font-weight:600; color:var(--ink); margin-bottom:20px; }
.rastreo-pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); position:relative; }
.rastreo-pasos li{ position:relative; display:grid; justify-items:center; text-align:center; gap:8px; padding:0 4px; }
.rastreo-pasos li::before{ content:""; position:absolute; top:13px; left:-50%; width:100%; height:3px; background:var(--g1); z-index:0; }
.rastreo-pasos li:first-child::before{ display:none; }
.rastreo-pasos li.hecho::before{ background:var(--ink); }
.rastreo-pasos i{ position:relative; z-index:1; width:28px; height:28px; border-radius:50%; background:#fff;
  border:3px solid var(--g1); display:grid; place-items:center; }
.rastreo-pasos li.hecho i{ background:var(--ink); border-color:var(--ink); }
.rastreo-pasos li.actual i{ box-shadow:0 0 0 5px rgba(20,20,20,.12); }
.rastreo-pasos svg{ width:15px; height:15px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.rastreo-pasos li > div{ display:grid; gap:2px; }
.rastreo-pasos b{ font-size:.82rem; }
.rastreo-pasos span{ font-size:.74rem; color:var(--g5); line-height:1.35; }
.rastreo-pasos li:not(.hecho) b{ color:var(--g5); font-weight:600; }
.rastreo.cerrado .rastreo-pasos li.hecho i{ background:var(--g5); border-color:var(--g5); }
.rastreo.cerrado .rastreo-pasos li.hecho::before{ background:var(--g5); }
.rastreo-cerrado{ margin-top:14px; }
@media (max-width:640px){
  .rastreo-pasos{ grid-template-columns:1fr; gap:0; }
  .rastreo-pasos li{ grid-template-columns:28px 1fr; justify-items:start; text-align:left; gap:12px; padding:0 0 18px; }
  .rastreo-pasos li > div{ display:grid; }
  .rastreo-pasos li::before{ top:-50%; left:12.5px; width:3px; height:100%; }
}
.rastreo-guia{ margin-top:22px; padding:14px 16px; border-radius:12px; background:#f7f5f1;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.rastreo-guia > div:first-child{ display:grid; }
.rastreo-guia span{ font-size:.78rem; color:var(--g5); }
.rastreo-guia .cod{ font-size:1.05rem; letter-spacing:.04em; }
.rastreo-guia-acc{ display:flex; gap:8px; flex-wrap:wrap; }
.rastreo-guia-acc .btn{ margin:0; }

/* Los menús desplegables cerrados no ocupan altura. Con solo
   visibility:hidden seguían "colgando" bajo la barra y en páginas cortas
   (devoluciones, seguimiento) alargaban la página: aparecía una franja
   blanca debajo del pie. */
.mega{ max-height:0; overflow:hidden; pointer-events:none; }
.nitem:hover .mega, .nitem:has(:focus-visible) .mega, .nitem.open .mega{ max-height:none; overflow:visible; pointer-events:auto; }
/* pasando el mouse a otra sección, la anterior se cierra del todo */
.nav .row:hover .nitem:not(:hover) .mega{ max-height:0; overflow:hidden; pointer-events:none; }

.tot-dias{ display:block; font-size:.72rem; color:var(--g5); font-weight:500; }

/* Promociones automáticas */
.prod .tags .tag-promo{ background:#B3261E; color:#fff; }
.promo-tag{ display:inline-block; margin:2px 0; font-size:.68rem; font-weight:700; letter-spacing:.02em;
  color:#B3261E; background:#fbeaea; border-radius:6px; padding:2px 8px; }
.promo-aviso{ display:flex; gap:10px; align-items:center; margin:14px 0; padding:10px 14px; border-radius:12px;
  background:#fbeaea; color:#7a1a14; font-size:.88rem; }
.promo-aviso b{ color:#B3261E; }

/* Franja de bienvenida del colaborador */
.saludo{ background:linear-gradient(90deg,#141414,#2b2620); color:#f3efe8; font-size:.84rem; }
.saludo-in{ display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; padding-block:9px; }
.saludo-txt{ font-weight:700; }
.saludo-nivel{ color:#cfc7ba; }
.saludo-nivel b{ color:#e8c77e; }
.saludo-cta{ margin-left:auto; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px){ .saludo-in{ font-size:.78rem; gap:4px 12px; } .saludo-cta{ margin-left:0; } }

/* Pasos de la membresía en celular: los cuatro a la vista, sin deslizar
   (antes "Confirmar y pagar" quedaba cortado y no se notaba que había más). */
@media (max-width:640px){
  .stp{ flex:1 1 0; min-width:0; white-space:normal; font-size:.7rem; line-height:1.25; padding:12px 4px; }
  .steps-bar .wrap{ padding-inline:8px; }
}

/* Menú grande en columnas (Cuidar mi cabello: subcategorías agrupadas por
   categoría). En una sola columna medía más que la pantalla. */
@media (min-width:901px){
  /* Anclado a la barra y no a su botón: ocupa el ancho del menú y no se
     sale por la derecha en laptops chicas. */
  .nav .row{ position:relative; }
  .nitem:has(.mega-cols){ position:static; }
  .mega.mega-cols{ left:0; right:0; width:auto; padding:16px 14px 18px; }
  .mega-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(125px, 1fr)); gap:6px 10px; }
  .mega-grupo{ display:flex; flex-direction:column; padding:4px 0 8px; }
  .mega-grupo b{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
    padding:8px 12px 6px; }
  .mega-cols .mega-grupo a{ padding:7px 12px; font-size:.84rem; border-radius:8px; }
  /* Por si un menú todavía no cabe: se desliza dentro, la página no. */
  .nitem:hover .mega, .nitem:has(:focus-visible) .mega, .nitem.open .mega{ max-height:calc(100vh - 150px); overflow-y:auto; }
}
@media (max-width:900px){
  .mega-grupo b{ display:block; padding:14px 22px 4px; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g3); }
  .mega-grupo a{ border-bottom:1px solid var(--g1); }
}

/* ---- Fotos subidas en las secciones del inicio ----
   Antes no había regla: la primera foto que se subiera salía a su tamaño
   original y descuadraba la sección. Cada caja ya tiene su proporción;
   la foto la llena sin deformarse (cover) y se recorta lo que sobre. */
.sc .ph img, .feat .ph img, .nw .ph img, .test .av img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Marcas: es un logo, no una foto. Se ve completo, con aire, sobre el
   fondo oscuro de la tarjeta (mejor en blanco, PNG transparente). */
.mbrand .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14% 18%; }

/* Promociones: la foto es el fondo de la tarjeta y el texto va encima a
   la izquierda; un degradado del color de la tarjeta lo mantiene legible.
   Se ancla a la derecha, que es donde debe ir el producto. */
.pm > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; z-index:0; }
.pm.dark:has(> img)::before, .pm.light:has(> img)::before{ content:""; position:absolute; inset:0; z-index:1; }
.pm.dark:has(> img)::before{ background:linear-gradient(90deg, rgba(20,20,20,.88) 0%, rgba(20,20,20,.6) 45%, rgba(20,20,20,0) 75%); }
.pm.light:has(> img)::before{ background:linear-gradient(90deg, rgba(245,243,239,.95) 0%, rgba(245,243,239,.7) 45%, rgba(245,243,239,0) 75%); }
@media (max-width:640px){
  .pm.dark:has(> img)::before{ background:linear-gradient(180deg, rgba(20,20,20,.85), rgba(20,20,20,.55)); }
  .pm.light:has(> img)::before{ background:linear-gradient(180deg, rgba(245,243,239,.93), rgba(245,243,239,.7)); }
}

/* ---------------- Beneficios y descuentos (/colaboradores) ---------------- */
/* De tres en tres en PC (dos en tableta); si sobran, van centradas, no pegadas a la izquierda. */
.benef{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:34px; }
.benef > .benef-c{ flex:1 1 100%; }
@media (min-width:600px){ .benef > .benef-c{ flex:0 1 calc((100% - 16px) / 2); } }
@media (min-width:900px){ .benef > .benef-c{ flex-basis:calc((100% - 32px) / 3); } }
.benef-c{ background:#fff; border:1px solid var(--g1); border-radius:var(--r); padding:22px 20px; }
.benef-n{ display:block; font-size:1.6rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.benef-c h3{ font-size:1rem; font-weight:700; margin-top:8px; }
.benef-c p{ font-size:.88rem; color:var(--g7); margin-top:6px; line-height:1.55; }
.benef-h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:800; margin-top:44px; text-align:center; }
.niveles-t{ max-width:720px; margin:18px auto 0; border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff; }
.nt-fila{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:10px; padding:13px 20px; border-top:1px solid var(--g1); font-size:.92rem; align-items:center; }
.nt-fila:first-child{ border-top:0; }
.nt-cab{ background:var(--wash); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--g5); }
.benef-nota{ max-width:720px; margin:12px auto 0; font-size:.84rem; color:var(--g5); text-align:center; line-height:1.6; }
.benef-cta{ max-width:620px; margin:40px auto 0; text-align:center; background:var(--wash); border-radius:var(--r); padding:26px 22px; }
.benef-cta .cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
@media (max-width:520px){ .nt-fila{ padding:12px 14px; font-size:.84rem; gap:6px; } }

/* Foto del kit en su tarjeta (el panel ya la pedía, la página no la usaba). */
.bc-foto{ margin:-4px 0 16px; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:var(--wash); }
.bc-foto img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Menú de la cuenta en celular: botones compactos en vez de una lista de
   11 renglones. Antes el contenido (pedidos, puntos) quedaba hasta abajo
   y había que bajar en cada página. */
@media (max-width:919px){
  .acct-nav{ display:flex; flex-wrap:wrap; gap:6px; border:0; border-radius:0; background:transparent; overflow:visible; }
  .acct-who{ flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:0 0 6px; border:0; }
  .acct-who b{ display:inline; font-size:.95rem; }
  .acct-who .tipo{ margin-top:0; }
  .acct-nav a, .acct-nav form{ flex:0 0 auto; }
  .acct-nav a{ padding:8px 13px; border:1px solid var(--g1); border-radius:999px; font-size:.8rem; background:#fff; gap:6px; }
  .acct-nav a.on{ background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:none; }
  .acct-nav a.on .acct-n{ background:#fff; color:var(--ink); }
  .acct-nav-salir{ padding:8px 13px; border:1px solid var(--g1) !important; border-radius:999px; font-size:.8rem; width:auto; color:#B3261E; background:#fff; }
}

/* "¿Quién te recomendó?" en el pago */
.cko-form label .opc{ font-weight:400; color:var(--g5); }
.ref-fijo{ background:var(--wash); border-radius:12px; padding:12px 14px; display:grid; gap:2px; }
.ref-eti{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g5); font-weight:700; }
[data-ref-quien].ok{ color:#0B6B44; font-weight:600; }
[data-ref-quien].mal{ color:#B3261E; }

.nivel.actividad.inactivo{ border-color:#f0d58a; background:#fff8e6; }

/* Baja de promociones */
.baja-caja{ max-width:560px; margin:0 auto; text-align:center; display:grid; gap:16px; justify-items:center; padding-block:30px; }
.baja-caja h1{ font-size:clamp(1.4rem,3vw,1.9rem); font-weight:800; }
.baja-caja p{ color:var(--g7); line-height:1.6; }

/* Cuenta bancaria del colaborador (Mi negocio) */
.cuenta-banco{ margin-top:22px; border:1px solid var(--g1); border-radius:var(--r); background:#fff; }
.cuenta-banco.falta{ border-color:#f0d58a; background:#fff8e6; }
.cuenta-banco summary{ list-style:none; cursor:pointer; padding:14px 18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.9rem; }
.cuenta-banco summary::-webkit-details-marker{ display:none; }
.cb-cambiar{ text-decoration:underline; font-weight:600; font-size:.84rem; }
.cuenta-banco form{ padding:4px 18px 18px; }

/* Registro a eventos */
.ev-registro{ margin-top:20px; padding:18px; border:1px solid var(--g1); border-radius:var(--r); background:#fff; }
.ev-registro .cko-nav{ align-items:center; }
.ev-inscrito{ margin-top:20px; padding:14px 18px; border-radius:var(--r); background:#eaf6ef; border:1px solid #bfe3cd; display:grid; gap:4px; font-size:.92rem; }
.ev-inscrito.lleno{ background:#fbeaea; border-color:#efc9c9; }

/* Marcas con descuento distinto (Beneficios y descuentos) */
.benef-marcas{ max-width:720px; margin:18px auto 0; padding:14px 18px; border:1px solid var(--g1); border-radius:var(--r); background:#fff; font-size:.88rem; }
.benef-marcas ul{ list-style:none; margin:8px 0; padding:0; display:grid; gap:4px; }
.benef-marcas li{ display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--g1); padding-top:6px; }
.benef-marcas p{ color:var(--g5); font-size:.8rem; }

/* Puntos extra (Mis puntos) */
.puntos-extra{ margin-top:14px; padding:12px 16px; border:1px dashed var(--g1); border-radius:12px; font-size:.88rem; }
.puntos-extra ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; }
.puntos-extra a{ font-weight:600; }

.prod .tags .tag-puntos{ background:#e8c77e; color:#141414; }

/* Miniaturas de la ficha: ahora son botones (cambian la foto grande). */
.thumbs{ flex-wrap:wrap; }
.thumbs button{ width:64px; height:64px; border-radius:10px; background:var(--wash); border:1px solid var(--g1);
  padding:4px; cursor:pointer; overflow:hidden; }
.thumbs button img{ width:100%; height:100%; object-fit:cover; border-radius:6px; display:block; }
.thumbs button.on{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }

[data-cp-nota].ok{ color:#0B6B44; font-weight:600; }
[data-cp-nota].mal{ color:#B3261E; }

/* Kits de inicio: tantas columnas como kits (hasta 3 por fila) y
   centradas. En la rejilla de 2 columnas el tercer kit quedaba solo,
   pegado a la izquierda. */
.bencmp.kits-lista{ display:flex; flex-wrap:wrap; justify-content:center; }
.bencmp.kits-lista > .bc{ flex:1 1 300px; max-width:380px; }
@media (max-width:659px){ .bencmp.kits-lista > .bc{ max-width:none; } }

/* ---------- colección ---------- */
.col-desc{ color:var(--g5); font-size:.95rem; margin:8px 0 22px; max-width:70ch; }
.col-grid{ margin-top:18px; }
.col-grid .prod .shot{ min-height:0; aspect-ratio:1/1; }

/* ---------- ventana del boletín ---------- */
.bol{ position:fixed; inset:0; z-index:280; background:rgba(0,0,0,.45); display:grid; place-items:center; padding:16px;
  opacity:0; transition:opacity .2s ease; }
.bol.on{ opacity:1; }
.bol-caja{ position:relative; width:100%; max-width:440px; max-height:calc(100dvh - 32px); overflow-y:auto; background:#fff; border-radius:var(--r); padding:30px 26px 22px;
  text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.25); transform:translateY(10px); transition:transform .2s ease; }
.bol.on .bol-caja{ transform:none; }
.bol-x{ position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--g5); padding:6px; }
.bol-kick{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--g5); }
.bol-caja h2{ font-size:clamp(1.4rem,4.4vw,1.8rem); font-weight:800; margin-top:8px; color:var(--ink); }
.bol-txt{ font-size:.88rem; color:var(--g5); margin-top:10px; line-height:1.55; }
#bol-form{ display:grid; gap:10px; margin-top:18px; text-align:left; }
#bol-form input[type=email]{ width:100%; font:inherit; font-size:.95rem; border:1.5px solid var(--g1); border-radius:10px; padding:12px 14px; }
#bol-form input[type=email]:focus{ outline:none; border-color:var(--ink); }
.bol-ok{ display:flex; gap:8px; align-items:flex-start; font-size:.74rem; color:var(--g5); line-height:1.45; }
.bol-ok input{ margin-top:2px; flex:none; }
.bol-ok a{ color:inherit; }
#bol-form .btn{ width:100%; }
.bol-msg{ font-size:.8rem; color:#B3261E; }
.bol-listo{ font-size:.92rem; color:var(--ink); text-align:center; padding:8px 0; font-weight:600; }
.bol-no{ border:0; background:none; margin-top:12px; font:inherit; font-size:.8rem; color:var(--g5); text-decoration:underline; cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .bol, .bol-caja{ transition:none; } }
.vistos .prods{ margin-top:clamp(18px,2.4vw,28px); }

/* ---------- "tengo un problema con mi pedido" ---------- */
.dev{ max-width:760px; }
.dev h1{ font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:800; margin-top:8px; }
.dev-sub{ color:var(--g5); margin-top:6px; font-size:.9rem; }
.dev-reglas{ margin:18px 0 8px; padding:14px 18px 14px 34px; background:var(--wash); border-radius:var(--r); font-size:.86rem; line-height:1.6; display:grid; gap:6px; }
.dev-form{ display:grid; gap:22px; margin-top:18px; }
.dev-form fieldset{ border:1px solid var(--g1); border-radius:var(--r); padding:16px 18px; background:#fff; min-width:0; }
.dev-form legend{ font-weight:800; font-size:.95rem; padding:0 6px; }
.dev-motivos{ display:grid; gap:8px; }
@media (min-width:620px){ .dev-motivos{ grid-template-columns:1fr 1fr; } }
.dev-motivo{ display:flex; gap:10px; align-items:center; border:1.5px solid var(--g1); border-radius:10px; padding:11px 12px; cursor:pointer; font-size:.88rem; }
.dev-motivo:has(input:checked){ border-color:var(--ink); background:var(--wash); }
.dev-items{ display:grid; gap:10px; }
.dev-item{ display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; font-size:.86rem; }
.dev-item.off{ opacity:.45; }
.dev-item small{ display:block; color:var(--g5); font-size:.76rem; margin-top:2px; }
.dev-img{ width:52px; height:52px; border-radius:8px; background:var(--wash); overflow:hidden; display:block; }
.dev-img img{ width:100%; height:100%; object-fit:contain; }
.dev-cant select, .dev-form textarea, .dev-form input[type=text]{ font:inherit; font-size:.9rem; border:1.5px solid var(--g1); border-radius:10px; padding:9px 11px; background:#fff; }
.dev-form textarea, .dev-form input[type=text]{ width:100%; }
.dev-fotos{ display:grid; gap:6px; margin-top:12px; font-size:.86rem; font-weight:700; }
.dev-fotos small{ font-weight:400; color:var(--g5); }
.dev-nota{ font-size:.8rem; color:var(--g5); line-height:1.5; }
.dev-form > .btn{ justify-self:start; }
.dev-caja{ display:grid; gap:10px; margin-top:22px; justify-items:start; }
.dev-estado{ width:100%; border:1px solid var(--g1); border-left:4px solid var(--g3); border-radius:10px; padding:12px 14px; font-size:.86rem; background:#fff; }
.dev-estado.aprobada{ border-left-color:#0B6B44; }
.dev-estado.rechazada{ border-left-color:#B3261E; }
.dev-estado span{ display:block; color:var(--g5); font-size:.78rem; margin-top:2px; }
.dev-estado p{ margin-top:6px; }

/* ---------- flechas y puntos del carrusel: su propio renglón ----------
   Iban encima del borde de abajo del banner (y en el celular encima de
   la foto). Ahora el banner deja un espacio abajo y ahí se acomodan. */
.hero:has(#dots) .sin{ padding-bottom:78px; }
.hero .arrow{ bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.hero .dots{ bottom:36px; }
@media (max-width:939px){
  .hero:has(#dots) .sin{ padding-bottom:64px; }
  .hero .arrow{ width:34px; height:34px; font-size:1rem; bottom:16px; }
  .hero .arrow.prev{ left:calc(50% - 82px); } .hero .arrow.next{ left:calc(50% + 48px); }
  .hero .dots{ bottom:29px; }
}

/* descripción con formato (viene del editor del panel, ya limpia) */
.rich p{ margin:0 0 10px; } .rich p:last-child{ margin-bottom:0; }
.rich h3, .rich h4{ font-weight:800; margin:14px 0 6px; color:var(--ink); }
.rich h3{ font-size:1.02rem; } .rich h4{ font-size:.94rem; }
.rich ul, .rich ol{ padding-left:20px; margin:0 0 10px; display:grid; gap:4px; }
.rich blockquote{ border-left:3px solid var(--g1); padding-left:12px; color:var(--g5); margin:0 0 10px; }
.rich a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.pz-antes{ font-size:.8rem; color:var(--g5); text-decoration:line-through; margin-left:6px; }

/* ---------- "Agrega también" en el carrito ---------- */
.sug{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08); display:grid; gap:10px; }
.sug-t{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin:0; opacity:.7; }
.sug-it{ display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; }
.sug-im{ width:52px; height:52px; border-radius:10px; overflow:hidden; background:#f4f1ea; display:block; }
.sug-im img, .sug-im canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.sug-tx{ min-width:0; display:grid; gap:2px; font-size:.86rem; }
.sug-tx a{ color:inherit; text-decoration:none; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sug-tx s{ opacity:.5; font-size:.8em; }
.sug-pagina{ grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.sug-pagina .sug-t{ grid-column:1 / -1; }

/* ---------- Tarjetas de regalo ---------- */
.rg-montos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; }
.rg-montos .opt span b{ font-size:1.15rem; }
.rg-tarjeta{ aspect-ratio:1.6; border-radius:18px; padding:20px; color:#fff; display:grid; align-content:space-between;
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 55%,#8A6D2F 140%); box-shadow:0 18px 40px rgba(15,23,42,.25); }
.rg-tarjeta small{ letter-spacing:.18em; text-transform:uppercase; font-size:.68rem; opacity:.8; }
.rg-tarjeta b{ font-size:2.2rem; color:#E5C77F; }
.rg-tarjeta span{ font-size:.85rem; opacity:.85; }
.rg-tarjeta em{ font-style:normal; font-size:.8rem; opacity:.75; }

/* ---------- Paquetes ---------- */
.paq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding-block:clamp(28px,5vw,64px); align-items:start; }
.paq-foto{ aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:#f4f1ea; }
.paq-foto img, .paq-foto canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.paq-info h1{ font-size:clamp(1.6rem,3vw,2.3rem); margin:6px 0 10px; }
.paq-precio{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:14px; }
.paq-precio b{ font-size:1.8rem; }
.paq-precio s{ opacity:.55; }
.paq-ahorro{ background:#DCFCE7; color:#166534; font-weight:700; font-size:.8rem; border-radius:999px; padding:3px 10px; }
.paq-desc{ margin-bottom:18px; line-height:1.6; }
.paq-lista{ display:grid; gap:10px; margin:10px 0 18px; }
.paq-it{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px; }
.paq-mini{ width:64px; height:64px; border-radius:10px; overflow:hidden; background:#f4f1ea; display:block; }
.paq-mini img, .paq-mini canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.paq-it a{ color:inherit; text-decoration:none; }
.paq-it small{ display:block; opacity:.65; font-size:.8rem; }
.paq-it select{ margin-top:6px; font:inherit; font-size:.85rem; border:1.5px solid rgba(0,0,0,.15); border-radius:10px; padding:6px 8px; max-width:100%; }
.paq-suelto{ opacity:.6; font-size:.86rem; text-decoration:line-through; }
.paq-acc{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 800px){ .paq{ grid-template-columns:1fr; } }

/* ---------- Compras recurrentes ---------- */
.rc-cab{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--g1); flex-wrap:wrap; }
.rc-cab span{ display:block; font-size:.84rem; opacity:.7; }
.rc select{ font:inherit; font-size:.86rem; border:1.5px solid var(--g1); border-radius:10px; padding:7px 10px; background:#fff; }
.rc-it{ display:grid !important; grid-template-columns:1fr auto auto; gap:10px; align-items:center; }
.rc-acc{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px; background:#FAFAF9; }
.rec-box{ margin-top:14px; border:1.5px dashed rgba(0,0,0,.15); border-radius:14px; padding:12px 14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.88rem; }
.rec-box select{ font:inherit; font-size:.86rem; border:1.5px solid rgba(0,0,0,.15); border-radius:10px; padding:6px 8px; background:#fff; }
.rec-box b{ flex:1 1 180px; }

/* ---------- Páginas de campaña (/l/…) ---------- */
.lp-aviso{ background:#FEF3C7; color:#92400E; text-align:center; font-size:.85rem; padding:8px 12px; font-weight:600; }
.lp-b{ padding-block:clamp(28px,5vw,60px); }
.lp-b.pv-activa{ outline:3px solid #c9a24b; outline-offset:-3px; }
.lp-t{ font-size:clamp(1.4rem,2.6vw,2rem); text-align:center; margin-bottom:22px; }
.lp-b-portada{ padding:0; }
.lp-hero{ position:relative; background:var(--ink,#0F172A); color:#fff; overflow:hidden; min-height:clamp(360px,60vh,620px); display:grid; align-items:center; }
.lp-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.lp-hero-tx{ position:relative; z-index:1; max-width:760px; padding-block:clamp(40px,8vw,90px); }
.lp-hero h1{ font-size:clamp(2rem,5vw,3.4rem); line-height:1.05; margin:8px 0 14px; }
.lp-hero h1 em{ font-style:normal; color:#E5C77F; display:block; }
.lp-hero p{ font-size:1.05rem; opacity:.9; max-width:560px; margin-bottom:22px; }
.lp-oferta{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:clamp(20px,4vw,48px); align-items:center; }
.lp-oferta h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:8px; }
.lp-of-lista{ display:grid; gap:10px; margin-top:16px; }
.lp-of-it{ display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:center; }
.lp-of-im{ width:56px; height:56px; border-radius:12px; overflow:hidden; background:#f4f1ea; display:block; }
.lp-of-im img, .lp-of-im canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-of-it select{ display:block; margin-top:6px; font:inherit; font-size:.85rem; border:1.5px solid rgba(0,0,0,.15); border-radius:10px; padding:6px 8px; }
.lp-of-caja{ border:1.5px solid rgba(0,0,0,.1); border-radius:20px; padding:24px; text-align:center; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.08); }
.lp-of-caja .btn{ width:100%; }
.lp-of-precio{ display:flex; gap:10px; justify-content:center; align-items:baseline; margin-bottom:6px; }
.lp-of-precio b{ font-size:2.2rem; }
.lp-of-precio s{ opacity:.5; }
.lp-of-cupon{ font-size:.85rem; margin-bottom:14px; color:#166534; }
.lp-benef{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.lp-benef > div{ border-radius:16px; background:#F8F6F1; padding:20px; }
.lp-benef b{ display:block; margin-bottom:6px; font-size:1.05rem; }
.lp-testi{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.lp-testi blockquote{ margin:0; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:20px; }
.lp-testi cite{ display:block; margin-top:10px; font-style:normal; font-weight:700; font-size:.88rem; }
.lp-texto{ max-width:760px; }
.lp-imagen img{ width:100%; border-radius:18px; display:block; }
.lp-video{ position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; max-width:900px; margin:0 auto; }
.lp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lp-cuenta{ text-align:center; }
.lp-cuenta > p{ font-weight:700; margin-bottom:12px; }
.lp-reloj{ display:flex; gap:12px; justify-content:center; }
.lp-reloj span{ display:grid; min-width:70px; padding:12px 8px; border-radius:14px; background:var(--ink,#0F172A); color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.lp-reloj b{ font-size:1.8rem; letter-spacing:0; }
.lp-faq{ max-width:760px; }
.lp-faq details{ border-bottom:1px solid rgba(0,0,0,.1); padding:14px 0; }
.lp-faq summary{ cursor:pointer; font-weight:700; }
.lp-faq details p{ margin-top:8px; opacity:.85; }
.lp-cta{ text-align:center; max-width:700px; }
.lp-cta h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:8px; }
.lp-cta p{ margin-bottom:18px; }
.lp-error{ max-width:600px; margin:0 auto 30px; }
@media (max-width: 800px){ .lp-oferta{ grid-template-columns:1fr; } }

/* Cuadros de texto largos en los formularios de compra (p. ej. el mensaje de
   la tarjeta de regalo): mismo aspecto que los demás campos y tamaño fijo. */
.cko-form .field textarea{
  font:inherit; font-size:.94rem; color:var(--ink); background:#fff; line-height:1.5;
  border:1.5px solid var(--g1); border-radius:10px; padding:13px 14px; width:100%;
  min-height:96px; resize:none; }
.cko-form .field textarea:focus{ outline:none; border-color:var(--ink); }
.rg-cuenta{ display:block; text-align:right; font-size:.75rem; opacity:.6; margin-top:4px; }

/* ---------- Guía capilar ---------- */
.gc{ max-width:760px; padding-block:clamp(28px,6vw,70px); }
.gc-barra{ height:6px; border-radius:99px; background:rgba(0,0,0,.07); overflow:hidden; margin-bottom:28px; }
.gc-barra i{ display:block; height:100%; width:0; background:var(--ink,#0F172A); transition:width .3s; }
.gc-paso{ display:none; }
.gc-paso.on{ display:block; animation:gcEntra .25s ease; }
@keyframes gcEntra{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.gc h1{ font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.1; margin:8px 0 12px; }
.gc h2{ font-size:clamp(1.4rem,3.2vw,2rem); margin:6px 0 8px; }
.gc-intro{ font-size:1.05rem; opacity:.85; margin-bottom:16px; max-width:560px; }
.gc-regalo{ display:inline-block; background:#DCFCE7; color:#166534; font-weight:700; border-radius:12px; padding:8px 12px; margin-bottom:20px; }
.gc-num{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
.gc-ayuda{ opacity:.7; margin-bottom:6px; }
.gc-ops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin:18px 0 22px; }
.gc-op{ font:inherit; font-weight:600; text-align:left; padding:16px 18px; border-radius:14px; border:1.5px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; transition:border-color .15s, background .15s; }
.gc-op:hover{ border-color:var(--ink,#0F172A); }
.gc-op[aria-pressed="true"]{ border-color:var(--ink,#0F172A); background:var(--ink,#0F172A); color:#fff; }
.gc-nav{ display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:10px; }
.gc-check{ display:flex; gap:10px; align-items:center; font-size:.9rem; }
.gc-check input{ width:18px; height:18px; }
.gc-res{ padding-block:clamp(28px,6vw,64px); }
.gc-res h1{ font-size:clamp(1.8rem,4vw,2.8rem); margin:6px 0 12px; }
.gc-perfil{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.gc-perfil span{ background:#F4F1EA; border-radius:999px; padding:4px 12px; font-size:.85rem; font-weight:600; }
.gc-cupon{ background:#DCFCE7; color:#14532D; border-radius:14px; padding:12px 16px; margin-bottom:22px; }
.gc-lista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; }
.gc-item{ position:relative; display:grid; gap:10px; align-content:start; }
.gc-n{ position:absolute; top:-10px; left:-10px; z-index:2; width:30px; height:30px; border-radius:50%; background:var(--ink,#0F172A); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.gc-razon{ font-size:.9rem; line-height:1.5; opacity:.85; }
.gc-acc{ margin-top:26px; display:grid; gap:8px; justify-items:start; }

/* ---------- Guía capilar: tu rutina ---------- */
.gr-cab{ background:radial-gradient(120% 140% at 100% 0%, #3a2c14 0%, #17130c 45%, #0a0a0a 100%); border-bottom:3px solid #c9a46a; color:#fff; padding-block:clamp(34px,6vw,64px); }
.gr-cab h1{ font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.08; margin:8px 0 14px; color:#fff; }
.gr-cab p{ color:#fff; }
.gr-cab .kicker{ color:#E5C77F; }
.gr-perfil{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.gr-perfil span{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 12px; font-size:.85rem; font-weight:600; }
.gr-sub{ opacity:.75; font-size:.95rem; }
.gr{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(20px,3vw,40px); align-items:start; padding-block:clamp(26px,4vw,48px); }
.gr-pasos{ display:grid; gap:14px; counter-reset:paso; }
.gr-paso{ position:relative; display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:16px; align-items:center;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:14px 16px 14px 14px; box-shadow:0 6px 20px rgba(15,23,42,.05); }
.gr-n{ position:absolute; top:-9px; left:-9px; width:28px; height:28px; border-radius:50%; background:#0F172A; color:#fff; display:grid; place-items:center; font-weight:800; font-size:.8rem; box-shadow:0 0 0 3px #fff; }
.gr-foto{ width:96px; height:96px; border-radius:14px; overflow:hidden; background:#F4F1EA; display:block; }
.gr-foto img, .gr-foto canvas{ width:100%; height:100%; object-fit:cover; display:block; }
.gr-info{ min-width:0; }
.gr-info small{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }
.gr-info h3{ font-size:1.02rem; margin:2px 0 6px; line-height:1.25; }
.gr-info h3 a{ color:inherit; text-decoration:none; }
.gr-razon{ font-size:.88rem; line-height:1.45; opacity:.8; }
.gr-precio{ display:grid; justify-items:end; gap:6px; text-align:right; }
.gr-precio b{ font-size:1.1rem; }
.gr-precio s{ font-size:.8rem; opacity:.5; }
.gr-resumen{ position:sticky; top:20px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:22px; box-shadow:0 18px 40px rgba(15,23,42,.08); display:grid; gap:10px; }
.gr-resumen h3{ font-size:1.1rem; margin-bottom:4px; }
.gr-fila{ display:flex; justify-content:space-between; gap:10px; font-size:.92rem; }
.gr-ahorro{ color:#15803D; font-weight:600; }
.gr-total{ border-top:1px solid rgba(0,0,0,.08); padding-top:10px; font-size:1.05rem; }
.gr-total b{ font-size:1.4rem; }
.gr-aplicado{ background:#DCFCE7; color:#14532D; border-radius:12px; padding:9px 12px; font-size:.85rem; font-weight:600; }
.gr-resumen .btn{ width:100%; margin-top:4px; }
.gr-nota{ font-size:.8rem; opacity:.65; text-align:center; }
@media (max-width: 860px){
  .gr{ grid-template-columns:1fr; }
  .gr-resumen{ position:static; }
}
@media (max-width: 560px){
  .gr-paso{ grid-template-columns:72px minmax(0,1fr); }
  .gr-foto{ width:72px; height:72px; }
  .gr-precio{ grid-column:1 / -1; grid-auto-flow:column; justify-content:space-between; align-items:center; justify-items:start; }
}

/* ---------- Bloques: opciones (pantalla, fondo, alineación) ---------- */
@media (max-width: 760px){ .lp-solo-pc{ display:none !important; } }
@media (min-width: 761px){ .lp-solo-movil{ display:none !important; } }
.lp-fondo-claro{ background:#F8F6F1; }
.lp-fondo-oscuro{ background:#0F172A; color:#fff; }
.lp-fondo-oscuro .lp-t, .lp-fondo-oscuro h2, .lp-fondo-oscuro h3, .lp-fondo-oscuro b{ color:#fff; }
.lp-fondo-oscuro .hint2, .lp-fondo-oscuro p{ color:rgba(255,255,255,.85); }
.lp-fondo-dorado{ background:linear-gradient(135deg,#F3E6C4,#E5C77F); }
.lp-centro{ text-align:center; }
.lp-centro .lp-benef > div, .lp-centro .lp-testi blockquote{ text-align:center; }
.lp-centro .lp-hero-tx{ margin-inline:auto; }

/* ---------- Bloque: antes y después ---------- */
.lp-ad{ max-width:820px; }
.lp-ad-caja{ position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:#eee; user-select:none; }
.lp-ad-caja > img, .lp-ad-antes img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lp-ad-antes{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--ad)) 0 0); }
.lp-ad-linea{ position:absolute; top:0; bottom:0; left:var(--ad); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15); pointer-events:none; }
.lp-ad-linea::after{ content:"⇆"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; color:#0F172A; display:grid; place-items:center; font-weight:800; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.lp-ad-caja input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.lp-ad-et{ position:absolute; top:14px; background:rgba(15,23,42,.75); color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:4px 10px; pointer-events:none; }
.lp-ad-a{ left:14px; } .lp-ad-d{ right:14px; }
.lp-ad-tx{ margin-top:14px; text-align:center; opacity:.85; }

/* ---------- Bloque: reseñas reales ---------- */
.lp-res{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.lp-res figure{ margin:0; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:20px; display:grid; gap:10px; align-content:start; color:#0F172A; }
.lp-res blockquote{ margin:0; line-height:1.55; }
.lp-res figcaption{ font-size:.85rem; }
.lp-res figcaption a{ display:block; opacity:.6; font-size:.8rem; color:inherit; margin-top:2px; }
.lp-estrellas{ color:#E0A526; letter-spacing:2px; font-size:1.05rem; }
.lp-estrellas span{ color:#D6D3D1; }

/* ---------- Bloque: carrusel de productos ---------- */
.lp-car{ position:relative; }
.lp-car-pista{ display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(220px, 23%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 10px; }
.lp-car-pista::-webkit-scrollbar{ display:none; }
.lp-car-it{ scroll-snap-align:start; }
.lp-car-f{ position:absolute; top:40%; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:#fff; color:#0F172A; font-size:1.4rem; line-height:1; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.lp-car-izq{ left:-12px; } .lp-car-der{ right:-12px; }
@media (max-width: 760px){ .lp-car-pista{ grid-auto-columns:70%; } .lp-car-f{ display:none; } }

/* ---------- Capacitaciones con costo ---------- */
.ev-pago{ margin-top:22px; border:1.5px solid rgba(0,0,0,.1); border-radius:18px; padding:20px; background:#fff; }
.ev-precio{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:10px; }
.ev-precio b{ font-size:1.8rem; }
.ev-precio s{ opacity:.5; }
.ev-col{ background:#F4F1EA; border-radius:999px; padding:3px 10px; font-size:.8rem; font-weight:600; }
.ev-pasarelas{ margin-top:14px; }

/* Portada grande (páginas de campaña y bloques libres de la portada): el
   fondo es oscuro, así que el título y el botón no pueden ser negros. */
.lp-hero h1{ color:#fff; }
.lp-hero .btn{ background:#E5C77F; color:#141414; border-color:#E5C77F; }
.lp-hero .btn:hover{ background:#fff; border-color:#fff; color:#141414; }
.lp-fondo-oscuro .btn{ background:#E5C77F; color:#141414; border-color:#E5C77F; }
.lp-fondo-oscuro{ background:var(--ink,#141414); }
/* En "centrado", la lista de la oferta se lee mejor a la izquierda (la caja del precio ya va centrada) */
.lp-centro .lp-oferta{ text-align:left; }
.lp-texto.wrap{ margin-inline:auto; }

/* ================= Bloques visuales de página (campañas y portada) ================= */
.lp-ico{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.lp-kicker{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A8853A; margin-bottom:10px; }
.lp-sub{ text-align:center; max-width:640px; margin:-10px auto 22px; }
/* Lugar de una foto que falta (solo lo ve el equipo) */
.lp-foto-vacia{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:100%; min-height:180px;
  background:repeating-linear-gradient(135deg,#F4F1EA 0 14px,#EEE9DE 14px 28px); color:#9A8A66; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  border:2px dashed #D6CBB2; border-radius:inherit; text-align:center; }
.lp-foto-vacia svg{ width:34px; height:34px; }

/* Imagen con texto */
.lp-it{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:center; }
.lp-it.sin-foto{ grid-template-columns:1fr; max-width:760px; }
.lp-it-der .lp-it-foto{ order:2; }
.lp-it-foto{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:#F4F1EA; }
.lp-it-foto img{ width:100%; height:100%; object-fit:cover; }
.lp-it-tx h2{ font-size:clamp(1.5rem,3vw,2.3rem); margin-bottom:12px; }
.lp-it-tx > p{ font-size:1.02rem; margin-bottom:16px; }
.lp-it-puntos{ display:grid; gap:10px; margin:6px 0 22px; }
.lp-it-puntos li{ display:flex; gap:10px; align-items:flex-start; font-weight:600; color:var(--ink); }
.lp-it-puntos .lp-ico{ color:#A8853A; width:22px; height:22px; margin-top:1px; }
.lp-centro .lp-it-puntos li{ justify-content:center; }
@media (max-width:800px){
  .lp-it{ grid-template-columns:1fr; }
  .lp-it-der .lp-it-foto{ order:0; }
  .lp-it-foto{ aspect-ratio:4/3; }
}

/* Beneficios con íconos */
.lp-iconos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(18px,3vw,32px); text-align:center; }
.lp-iconos > div{ display:grid; justify-items:center; gap:6px; }
.lp-ico-c{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:#F6EFDF; color:#A8853A; margin-bottom:6px; }
.lp-ico-c .lp-ico{ width:30px; height:30px; }
.lp-iconos b{ font-size:1.02rem; color:var(--ink); }
.lp-iconos p{ font-size:.9rem; max-width:260px; }
.lp-fondo-oscuro .lp-ico-c{ background:rgba(229,199,127,.14); color:#E5C77F; }

/* Franja de confianza */
.lp-b-confianza{ padding-block:18px; border-block:1px solid rgba(0,0,0,.07); }
.lp-conf{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px clamp(20px,4vw,48px); }
.lp-conf span{ display:inline-flex; align-items:center; gap:10px; }
.lp-conf .lp-ico{ color:#A8853A; }
.lp-conf b{ font-size:.9rem; color:var(--ink); }
.lp-fondo-oscuro .lp-conf b, .lp-fondo-oscuro .lp-conf .lp-ico{ color:#fff; }
.lp-fondo-oscuro.lp-b-confianza, .lp-fondo-dorado.lp-b-confianza{ border:0; }
@media (max-width:640px){ .lp-conf{ display:grid; grid-template-columns:1fr 1fr; justify-items:start; } .lp-conf b{ font-size:.8rem; } }

/* Números grandes */
.lp-num{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; text-align:center; }
.lp-num b{ display:block; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; color:var(--ink); letter-spacing:-.02em; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.lp-num span{ font-size:.9rem; }
.lp-fondo-oscuro .lp-num b{ color:#E5C77F; }

/* Galería */
.lp-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.lp-gal figure{ margin:0; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1; background:#F4F1EA; }
.lp-gal img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.lp-gal figure:hover img{ transform:scale(1.04); }
.lp-gal figcaption{ position:absolute; left:10px; bottom:10px; right:10px; font-size:.78rem; font-weight:700; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5); }
@media (max-width:640px){ .lp-gal{ grid-template-columns:1fr 1fr; gap:6px; } }

/* Tabla comparativa */
.lp-comp{ max-width:820px; }
.lp-comp-caja{ border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,.08); background:#fff; }
.lp-comp table{ width:100%; border-collapse:collapse; }
.lp-comp th, .lp-comp td{ padding:14px 16px; text-align:center; border-bottom:1px solid rgba(0,0,0,.06); }
.lp-comp th:first-child, .lp-comp td:first-child{ text-align:left; font-weight:600; color:var(--ink); }
.lp-comp tr:last-child td{ border-bottom:0; }
.lp-comp th{ font-size:.85rem; color:var(--ink); }
.lp-comp .nos{ background:#FBF6EA; }
.lp-comp th.nos{ background:var(--ink); color:#E5C77F; }
.lp-si, .lp-no{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:800; font-size:.85rem; }
.lp-si{ background:#DCFCE7; color:#166534; }
.lp-no{ background:#F1F1F1; color:#9CA3AF; }
.lp-fondo-oscuro .lp-comp-caja{ color:var(--g7); }
@media (max-width:560px){ .lp-comp th, .lp-comp td{ padding:11px 8px; font-size:.84rem; } }

/* Pasos con foto */
.lp-pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(16px,3vw,28px); counter-reset:paso; }
.lp-pasos li{ text-align:center; }
.lp-paso-foto{ position:relative; border-radius:18px; overflow:visible; aspect-ratio:1; background:#F4F1EA; margin-bottom:26px; }
.lp-paso-foto img, .lp-paso-foto .lp-foto-vacia{ width:100%; height:100%; object-fit:cover; border-radius:18px; }
.lp-paso-n{ position:absolute; left:50%; bottom:-18px; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; background:var(--ink); color:#E5C77F;
  display:grid; place-items:center; font-weight:800; border:3px solid #fff; }
.lp-pasos li.sin-foto .lp-paso-foto{ aspect-ratio:auto; height:40px; background:none; margin-bottom:14px; }
.lp-pasos li.sin-foto .lp-paso-n{ bottom:0; }
.lp-pasos b{ display:block; color:var(--ink); margin-bottom:4px; }
.lp-pasos p{ font-size:.9rem; }
@media (max-width:640px){ .lp-pasos{ grid-template-columns:1fr 1fr; } }

/* Barra de compra fija: aparece al bajar y se esconde cuando se ve la oferta */
.lp-b-barra{ padding:0; }
.lp-barra{ position:fixed; z-index:60; left:50%; bottom:16px; width:min(720px, calc(100% - 24px)); transform:translate(-50%, 140%);
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px 10px 20px; border-radius:999px;
  background:rgba(20,20,20,.94); color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.28); backdrop-filter:blur(8px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.lp-barra.ver{ transform:translate(-50%, 0); }
.lp-barra-tx{ display:grid; min-width:0; line-height:1.25; }
.lp-barra-tx b{ color:#fff; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-barra-tx span{ color:#E5C77F; font-weight:700; font-size:.9rem; }
.lp-barra-tx s{ color:rgba(255,255,255,.5); font-weight:500; margin-left:4px; }
.lp-barra .btn{ background:#E5C77F; color:#141414; border-color:#E5C77F; white-space:nowrap; flex:none; }
@media (max-width:640px){
  .lp-barra{ left:0; bottom:0; width:100%; transform:translateY(110%); border-radius:18px 18px 0 0; padding:12px 12px calc(12px + env(safe-area-inset-bottom)) 16px; }
  .lp-barra.ver{ transform:translateY(0); }
}
body.con-barra{ padding-bottom:84px; }
.lp-it-foto{ aspect-ratio:1; max-height:560px; }
.lp-iconos > div{ align-content:start; }
.lp-gal{ grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); }
@media (max-width:640px){ .lp-gal{ grid-template-columns:1fr 1fr; } }

/* ================= Aviso de cookies con permiso (cuando hay pixels) ================= */
.consent{ position:fixed; z-index:160; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-width:760px; margin:0 auto;
  display:flex; gap:18px; align-items:center; background:#fff; color:var(--g7); border:1px solid var(--g1); border-radius:18px;
  padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.consent-tx{ flex:1; min-width:0; }
.consent-tx b{ display:block; color:var(--ink); font-size:.92rem; margin-bottom:4px; }
.consent-tx p{ font-size:.82rem; line-height:1.5; }
.consent-tx a{ color:var(--ink); font-weight:600; }
.consent-acc{ display:flex; gap:8px; flex:none; }
.consent-acc .btn{ white-space:nowrap; }
@media (max-width:640px){
  .consent{ flex-direction:column; align-items:stretch; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); }
  .consent-acc .btn{ flex:1; }
}
/* Mientras está el aviso, la barra de compra no se le encima */
body:has(.consent:not([hidden])) .lp-barra{ bottom:calc(var(--alto-consent, 150px) + 24px); }
.consent-liga{ display:flex; gap:18px; justify-content:center; padding-block:0 18px; font-size:.78rem; }
.consent-liga a{ color:rgba(255,255,255,.65); }
.consent-liga a:hover{ color:#fff; }
.cookies-lista{ display:grid; gap:10px; margin:12px 0 18px; }
.cookies-lista li{ padding:12px 14px; border-radius:12px; background:#F7F7F5; font-size:.9rem; }
.pagina-legal h1{ margin-bottom:12px; }
.pagina-legal h2{ font-size:1.15rem; margin:26px 0 8px; }

/* Precios de mayoreo en la ficha (solo mayoristas) */
.pdp-mayoreo{ margin:14px 0 6px; padding:14px; border-radius:14px; background:#F8F4EA; border:1px solid #EADFC4; }
.pdp-mayoreo > b{ display:block; color:var(--ink); font-size:.9rem; margin-bottom:10px; }
.pdp-may-escalones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:8px; }
.pdp-may-pack{ display:grid; gap:2px; text-align:left; padding:10px 12px; border-radius:12px; border:1.5px solid #D9C79B; background:#fff; cursor:pointer; font:inherit; color:var(--g7); }
.pdp-may-pack:hover{ border-color:var(--ink); }
.pdp-may-pack span{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A6A1F; }
.pdp-may-pack b{ font-size:1.05rem; color:var(--ink); }
.pdp-may-pack small{ font-size:.74rem; }
.pdp-mayoreo > small{ font-size:.76rem; color:var(--g5); }
/* Página privada de la influencer */
.inf-pag{ max-width:860px; padding-block:40px 70px; }
.inf-pag h1{ font-size:clamp(1.5rem,3.5vw,2.2rem); margin-bottom:8px; }
.inf-cod{ background:var(--ink); color:#E5C77F; border-radius:10px; padding:2px 12px; }
.inf-sub{ color:var(--g5); margin-bottom:22px; }
.inf-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:18px; }
.inf-kpis div{ background:#fff; border:1px solid var(--g1); border-radius:16px; padding:16px; }
.inf-kpis span{ display:block; font-size:.78rem; color:var(--g5); }
.inf-kpis b{ font-size:1.5rem; color:var(--ink); }
.inf-liga{ background:#F8F4EA; border-radius:12px; padding:12px 14px; font-size:.9rem; margin-bottom:30px; word-break:break-all; }
.inf-pag h2{ font-size:1.2rem; margin-bottom:10px; }
.inf-tabla{ width:100%; border-collapse:collapse; font-size:.9rem; }
.inf-tabla th, .inf-tabla td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--g1); }
.inf-tabla th{ font-size:.78rem; color:var(--g5); }
/* Catálogo de mayoreo (/mayoreo) */
.may-pag{ padding-block:36px 70px; max-width:1100px; }
.may-pag h1{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:6px; }
.may-sub{ color:var(--g5); margin-bottom:20px; }
.may-no{ max-width:560px; margin:30px auto; text-align:center; display:grid; gap:14px; justify-items:center; }
.may-lista{ display:grid; gap:10px; }
.may-it{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--g1); border-radius:16px; padding:10px 12px; }
.may-foto{ width:64px; height:64px; border-radius:12px; overflow:hidden; background:#F4F1EA; display:block; }
.may-foto img, .may-foto canvas{ width:100%; height:100%; object-fit:cover; }
.may-tx{ display:grid; gap:2px; min-width:0; }
.may-tx a{ color:var(--ink); text-decoration:none; }
.may-tx small{ color:var(--g5); font-size:.78rem; }
.may-esc{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.may-pack{ display:grid; text-align:center; min-width:96px; padding:7px 10px; border-radius:12px; border:1.5px solid #D9C79B; background:#FBF6EA; cursor:pointer; font:inherit; color:var(--g7); text-decoration:none; }
.may-pack:hover{ border-color:var(--ink); }
.may-pack span{ font-size:.7rem; font-weight:700; color:#8A6A1F; text-transform:uppercase; letter-spacing:.05em; }
.may-pack b{ color:var(--ink); }
.may-pack small{ font-size:.68rem; color:var(--g5); }
@media (max-width:700px){ .may-it{ grid-template-columns:52px minmax(0,1fr); } .may-foto{ width:52px; height:52px; } .may-esc{ grid-column:1 / -1; justify-content:flex-start; } }

/* ---------- Bloque "Videos con producto": en montaña ---------- */
.lp-vids{ --w:250px; --gap:22px; --h:445px; --paso:64px; position:relative; padding:4px 0 10px; overflow:hidden; }
.lp-vids-nav{ display:flex; justify-content:center; gap:10px; margin:0 0 22px; }
.lp-vids-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--g1); background:#fff; color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; }
.lp-vids-nav button:hover{ border-color:var(--ink); }
/* Sin JavaScript: una fila que se desliza. */
.lp-vids-esc{ display:flex; gap:var(--gap); overflow-x:auto; padding:0 var(--gutter); scroll-snap-type:x mandatory; }
.lp-vid{ flex:0 0 var(--w); scroll-snap-align:center; }
.lp-vid-v{ position:relative; height:var(--h); border-radius:18px; overflow:hidden; background:#E9E7E2; }
.lp-vid-v video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lp-vid-v .lp-foto-vacia{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--g5); font-size:.85rem; }
.lp-vid-son{ position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; }
.lp-vid-son svg{ width:20px; height:20px; }
.lp-vid-son .ondas{ display:none; }
.con-sonido .lp-vid.on .lp-vid-son .ondas{ display:block; }
.con-sonido .lp-vid.on .lp-vid-son .mudo{ display:none; }
.lp-vid.on .lp-vid-son{ display:flex; }
.lp-vid-p{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px; background:#fff; border:1px solid var(--g1); border-radius:14px; color:var(--ink); text-decoration:none; }
.lp-vid-p img, .lp-vid-p-ph{ width:52px; height:52px; border-radius:9px; object-fit:cover; background:var(--wash); flex:none; }
.lp-vid-p-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lp-vid-p-tx b{ font-size:.86rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lp-vid-p-tx small{ font-size:.86rem; color:var(--g7); }
.lp-vid-p-ir{ flex:none; background:var(--ink); color:#fff; font-size:.74rem; font-weight:700; padding:8px 11px; border-radius:9px; }
.lp-vid-p-vacio{ justify-content:center; color:var(--g5); font-size:.8rem; border-style:dashed; min-height:74px; }
/* Con JavaScript: escenario fijo y cada tarjeta se acomoda según su distancia al centro. */
.lp-vids.js .lp-vids-esc{ display:block; position:relative; overflow:visible; height:calc(var(--h) + 96px); padding:0; touch-action:pan-y; cursor:grab; user-select:none; }
.lp-vids.js .lp-vid{ position:absolute; left:50%; top:0; width:var(--w);
  transform:translateX(calc(-50% + var(--o, 0) * (var(--w) + var(--gap))));
  margin-top:calc(var(--a, 0) * var(--paso) / 2);
  transition:transform .75s cubic-bezier(.22,.8,.24,1), margin-top .75s cubic-bezier(.22,.8,.24,1), opacity .45s ease; }
.lp-vids.js .lp-vid-v{ height:calc(var(--h) - var(--a, 0) * var(--paso)); transition:height .75s cubic-bezier(.22,.8,.24,1); }
.lp-vids.js .lp-vid.fuera{ opacity:0; pointer-events:none; }
.lp-vids.js .lp-vid:not(.on) .lp-vid-v{ cursor:pointer; }
.lp-vids.js .lp-vid:not(.on) .lp-vid-p{ opacity:.7; }
.lp-vids.js .lp-vid-v video{ pointer-events:none; }
@media (max-width:699px){
  .lp-vids{ --w:min(62vw, 250px); --gap:14px; --h:calc(var(--w) * 1.72); --paso:48px; }
}
@media (prefers-reduced-motion: reduce){
  .lp-vids.js .lp-vid, .lp-vids.js .lp-vid-v{ transition:none; }
}

/* ---------- Cursos en "Próximamente" ---------- */
.ev-prox{ display:inline-block; background:var(--ink); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; margin-right:6px; vertical-align:middle; }
.ev-fecha-prox b{ font-size:1rem; letter-spacing:.04em; }
.ev-fecha-prox small{ letter-spacing:.12em; }
.ev-avisame{ border:1.5px dashed var(--g3); border-radius:16px; padding:18px; margin-top:20px; }
.ev-prox-tx{ margin:0 0 14px; font-size:.95rem; line-height:1.55; }
.lp-ev-todos{ text-align:center; margin-top:22px; }

/* ---------- Cuenta: mis clientas, material, capacitaciones, borrar cuenta ---------- */
.cl-toca{ display:inline-block; margin-left:6px; background:#FFF1CC; color:#5E4200; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; vertical-align:middle; }
.mt-grupo{ margin:30px 0 10px; font-size:1rem; }
.mt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.mt-i{ border:1px solid var(--g1); border-radius:var(--r); overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.mt-i img, .mt-i video{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--wash); display:block; }
.mt-tx{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.mt-texto{ font-size:.84rem; color:var(--g7); white-space:pre-wrap; margin:0; max-height:7.5em; overflow:auto; }
.mt-acc{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.borrar-cuenta{ margin-top:40px; border:1px solid #F1C9C5; border-radius:var(--r); padding:14px 18px; background:#FFFBFA; }
.borrar-cuenta summary{ cursor:pointer; font-weight:700; color:#9A2A1C; }
.btn-peligro{ background:#B3261E; border-color:#B3261E; color:#fff; }
.btn-peligro:hover{ background:#8E1F18; }

/* Kits (paquetes): portada, /kits y aviso en la ficha */
.kits{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; margin-top:22px; }
.kits-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.kits-head h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:300; margin-top:8px; }
.kits-head h2 strong{ font-weight:800; }
.kits-h{ font-size:clamp(1.8rem,4vw,2.8rem); margin-top:8px; }
.gr-ritual{ margin-top:44px; margin-bottom:64px; }
.paq-fijo{ display:block; margin-top:4px; }
.reg-foto{ display:grid; gap:6px; }
.reg-foto-l{ display:flex; align-items:center; gap:14px; cursor:pointer; }
.reg-foto-c{ width:64px; height:64px; flex:none; border-radius:50%; background:var(--wash, #f4f1ec) center/cover no-repeat; border:2px dashed #c9a46a; display:grid; place-items:center; font-size:1.4rem; }
.reg-foto-c.con{ border-style:solid; font-size:0; }
.reg-foto-i{ font-size:.85rem; max-width:100%; }
.gr-ritual .gr-sub{ margin-top:10px; }
.gr-ritual .kits{ grid-template-columns:minmax(0, 320px); }
.kit-card{ display:flex; flex-direction:column; border:1px solid var(--g2, #e5e5e5); border-radius:var(--r, 14px); overflow:hidden; background:#fff; color:inherit; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.kit-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.kit-ph{ position:relative; aspect-ratio:4/3; background:#f4f1ee; overflow:hidden; }
.kit-ph img, .kit-ph canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kit-badge{ position:absolute; top:12px; left:12px; background:#111; color:#fff; font-size:.78rem; font-weight:700; padding:5px 10px; border-radius:99px; }
.kit-tx{ display:flex; flex-direction:column; gap:4px; padding:14px 16px 18px; }
.kit-tx b{ font-size:1.02rem; }
.kit-tx small{ color:var(--g5, #777); }
.kit-precio{ font-weight:800; font-size:1.15rem; margin-top:6px; }
.kit-precio s{ font-weight:400; font-size:.88rem; opacity:.5; margin-left:6px; }
.kit-ahorro{ align-self:flex-start; background:#e9f6ec; color:#1d6b33; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:99px; }
.pdp-kit{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 12px; border:1.5px dashed #c9b8a6; border-radius:12px; background:#fbf8f4; color:inherit; text-decoration:none; }
.pdp-kit img{ width:64px; height:48px; object-fit:cover; border-radius:8px; flex:none; }
.pdp-kit span{ display:flex; flex-direction:column; gap:2px; font-size:.9rem; }
.pdp-kit small{ color:#1d6b33; font-weight:600; }

/* Código de compra (cuenta de colaboradora) */
.cc-caja{ max-width:380px; margin-top:18px; padding:26px 22px; border-radius:18px; background:#111; color:#fff; text-align:center; }
.cc-num{ font-size:3rem; font-weight:800; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.cc-barra{ height:6px; background:rgba(255,255,255,.18); border-radius:99px; overflow:hidden; margin:14px 0 8px; }
.cc-barra span{ display:block; height:100%; background:#fff; transition:width 1s linear; }
.cc-caja .hint2{ color:#bbb; }
.cc-quien{ margin-top:10px; font-size:.85rem; color:#ddd; }

.cc-solo{ display:inline-block; margin:6px 0 10px; padding:8px 12px; border-radius:10px; background:#fff6e0; border:1px solid #f0d48a; font-size:.9rem; }

/* Foto de perfil redonda */
.avatar{ display:inline-grid; place-items:center; border-radius:50%; overflow:hidden; background:#ece6df; color:#5b4a3a; font-weight:800; flex:none; box-shadow:0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,.12); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.es-col{ box-shadow:0 0 0 3px #fff, 0 0 0 5px #c9a46a, 0 3px 12px rgba(0,0,0,.15); }
.acct-foto{ display:inline-block; margin-bottom:10px; }
.acct-who .tipo.col{ background:#f6ecd9; color:#7a5b22; }
.perfil-foto{ display:flex; gap:18px; align-items:center; margin:6px 0 24px; padding:16px; border:1px solid var(--g2, #e7e7e7); border-radius:16px; }
.perfil-foto-acc{ display:inline-block; margin:8px 8px 0 0; }
@media (max-width:560px){ .perfil-foto{ flex-direction:column; text-align:center; } }

/* ---------- Colaboradoras con solicitud (13/10/2026) ---------- */
.colab-inv{ margin-top:18px; background:radial-gradient(120% 140% at 0% 0%, #2a2216 0%, #0d0d0d 60%); color:#fff; border-radius:var(--r, 14px); padding:18px 20px; display:grid; gap:6px; border-bottom:2px solid #c9a46a; }
.colab-inv b{ color:#d4b06a; font-size:1rem; }
.colab-inv span{ font-size:.88rem; color:#e6e6e6; }
.colab-inv .btn{ justify-self:start; margin-top:6px; background:#c9a46a; color:#111; border-color:#c9a46a; }
.colab-ok{ margin:14px 0; padding:14px 16px; border-radius:12px; background:#f2faf5; border:1px solid #b6ddc4; font-size:.92rem; }
.colab-opciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px; margin-top:16px; }
.colab-una{ grid-template-columns:minmax(0, 560px); }
.colab-op{ border:1px solid var(--g2, #e6e6e6); border-radius:14px; padding:18px; display:grid; gap:10px; align-content:start; min-width:0; }
.colab-op h3{ font-size:1.1rem; }
.colab-ben{ white-space:pre-line; font-size:.84rem; background:var(--wash, #f6f3ee); border-radius:10px; padding:10px 12px; }
.colab-sin{ margin-top:8px; padding-top:12px; border-top:1px dashed var(--g3, #ccc); font-size:.88rem; display:grid; gap:8px; }
.colab-fechas{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.colab-fechas a{ display:grid; padding:8px 10px; border-radius:10px; background:var(--wash, #f6f3ee); color:inherit; text-decoration:none; }
.colab-fechas span{ font-size:.8rem; color:var(--g5, #666); }
.benef-pasos{ max-width:620px; margin:8px auto 28px; padding:0; list-style:none; counter-reset:paso; display:grid; gap:10px; }
.benef-pasos li{ counter-increment:paso; display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; text-align:left; }
.benef-pasos li::before{ content:counter(paso); width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; }
.colab-op .field{ display:grid; gap:6px; }
.colab-op .field input:not([type=file]), .colab-op .field textarea{
  font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--g1); border-radius:10px; padding:12px 14px; width:100%; }
.colab-op .field input:focus, .colab-op .field textarea:focus{ outline:none; border-color:var(--ink); }
.colab-op .field input[type=file]{ font-size:.85rem; width:100%; }

/* Artículo que vende: subtítulos, viñetas, consejo de estilista, autor,
   "Sigue leyendo" y el recuadro para compartir con su código. */
.nota h2{ font-size:1.3rem; font-weight:800; margin-top:34px; }
.nota ul{ margin:14px 0 0 20px; color:var(--g7); line-height:1.8; font-size:.98rem; }
.nota-autor{ font-size:.85rem; color:var(--g5); margin-top:10px; }
.nota-tip{ margin-top:22px; padding:16px 18px; border-left:4px solid var(--ink, #1A1A1A); background:var(--wash); border-radius:0 var(--r) var(--r) 0; font-size:.95rem; line-height:1.7; }
.nota-tip b{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.nota-otras{ display:grid; gap:12px; }
@media (min-width:860px){ .nota-otras{ grid-template-columns:repeat(3,1fr); } }
.comp-cod{ margin-top:26px; padding:16px 18px; border:1px dashed var(--g3, #ccc); border-radius:var(--r); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.comp-cod > span{ font-size:.85rem; color:var(--g5); flex:1 1 200px; }
.comp-cod-bt{ display:flex; gap:8px; flex-wrap:wrap; }

/* "Hazte colaboradora" en la cuenta: beneficios en tarjetas (2 × 2 en PC, una en celular). */
.colab-sub{ color:var(--g5); font-size:.95rem; line-height:1.6; max-width:62ch; margin-top:6px; }
.colab-cards{ display:grid; gap:12px; margin:20px 0 26px; grid-template-columns:minmax(0, 1fr); }
@media (min-width:640px){ .colab-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.colab-card{ background:#fff; border:1px solid var(--g1); border-radius:var(--r); padding:18px; border-top:3px solid #c9a46a; }
.colab-card > b{ display:block; font-size:1.25rem; font-weight:800; color:var(--ink); }
.colab-card h3{ font-size:.95rem; font-weight:700; margin-top:4px; }
.colab-card p{ font-size:.86rem; color:var(--g7); margin-top:6px; line-height:1.55; }
.cc-qr{ background:#fff; border-radius:12px; padding:10px; width:220px; max-width:100%; margin:0 auto 14px; line-height:0; }
.cc-qr svg{ width:100%; height:auto; }
.res-escribir{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center; margin:0 auto 22px; padding:14px 18px; max-width:620px; border:1px dashed #c9a46a; border-radius:var(--r); font-size:.9rem; }
/* Reel sin video: la foto del producto llena el espacio; al equipo le sale encima "Tu video aquí". */
.lp-vid-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.lp-vid-falta{ position:absolute; inset:auto 10px 10px; min-height:0; width:auto; height:auto; padding:6px 10px; border-radius:99px; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; }

/* Pago en celular: barrita con el total arriba (el resumen completo va hasta abajo). */
.cko-mini{ display:none; }
@media (max-width:939px){
  .cko-mini{ display:flex; justify-content:space-between; align-items:center; gap:10px; grid-column:1 / -1; margin:0 0 18px;
    padding:12px 14px; border:1px solid var(--g1); border-radius:var(--r); background:var(--wash); color:var(--ink); text-decoration:none; font-size:.9rem; }
  .cko-mini u{ font-size:.8rem; margin-left:6px; }
}

/* ---------- portada en teléfono ----------
   En pantalla chica la portada era de ~18 pantallas y lo que emociona
   (los reels) quedaba hasta abajo. Aquí, solo en teléfono: un orden
   propio, filas que se deslizan con el dedo y menos texto suelto.
   En computadora manda el orden del panel, como siempre. */
.m-intro-movil, .nv-mas{ display:none; }
@media (max-width:759px){
  .inicio{ display:flex; flex-direction:column; }
  .inicio > *, .inicio > [data-portada] > *{ order:20; }
  .inicio #top{ order:1; }
  .inicio .lp-b-videos{ order:2; }
  .inicio #lanzamientos{ order:3; }
  .inicio #subcats-band{ order:4; }
  .inicio #promociones{ order:5; }
  .inicio #kits{ order:6; }
  .inicio #testimonios{ order:7; }
  .inicio #puntos{ order:8; }
  .inicio #negocio{ order:9; }
  .inicio .vistos{ order:10; }
  .inicio #novedades{ order:11; }
  .inicio #porque{ order:12; }
  .inicio #grupo{ order:13; }
  .inicio #marcas{ order:14; }
  .inicio .strip{ order:15; }

  .inicio .sec{ padding-block:34px; }

  /* primera pantalla: título, botones y foto caben juntos */
  /* la foto de teléfono del banner es 3:4: se respeta completa, sin recortarla */
  .inicio .plate.con-foto{ aspect-ratio:3/4; max-height:none; }
  .inicio .slide h1, .inicio .slide h2{ font-size:2rem; }
  .inicio .slide p.sub{ margin-top:12px; }

  /* filas que se deslizan: tarjetas completas (2 productos o 1 tarjeta), con flechas y puntos de mhl.js */
  .inicio .prods, .inicio .kits, .inicio .tests, .inicio .why, .inicio .promos{
    display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 12px) / 2);
    gap:12px; justify-content:start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding:2px var(--gutter) 8px; scroll-padding-inline:var(--gutter);
    scrollbar-width:none; }
  .inicio .prods::-webkit-scrollbar, .inicio .kits::-webkit-scrollbar, .inicio .tests::-webkit-scrollbar,
  .inicio .why::-webkit-scrollbar, .inicio .promos::-webkit-scrollbar{ display:none; }
  .inicio .prods > *, .inicio .kits > *, .inicio .tests > *, .inicio .why > *, .inicio .promos > *{ scroll-snap-align:start; min-width:0; }
  .inicio .kits, .inicio .tests, .inicio .why{ grid-auto-columns:100%; }
  .inicio .promos{ grid-auto-columns:100%; margin-top:20px; }
  .inicio .promos > .pm{ min-height:190px; }
  .inicio .m-intro{ display:none; }
  .m-intro-movil{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:16px; }
  .m-intro-movil .shead{ margin:0; text-align:left; }
  .m-intro-movil .shead p{ display:none; }
  .m-intro-movil .btn{ flex:none; }
  .inicio .kits-head .btn{ display:none; }
  .inicio .kits-head{ margin-bottom:0; }


  /* menos texto suelto: sin los dibujos de relleno y con lo justo */
  .inicio .opp-art, .inicio .corp-art{ display:none; }
  .inicio .opp .wrap, .inicio .corp .wrap{ padding-block:36px; }
  .inicio .newslist{ display:none; }
  .nv-mas{ display:block; text-align:center; margin-top:18px; }
  .inicio .strip .wrap{ grid-template-columns:repeat(3,1fr); gap:10px; text-align:center; padding-block:22px; }
  .inicio .strip .claim{ grid-column:1 / -1; }
  .inicio .strip .sfig{ border:0; padding:0; }
  .inicio .strip .sfig b{ font-size:1.3rem; }
  .inicio .strip .sfig span{ font-size:.72rem; }
}

/* flechas y puntos de las filas de la portada (los pone mhl.js solo cuando la fila no cabe) */
.fila-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.fila-flecha{ width:36px; height:36px; border-radius:50%; border:1px solid var(--g1); background:#fff; color:var(--ink);
  font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 2px; }
.fila-flecha:hover{ border-color:var(--ink); }
.fila-puntos{ display:flex; gap:6px; align-items:center; }
.fila-puntos button{ width:7px; height:7px; border-radius:50%; border:0; padding:0; background:var(--g3); cursor:pointer; transition:width .25s, background .25s; }
.fila-puntos button.on{ width:20px; border-radius:999px; background:var(--ink); }
.band .fila-flecha{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.band .fila-puntos button{ background:rgba(255,255,255,.35); } .band .fila-puntos button.on{ background:#fff; }

/* pie en teléfono: los links en dos columnas (en una sola eran varias pantallas
   de lista) y "Operamos en" alineado con lo demás, en vez de centrado */
@media (max-width:759px){
  .fgrid{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .fpais{ grid-column:1 / -1; text-align:left; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; }
}

/* Calendario de eventos (/eventos): las fechas que pone el equipo. */
.ev-cal-mes{ margin-top:22px; max-width:520px; background:#fff; border:1px solid var(--g1, #e6e6e6); border-radius:14px; padding:16px; }
.ev-cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ev-cal-top b{ font-size:1rem; font-weight:800; }
.ev-cal-nav{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--g1, #e6e6e6); font-size:1.2rem; line-height:1; color:inherit; text-decoration:none; }
.ev-cal-nav:hover{ border-color:var(--ink, #1a1a1a); }
.ev-cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; }
.ev-cal-dn{ font-size:.7rem; font-weight:700; color:var(--g5, #777); padding:4px 0; }
.ev-cal-d{ position:relative; aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-size:.88rem; color:inherit; text-decoration:none; }
.ev-cal-d.hoy{ box-shadow:inset 0 0 0 1.5px var(--ink, #1a1a1a); }
.ev-cal-d.con{ background:var(--ink, #1a1a1a); color:#fff; font-weight:800; }
.ev-cal-d.con.paso{ background:var(--g1, #e6e6e6); color:var(--g5, #777); }
.ev-cal-d.con i{ position:absolute; bottom:6px; width:4px; height:4px; border-radius:50%; background:currentColor; }
.ev-cal-lista{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--g1, #e6e6e6); display:grid; gap:8px; }
.ev-cal-lista a{ color:inherit; text-decoration:none; font-size:.9rem; }
.ev-cal-lista b{ display:inline-block; min-width:52px; }
.ev-cal-lista small{ color:var(--g5, #777); }
.ev-cal-vacio{ margin:12px 0 0; font-size:.88rem; color:var(--g5, #777); }
.ev-cal{ display:block; margin-top:6px; }
.ev-cal a{ text-decoration:underline; }

/* Video del banner: encima de la foto, aparece cuando ya corre. */
.plate-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s ease; }
.plate-video.lista{ opacity:1; }
.plate.enc-arriba .plate-video{ object-position:center top; }
.plate.enc-abajo .plate-video{ object-position:center bottom; }

/* El título del primer banner es h1 (por Google) y no tenía el tamaño de
   los demás: se veía más chico. */
.slide h1{ font-size:clamp(2rem,4.8vw,3.5rem); font-weight:300; margin-top:14px; }
.slide h1 strong{ font-weight:800; }

/* ---------- banner con video, a todo lo ancho ----------
   El video ocupa toda la franja y el texto va encima, a la derecha (la
   modelo está a la izquierda). Un degradado claro lo hace legible. */
@media (min-width:940px){
  .slide .sin.sin-video{ position:relative; display:block; max-width:none; padding:0; min-height:clamp(460px,42vw,620px); }
  .sin-video > .plate{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; max-height:none; }
  .sin-video > .plate::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(270deg, rgba(244,244,244,.96) 0%, rgba(244,244,244,.82) 30%, rgba(244,244,244,0) 56%); }
  .sin-video > div:first-child{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; min-height:inherit;
    padding:clamp(40px,5vw,72px) var(--gutter) 96px; display:grid; grid-template-columns:1fr minmax(0, 470px); align-content:center; }
  .sin-video > div:first-child > *{ grid-column:2; }
}
/* En teléfono: el video arriba, de orilla a orilla, y el texto abajo. */
@media (max-width:939px){
  .sin-video > .plate{ order:-1; margin-inline:calc(var(--gutter) * -1); width:auto !important; border-radius:0; }
  .slide .sin.sin-video{ padding-top:0; }
}

/* ---------- pestañas: por línea / por necesidad ---------- */
.sc-tabs{ display:flex; justify-content:center; gap:28px; margin:6px 0 22px; border-bottom:1px solid var(--g1); }
.sc-tabs button{ background:none; border:0; padding:10px 2px 12px; font:inherit; font-size:.95rem; font-weight:600; color:var(--g5);
  border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.sc-tabs button.on{ color:var(--ink); border-bottom-color:var(--ink); }
.necesidades{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.necesidades[hidden], .subcats[hidden]{ display:none; }
.nec{ display:flex; flex-direction:column; gap:4px; color:inherit; text-decoration:none; }
.nec .ph{ position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--g1); }
.nec .ph img, .nec .ph canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10%; }
.nec .ph canvas{ padding:0; }
.nec b{ margin-top:6px; font-size:.95rem; }
.nec small{ color:var(--g5); font-size:.8rem; }
.nec:hover .ph{ border-color:var(--ink); }

/* ---------- campaña por línea ----------
   Franja oscura con la foto de la línea a un lado y el texto al otro;
   abajo, sus productos en una fila que se desliza. */
.linea-camp{ margin-top:clamp(34px,5vw,64px); }
.lc-banner{ display:grid; background:var(--ink); color:#fff; text-decoration:none; overflow:hidden; }
.lc-banner img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.lc-txt{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:clamp(24px,4vw,56px) var(--gutter); }
.lc-txt small{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.lc-txt b{ font-size:clamp(2rem,4.4vw,3.4rem); font-weight:800; line-height:1.02; }
.lc-txt em{ font-style:normal; color:rgba(255,255,255,.75); max-width:42ch; }
.lc-txt .btn{ align-self:flex-start; margin-top:10px; background:#fff; color:var(--ink); border-color:#fff; }
@media (min-width:760px){
  .lc-banner{ grid-template-columns:1.15fr 1fr; }
  .lc-banner img{ aspect-ratio:auto; height:100%; max-height:460px; }
  .lc-alt .lc-banner{ grid-template-columns:1fr 1.15fr; }
  .lc-alt .lc-banner img{ order:2; }
}
.lc-fila{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 16px) / 4); gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; padding:22px 0 6px; scrollbar-width:thin; }
.lc-fila > *{ scroll-snap-align:start; }
@media (max-width:759px){
  .lc-fila{ grid-auto-columns:calc((100% - 12px) / 2); gap:12px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .lc-fila::-webkit-scrollbar{ display:none; }
  .inicio .linea-camp{ order:4; }
}
.sc-tabs button{ flex:0 0 auto; width:auto; }
/* La franja de categorías es oscura: pestañas en blanco. */
.band .sc-tabs{ border-bottom-color:rgba(255,255,255,.16); }
.band .sc-tabs button{ color:rgba(255,255,255,.55); }
.band .sc-tabs button.on{ color:#fff; border-bottom-color:#fff; }
.band .nec small{ color:rgba(255,255,255,.6); }
.band .nec .ph{ border-color:transparent; }
.band .nec:hover .ph{ border-color:#fff; }

/* ---------- barra fija abajo ----------
   Negra, delgada, con los accesos que más se buscan. Lo que flota abajo
   (WhatsApp, avisos) sube para no quedar debajo de ella. */
:root{ --barra-fija:44px; }
.barra-fija{ position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; height:calc(var(--barra-fija) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px); background:var(--ink); color:#fff; }
.barra-fija a{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; text-decoration:none;
  font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.14); padding:0 8px; }
.barra-fija a:first-child{ border-left:0; }
.barra-fija a:hover{ background:rgba(255,255,255,.08); }
.barra-fija svg{ width:18px; height:18px; flex:none; }
.barra-fija span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:has(.barra-fija){ padding-bottom:calc(var(--barra-fija) + env(safe-area-inset-bottom,0px)); }
body:has(.barra-fija) .wa, body:has(.barra-fija) .cookie, body:has(.barra-fija) .consent{ bottom:calc(var(--barra-fija) + 14px + env(safe-area-inset-bottom,0px)); }
body:has(.barra-fija) .tost{ bottom:calc(var(--barra-fija) + 20px); }
body:has(.barra-fija) .lp-barra{ bottom:calc(var(--barra-fija) + 12px); }
@media (max-width:760px){
  .barra-fija .bf-pc{ display:none; }
  .barra-fija a{ flex-direction:column; gap:2px; font-size:.62rem; letter-spacing:.02em; text-transform:none; }
  .barra-fija a b{ font-weight:800; }
  :root{ --barra-fija:52px; }
  /* En la ficha manda la barra de "Agregar al carrito". */
  body:has(.buy-bar) .barra-fija{ display:none; }
  body:has(.buy-bar){ padding-bottom:0; }   /* como estaba antes de la barra */
}

/* Bolsa para comprar desde el reel. */
.lp-vid-bolsa{ flex:none; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--ink); color:#fff; cursor:pointer; }
.lp-vid-bolsa svg{ width:19px; height:19px; }
.lp-vid-bolsa:hover{ transform:scale(1.06); }
/* Una cifra que lleva a otra página (el plan para estilistas). */
.sfig-liga{ color:inherit; text-decoration:none; }
.sfig-liga span{ text-decoration:underline; text-underline-offset:3px; }
.sfig-liga:hover b{ opacity:.8; }
/* Ritual sin foto propia: sus productos en fila, sobre blanco. */
.kit-collage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2%; padding:8%; background:#fff; }
.kit-ph .kit-collage img{ position:static; inset:auto; flex:1 1 0; min-width:0; width:auto; height:100%; object-fit:contain; }
.kit-collage.n4 img{ margin-inline:-3%; }

/* ---- Muestras gratis al pagar (20-oct) ---- */
.cko-muestras{ margin:26px 0 8px; padding-top:22px; border-top:1px solid var(--g1); }
.cko-muestras h3{ font-size:1rem; margin-bottom:4px; }
.mu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin-top:12px; }
.mu-op{ position:relative; display:flex; flex-direction:column; gap:6px; padding:8px; border:1px solid var(--g1); border-radius:10px; cursor:pointer; background:var(--paper); }
.mu-op input{ position:absolute; top:8px; right:8px; width:18px; height:18px; accent-color:currentColor; }
.mu-op:has(input:checked){ border-color:currentColor; box-shadow:0 0 0 1px currentColor inset; }
.mu-op:has(input:disabled:not(:checked)){ opacity:.45; cursor:not-allowed; }
.mu-ph{ aspect-ratio:1; border-radius:6px; background:var(--wash); overflow:hidden; }
.mu-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.mu-nom{ font-size:.8rem; line-height:1.25; }
.mu-cuenta:empty{ display:none; }

/* ---- Pie: beneficios con ícono y atención a clientes (20-oct, como Redken) ---- */
.fbenef{ border-bottom:1px solid rgba(255,255,255,.14); }
.fbenef .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 24px; padding-block:22px; }
.fbenef a, .fbenef span{ display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:.84rem; text-decoration:none; }
.fbenef a:hover{ text-decoration:underline; }
.fbenef svg{ width:26px; height:26px; flex:none; }
/* las formas de pago junto a "Pago seguro": letreros sobrios, en el blanco y negro del sitio */
.fbenef span:has(.fpagos){ flex-wrap:wrap; }
.fbenef .fpagos{ flex-wrap:wrap; gap:6px; }
.fbenef .fpagos i{ font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.03em; line-height:1;
  padding:4px 7px; border:1px solid rgba(255,255,255,.4); border-radius:4px; white-space:nowrap; }
@media (max-width:620px){ .fbenef .wrap{ grid-template-columns:1fr 1fr; } .fbenef a, .fbenef span{ justify-content:flex-start; font-size:.8rem; } }
@media (min-width:760px){ .fgrid{ grid-template-columns:repeat(var(--cols,3),1fr) auto; } }
.fatencion p{ font-size:.82rem; color:var(--g3); line-height:1.55; margin-bottom:8px; }
.fatencion b{ color:#fff; font-size:.95rem; }

/* ---- La cinta que corre: próximos cursos (abajo del menú negro, en blanco) ---- */
.cinta{ display:block; overflow:hidden; background:#fff; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--g1); }
.cinta-pista{ display:flex; width:max-content; animation:cintaCorre 60s linear infinite; }
.cinta:hover .cinta-pista, .cinta:focus-visible .cinta-pista{ animation-play-state:paused; }
.cinta-grupo{ display:flex; align-items:center; gap:22px; padding:10px 11px; white-space:nowrap;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.cinta-grupo b{ font-weight:800; }
.cinta-grupo > *::before{ content:"✦"; margin-right:22px; font-size:.7em; }
.cinta-grupo u{ text-decoration:underline; text-underline-offset:3px; }
@keyframes cintaCorre{ to{ transform:translateX(-50%); } }
/* a quien pidió menos movimiento, quieta */
@media (prefers-reduced-motion: reduce){ .cinta-pista{ animation:none; } }

/* ---- Aviso de arriba: muestras gratis ---- */
.aviso-top{ position:relative; background:var(--ink); color:#fff; text-align:center; font-size:.78rem; letter-spacing:.06em; padding:8px 16px; }
.aviso-top a{ color:#fff; }
.aviso-top b{ text-transform:uppercase; }
/* el lema, a la izquierda y alineado con el logo; el aviso sigue centrado */
.aviso-top .lema-top{ position:absolute; top:50%; transform:translateY(-50%);
  left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter)); font-weight:700; letter-spacing:.02em; white-space:nowrap; }
/* donde chocaría con el aviso, no sale (sigue en el pie y en el título); sin aviso, va solo y al centro */
@media (max-width:1279px){
  .aviso-top .lema-top{ display:none; }
  .aviso-top:not(:has(.aviso-msj)) .lema-top{ display:block; position:static; transform:none; }
}

/* ---- Galería del kit/ritual: con las fotos de lo que trae (20-oct) ---- */
.paq-galeria{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.paq-foto{ position:relative; background:#fff; border:1px solid var(--g1); }
.paq-foto > img.sola{ object-fit:contain; padding:8%; }
.paq-miniaturas{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.paq-miniaturas button{ position:relative; flex:none; width:72px; aspect-ratio:1; padding:0; border:1px solid var(--g1); border-radius:10px; background:#fff; overflow:hidden; cursor:pointer; }
.paq-miniaturas button.on{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; }
.paq-miniaturas button > img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.paq-miniaturas .kit-collage{ padding:6px; }
.paq-miniaturas .kit-collage img{ position:static; flex:1 1 0; min-width:0; height:100%; object-fit:contain; }
.paq-foto .kit-collage img{ position:static; flex:1 1 0; min-width:0; width:auto; height:100%; object-fit:contain; }
.paq-foto .kit-collage{ padding:3% 2%; gap:0; }
.paq-foto .kit-collage.n4 img{ margin-inline:-2%; }
.paq-foto .kit-collage.n4{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; padding:0; gap:1px; background:var(--g1); }
.paq-foto .kit-collage.n4 img{ margin:0; width:100%; height:100%; min-height:0; object-fit:contain; background:#fff; }

/* ---- Pie: recibir correos (20-oct, como Redken) ---- */
@media (min-width:760px){ .fgrid.con-correo{ grid-template-columns:repeat(var(--cols,3),1fr) minmax(260px,1.5fr) auto; } }
.fcorreo p{ font-size:.82rem; color:var(--g3); line-height:1.5; margin-bottom:12px; }
.fcorreo-fila{ display:flex; gap:8px; }
.fcorreo-fila input{ flex:1; min-width:0; height:42px; padding:0 14px; border:1px solid rgba(255,255,255,.35); border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-size:.85rem; }
.fcorreo-fila .btn{ flex:none; background:#fff; color:var(--ink); border-color:#fff; }
.fcorreo-ok{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:.72rem; color:var(--g3); line-height:1.45; cursor:pointer; }
.fcorreo-ok input{ margin-top:2px; flex:none; }
.fgrid .fcorreo-ok a{ display:inline; padding:0; font-size:inherit; text-decoration:underline; }
.fcorreo-msg{ margin-top:8px; font-size:.8rem; color:#fff; }
@media (max-width:759px){ .fcorreo{ grid-column:1 / -1; } }

/* ---- Encuentra tu estilista (20-oct) ---- */
.est-cab{ padding-top:clamp(24px,4vw,48px); }
.est-cab h1{ font-size:clamp(1.6rem,3.4vw,2.4rem); margin:4px 0 8px; }
.est-filtros{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.est-filtros select{ height:38px; padding:0 12px; border:1px solid var(--g1); border-radius:999px; background:var(--paper); font:inherit; font-size:.85rem; }
.est-filtros .btn{ display:inline-flex; gap:6px; align-items:center; }
.est-quitar{ font-size:.82rem; color:var(--g5); }
.est-msg{ margin-top:10px; font-size:.82rem; color:var(--g5); }
.est{ display:grid; gap:20px; padding-block:22px clamp(40px,6vw,72px); }
.est-mapa{ height:340px; border-radius:var(--r); overflow:hidden; border:1px solid var(--g1); z-index:0; }
@media (min-width:940px){
  .est{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; }
  .est-mapa{ position:sticky; top:90px; height:calc(100vh - 140px); max-height:640px; }
  .est-lista{ grid-column:2; grid-row:1; }
  .est > .est-mapa{ grid-column:1; grid-row:1; }
}
.est-lista{ display:grid; gap:14px; }
.est-card{ background:var(--paper); border:1px solid var(--g1); border-radius:var(--r); padding:18px; scroll-margin-top:100px; transition:border-color .2s; }
.est-card.on, .est-card:target{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; }
.est-top{ display:flex; gap:14px; align-items:center; }
.est-foto{ flex:none; width:58px; height:58px; border-radius:50%; overflow:hidden; background:var(--wash); display:grid; place-items:center; font-weight:800; font-size:1.3rem; color:var(--g5); }
.est-foto img{ width:100%; height:100%; object-fit:cover; }
.est-card h3{ font-size:1.02rem; }
.est-salon{ font-size:.85rem; font-weight:600; }
.est-lugar{ font-size:.8rem; color:var(--g5); }
.est-texto{ font-size:.86rem; line-height:1.55; margin-top:12px; color:var(--g7); }
.est-datos{ list-style:none; padding:0; margin:10px 0 0; font-size:.82rem; color:var(--g7); display:grid; gap:3px; }
.est-datos li::before{ content:"·"; margin-right:6px; color:var(--g3); }
.est-aplica{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; font-size:.76rem; color:var(--g5); }
.est-aplica span{ padding:3px 9px; border-radius:999px; background:var(--wash); color:var(--ink); }
.est-aplica span.on{ background:var(--ink); color:#fff; }
.est-acc{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
.est-ig{ font-size:.82rem; color:var(--g5); }
.est-codigo{ display:block; margin-top:12px; padding-top:12px; border-top:1px solid var(--g1); font-size:.82rem; font-weight:600; color:var(--ink); }
.est-vacio{ text-align:center; padding:56px 16px; background:var(--wash); border-radius:var(--r); }
.est-vacio h2{ font-size:1.3rem; margin-bottom:6px; }
.est-vacio p{ color:var(--g5); margin-bottom:18px; }
.est-pin span{ display:block; width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--ink); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.pdp-estilista{ display:flex; gap:14px; align-items:center; margin-top:14px; padding:14px 16px; border:1px solid var(--g1); border-radius:14px; text-decoration:none; color:var(--ink); background:var(--paper); }
.pdp-estilista:hover{ border-color:var(--ink); }
.pdp-estilista b{ display:block; font-size:.9rem; }
.pdp-estilista small{ font-size:.8rem; color:var(--g5); }
.pdp-est-caras{ display:flex; flex:none; }
.pdp-est-caras span{ width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid #fff; margin-left:-10px; background:var(--wash); display:grid; place-items:center; font-weight:800; font-size:.85rem; color:var(--g5); }
.pdp-est-caras span:first-child{ margin-left:0; }
.pdp-est-caras img{ width:100%; height:100%; object-fit:cover; }

/* ---- Rituales sin foto: fondo de color por ritual y las fotos fundidas
        con él (multiply quita el gris de fondo de las fotos de producto) ---- */
.kit-collage.tinte0{ --t1:#fbeef0; --t2:#f1cfd6; }
.kit-collage.tinte1{ --t1:#f6efe4; --t2:#e6d3b8; }
.kit-collage.tinte2{ --t1:#eef3ec; --t2:#cfdfcb; }
.kit-collage.tinte3{ --t1:#f1eef8; --t2:#d6cdea; }
.kit-collage[class*="tinte"]{ background:radial-gradient(120% 90% at 50% 25%, var(--t1) 0%, var(--t2) 100%); }
.kit-collage[class*="tinte"] img{ mix-blend-mode:multiply; filter:brightness(1.07) contrast(1.15) saturate(1.12); transform:scale(1.45); }
.kit-collage[class*="tinte"]{ overflow:hidden; }
.paq-foto .kit-collage.n4[class*="tinte"]{ gap:0; }
.paq-foto .kit-collage.n4[class*="tinte"] img{ background:transparent; }
/* En la página del ritual, con color: en fila como en la tarjeta (la cuadrícula 2×2 se encimaba al agrandar). */
.paq-foto .kit-collage[class*="tinte"], .paq-foto .kit-collage.n4[class*="tinte"]{ display:flex; padding:4% 6%; gap:0; }
.paq-foto .kit-collage[class*="tinte"] img, .paq-foto .kit-collage.n4[class*="tinte"] img{ flex:1 1 0; min-width:0; width:auto; height:100%; margin:0; object-fit:contain; transform:scale(1.3); }
.paq-miniaturas .kit-collage[class*="tinte"] img{ transform:scale(1.3); }
.paq-foto .kit-collage[class*="tinte"], .paq-miniaturas .kit-collage[class*="tinte"]{ background:radial-gradient(120% 90% at 50% 25%, var(--t1) 0%, var(--t2) 100%); align-items:center; }

/* ---- Propuesta de portada (20-oct): el método MHL y Encuentra tu estilista ---- */
.metodo-cab{ text-align:center; max-width:720px; margin:0 auto 28px; }
.metodo-cab h2{ font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.12; }
.metodo-pasos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,28px); }
.metodo-foto{ position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--wash); }
.metodo-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.metodo-foto:hover img{ transform:scale(1.04); }
.metodo-n{ position:absolute; top:14px; left:14px; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1rem; }
.metodo-paso h3{ font-size:1.12rem; margin:16px 0 6px; }
.metodo-paso p{ font-size:.9rem; color:var(--g7); line-height:1.5; margin-bottom:8px; }
.metodo-liga{ font-size:.86rem; font-weight:700; color:var(--ink); }
.est-band{ background:var(--ink); color:#fff; }
.est-band-in{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:clamp(36px,5vw,64px); }
.est-band .kicker{ color:var(--g3); }
.est-band h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin:4px 0 10px; color:#fff; }
.est-band-tx p{ color:var(--g3); max-width:460px; margin-bottom:18px; }
.est-band .btn{ background:#fff; color:var(--ink); border-color:#fff; }
.est-band-caras{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.est-band-caras span{ display:inline-grid; place-items:center; width:64px; height:64px; margin-left:-14px; border-radius:50%; overflow:hidden; border:3px solid var(--ink); background:#2b2b2b; font-weight:800; font-size:1.3rem; color:#fff; vertical-align:middle; }
.est-band-caras{ flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:340px; }
.est-band-caras span:first-child{ margin-left:0; }
.est-band-caras img{ width:100%; height:100%; object-fit:cover; }
.est-band-caras small{ flex-basis:100%; text-align:center; color:var(--g3); font-size:.8rem; }
@media (max-width:759px){
  .metodo-pasos{ grid-template-columns:1fr; gap:22px; }
  .metodo-cab{ margin-bottom:20px; }
  .est-band-in{ flex-direction:column; align-items:flex-start; }
  .est-band-caras{ justify-content:flex-start; }
  .est-band-caras small{ text-align:left; }
  /* Orden en teléfono de la propuesta. */
  .inicio.propuesta #top{ order:1; }
  .inicio.propuesta #metodo{ order:2; }
  .inicio.propuesta #subcats-band{ order:3; }
  .inicio.propuesta #lanzamientos{ order:4; }
  .inicio.propuesta .lp-b-videos{ order:5; }
  .inicio.propuesta #kits{ order:6; }
  .inicio.propuesta #estilistas-band{ order:7; }
  .inicio.propuesta #testimonios{ order:8; }
}

/* ================================================================
   Propuesta B (20-oct): estilo redken.com. Solo con body.estilo-redken
   (liga firmada de vista previa); la tienda normal no cambia.
   ================================================================ */
body.estilo-redken{ --rk-rosa:#e0177a; }
.estilo-redken .aviso-top{ background:var(--rk-rosa); color:#fff; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; }
.estilo-redken .aviso-top a{ color:#fff; }
.estilo-redken .nav{ display:none; }            /* el menú va dentro de la barra negra */
.rk-head{ position:sticky; top:0; z-index:60; background:#000; color:#fff; }
.rk-in{ max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:22px; height:74px; padding:0 var(--gutter); }
.rk-logo{ display:flex; flex-direction:column; align-items:center; line-height:1; color:#fff; text-decoration:none; flex:none; }
.rk-logo b{ font-size:1.7rem; font-weight:800; letter-spacing:.14em; }
.rk-logo span{ font-size:.58rem; letter-spacing:.5em; text-transform:uppercase; margin-top:4px; color:#ccc; }
.rk-menu{ display:flex; align-items:stretch; height:100%; gap:2px; flex:1; }
.rk-item{ display:flex; align-items:center; }
.rk-item > a{ display:flex; align-items:center; height:100%; padding:0 13px; color:#fff; text-decoration:none; font-size:.86rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; border-bottom:3px solid transparent; }
.rk-item > a:hover, .rk-item:focus-within > a{ border-bottom-color:var(--rk-rosa); }
.rk-item:first-child > a{ color:var(--rk-rosa); }
.rk-mega{ position:absolute; left:0; right:0; top:100%; background:#fff; color:var(--ink); box-shadow:0 18px 30px rgba(0,0,0,.18); opacity:0; visibility:hidden; transition:opacity .15s; }
.rk-item:hover .rk-mega, .rk-item:focus-within .rk-mega{ opacity:1; visibility:visible; }
.rk-mega-in{ max-width:1440px; margin:0 auto; padding:30px var(--gutter) 34px calc(var(--gutter) + 120px); display:flex; gap:56px; align-items:flex-start; }
.rk-mega-col{ display:flex; flex-direction:column; gap:10px; min-width:200px; }
.rk-mega-hd{ font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--g5); margin-bottom:4px; }
.rk-mega-col a{ color:var(--ink); text-decoration:none; font-size:.95rem; }
.rk-mega-col a:hover{ text-decoration:underline; }
.rk-mega-ver{ margin-left:auto; align-self:flex-end; font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
.rk-icons{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.rk-ico{ position:relative; display:grid; place-items:center; width:42px; height:42px; background:none; border:0; color:#fff; cursor:pointer; text-decoration:none; }
.rk-ico .n{ position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--rk-rosa); color:#fff; font-size:.66rem; font-weight:800; display:grid; place-items:center; }
.rk-burger{ display:none; }
.rk-buscar{ background:#000; border-top:1px solid #222; }
.rk-buscar-in{ max-width:760px; margin:0 auto; display:flex; gap:10px; padding:14px var(--gutter) 18px; }
.rk-buscar input{ flex:1; height:46px; padding:0 16px; border:0; border-radius:0; font:inherit; font-size:1rem; }
.rk-buscar button{ height:46px; padding:0 22px; border:0; background:var(--rk-rosa); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
@media (max-width:1100px){ .rk-item > a{ padding:0 9px; font-size:.78rem; } }
@media (max-width:939px){
  .rk-in{ height:60px; gap:6px; }
  .rk-menu, .rk-pc{ display:none; }
  .rk-burger{ display:grid; }
  .rk-logo{ position:absolute; left:50%; transform:translateX(-50%); }
  .rk-logo b{ font-size:1.35rem; }
}
/* Formato: mayúsculas, peso fuerte, esquinas rectas, botones negros. */
.estilo-redken .btn{ border-radius:0; text-transform:uppercase; letter-spacing:.08em; font-weight:800; font-size:.8rem; padding-inline:26px; }
.estilo-redken .btn-o{ border-width:2px; }
.estilo-redken .kicker{ text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.72rem; color:var(--rk-rosa); }
.estilo-redken .inicio h2{ text-transform:uppercase; font-weight:900; letter-spacing:.01em; }
.estilo-redken .inicio h2 strong, .estilo-redken .inicio h2 .mark{ font-weight:900; }
.estilo-redken .slide h1, .estilo-redken .slide h2{ text-transform:uppercase; font-weight:900; letter-spacing:-.005em; }
.estilo-redken .metodo-cab{ text-align:left; max-width:none; }
.estilo-redken .metodo-foto, .estilo-redken .kit-card, .estilo-redken .kit-ph,
.estilo-redken .lp-vid, .estilo-redken .lp-vid-v, .estilo-redken .est-band .btn,
.estilo-redken .inicio .card, .estilo-redken .inicio .pcard, .estilo-redken .inicio .shot{ border-radius:0 !important; }
.estilo-redken .metodo-n{ border-radius:0; background:var(--rk-rosa); }
.estilo-redken .metodo-liga{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; border-bottom:2px solid var(--ink); padding-bottom:2px; text-decoration:none; }
.estilo-redken .est-band{ background:var(--rk-rosa); }
.estilo-redken .est-band .kicker, .estilo-redken .est-band-tx p, .estilo-redken .est-band-caras small{ color:#fff; }
.estilo-redken .est-band-caras span{ border-color:var(--rk-rosa); background:#000; }
.estilo-redken .barra-fija{ background:#000; }
/* Panel del menú (B y C): alineado con el primer botón del menú. */
.rk-logo{ width:84px; }
.rk-mega-in{ padding:28px var(--gutter) 32px calc(var(--gutter) + 84px + 22px + 13px); gap:40px; justify-content:space-between; }
.rk-mega-cols{ display:flex; gap:56px; align-items:flex-start; }
.rk-mega-col{ min-width:170px; gap:9px; }
.rk-mega-hd{ min-height:1em; }
.rk-mega-todo{ font-weight:800; text-transform:uppercase; font-size:.8rem !important; letter-spacing:.06em; }
.rk-mega-foto{ flex:none; width:260px; display:block; color:var(--ink); text-decoration:none; }
.rk-mega-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--wash); }
.rk-mega-foto span{ display:block; margin-top:10px; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
.rk-mega-ver{ display:none; }
@media (max-width:1100px){ .rk-mega-in{ padding-left:var(--gutter); } .rk-mega-foto{ width:200px; } }

/* ---- Propuesta E: "Tienda" con los productos y su foto dentro del menú ---- */
.mega.mega-tienda{ display:flex; gap:22px; width:min(940px, calc(100vw - 60px)); padding:20px 22px 22px 6px; }
.mega-tienda .mt-ligas{ flex:none; width:190px; border-right:1px solid var(--g1); }
.mega-tienda .mt-prods{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 12px; align-content:start; }
.mega-tienda a.mt-prod{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; font-size:.8rem; color:var(--ink); }
.mega-tienda a.mt-prod:hover{ background:var(--wash); }
.mega-tienda .mt-foto{ flex:none; width:48px; height:48px; border-radius:8px; background:var(--wash); overflow:hidden; }
.mega-tienda .mt-foto img{ width:100%; height:100%; object-fit:cover; }
.mega-tienda .mt-nom{ line-height:1.25; }

/* ---- Propuesta E: el método MHL como franja delgada ---- */
.metodo-franja{ background:var(--wash); border-block:1px solid var(--g1); }
.mf-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:22px; }
.mf-titulo{ display:flex; flex-direction:column; gap:2px; margin:0; }
.mf-titulo b{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.mf-titulo span{ font-size:1.02rem; font-weight:700; }
.mf-pasos{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:10px; }
.mf-pasos li{ display:flex; align-items:center; gap:10px; }
.mf-pasos li + li::before{ content:"→"; color:var(--g3); font-size:1.1rem; }
.mf-pasos a{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:12px; }
.mf-pasos a:hover{ background:var(--paper); }
.mf-n{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.mf-pasos b{ display:block; font-size:.9rem; }
.mf-pasos small{ display:block; font-size:.78rem; color:var(--g5); }
@media (max-width:899px){
  .mf-in{ flex-direction:column; align-items:flex-start; gap:12px; padding-block:18px; }
  .mf-pasos{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .mf-pasos li + li::before{ content:none; }
  .mf-pasos a{ padding:8px 0; }
}

/* Método MHL en la E, con más presencia: franja negra, título grande y los pasos con ícono. */
.metodo-franja{ background:var(--ink); color:#fff; border:0; }
.metodo-franja .mf-in{ padding-block:clamp(30px,4vw,46px); gap:clamp(24px,4vw,60px); }
.metodo-franja .mf-titulo{ max-width:380px; gap:8px; }
.mf-kick{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--g3); font-weight:700; }
.metodo-franja h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; font-weight:800; color:#fff; margin:0; }
.metodo-franja h2 em{ font-style:normal; font-weight:300; }
.metodo-franja .mf-pasos{ position:relative; flex:1; max-width:700px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metodo-franja .mf-pasos::before{ content:""; position:absolute; top:34px; left:16%; right:16%; border-top:1px dashed rgba(255,255,255,.35); }
.metodo-franja .mf-pasos li{ display:block; }
.metodo-franja .mf-pasos li + li::before{ content:none; }
.metodo-franja .mf-pasos a{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; color:#fff; padding:0 6px 4px; border-radius:0; }
.metodo-franja .mf-pasos a:hover{ background:none; }
.mf-ico{ position:relative; width:68px; height:68px; border-radius:50%; background:var(--ink); border:1.5px solid #fff; display:grid; place-items:center; margin-bottom:10px; transition:background .2s, color .2s; }
.mf-ico svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.mf-ico i{ position:absolute; top:-4px; right:-4px; width:24px; height:24px; border-radius:50%; background:#fff; color:var(--ink); font-style:normal; font-weight:800; font-size:.75rem; display:grid; place-items:center; }
.metodo-franja .mf-pasos a:hover .mf-ico{ background:#fff; color:var(--ink); }
.metodo-franja .mf-pasos b{ font-size:1rem; }
.metodo-franja .mf-pasos small{ color:var(--g3); font-size:.8rem; }
@media (max-width:899px){
  .metodo-franja .mf-in{ align-items:flex-start; }
  .metodo-franja .mf-pasos{ grid-template-columns:repeat(3,1fr); width:100%; }
  .metodo-franja .mf-pasos::before{ top:28px; }
  .mf-ico{ width:56px; height:56px; }
  .mf-ico svg{ width:24px; height:24px; }
  .metodo-franja .mf-pasos a{ padding:0 2px; }
  .metodo-franja .mf-pasos b{ font-size:.86rem; }
  .metodo-franja .mf-pasos small{ font-size:.72rem; }
}
/* La franja negra se juntaba con la de categorías (también oscura): va en blanco con círculos negros. */
.metodo-franja{ background:var(--paper); color:var(--ink); border-top:1px solid var(--g1); }
.metodo-franja h2{ color:var(--ink); }
.mf-kick{ color:var(--g5); }
.metodo-franja .mf-pasos::before{ border-top:2px dashed var(--g1); }
.metodo-franja .mf-pasos a{ color:var(--ink); }
.mf-ico{ background:var(--ink); color:#fff; border:0; box-shadow:0 10px 24px rgba(0,0,0,.16); }
.mf-ico i{ background:#fff; color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.metodo-franja .mf-pasos a:hover .mf-ico{ background:#fff; color:var(--ink); box-shadow:0 0 0 2px var(--ink), 0 10px 24px rgba(0,0,0,.16); }
.metodo-franja .mf-pasos small{ color:var(--g5); }

/* ---- Propuesta E: entrada de estilistas (botón, modo pro y página Profesionales) ---- */
.btn-pro{ display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-pro:hover{ background:#000; }
.modo-pro{ display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; background:#c9a24b; color:#141414; font-size:.8rem; padding:8px 16px; text-align:center; }
.modo-pro a{ color:#141414; font-weight:800; }
.pro-hero{ background:var(--ink); color:#fff; }
.pro-hero-in{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(36px,5vw,72px); }
.pro-hero .kicker{ color:#c9a24b; }
.pro-hero h1{ font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.05; color:#fff; margin:6px 0 14px; }
.pro-hero-tx > p{ color:var(--g3); max-width:520px; line-height:1.6; }
.pro-hero .btn-o{ color:#fff; border-color:#fff; background:transparent; }
.pro-hero .btn:not(.btn-o){ background:#fff; color:var(--ink); border-color:#fff; }
.pro-hero-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); display:block; }
.pro-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pro-benef{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,36px); }
.pro-benef > div{ padding:24px; border:1px solid var(--g1); border-radius:var(--r); background:var(--paper); }
.pro-ico{ width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; margin-bottom:14px; }
.pro-ico svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pro-benef h3{ font-size:1.08rem; margin-bottom:6px; }
.pro-benef p{ font-size:.9rem; color:var(--g7); line-height:1.55; }
.pro-pasos-sec{ background:var(--wash); padding-block:clamp(36px,5vw,64px); }
.pro-pasos-sec h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:4px 0 22px; }
.pro-pasos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,32px); counter-reset:p; }
.pro-pasos li{ background:var(--paper); border-radius:var(--r); padding:22px; }
.pro-pasos b{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; margin-bottom:12px; }
.pro-pasos h3{ font-size:1rem; margin-bottom:6px; }
.pro-pasos p{ font-size:.88rem; color:var(--g7); line-height:1.5; }
.pro-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.pro-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.pro-salon{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.pro-prod{ display:flex; flex-direction:column; gap:6px; color:var(--ink); text-decoration:none; }
.pro-prod-foto{ aspect-ratio:1; border-radius:var(--r); background:var(--wash); overflow:hidden; }
.pro-prod-foto img{ width:100%; height:100%; object-fit:cover; }
.pro-prod small{ color:var(--g5); font-size:.78rem; }
@media (max-width:759px){
  .pro-hero-in, .pro-benef, .pro-pasos{ grid-template-columns:1fr; }
  .pro-head{ flex-direction:column; align-items:flex-start; }
  .hacts .btn-pro{ padding-inline:10px; font-size:.74rem; }
}

/* "Soy estilista": al pasar el mouse se invierte (blanco con letra y borde negros); antes quedaba negro sobre negro. */
.hacts .btn-pro, .hacts .btn-pro:visited{ background:var(--ink); color:#fff; border:1.5px solid var(--ink); }
.hacts .btn-pro:hover, .hacts .btn-pro:focus-visible, .hacts .btn-pro:active{ background:#fff; color:var(--ink); border-color:var(--ink); }

/* ================================================================
   Profesionales (propuesta E), rehecha: keratinas con ficha, comparativa,
   protocolo, complementos, programa, pasos y preguntas.
   ================================================================ */
.pr-kick{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#c9a24b; margin:0 0 10px; }
.pr-kick.oscuro{ color:var(--g5); }
.pr-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pr-cta.centro{ justify-content:center; }
.pr-btn-claro{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important; }
.pr-btn-claro:hover{ background:transparent !important; color:#fff !important; }
.pr-btn-linea{ background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.7) !important; }
.pr-btn-linea:hover{ background:#fff !important; color:var(--ink) !important; }
.pr-hero{ background:radial-gradient(120% 120% at 85% 30%, #2a2a2a 0%, #111 55%, #0a0a0a 100%); color:#fff; overflow:hidden; }
.pr-hero-in{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,4vw,56px); align-items:center; padding-block:clamp(40px,6vw,88px); }
.pr-hero h1{ font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.02; font-weight:800; color:#fff; margin:0 0 18px; }
.pr-hero h1 span{ font-weight:300; }
.pr-lead{ color:#bdbdbd; font-size:1.02rem; line-height:1.65; max-width:540px; }
.pr-datos{ list-style:none; padding:0; margin:34px 0 0; display:flex; gap:clamp(18px,3vw,40px); border-top:1px solid rgba(255,255,255,.14); padding-top:22px; }
.pr-datos b{ display:block; font-size:1.25rem; color:#fff; }
.pr-datos span{ font-size:.78rem; color:#9a9a9a; }
.pr-hero-trio{ position:relative; height:clamp(320px,38vw,500px); }
.pr-hero-trio img{ position:absolute; bottom:0; width:46%; aspect-ratio:1; object-fit:cover; border-radius:18px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.pr-hero-trio .pr-f0{ left:0; bottom:6%; transform:rotate(-4deg); z-index:1; }
.pr-hero-trio .pr-f1{ left:27%; bottom:18%; width:50%; z-index:3; }
.pr-hero-trio .pr-f2{ right:0; bottom:4%; transform:rotate(4deg); z-index:2; }
.pr-sec{ padding-block:clamp(48px,6vw,88px); }
.pr-cab{ text-align:center; max-width:680px; margin:0 auto clamp(28px,4vw,48px); }
.pr-cab.izq{ text-align:left; margin:0; }
.pr-cab h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.08; margin:0 0 10px; }
.pr-cab p{ color:var(--g7); line-height:1.6; }
.pr-ker{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,5vw,72px); align-items:center; padding-block:clamp(24px,3vw,40px); border-top:1px solid var(--g1); }
.pr-ker.inv .pr-ker-foto{ order:2; }
.pr-ker-foto{ display:block; position:relative; border-radius:22px; overflow:hidden; background:var(--wash); aspect-ratio:1; }
.pr-ker-foto::after{ content:""; position:absolute; inset:auto 0 0 0; height:6px; background:var(--acento); }
.pr-ker-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.pr-ker-foto:hover img{ transform:scale(1.03); }
.pr-ker-tipo{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--acento); margin:0 0 8px; }
.pr-ker h3{ font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1; margin:0 0 14px; }
.pr-ker-desc{ font-size:1.02rem; color:var(--g7); line-height:1.6; margin:0 0 18px; }
.pr-ideal{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.pr-ideal b{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-right:4px; }
.pr-ideal span{ padding:5px 12px; border-radius:999px; font-size:.8rem; border:1px solid var(--acento); color:var(--ink); }
.pr-checks{ list-style:none; padding:0; margin:0 0 20px; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.pr-checks li{ display:flex; gap:8px; align-items:flex-start; font-size:.9rem; }
.pr-checks svg{ flex:none; width:18px; height:18px; fill:none; stroke:var(--acento); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.pr-ficha{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--g1); border:1px solid var(--g1); border-radius:14px; overflow:hidden; margin:0 0 22px; }
.pr-ficha div{ background:var(--paper); padding:12px 14px; }
.pr-ficha dt{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g5); margin-bottom:4px; }
.pr-ficha dd{ margin:0; font-weight:700; font-size:.9rem; }
.pr-ker-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.pr-ker-cta small{ color:var(--g5); font-size:.8rem; }
.pr-compara-sec{ padding-top:0; }
.pr-tabla-caja{ overflow-x:auto; border:1px solid var(--g1); border-radius:18px; }
.pr-tabla{ width:100%; border-collapse:collapse; min-width:640px; font-size:.9rem; }
.pr-tabla th, .pr-tabla td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--g1); vertical-align:top; }
.pr-tabla thead th{ font-size:1rem; border-bottom:3px solid var(--acento, var(--ink)); }
.pr-tabla tbody th{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--g5); width:150px; }
.pr-tabla tr:last-child th, .pr-tabla tr:last-child td{ border-bottom:0; }
.pr-proto{ background:var(--ink); color:#fff; padding-block:clamp(48px,6vw,88px); }
.pr-proto-in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,5vw,72px); align-items:start; }
.pr-proto h2{ color:#fff; }
.pr-proto .pr-cab p{ color:#bdbdbd; }
.pr-proto-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.pr-proto-pasos li{ display:flex; gap:20px; align-items:baseline; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.pr-proto-pasos b{ font-size:1.5rem; color:#c9a24b; font-weight:800; min-width:44px; }
.pr-proto-pasos p{ margin:0; color:#e6e6e6; line-height:1.55; }
.pr-comp{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,28px); }
.pr-comp-i{ display:flex; flex-direction:column; gap:6px; color:var(--ink); text-decoration:none; }
.pr-comp-foto{ aspect-ratio:1; border-radius:18px; background:var(--wash); overflow:hidden; margin-bottom:8px; }
.pr-comp-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pr-comp-i:hover img{ transform:scale(1.04); }
.pr-comp-i b{ font-size:1.1rem; }
.pr-comp-i p{ color:var(--g7); font-size:.9rem; line-height:1.5; margin:0; }
.pr-comp-i small{ color:var(--g5); font-size:.78rem; }
.pr-comp-i u{ font-weight:700; font-size:.85rem; margin-top:4px; }
.pr-prog{ background:var(--wash); padding-block:clamp(48px,6vw,88px); }
.pr-prog .pr-kick{ color:#a0802f; }
.pr-benef{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,24px); }
.pr-benef > div{ background:var(--paper); border-radius:18px; padding:26px; }
.pr-benef svg{ width:46px; height:46px; padding:11px; border-radius:50%; background:var(--ink); fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; }
.pr-benef h3{ font-size:1.05rem; margin:0 0 6px; }
.pr-benef p{ color:var(--g7); font-size:.9rem; line-height:1.55; margin:0; }
.pr-entrar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,3vw,36px); position:relative; }
.pr-entrar::before{ content:""; position:absolute; top:22px; left:12%; right:12%; border-top:2px dashed var(--g1); }
.pr-entrar li{ position:relative; text-align:center; padding:0 8px; }
.pr-entrar b{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff; font-size:1.1rem; margin-bottom:14px; box-shadow:0 0 0 8px var(--body); }
.pr-entrar h3{ font-size:1.05rem; margin:0 0 6px; }
.pr-entrar p{ color:var(--g7); font-size:.9rem; line-height:1.55; }
.pr-faq{ max-width:820px; margin:0 auto; }
.pr-faq details{ border-bottom:1px solid var(--g1); }
.pr-faq summary{ cursor:pointer; list-style:none; padding:18px 36px 18px 0; font-weight:700; position:relative; }
.pr-faq summary::-webkit-details-marker{ display:none; }
.pr-faq summary::after{ content:"+"; position:absolute; right:4px; top:14px; font-size:1.4rem; font-weight:300; }
.pr-faq details[open] summary::after{ content:"\2013"; }
.pr-faq details p{ margin:0 0 18px; color:var(--g7); line-height:1.6; }
.pr-final{ background:var(--ink); color:#fff; text-align:center; padding-block:clamp(48px,6vw,80px); }
.pr-final h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); margin:0 0 10px; }
.pr-final p{ color:#bdbdbd; }
@media (max-width:899px){
  .pr-hero-in, .pr-ker, .pr-proto-in{ grid-template-columns:1fr; }
  .pr-ker.inv .pr-ker-foto{ order:0; }
  .pr-hero-trio{ height:300px; }
  .pr-benef, .pr-comp{ grid-template-columns:1fr 1fr; }
  .pr-entrar{ grid-template-columns:1fr; gap:26px; }
  .pr-entrar::before{ display:none; }
}
@media (max-width:599px){
  .pr-datos{ flex-wrap:wrap; }
  .pr-checks, .pr-benef, .pr-comp{ grid-template-columns:1fr; }
  .pr-ficha{ grid-template-columns:1fr; }
}

/* ================================================================
   Profesionales en blanco y negro de marca (propuesta E, 20-oct).
   Sin colores ni iconos: video real, tipografía grande, mucho aire.
   ================================================================ */
.px-label{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.7); margin:0 0 18px; }
.px-label.oscuro{ color:var(--g5); }
/* Los botones de cada par miden lo mismo: el ancho lo pone el texto más largo. */
.px-cta{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:center; gap:12px; margin-top:34px; }
.px-cta.centro{ display:grid; width:max-content; margin-inline:auto; }
.px-btn{ display:inline-flex; align-items:center; justify-content:center; height:50px; white-space:nowrap; padding:0 32px; font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; border:1px solid; border-radius:0; transition:background .25s, color .25s; }
.px-btn.claro{ background:#fff; color:#000; border-color:#fff; }
.px-btn.claro:hover{ background:transparent; color:#fff; }
.px-btn.linea{ margin:0; background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.px-btn.linea:hover{ background:#fff; color:#000; border-color:#fff; }
.px-btn.negro{ background:#000; color:#fff; border-color:#000; }
.px-btn.negro:hover{ background:#fff; color:#000; }
.px-btn.linea-negra{ background:transparent; color:#000; border-color:#000; }
.px-btn.linea-negra:hover{ background:#000; color:#fff; }
.px-liga{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#000; text-decoration:none; border-bottom:1px solid #000; padding-bottom:4px; }

.px-hero{ position:relative; min-height:min(88vh, 760px); display:flex; align-items:flex-end; background:#000; color:#fff; overflow:hidden; }
.px-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.px-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.15) 100%); }
.px-hero-in{ position:relative; z-index:1; padding-block:clamp(60px,10vw,120px); }
.px-hero h1{ font-size:clamp(3rem,9vw,7.4rem); line-height:.9; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; color:#fff; margin:0 0 26px; }
.px-lead{ max-width:460px; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.78); margin:0; }

.px-frase{ background:#000; color:#fff; border-top:1px solid rgba(255,255,255,.12); padding-block:clamp(48px,7vw,96px); text-align:center; }
.px-frase p{ margin:0; font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.px-frase span{ font-weight:300; color:rgba(255,255,255,.6); }

.px-sec{ padding-block:clamp(64px,9vw,130px); }
.px-blanco{ background:#fff; color:#000; }
.px-gris{ background:#f4f4f4; color:#000; }
.px-negro{ background:#000; color:#fff; }
.px-cab{ text-align:center; margin:0 auto clamp(40px,6vw,80px); }
.px-cab.izq{ text-align:left; margin:0; }
.px-cab h2{ font-size:clamp(2.2rem,5vw,4.2rem); line-height:.98; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; margin:0; }
.px-negro .px-cab h2{ color:#fff; }
.px-sub{ color:rgba(255,255,255,.65); line-height:1.6; max-width:360px; margin-top:22px; }

.px-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); }
.px-ker, .px-comp{ display:grid; grid-template-rows:subgrid; grid-row:span 6; align-content:start; color:#000; text-decoration:none; }
.px-comp{ grid-row:span 4; }
.px-ker-foto{ display:block; aspect-ratio:4/5; background:#fff; overflow:hidden; margin-bottom:26px; }
.px-ker-foto img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transform:scale(1.08); transition:transform .8s; }
.px-ker-foto:hover img, .px-comp:hover .px-ker-foto img{ transform:scale(1.13); }
.px-ker-tipo{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--g5); margin:0 0 10px; }
.px-ker h3, .px-comp h3{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; margin:0 0 14px; }
.px-ker-desc, .px-comp p{ color:#444; line-height:1.6; font-size:.95rem; margin:0 0 22px; }
/* Ficha técnica: casillas parejas, etiqueta en gris a la izquierda y dato a la derecha. */
.px-ker-ficha{ margin:0 0 26px; border:1px solid #000; align-self:start; }
.px-ker-ficha div{ display:grid; grid-template-columns:118px 1fr; min-height:52px; border-bottom:1px solid #000; }
.px-ker-ficha div:last-child{ border-bottom:0; }
.px-ker-ficha dt{ display:flex; align-items:center; padding:10px 14px; background:#f2f2f2; border-right:1px solid #000; font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#000; }
.px-ker-ficha dd{ display:flex; align-items:center; margin:0; padding:10px 14px; font-size:.88rem; line-height:1.4; }
.px-ker .px-liga, .px-comp .px-liga{ justify-self:start; align-self:end; }
.px-ker-desc, .px-comp p{ align-self:start; }
.px-nota{ text-align:center; color:var(--g5); font-size:.82rem; margin:clamp(40px,5vw,64px) 0 0; }
.px-trio.chico .px-ker-foto{ aspect-ratio:1; }

.px-dos{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,110px); align-items:start; }
.px-pasos{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.2); }
.px-pasos li{ display:grid; grid-template-columns:70px 1fr; gap:16px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.px-pasos b{ font-size:.8rem; letter-spacing:.2em; color:rgba(255,255,255,.5); font-weight:600; padding-top:3px; }
.px-pasos p{ margin:0; font-size:1.05rem; line-height:1.55; color:#fff; }
.px-lista{ margin:0; border-top:1px solid rgba(255,255,255,.2); }
.px-lista div{ display:grid; grid-template-columns:1fr 1.4fr; gap:24px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.px-lista dt{ font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; }
.px-lista dd{ margin:0; color:rgba(255,255,255,.68); line-height:1.6; }

.px-entrar{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); border-top:1px solid #000; }
.px-entrar li{ padding-top:30px; }
.px-entrar b{ display:block; font-size:clamp(2.4rem,4vw,3.4rem); font-weight:200; letter-spacing:-.02em; margin-bottom:18px; }
.px-entrar h3{ font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.px-entrar p{ color:#444; line-height:1.6; margin:0; }

.px-faq{ max-width:860px; margin:0 auto; border-top:1px solid #000; }
.px-faq details{ border-bottom:1px solid #d8d8d8; }
.px-faq summary{ cursor:pointer; list-style:none; padding:24px 44px 24px 0; font-size:1.05rem; font-weight:600; position:relative; }
.px-faq summary::-webkit-details-marker{ display:none; }
.px-faq summary::after{ content:"+"; position:absolute; right:6px; top:18px; font-size:1.6rem; font-weight:200; }
.px-faq details[open] summary::after{ content:"\2212"; }
.px-faq details p{ margin:0 0 24px; color:#444; line-height:1.65; max-width:720px; }

.px-final{ background:#000; color:#fff; text-align:center; padding-block:clamp(72px,10vw,140px); }
.px-final h2{ font-size:clamp(2.6rem,7vw,5.6rem); line-height:.92; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; color:#fff; margin:0; }

@media (max-width:899px){
  .px-trio, .px-entrar{ grid-template-columns:1fr; }
  .px-trio{ gap:56px; }
  .px-ker, .px-comp{ grid-row:auto; grid-template-rows:none; }
  .px-dos{ grid-template-columns:1fr; }
  .px-lista div{ grid-template-columns:1fr; gap:8px; }
  .px-hero{ min-height:78vh; }
  .px-hero::after{ background:linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.2) 100%); }
  .px-cta, .px-cta.centro{ display:grid; grid-auto-flow:row; width:100%; }
  .px-btn{ width:100%; }
}
/* El video se veía muy apagado: más visible a la derecha, el texto sigue legible a la izquierda. */
.px-hero-video{ opacity:.85; }
.px-hero::after{ background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,0) 72%); }