/* Mei de Moda · sistema de la tienda
   Identidad de la demo aprobada (rosa + violeta + marcador), rehecha con más oficio:
   tipografía con jerarquía real, tarjetas densas, estados de interacción en todo. */

:root{
  --rosa:#FF2E6E; --rosa-osc:#DB1553; --rosa-cl:#FFE6EE; --rosa-pal:#FFF5F8;
  --violeta:#6B35D4; --violeta-osc:#5425B0; --violeta-cl:#F0E9FE;
  --amarillo:#FFD93D; --amarillo-osc:#E8C01F;
  --verde:#128A5B; --verde-cl:#DFF5EC;
  --tinta:#17141C; --gris:#6A6475; --gris-2:#9B93A6; --linea:#ECE7F0;
  --papel:#FFFFFF; --crema:#FDFAFC;
  --r:14px; --r-sm:9px; --r-lg:24px;
  --sombra:0 1px 2px rgba(23,20,28,.04), 0 6px 20px rgba(23,20,28,.06);
  --sombra-alta:0 14px 40px rgba(23,20,28,.14);
  --sombra-rosa:0 10px 28px rgba(255,46,110,.26);
  --cont:1320px;
  --nav-h:118px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px) }
body{ margin:0; background:var(--papel); color:var(--tinta); font-family:Jost,system-ui,sans-serif; font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums tabular-nums }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-appearance:none }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:600 }
p{ margin:0 }
input,select{ font-family:inherit }

.cont{ width:min(var(--cont),100% - 44px); margin-inline:auto }
.sec{ padding:clamp(38px,4.2vw,64px) 0 }
.mk{ background:linear-gradient(transparent 58%, var(--amarillo) 58%); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa) }
.h-sec{ font-size:clamp(24px,2.9vw,38px) }
.sub-sec{ color:var(--gris); margin-top:7px; font-size:15px; max-width:56ch }
.cab-sec{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:24px; flex-wrap:wrap }

/* ───────── botones ───────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 26px; font-size:14.5px; font-weight:600; transition:.22s cubic-bezier(.2,.8,.3,1); white-space:nowrap }
.btn-1{ background:var(--rosa); color:#fff; box-shadow:var(--sombra-rosa) }
.btn-1:hover{ background:var(--rosa-osc); transform:translateY(-2px) }
.btn-2{ background:var(--papel); color:var(--tinta); border:1.5px solid var(--linea) }
.btn-2:hover{ border-color:var(--tinta) }
.btn-3{ background:var(--tinta); color:#fff }
.btn-3:hover{ background:var(--violeta) }
.btn-sm{ padding:10px 19px; font-size:13.5px }
.btn-bloque{ width:100% }

/* ───────── barra + cabecera ───────── */
.aviso-top{ background:var(--tinta); color:#fff; font-size:12.5px; padding:9px 0; overflow:hidden }
.aviso-top .pista{ display:flex; gap:42px; white-space:nowrap; width:max-content; animation:corre 40s linear infinite; align-items:center }
.aviso-top b{ color:var(--amarillo) }
.aviso-top i{ font-style:normal; color:var(--rosa) }
@keyframes corre{ to{ transform:translateX(-50%) } }

.nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea) }
.nav-fila{ display:flex; align-items:center; gap:20px; padding:14px 0 }
.marca{ display:flex; align-items:baseline; gap:2px; font-size:23px; font-weight:700; letter-spacing:-.04em; white-space:nowrap }
.marca i{ font-style:normal; color:var(--rosa) }
.buscador{ flex:1; max-width:500px; position:relative }
.buscador input{ width:100%; padding:12px 16px 12px 42px; border-radius:999px; border:1.5px solid var(--linea); background:var(--crema); font-size:14.5px; transition:.2s }
.buscador input:focus{ outline:0; border-color:var(--rosa); background:#fff; box-shadow:0 0 0 4px var(--rosa-cl) }
.buscador .lupa{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--gris-2) }
.sugs{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:var(--r); box-shadow:var(--sombra-alta); padding:6px; z-index:70; max-height:62vh; overflow:auto }
.sug{ display:flex; align-items:center; gap:11px; width:100%; padding:8px; border-radius:var(--r-sm); text-align:left }
.sug:hover{ background:var(--rosa-pal) }
.sug img{ width:44px; height:44px; object-fit:contain; background:var(--crema); border-radius:8px; padding:3px }
.sug span{ flex:1; display:grid; min-width:0 }
.sug b{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sug i{ font-size:11.5px; color:var(--gris-2); font-style:normal }
.sug em{ font-style:normal; font-weight:700; font-size:13.5px }
.sug-nada{ padding:15px; font-size:13.5px; color:var(--gris) }
.nav-acc{ display:flex; align-items:center; gap:7px; margin-left:auto }
.ico{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; transition:.2s; position:relative }
.ico:hover{ background:var(--crema) }
.btn-carro{ display:flex; align-items:center; gap:9px; background:var(--tinta); color:#fff; border-radius:999px; padding:11px 19px; font-size:14px; font-weight:600; transition:.22s }
.btn-carro:hover{ background:var(--rosa) }
.btn-carro b{ background:var(--rosa); color:#fff; min-width:21px; height:21px; border-radius:999px; display:grid; place-items:center; font-size:11.5px; transition:.2s }
.btn-carro:hover b{ background:#fff; color:var(--rosa) }
.btn-carro b.cero{ opacity:.45 }

.menu{ border-top:1px solid var(--linea); background:#fff }
.menu-fila{ display:flex; gap:2px; align-items:center; overflow-x:auto; scrollbar-width:none }
.menu-fila::-webkit-scrollbar{ display:none }
.menu-fila a{ padding:12px 14px; font-size:14px; font-weight:500; white-space:nowrap; color:var(--gris); position:relative; transition:color .2s }
.menu-fila a:hover,.menu-fila a.on{ color:var(--tinta) }
.menu-fila a.on::after,.menu-fila a:hover::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:2.5px; background:var(--rosa); border-radius:2px }
.menu-fila a.promo{ color:var(--rosa); font-weight:700 }
.mega{ position:absolute; left:0; right:0; background:#fff; border-bottom:1px solid var(--linea); box-shadow:var(--sombra); opacity:0; visibility:hidden; transform:translateY(-7px); transition:.24s; z-index:55 }
.mega.on{ opacity:1; visibility:visible; transform:none }
.mega-in{ display:grid; grid-template-columns:repeat(4,1fr) 290px; gap:26px; padding:26px 0 30px }
.mega h5{ font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--rosa); margin:0 0 10px; font-weight:700 }
.mega a{ display:block; padding:5px 0; font-size:14px; color:var(--gris) }
.mega a:hover{ color:var(--tinta) }
.mega-promo{ background:linear-gradient(145deg,var(--violeta),var(--violeta-osc)); color:#fff; border-radius:var(--r); padding:22px; display:flex; flex-direction:column; justify-content:space-between }
.mega-promo b{ font-size:17px; display:block; margin-bottom:6px }
.mega-promo span{ font-size:13.5px; opacity:.85 }

/* ───────── hero ───────── */
.hero{ position:relative; background:var(--rosa-pal); overflow:hidden }
.hero-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:30px; align-items:center; padding:clamp(26px,3.2vw,50px) 0 }
.hero h1{ font-size:clamp(32px,4.3vw,54px); font-weight:700 }
.hero p{ color:var(--gris); font-size:16.5px; max-width:42ch; margin:15px 0 22px }
.hero-cta{ display:flex; gap:11px; flex-wrap:wrap }
.hero-datos{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap }
.hero-datos b{ font-size:22px; font-weight:700; display:block }
.hero-datos span{ font-size:12.5px; color:var(--gris) }
.hero-art{ position:relative; aspect-ratio:4/3.1; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sombra-alta) }
.hero-art img{ width:100%; height:100%; object-fit:cover }
.hero-chip{ position:absolute; background:#fff; border-radius:var(--r); box-shadow:var(--sombra-alta); padding:10px 14px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; z-index:2; animation:flota 5s ease-in-out infinite }
.hero-chip img{ width:38px; height:38px; object-fit:contain; background:var(--crema); border-radius:8px; padding:2px }
.hero-chip small{ display:block; font-weight:500; color:var(--gris); font-size:11.5px }
@keyframes flota{ 50%{ transform:translateY(-8px) } }
.hc-1{ left:-16px; bottom:16% } .hc-2{ right:-12px; top:12%; animation-delay:1.7s }

/* ───────── tiras de beneficio ───────── */
.tiras{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:-26px; position:relative; z-index:3 }
.tira{ background:#fff; border-radius:var(--r); box-shadow:var(--sombra); padding:16px 18px; display:flex; gap:12px; align-items:center }
.tira .ic{ width:38px; height:38px; border-radius:50%; background:var(--rosa-cl); display:grid; place-items:center; font-size:17px; flex:none }
.tira b{ font-size:13.5px; display:block; font-weight:600 }
.tira span{ font-size:12.5px; color:var(--gris) }

/* ───────── categorías ───────── */
.cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:13px }
.cat{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; color:#fff; display:block }
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .75s cubic-bezier(.2,.8,.3,1) }
.cat:hover img{ transform:scale(1.08) }
.cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(23,20,28,.84),transparent 55%) }
.cat-txt{ position:absolute; inset:auto 0 0 0; padding:15px 14px; z-index:2 }
.cat-txt h3{ font-size:15.5px; font-weight:600 }
.cat-txt span{ font-size:12px; opacity:.85 }

/* ───────── tarjeta de producto ───────── */
.riel{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:3px 2px 10px; scrollbar-width:none }
.riel::-webkit-scrollbar{ display:none }
.riel > *{ scroll-snap-align:start; flex:0 0 auto }
.riel .card{ width:clamp(200px,20vw,245px) }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.card{ background:#fff; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s, border-color .26s; position:relative }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); border-color:transparent }
.card-img{ position:relative; aspect-ratio:1; background:var(--crema); overflow:hidden; display:block }
.card-img img{ width:100%; height:100%; object-fit:contain; padding:9px; transition:transform .5s cubic-bezier(.2,.8,.3,1) }
.card:hover .card-img img{ transform:scale(1.06) }
.etq{ position:absolute; top:9px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:7px; z-index:2 }
.etq-off{ left:9px; background:var(--rosa); color:#fff }
.etq-poco{ right:9px; background:var(--amarillo); color:var(--tinta) }
.card-ver{ position:absolute; left:9px; right:9px; bottom:9px; background:rgba(255,255,255,.96); backdrop-filter:blur(5px); border-radius:9px; padding:9px; font-size:13px; font-weight:600; opacity:0; transform:translateY(8px); transition:.26s; z-index:2 }
.card:hover .card-ver{ opacity:1; transform:none }
.card-txt{ padding:13px 14px 14px; display:flex; flex-direction:column; flex:1 }
.card-cat{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2); font-weight:600 }
.card h3{ font-size:14px; font-weight:500; line-height:1.38; margin:5px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card h3:hover{ color:var(--rosa) }
.precios{ margin-top:auto }
.precios b{ font-size:18.5px; font-weight:700 }
.precios .antes{ font-size:13px; color:var(--gris-2); text-decoration:line-through; margin-left:6px }
.may{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--verde); font-weight:600; background:var(--verde-cl); padding:3px 9px; border-radius:999px; margin-top:6px }
.card-acc{ display:flex; gap:6px; margin-top:11px }
.btn-add{ flex:1; background:var(--tinta); color:#fff; border-radius:9px; padding:10px; font-size:13.5px; font-weight:600; transition:.2s }
.btn-add:hover{ background:var(--rosa) }
.btn-add.ok{ background:var(--verde) }
.btn-bolsa{ background:var(--rosa-cl); color:var(--rosa-osc); border-radius:9px; padding:10px 12px; font-size:13px; font-weight:700; transition:.2s; white-space:nowrap }
.btn-bolsa:hover{ background:var(--rosa); color:#fff }
.btn-bolsa.ok{ background:var(--verde); color:#fff }

/* ───────── bandas de color ───────── */
.banda{ background:var(--crema); padding:clamp(38px,4.2vw,64px) 0 }
.bloque-vio{ background:linear-gradient(135deg,var(--violeta) 0%,var(--violeta-osc) 100%); color:#fff; border-radius:var(--r-lg); padding:clamp(28px,3.4vw,52px); display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; position:relative; overflow:hidden }
.bloque-vio h2{ font-size:clamp(24px,2.9vw,38px) }
.bloque-vio .mk{ background:linear-gradient(transparent 58%, rgba(255,217,61,.9) 58%); color:var(--tinta) }
.bloque-vio p{ opacity:.88; margin:14px 0 22px; max-width:42ch }
.tramos{ background:rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden; backdrop-filter:blur(3px) }
.tramo{ display:flex; justify-content:space-between; align-items:center; padding:15px 20px; font-size:14.5px }
.tramo + .tramo{ border-top:1px solid rgba(255,255,255,.14) }
.tramo b{ font-size:19px; font-weight:700 }
.tramo small{ display:block; font-size:12px; opacity:.7 }
.tramo.top{ background:var(--amarillo); color:var(--tinta) }
.tramo.top small{ color:var(--rosa-osc); opacity:1; font-weight:600 }

/* ───────── kit ───────── */
.kit{ background:var(--tinta); color:#fff; border-radius:var(--r-lg); padding:clamp(26px,3.2vw,46px); display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:center }
.kit h2{ font-size:clamp(23px,2.7vw,34px) }
.kit p{ opacity:.72; margin:12px 0 0; max-width:36ch; font-size:14.5px }
.kit-tot{ margin-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.kit-tot span{ font-size:12.5px; opacity:.6; display:block }
.kit-tot b{ font-size:28px; font-weight:700 }
.kit-sel{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px }
.kit-slot{ background:rgba(255,255,255,.07); border:1.5px dashed rgba(255,255,255,.22); border-radius:var(--r); padding:13px; text-align:center; transition:.25s; cursor:pointer; min-height:168px; display:flex; flex-direction:column; justify-content:center; gap:7px }
.kit-slot:hover{ background:rgba(255,255,255,.12); border-color:var(--amarillo) }
.kit-slot.lleno{ background:#fff; color:var(--tinta); border-style:solid; border-color:#fff }
.kit-slot img{ width:100%; height:78px; object-fit:contain }
.kit-slot .rol{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; font-weight:600 }
.kit-slot.lleno .rol{ color:var(--rosa); opacity:1 }
.kit-slot h4{ font-size:12.5px; font-weight:500; line-height:1.3 }
.kit-slot .mas{ font-size:26px; opacity:.4 }

/* ───────── newsletter ───────── */
.news{ background:var(--rosa-pal); border-radius:var(--r-lg); padding:clamp(26px,3.2vw,44px); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center }
.news h2{ font-size:clamp(21px,2.4vw,30px) }
.news p{ color:var(--gris); margin-top:8px; max-width:46ch; font-size:14.5px }
.news-form{ display:flex; gap:9px; flex-wrap:wrap }
.news-form input{ border:1.5px solid var(--linea); border-radius:999px; padding:13px 20px; font-size:14.5px; min-width:260px; background:#fff }
.news-form input:focus{ outline:0; border-color:var(--rosa) }

/* ───────── pie ───────── */
footer{ background:var(--tinta); color:#fff; padding:clamp(40px,4.4vw,62px) 0 24px; margin-top:clamp(36px,4vw,56px) }
.f-top{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:30px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.12) }
.f-top h5{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.5; margin:0 0 12px; font-weight:700 }
.f-top a{ display:block; padding:4px 0; font-size:14px; opacity:.82 }
.f-top a:hover{ opacity:1; color:var(--amarillo) }
.f-fin{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:18px; font-size:12.5px; opacity:.55 }

/* ───────── carro ───────── */
.velo{ position:fixed; inset:0; background:rgba(23,20,28,.45); opacity:0; visibility:hidden; transition:.3s; z-index:85 }
body.carro-on .velo,body.menu-on .velo{ opacity:1; visibility:visible }
.carro{ position:fixed; top:0; right:0; bottom:0; width:min(425px,100vw); background:#fff; z-index:90; transform:translateX(102%); transition:transform .4s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column }
body.carro-on .carro{ transform:none }
.carro-cab{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; border-bottom:1px solid var(--linea) }
.carro-cab h3{ font-size:18px }
.envio{ padding:13px 22px; background:var(--crema); font-size:13px }
.envio .barra{ height:6px; background:var(--linea); border-radius:999px; margin-top:8px; overflow:hidden }
.envio i{ display:block; height:100%; background:var(--rosa); border-radius:999px; transition:width .45s cubic-bezier(.2,.8,.3,1) }
.envio.listo i{ background:var(--verde) }
.carro-items{ flex:1; overflow:auto; padding:6px 22px }
.ci{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:14px 0; border-bottom:1px solid var(--linea) }
.ci img{ width:64px; height:64px; object-fit:contain; background:var(--crema); border-radius:9px; padding:4px }
.ci h4{ font-size:13.5px; font-weight:500; line-height:1.32 }
.ci-modo{ font-size:11.5px; color:var(--gris); display:block; margin:3px 0 8px }
.ci-fila{ display:flex; align-items:center; gap:12px }
.stepper{ display:inline-flex; align-items:center; gap:12px; background:var(--crema); border-radius:999px; padding:4px 11px; font-size:13px; font-weight:600 }
.ci-del{ font-size:12px; color:var(--gris-2); text-decoration:underline }
.ci-del:hover{ color:var(--rosa) }
.ci-precio{ font-size:14.5px; font-weight:700 }
.carro-vacio{ text-align:center; padding:48px 0; color:var(--gris) }
.carro-pie{ padding:16px 22px 22px; border-top:1px solid var(--linea) }
.ahorro{ background:var(--verde-cl); color:var(--verde); border-radius:9px; padding:9px 14px; font-size:13px; font-weight:600; margin-bottom:12px; display:flex; justify-content:space-between }
.carro-tot{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px }
.carro-tot span{ color:var(--gris); font-size:14px }
.carro-tot b{ font-size:25px; font-weight:700 }
.carro-nota{ text-align:center; font-size:12px; color:var(--gris-2); margin-top:10px }

/* ───────── aviso flotante ───────── */
.aviso{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); background:var(--tinta); color:#fff; padding:12px 22px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:99; opacity:0; visibility:hidden; transition:.26s; box-shadow:var(--sombra-alta) }
.aviso.on{ opacity:1; visibility:visible; transform:translate(-50%,0) }

/* ───────── catálogo ───────── */
.ruta{ font-size:13px; color:var(--gris); padding:16px 0 }
.ruta a:hover{ color:var(--rosa) }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px }
.cat-head h1{ font-size:clamp(26px,3.2vw,40px); font-weight:700 }
.layout{ display:grid; grid-template-columns:244px 1fr; gap:28px; align-items:start }
.filtros{ position:sticky; top:calc(var(--nav-h) + 14px); background:var(--crema); border-radius:var(--r); padding:21px }
.filtros h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-2); margin:0 0 12px; font-weight:700 }
.filtros .grupo + .grupo{ margin-top:21px; padding-top:19px; border-top:1px solid var(--linea) }
.check{ display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; padding:5px 0 }
.check input{ width:17px; height:17px; accent-color:var(--rosa); cursor:pointer }
.check span{ flex:1 }
.check em{ font-style:normal; color:var(--gris-2); font-size:12.5px }
.rango{ width:100%; accent-color:var(--rosa); margin-top:4px }
.rango-val{ font-size:13px; color:var(--gris); font-weight:600 }
.barra-orden{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap }
.barra-orden select{ border:1.5px solid var(--linea); border-radius:999px; padding:10px 16px; font-size:14px; font-weight:600; background:#fff; cursor:pointer }
.cuenta{ font-size:14px; color:var(--gris); font-weight:500 }
.sin-res{ grid-column:1/-1; text-align:center; padding:50px 0; color:var(--gris) }

/* ───────── ficha de producto ───────── */
.ficha{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; padding-top:8px }
.ficha-img{ background:var(--crema); border-radius:var(--r-lg); padding:26px; display:grid; place-items:center; position:relative }
.ficha-img img{ max-height:440px; object-fit:contain }
.ficha h1{ font-size:clamp(24px,3vw,36px); font-weight:700; margin:8px 0 10px }
.ficha-sku{ font-size:13px; color:var(--gris-2) }
.opciones{ display:grid; gap:11px; margin:22px 0 }
.opcion{ border:2px solid var(--linea); border-radius:var(--r); padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:.22s; background:#fff }
.opcion:hover{ border-color:var(--gris-2) }
.opcion.on{ border-color:var(--rosa); background:var(--rosa-pal) }
.opcion .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--linea); flex:none; display:grid; place-items:center; transition:.2s }
.opcion.on .radio{ border-color:var(--rosa) }
.opcion.on .radio::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--rosa) }
.opcion .txt{ flex:1 }
.opcion .txt b{ display:block; font-size:15px }
.opcion .txt span{ font-size:13px; color:var(--gris) }
.opcion .pre{ text-align:right }
.opcion .pre b{ font-size:19px; display:block }
.opcion .pre span{ font-size:12px; color:var(--verde); font-weight:600 }
.ficha-acc{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.cant{ display:flex; align-items:center; gap:14px; border:1.5px solid var(--linea); border-radius:999px; padding:10px 16px; font-weight:600 }
.ficha-info{ margin-top:26px; display:grid; gap:9px }
.ficha-info li{ list-style:none; font-size:14px; color:var(--gris); padding-left:22px; position:relative }
.ficha-info li::before{ content:'✓'; position:absolute; left:0; color:var(--verde); font-weight:700 }
.tabla-vol{ margin-top:24px; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden }
.tabla-vol div{ display:flex; justify-content:space-between; padding:12px 18px; font-size:14px }
.tabla-vol div + div{ border-top:1px solid var(--linea) }
.tabla-vol .cab{ background:var(--crema); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-2); font-weight:700 }
.tabla-vol .mejor{ background:var(--verde-cl); color:var(--verde); font-weight:600 }

/* ───────── mayorista ───────── */
.may-hero{ background:linear-gradient(135deg,var(--violeta),var(--violeta-osc)); color:#fff; padding:clamp(34px,4vw,62px) 0 }
.may-hero h1{ font-size:clamp(28px,3.8vw,50px); font-weight:700; max-width:18ch }
.may-hero p{ opacity:.88; margin-top:14px; max-width:48ch; font-size:16px }
.may-hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,58px); align-items:center }
.may-hero .btn-1{ background:#fff; color:var(--violeta) }
.may-hero .btn-1:hover{ background:var(--amarillo); color:var(--tinta) }
.may-datos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.22) }
.may-datos b{ display:block; font-size:21px; font-weight:700; color:var(--amarillo) }
.may-datos span{ font-size:12.5px; opacity:.8; line-height:1.4; display:block; margin-top:3px }
.may-foto{ margin:0; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.1; box-shadow:var(--sombra-alta) }
.may-foto img{ width:100%; height:100%; object-fit:cover }
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px }
.paso{ background:#fff; border-radius:var(--r); padding:22px; box-shadow:var(--sombra) }
.paso b{ width:30px; height:30px; border-radius:50%; background:var(--rosa); color:#fff; display:grid; place-items:center; font-size:14px; margin-bottom:12px }
.paso h4{ font-size:16px; margin-bottom:5px }
.paso p{ font-size:14px; color:var(--gris) }
.form-may{ display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--crema); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,34px) }
.campo{ display:grid; gap:6px }
.campo label{ font-size:13px; font-weight:600; color:var(--gris) }
.campo input,.campo select{ border:1.5px solid var(--linea); border-radius:var(--r-sm); padding:12px 15px; font-size:14.5px; background:#fff }
.campo input:focus,.campo select:focus{ outline:0; border-color:var(--rosa) }
.campo.ancho{ grid-column:1/-1 }

[data-rev]{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1) }
[data-rev].visto{ opacity:1; transform:none }

@media (max-width:1180px){
  .cats{ grid-template-columns:repeat(3,1fr) }
  .grid{ grid-template-columns:repeat(3,1fr) }
  .mega-in{ grid-template-columns:repeat(3,1fr) } .mega-promo{ display:none }
  .tiras{ grid-template-columns:1fr 1fr }
}
@media (max-width:980px){
  :root{ --nav-h:104px }
  .hero-in,.bloque-vio,.kit,.news,.ficha,.form-may,.may-hero-in{ grid-template-columns:1fr }
  .may-foto{ aspect-ratio:16/8; order:-1 }
  .layout{ grid-template-columns:1fr } .filtros{ position:static }
  .pasos{ grid-template-columns:1fr }
  .f-top{ grid-template-columns:1fr 1fr }
  .news{ gap:18px }
}
@media (max-width:720px){
  .cont{ width:min(var(--cont),100% - 28px) }
  .grid{ grid-template-columns:1fr 1fr; gap:11px }
  .cats{ grid-template-columns:1fr 1fr }
  .tiras{ grid-template-columns:1fr; margin-top:18px }
  .nav-fila{ flex-wrap:wrap; padding:12px 0 }
  .buscador{ order:3; flex:0 0 100%; max-width:none; margin-top:10px }
  .card-ver{ display:none }
  .kit-sel{ grid-template-columns:1fr }
  .f-top{ grid-template-columns:1fr }
  .hc-1,.hc-2{ display:none }
  .hero-datos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px }
  .hero-datos b{ font-size:19px }
  .hero-datos span{ font-size:11.5px }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  [data-rev]{ opacity:1; transform:none }
}

/* ── cabecera móvil: hamburguesa, menú lateral y buscador desplegable ── */
.ham{ display:none; width:40px; height:40px; border-radius:12px; flex-direction:column; justify-content:center; align-items:center; gap:4.5px; margin-left:-8px }
.ham span{ display:block; width:19px; height:2px; background:var(--tinta); border-radius:2px }
.ico-buscar{ display:none }
.menu-movil{ position:fixed; top:0; left:0; bottom:0; width:min(318px,85vw); background:#fff; z-index:92; transform:translateX(-102%); transition:transform .36s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; padding:18px 18px 24px }
body.menu-on .menu-movil{ transform:none }
.mm-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--linea) }
.mm-x{ width:36px; height:36px; border-radius:50%; background:var(--crema); font-size:15px; color:var(--gris) }
.mm-nav{ flex:1; overflow-y:auto; padding:10px 0; display:flex; flex-direction:column }
.mm-nav a{ padding:13px 4px; font-size:15.5px; font-weight:500; border-bottom:1px solid var(--linea) }
.mm-nav a span{ float:right; font-size:12.5px; color:var(--gris-2); font-weight:400 }
.mm-nav a.promo{ color:var(--rosa); font-weight:700 }
.mm-cta{ display:block; text-align:center; background:var(--violeta); color:#fff; border-radius:999px; padding:14px; font-size:14.5px; font-weight:600; margin-top:14px }

@media (max-width:720px){
  :root{ --nav-h:62px }
  .ham,.ico-buscar{ display:flex }
  .nav-fila{ flex-wrap:nowrap; gap:8px; padding:11px 0 }
  .menu{ display:none }
  .marca{ font-size:21px }
  .nav-acc{ gap:2px }
  .buscador{ order:0; position:absolute; left:0; right:0; top:100%; max-width:none; background:#fff; padding:11px 14px; border-bottom:1px solid var(--linea); box-shadow:var(--sombra); display:none; margin:0 }
  body.buscar-on .buscador{ display:block }
  .buscador .lupa{ left:29px }
  .btn-carro{ padding:10px 14px; gap:7px; font-size:0 }
  .btn-carro svg{ width:19px; height:19px }
  .btn-carro b{ font-size:11.5px }
  .ico{ width:40px; height:40px }
}