/* listadeprecios.online · estilos compartidos (index.html y distribuidoras.html)
   Concepto: "de la lista de precios a la vidriera". La hoja de precios (mono, papel) se convierte en el catálogo con fotos grandes
   y los botones − carrito + de las tiendas. Paleta: el verde del carrito y el dorado del total, sobre blancos fríos;
   el azul noche del panel (punto de venta y stock). */
:root{
  --bg:#f3f6f4; --paper:#ffffff; --ink:#0d1b16; --muted:#55645d; --faint:#8a9690; --line:#dbe2de;
  --brand:#0b8a55; --brand-ink:#076b42; --brand-soft:#e3f4ec;
  --oro:#d4a017; --oro2:#f5d061; --oro-ink:#2a1f00;
  --night:#0f1a2e; --night2:#16233b; --rosa:#e8365d; --bad:#b42318; --bad-bg:#fdecea;
  --f-display:'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r:16px; --sombra:0 1px 2px rgba(13,27,22,.06), 0 18px 40px -22px rgba(13,27,22,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-ui); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button, input, select, textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px; border-radius:6px}
h1, h2, h3{font-family:var(--f-display); letter-spacing:-.025em; line-height:1.08; text-wrap:balance; margin:0}
.envol{max-width:1180px; margin:0 auto; padding-inline:clamp(16px, 4vw, 32px)}
.envol > *{min-width:0}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.solo-lector{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Aparición al bajar (solo si hay JS; sin JS todo se ve) */
.js .rev{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rev.vis{opacity:1; transform:none}
.js .rev.d1{transition-delay:.08s} .js .rev.d2{transition-delay:.16s} .js .rev.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} .js .rev{opacity:1; transform:none} }

/* ---------- Encabezado ---------- */
.top{position:sticky; top:0; z-index:40; background:rgba(243,246,244,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.con-borde{border-color:var(--line)}
.top .envol{display:flex; align-items:center; gap:24px; height:68px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:18px; letter-spacing:-.02em; white-space:nowrap}
.marca i{width:34px; height:34px; border-radius:10px; background:var(--brand); display:grid; place-items:center; flex:0 0 auto}
.marca i svg{width:18px; height:18px; stroke:#fff; stroke-width:3; stroke-linecap:round; fill:none}
.marca span{color:var(--faint); font-weight:700}
.nav{display:flex; gap:22px; margin-left:auto; font-size:14.5px; font-weight:600}
.nav a{text-decoration:none; color:var(--muted)} .nav a:hover, .nav a.on{color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 20px; border-radius:12px; border:0; background:var(--brand); color:#fff; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s, box-shadow .15s}
.btn:hover{background:var(--brand-ink); box-shadow:0 10px 24px -12px rgba(11,138,85,.8)} .btn:active{transform:translateY(1px)}
.btn.claro{background:var(--paper); color:var(--ink); border:1px solid var(--line)} .btn.claro:hover{border-color:var(--faint); box-shadow:none}
.btn.oro{background:linear-gradient(135deg,var(--oro2),var(--oro)); color:var(--oro-ink)} .btn.oro:hover{filter:brightness(1.05)}
.btn.chico{height:40px; padding:0 16px; font-size:14px}
@media (max-width:900px){ .nav{display:none} .top .btn{margin-left:auto} }
@media (max-width:420px){ .marca span{display:none} }
@media (max-width:370px){ .top .btn{padding:0 12px; font-size:13px} .marca{font-size:16px; gap:8px} .marca i{width:30px; height:30px} }

/* ---------- Portada ---------- */
.hero{padding-block:clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); position:relative}
.hero .envol{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
@media (max-width:960px){ .hero .envol{grid-template-columns:1fr} }
.chip{display:inline-flex; flex-wrap:wrap; max-width:100%; align-items:center; gap:4px 8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 8px; font-size:13.5px; font-weight:600; color:var(--muted)}
.chip b{background:var(--oro2); color:var(--oro-ink); border-radius:999px; padding:2px 9px; font-size:12px; font-weight:800}
.hero h1{font-size:clamp(36px, 5.4vw, 62px); margin:18px 0 18px; font-weight:800}
.hero h1 em{font-style:normal; color:var(--brand); background:linear-gradient(transparent 62%, var(--oro2) 62%, var(--oro2) 90%, transparent 90%); background-size:0 100%; background-repeat:no-repeat; animation:subraya 1s .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes subraya{to{background-size:100% 100%}}
.hero .bajada{font-size:clamp(17px, 1.6vw, 19px); color:var(--muted); max-width:56ch; margin:0 0 28px}
.reclamo{display:flex; flex-wrap:wrap; align-items:center; background:var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:6px; gap:6px; max-width:600px; box-shadow:var(--sombra)}
.reclamo:focus-within{border-color:var(--brand)}
.reclamo label{display:flex; align-items:center; flex:1 1 300px; min-width:0; padding-left:12px; font-family:var(--f-mono); font-size:14px; color:var(--faint); white-space:nowrap}
.reclamo input{flex:1; min-width:110px; border:0; outline:0; background:none; font-family:var(--f-mono); font-size:14px; color:var(--ink); font-weight:600; padding:10px 2px}
.reclamo .btn{height:48px; padding:0 18px; flex:1 0 auto}
.estado-web{min-height:22px; margin:8px 0 0 4px; font-size:13.5px; font-weight:600}
.estado-web.si{color:var(--brand)} .estado-web.no{color:var(--bad)}
.confianza{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; font-size:14px; color:var(--muted); font-weight:500}
.confianza span{display:flex; align-items:center; gap:7px}
.confianza svg{width:17px; height:17px; stroke:var(--brand); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:520px){ .reclamo label{flex-basis:100%; padding:6px 8px 0; font-size:13px} .reclamo input{min-width:0; font-size:13px} }

/* Visual: la hoja de precios que se convierte en tienda */
.escena{position:relative; min-height:540px; display:flex; align-items:center; justify-content:center}
@media (max-width:960px){ .escena{min-height:0; padding-top:8px} }
.hoja{position:absolute; left:-24px; top:56px; width:262px; background:var(--paper); border-radius:6px; padding:20px 20px 24px; font-family:var(--f-mono); font-size:11.5px; color:#3b4a43; box-shadow:0 2px 0 #e9eeeb, 0 4px 0 #dfe6e2, var(--sombra); transform:rotate(-5deg); z-index:1; animation:flota 7s ease-in-out infinite}
@keyframes flota{50%{transform:rotate(-4deg) translateY(-8px)}}
.hoja h4{margin:0 0 2px; font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--ink)}
.hoja small{display:block; color:var(--faint); margin-bottom:12px; font-size:10.5px}
.hoja .fila{display:flex; gap:6px; padding:5px 6px; margin:0 -6px; border-bottom:1px dashed #d9e0dc; white-space:nowrap; border-radius:3px; transition:background .35s}
.hoja .fila span:first-child{overflow:hidden; text-overflow:ellipsis}
.hoja .fila i{flex:1; border-bottom:1px dotted #b9c4be; margin-bottom:4px; min-width:10px}
.hoja .fila b{font-weight:600; color:var(--ink)}
.hoja .fila.marcada{background:linear-gradient(90deg, rgba(245,208,97,.75), rgba(245,208,97,.2))}
.flecha{position:absolute; left:150px; top:380px; z-index:3; width:92px; height:60px; color:var(--brand)}
.flecha svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:6 7; animation:hormigas 1.2s linear infinite}
@keyframes hormigas{to{stroke-dashoffset:-26}}
.tel{position:relative; margin-left:auto; margin-right:-8px; width:310px; max-width:100%; background:var(--night); border-radius:38px; padding:10px; box-shadow:0 30px 60px -24px rgba(13,27,22,.55); z-index:2}
.tel .pantalla{background:#f4f5f8; border-radius:30px; overflow:hidden}
.tel .barra{display:flex; align-items:center; gap:8px; padding:14px 12px 10px; background:#fff; border-bottom:1px solid #e1e4ea; border-top:3px solid var(--rosa)}
.tel .barra .lg{width:30px; height:30px; border-radius:9px; background:var(--rosa); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px; font-family:var(--f-display); flex:0 0 auto}
.tel .barra b{font-family:var(--f-display); font-size:14px; line-height:1.1; display:block}
.tel .barra small{font-size:10px; color:#5b6676; font-family:var(--f-mono); display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tel .total{margin-left:auto; display:flex; align-items:center; gap:6px; border:1px solid #e1e4ea; border-radius:999px; padding:3px 3px 3px 10px; font-weight:900; font-size:13px; color:var(--brand-ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.tel .total i{font-style:normal; min-width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg,var(--oro2),var(--oro)); color:var(--oro-ink); display:grid; place-items:center; font-size:12px; padding:0 6px}
.salto{animation:salto .35s ease}
@keyframes salto{40%{transform:scale(1.1)}}
.mini{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px}
.mt{position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.08); transition:box-shadow .2s, transform .2s}
.mt img{width:100%; height:100%; object-fit:cover}
.mt .inf{position:absolute; left:0; right:0; bottom:0; padding:22px 8px 7px; background:linear-gradient(transparent, rgba(0,0,0,.72) 45%, rgba(0,0,0,.9)); color:#fff}
.mt .inf b{display:block; font-size:10.5px; line-height:1.2; font-family:var(--f-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mt .inf span{font-size:12px; font-weight:900; color:var(--oro2); font-variant-numeric:tabular-nums}
.mt .ctl{position:absolute; left:0; right:0; top:38%; display:flex; justify-content:space-between; align-items:center; padding:0 6px}
.mt .ctl button{border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.25); font-weight:800; transition:transform .12s}
.mt .ctl button:active{transform:scale(.9)}
.mt .ctl .m{width:28px; height:28px; background:rgba(255,255,255,.75); backdrop-filter:blur(6px); color:#111; font-size:17px}
.mt .ctl .p{width:28px; height:28px; background:rgba(14,159,87,.85); color:#fff; font-size:17px}
.mt .ctl .c{width:38px; height:38px; background:linear-gradient(135deg,rgba(245,208,97,.9),rgba(212,160,23,.9)); color:var(--oro-ink); font-size:12px; font-weight:900}
.mt .q{position:absolute; top:7px; left:7px; background:linear-gradient(135deg,var(--oro2),var(--oro)); color:var(--oro-ink); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:900; animation:salto .35s ease}
.mt.en{box-shadow:inset 0 0 0 3px var(--oro)}
.mt.toque{transform:scale(1.04)}
.tel .pista{padding:4px 12px 14px; text-align:center; font-size:11.5px; color:#5b6676}
@media (max-width:960px){ .hoja, .flecha{display:none} .tel{margin:0 auto} }

/* ---------- Secciones ---------- */
section{scroll-margin-top:76px}
.sec{padding-block:clamp(56px, 8vw, 96px)}
.sec-cab{max-width:740px; margin-bottom:clamp(28px, 4vw, 44px)}
.sec-cab h2{font-size:clamp(28px, 3.6vw, 42px); margin:10px 0 12px; font-weight:800}
.sec-cab p{margin:0; color:var(--muted); font-size:17px}
.blanca{background:var(--paper); border-block:1px solid var(--line)}
.oscura{background:var(--night); color:#e8edf6}
.oscura .eyebrow{color:var(--oro2)}
.oscura .sec-cab h2{color:#fff}
.oscura .sec-cab p{color:#aab6c8}

/* Cómo funciona: pasos */
.pasos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; counter-reset:paso}
@media (max-width:860px){ .pasos{grid-template-columns:1fr} }
.paso{position:relative; background:var(--bg); border-radius:var(--r); padding:26px 24px 24px; counter-increment:paso}
.paso::before{content:counter(paso); position:absolute; top:22px; right:22px; font-family:var(--f-display); font-weight:800; font-size:44px; line-height:1; color:var(--line)}
.paso .ic{width:46px; height:46px; border-radius:12px; background:var(--brand); display:grid; place-items:center; margin-bottom:18px}
.paso .ic svg{width:23px; height:23px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.paso h3{font-size:21px; margin-bottom:8px}
.paso p{margin:0; color:var(--muted); font-size:15.5px}
.formatos{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; align-items:center}
.formatos span{font-family:var(--f-mono); font-size:13px; font-weight:600; padding:5px 11px; border-radius:8px; background:var(--paper); border:1px solid var(--line)}
.formatos small{color:var(--muted); font-size:14px; margin-right:4px}

/* Bloques con maqueta (punto de venta, stock): texto + pantalla */
.bloque{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px, 5vw, 64px); align-items:center}
.bloque.inv{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.bloque.inv .bl-tx{order:2}
@media (max-width:960px){ .bloque, .bloque.inv{grid-template-columns:1fr} .bloque.inv .bl-tx{order:0} }
.bl-tx h2{font-size:clamp(28px, 3.4vw, 40px); margin:10px 0 14px; font-weight:800}
.bl-tx > p{color:var(--muted); font-size:17px; margin:0 0 20px}
.oscura .bl-tx h2{color:#fff} .oscura .bl-tx > p{color:#aab6c8}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.ticks li{display:grid; grid-template-columns:24px 1fr; gap:10px; font-size:15.5px}
.ticks li::before{content:''; width:22px; height:22px; border-radius:50%; margin-top:1px; background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8a55' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks li b{display:block}
.ticks li span{color:var(--muted); font-size:14.5px}
.oscura .ticks li::before{background-color:rgba(245,208,97,.15); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5d061' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.oscura .ticks li b{color:#fff} .oscura .ticks li span{color:#aab6c8}

/* Maqueta: punto de venta */
.pantallita{background:var(--paper); color:var(--ink); border-radius:18px; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.pv-cab{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--night2); color:#dbe3ef; font-size:12.5px; font-weight:700}
.pv-cab i{width:9px; height:9px; border-radius:50%; background:#3b4a63} .pv-cab i:first-child{background:var(--rosa)} .pv-cab span{margin-left:8px}
.pv{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:330px}
@media (max-width:560px){ .pv{grid-template-columns:1fr} }
.pv-grilla{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; background:#f4f5f8; align-content:start}
.pv-p{border:1px solid #e1e4ea; background:#fff; border-radius:10px; overflow:hidden; position:relative; transition:border-color .2s, transform .2s}
.pv-p img{width:100%; height:auto; aspect-ratio:1; object-fit:cover}
.pv-p div{padding:6px 8px 7px; font-size:11px; line-height:1.25}
.pv-p div b{display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-p div span{font-weight:800; font-variant-numeric:tabular-nums}
.pv-p.toque{border-color:var(--rosa); transform:scale(.97)}
.pv-p em{position:absolute; top:6px; right:6px; font-style:normal; background:var(--rosa); color:#fff; font-size:11px; font-weight:800; border-radius:999px; min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px}
.pv-ticket{padding:14px; display:flex; flex-direction:column; gap:8px; border-left:1px solid #e1e4ea}
.pv-ticket h4{margin:0; font-size:14px; display:flex; justify-content:space-between}
.pv-ticket h4 small{color:var(--faint); font-weight:600}
.pv-lin{display:flex; flex-direction:column; gap:6px; min-height:120px}
.pv-l{display:grid; grid-template-columns:1fr auto; gap:6px; font-size:12px; border-bottom:1px dashed #e1e4ea; padding-bottom:6px; animation:entraL .35s ease}
@keyframes entraL{from{opacity:0; transform:translateX(10px)}}
.pv-l b{font-variant-numeric:tabular-nums}
.pv-medios{display:grid; grid-template-columns:1fr 1fr; gap:5px}
.pv-medios span{font-size:10.5px; font-weight:700; border:1.5px solid #e1e4ea; border-radius:7px; padding:5px 6px; display:flex; align-items:center; gap:5px}
.pv-medios span i{width:7px; height:7px; border-radius:50%}
.pv-medios span.on{border-color:#16c172; color:#0b7f46}
.pv-tot{display:flex; justify-content:space-between; align-items:baseline; font-size:13px}
.pv-tot b{font-size:22px; font-variant-numeric:tabular-nums}
.pv-cobrar{border:0; border-radius:10px; background:#177245; color:#fff; font-weight:800; padding:11px; font-size:14px}
.pv-cobrar.late{animation:late 1.2s ease-in-out infinite}
@keyframes late{50%{box-shadow:0 0 0 6px rgba(23,114,69,.2)}}
.pv-ok{font-size:11.5px; color:#0b7f46; font-weight:700; min-height:16px}

/* Maqueta: stock */
.st{padding:14px}
.st-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.st-kpis div{background:#f4f5f8; border-radius:10px; padding:8px 10px}
.st-kpis small{display:block; font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint)}
.st-kpis b{font-size:18px; font-variant-numeric:tabular-nums}
.st-fila{display:grid; grid-template-columns:34px minmax(0,1fr) 54px 74px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid #eef0f3; font-size:12px}
.st-fila img{width:34px; height:34px; border-radius:8px; object-fit:cover}
.st-fila b{display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-fila .bar{height:5px; border-radius:99px; background:#eef0f3; overflow:hidden; margin-top:4px}
.st-fila .bar i{display:block; height:100%; background:#16c172; border-radius:99px; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.st-fila .bar i.wa{background:#f59e0b} .st-fila .bar i.ba{background:var(--bad)}
.st-fila .n{text-align:right; font-weight:800; font-variant-numeric:tabular-nums; font-size:14px}
.st-fila .n.cambia{animation:salto .4s ease; color:var(--brand)}
.pill{display:inline-flex; font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 8px; white-space:nowrap; justify-self:start}
.pill.ok{background:#e6f4ec; color:#177245} .pill.wa{background:#fdf3e0; color:#a15c07} .pill.ba{background:var(--bad-bg); color:var(--bad)} .pill.in{background:#e8eefc; color:#1d4ed8}
.st-movs{margin-top:12px; background:#f4f5f8; border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; gap:5px; height:112px; overflow:hidden}
.st-mov{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; font-size:11.5px; animation:entraM .4s ease}
@keyframes entraM{from{opacity:0; transform:translateY(-8px)}}
.st-mov span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted)}
.st-mov b{font-variant-numeric:tabular-nums} .st-mov b.mas{color:var(--brand)} .st-mov b.menos{color:var(--bad)}

/* Qué incluye */
.incluye{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (max-width:980px){ .incluye{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:520px){ .incluye{grid-template-columns:1fr} }
.inc{background:var(--paper); padding:24px 22px; transition:background .2s}
.inc:hover{background:#fbfdfc}
.inc svg{width:26px; height:26px; stroke:var(--brand); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; transition:transform .25s}
.inc:hover svg{transform:translateY(-3px) rotate(-4deg)}
.inc h3{font-size:17px; margin-bottom:6px; letter-spacing:-.01em}
.inc p{margin:0; color:var(--muted); font-size:14.5px}

/* Para quién */
.quien{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
@media (max-width:860px){ .quien{grid-template-columns:1fr} }
.qc{border-radius:var(--r); overflow:hidden; background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s}
.qc:hover{transform:translateY(-3px); box-shadow:var(--sombra)}
.qc .fotos{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); height:180px}
.qc .fotos div{background:#fff center/cover no-repeat}
.qc .tx{padding:22px 22px 24px}
.qc .tag{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.qc h3{font-size:22px; margin:6px 0 8px}
.qc p{margin:0; color:var(--muted); font-size:15px}
.qc a.mas{display:inline-block; margin-top:12px; font-weight:700; color:var(--brand); text-decoration:none; font-size:14.5px}

/* Ejemplos */
.ejemplos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .ejemplos{grid-template-columns:1fr} }
.ej{display:grid; grid-template-columns:170px minmax(0,1fr); background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .2s, box-shadow .2s}
.ej:hover{transform:translateY(-3px); box-shadow:var(--sombra)}
.ej .ft{background:#fff center/cover no-repeat; min-height:200px}
.ej .tx{padding:20px 22px; display:flex; flex-direction:column}
.ej .url{font-family:var(--f-mono); font-size:13px; color:var(--brand); font-weight:600}
.ej h3{font-size:20px; margin:4px 0 6px}
.ej p{margin:0 0 12px; color:var(--muted); font-size:14.5px}
.ej .datos{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.ej .datos span{font-size:12.5px; font-weight:700; background:var(--bg); border-radius:999px; padding:3px 10px; color:var(--muted)}
.ej .acc{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
@media (max-width:460px){ .ej{grid-template-columns:1fr} .ej .ft{min-height:180px} }

/* Tienda modelo (Dulce Candy): bloque muy colorido con mosaico de fotos */
.modelo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px, 4vw, 48px); align-items:center; border-radius:28px; padding:clamp(22px, 4vw, 48px); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg,#ff2e7e 0%,#ff6a3d 35%,#ffb800 65%,#20c7d9 100%); box-shadow:0 30px 60px -30px rgba(232,54,93,.7)}
.modelo::before{content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 0 100%, rgba(123,47,247,.45), transparent 70%); pointer-events:none}
.modelo > *{position:relative}
@media (max-width:900px){ .modelo{grid-template-columns:1fr} }
.modelo .chip{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35); color:#fff}
.modelo .chip b{background:#fff; color:#e8365d}
.modelo h2{font-size:clamp(34px, 4.6vw, 56px); margin:16px 0 12px; font-weight:800; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.15)}
.modelo-tx > p{font-size:17.5px; margin:0 0 18px; max-width:52ch; color:rgba(255,255,255,.95)}
.modelo-pasos{list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; counter-reset:mp}
@media (max-width:520px){ .modelo-pasos{grid-template-columns:1fr} }
.modelo-pasos li{counter-increment:mp; background:rgba(255,255,255,.18); border-radius:14px; padding:10px 12px 10px 46px; position:relative; font-size:14.5px; backdrop-filter:blur(4px)}
.modelo-pasos li::before{content:counter(mp); position:absolute; left:10px; top:10px; width:26px; height:26px; border-radius:50%; background:#fff; color:#e8365d; font-weight:800; display:grid; place-items:center; font-size:13px}
.modelo-pasos b{display:block}
.modelo-acc{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.modelo-acc .btn.claro{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.55)}
.modelo-tx small{font-size:13.5px; color:rgba(255,255,255,.9)}
.modelo-tx small a{color:#fff; font-weight:800}
.modelo-fotos{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; transform:rotate(-3deg); text-decoration:none; position:relative}
.modelo-fotos img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:16px; border:4px solid #fff; box-shadow:0 18px 30px -16px rgba(0,0,0,.45); transition:transform .3s ease}
.modelo-fotos img:nth-child(odd){animation:baila 6s ease-in-out infinite}
.modelo-fotos img:nth-child(even){animation:baila 6s ease-in-out infinite reverse; margin-top:22px}
.modelo-fotos:hover img{transform:scale(1.04) rotate(1deg)}
@keyframes baila{50%{transform:translateY(-8px)}}
.modelo-sello{position:absolute; left:50%; bottom:-14px; transform:translateX(-50%) rotate(3deg); background:#fff; color:var(--ink); font-family:var(--f-mono); font-size:13px; padding:8px 14px; border-radius:999px; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); white-space:nowrap}
.modelo-sello b{color:#e8365d}

/* Rubros (palabras clave) */
.rubros{display:flex; flex-wrap:wrap; gap:8px}
.rubros span{background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:14.5px; font-weight:600; color:var(--ink)}
.texto-seo{columns:2 320px; column-gap:40px; color:var(--muted); font-size:15.5px; margin-top:28px}
.texto-seo p{margin:0 0 14px; break-inside:avoid}
.texto-seo b{color:var(--ink)}

/* ---------- Registro ---------- */
.reg{background:var(--night); color:#e8edf6}
.reg .envol{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px, 5vw, 64px); align-items:start}
@media (max-width:960px){ .reg .envol{grid-template-columns:1fr} }
.reg .eyebrow{color:var(--oro2)}
.reg h2{font-size:clamp(30px, 3.8vw, 44px); margin:10px 0 14px; color:#fff; font-weight:800}
.reg .lado p{color:#aab6c8; font-size:17px; margin:0 0 26px}
.despues{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.despues li{display:grid; grid-template-columns:34px 1fr; gap:12px; font-size:15px; color:#c7d1df}
.despues li b{display:block; color:#fff; font-size:15.5px}
.despues li i{width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:grid; place-items:center; font-style:normal; font-weight:800; font-family:var(--f-display); color:var(--oro2)}
.tarjeta{background:var(--paper); color:var(--ink); border-radius:20px; padding:clamp(20px, 3vw, 32px); box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.grilla-f{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px}
@media (max-width:560px){ .grilla-f{grid-template-columns:1fr} }
.campo{display:flex; flex-direction:column; gap:6px; min-width:0}
.campo.ancho{grid-column:1/-1}
.campo > span{font-size:13px; font-weight:700; color:var(--ink)}
.campo > span em{font-style:normal; color:var(--faint); font-weight:500}
.campo input, .campo select, .campo textarea{width:100%; height:46px; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:0 13px; font-size:15px; transition:border-color .15s, box-shadow .15s}
.campo textarea{height:90px; padding:11px 13px; resize:vertical}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:#fff}
.campo .ayuda{font-size:12.5px; color:var(--faint)}
.web-f{display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--bg); overflow:hidden}
.web-f:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:#fff}
.web-f b{font-family:var(--f-mono); font-size:13.5px; color:var(--faint); font-weight:400; padding-left:12px; white-space:nowrap}
.web-f input{border:0!important; box-shadow:none!important; background:none!important; font-family:var(--f-mono); font-weight:600; padding-left:2px!important; min-width:0}
.zona{grid-column:1/-1; border:2px dashed #c6d0cb; border-radius:14px; padding:22px 18px; text-align:center; background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s}
.zona:hover, .zona.encima{border-color:var(--brand); background:var(--brand-soft)}
.zona svg{width:34px; height:34px; stroke:var(--brand); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; margin:0 auto 8px; animation:sube 2.4s ease-in-out infinite}
@keyframes sube{50%{transform:translateY(-4px)}}
.zona b{display:block; font-size:16px}
.zona span{font-size:13.5px; color:var(--muted)}
.zona input{display:none}
.lista-arch{grid-column:1/-1; display:flex; flex-direction:column; gap:6px}
.arch{display:grid; grid-template-columns:34px minmax(0,1fr) auto 30px; gap:10px; align-items:center; background:var(--bg); border-radius:10px; padding:7px 8px 7px 10px; font-size:14px}
.arch .t{font-family:var(--f-mono); font-size:10.5px; font-weight:600; background:var(--paper); border:1px solid var(--line); border-radius:6px; text-align:center; padding:4px 0; text-transform:uppercase}
.arch .n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.arch small{color:var(--faint); font-variant-numeric:tabular-nums}
.arch button{border:0; background:none; width:30px; height:30px; border-radius:8px; cursor:pointer; color:var(--faint); font-size:16px}
.arch button:hover{background:var(--paper); color:var(--bad)}
.arch.mal{background:var(--bad-bg)} .arch.mal small{color:var(--bad)}
.acepto{grid-column:1/-1; display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted)}
.acepto input{width:20px; height:20px; margin-top:2px; accent-color:var(--brand); flex:0 0 auto}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.enviar{grid-column:1/-1; display:flex; flex-direction:column; gap:10px}
.enviar .btn{height:54px; font-size:16.5px; width:100%}
.enviar .btn:disabled{opacity:.6; cursor:default}
.progreso{height:8px; border-radius:99px; background:var(--bg); overflow:hidden}
.progreso i{display:block; height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .2s}
.msg{font-size:14.5px; font-weight:600}
.msg.error{color:var(--bad)}
.listo{text-align:center; padding:18px 6px}
.listo .ok{width:64px; height:64px; border-radius:50%; background:var(--brand-soft); display:grid; place-items:center; margin:0 auto 16px; animation:salto .5s ease}
.listo .ok svg{width:32px; height:32px; stroke:var(--brand); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.listo h3{font-size:28px; margin-bottom:10px}
.listo p{color:var(--muted); margin:0 auto 18px; max-width:46ch}
.listo .url{display:inline-block; font-family:var(--f-mono); font-weight:600; font-size:16px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:var(--brand-ink); overflow-wrap:anywhere}

/* Preguntas */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 0; font-family:var(--f-display); font-weight:700; font-size:18px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:24px; color:var(--brand); font-weight:600; transition:transform .2s; flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px; color:var(--muted); max-width:66ch}

/* Cierre y pie */
.cierre{text-align:center}
.cierre h2{font-size:clamp(30px, 4vw, 48px); margin:0 auto 14px; max-width:18ch; font-weight:800}
.cierre p{color:var(--muted); font-size:17px; margin:0 auto 26px; max-width:52ch}
.cierre .acc{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.pie{border-top:1px solid var(--line); padding-block:32px; font-size:14px; color:var(--muted)}
.pie .envol{display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2, minmax(0,1fr)); gap:24px}
@media (max-width:760px){ .pie .envol{grid-template-columns:1fr} }
.pie h4{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink)}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.pie a{text-decoration:none} .pie a:hover{color:var(--brand)}

/* ---------- Página para distribuidoras ---------- */
.d-hero{background:var(--night); color:#e8edf6; padding-block:clamp(40px, 6vw, 80px); overflow:hidden; position:relative}
.d-hero .envol{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px, 5vw, 56px); align-items:center}
@media (max-width:960px){ .d-hero .envol{grid-template-columns:1fr} }
.d-hero .chip{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#c7d1df}
.d-hero h1{font-size:clamp(34px, 5vw, 58px); margin:18px 0; color:#fff; font-weight:800}
.d-hero h1 em{font-style:normal; color:var(--oro2)}
.d-hero .bajada{color:#aab6c8; font-size:clamp(17px, 1.6vw, 19px); margin:0 0 26px; max-width:56ch}
.d-hero .acc{display:flex; gap:10px; flex-wrap:wrap}
.d-hero .btn.claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.25)}
.gondola{position:relative; display:flex; justify-content:center}
.gondola .exh{width:min(360px, 80%); filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); border-radius:10px; animation:flota2 8s ease-in-out infinite}
@keyframes flota2{50%{transform:translateY(-10px)}}
.burbuja{position:absolute; background:#fff; color:var(--ink); border-radius:14px; padding:10px 12px; font-size:12.5px; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); display:flex; gap:10px; align-items:center; max-width:230px; animation:aparece 9s ease-in-out infinite}
.burbuja img{width:36px; height:36px; border-radius:9px; object-fit:cover; flex:0 0 auto}
.burbuja b{display:block; font-size:13px}
.burbuja span{color:var(--muted)}
.burbuja .mas{color:var(--brand); font-weight:800} .burbuja .menos{color:var(--bad); font-weight:800}
.burbuja.b1{left:0; top:12%} .burbuja.b2{right:0; top:44%; animation-delay:3s} .burbuja.b3{left:4%; bottom:8%; animation-delay:6s}
@keyframes aparece{0%, 4%{opacity:0; transform:translateY(10px) scale(.96)} 10%, 34%{opacity:1; transform:none} 42%, 100%{opacity:0; transform:translateY(-8px)}}
@media (max-width:520px){ .burbuja{max-width:190px; font-size:11.5px} .burbuja.b2{right:-4px} }
.latas{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .latas{grid-template-columns:1fr 1fr} }
.lata{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:#000; box-shadow:var(--sombra)}
.lata img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.lata:hover img{transform:scale(1.05)}
.lata .inf{position:absolute; left:0; right:0; bottom:0; padding:44px 14px 14px; background:linear-gradient(transparent, rgba(0,0,0,.85)); color:#fff; display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.lata .inf b{font-family:var(--f-display); font-size:16px; line-height:1.15}
.lata .inf small{display:block; font-size:12px; opacity:.8; font-weight:500}
.lata .inf span{color:var(--oro2); font-weight:900; font-size:17px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums}
.lata .inf span small{color:#fff}
.comparar{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .comparar{grid-template-columns:1fr} }
.cmp{border-radius:var(--r); padding:24px; border:1px solid var(--line); background:var(--paper)}
.cmp.antes{background:#f7f7f5}
.cmp h3{font-size:19px; margin-bottom:12px}
.cmp ul{margin:0; padding-left:20px; color:var(--muted); display:flex; flex-direction:column; gap:8px; font-size:15px}
.cmp.despues h3{color:var(--brand)}