/* Portal mayorista · los colores, las tipografías y el radio los pone el tema de la instancia (ver _cabeza.html) */
:root{--f-tit:Inter,system-ui,sans-serif;--f-txt:Inter,system-ui,sans-serif;--c:#e8590c;--c-d:#c2410c;--c-dd:#24211d;--c-l:#fb923c;--t1:#f6f3ee;--t2:#e6e0d6;--ink:#1f1c19;--ink2:#6b645b;--ink3:#9a9186;--line:#e6e0d6;--bg:#fff;--bg2:#faf8f4;--r:10px;--sh:0 1px 2px rgba(31,28,25,.06),0 4px 14px rgba(31,28,25,.05)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f-txt);background:var(--bg);color:var(--ink);line-height:1.5;font-size:15px}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:0}
.dsp,.h2{font-family:var(--f-tit);font-weight:600;letter-spacing:.01em;line-height:1.08}
.h2{font-size:34px;color:var(--c-dd)}
.btn{display:inline-block;background:var(--c);color:#fff;font-weight:600;font-size:14px;padding:9px 16px;border-radius:8px;transition:.15s}.btn:hover{background:var(--c-d)}
.btn--w{background:#fff;color:var(--c-dd)}.btn--w:hover{background:var(--t2)}.btn--lg{padding:13px 24px;font-size:15.5px}
.demo{background:#0e1a20;color:#9fb2bb;font-size:12.5px;padding:6px 22px}.demo a{margin-left:10px;padding:2px 9px;border-radius:6px;color:#c9d6dc;background:var(--c);color:#fff}
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd__in{max-width:1240px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:26px}
.logo{height:38px;width:auto}
.nav{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--ink)}.nav a:hover{color:var(--c)}
.sec{max-width:1240px;margin:0 auto;padding:56px 26px}
.eyeb{font-family:var(--f-tit);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:9px}
.sub{color:var(--ink2);font-size:16px;max-width:620px;margin-top:8px}
.hero{background:linear-gradient(180deg,var(--c-dd),var(--c-d));color:#fff;position:relative;overflow:hidden}
.hero__in{max-width:1240px;margin:0 auto;padding:40px 26px 38px;position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero h1{font-family:var(--f-tit);font-weight:700;font-size:46px;line-height:1.04;max-width:560px;margin-bottom:14px}
.hero p{font-size:17px;color:#c8dbe4;max-width:520px;margin-bottom:24px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__deco{position:absolute;right:-90px;top:-70px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.045)}
.hero__deco2{position:absolute;right:110px;bottom:-170px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.03)}
.lineas{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);background:#0e1a20}
.lineas__s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}.lineas__s.is-on{opacity:1}
.lineas__s img{width:100%;height:100%;object-fit:cover}
.lineas__s figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 120px 18px 22px;background:linear-gradient(180deg,rgba(14,26,32,0),rgba(14,26,32,.86));color:#fff}
.lineas__s figcaption span{display:block;font-family:var(--f-tit);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#bcd3de}
.lineas__s figcaption b{display:block;font-family:var(--f-tit);font-weight:700;font-size:30px;line-height:1.05}
.lineas__s figcaption em{font-style:normal;font-size:13px;color:#c8dbe4}
.lineas__tag{position:absolute;top:14px;left:14px;z-index:3;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.dots{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.45);transition:.25s;cursor:pointer}.dots i.is-on{background:#fff;width:20px}
.stats{background:var(--c);color:#fff}
.stats__in{max-width:1240px;margin:0 auto;padding:22px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat b{font-family:var(--f-tit);font-weight:700;font-size:34px;display:block;line-height:1}
.stat span{font-size:13px;color:#d3e5ed;letter-spacing:.04em}
.promos{max-width:1240px;margin:0 auto;padding:36px 26px 0}
.promos__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.promos__hd .h2{font-size:30px}.promos__hd small{font-size:13px;color:var(--ink3)}
.promo{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh);background:#fff}
.promo__track{position:relative;aspect-ratio:1536/240}
.promo__s{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}.promo__s.is-on{opacity:1}
.promo__s img{width:100%;height:100%;object-fit:cover}
.promo__arr{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(31,28,25,.18);display:flex;align-items:center;justify-content:center;color:var(--c-dd);font-size:20px;line-height:1;z-index:3;transition:.15s}
.promo__arr:hover{background:#fff;transform:translateY(-50%) scale(1.06)}.promo__arr--l{left:12px}.promo__arr--r{right:12px}
.promo .dots{right:auto;left:50%;transform:translateX(-50%);bottom:9px}.promo .dots i{background:rgba(30,59,73,.35)}.promo .dots i.is-on{background:var(--c)}
.promos__ft{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink3);padding:9px 4px 0}
.grid-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;margin-top:26px}
.rub{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.16s}
.rub:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:var(--c-l)}
.rub__img{aspect-ratio:4/3;background:var(--bg2);overflow:hidden}.rub__img img{width:100%;height:100%;object-fit:cover}
.rub__b{padding:12px 14px 14px}.rub__b h3{font-size:14.5px;font-weight:600;line-height:1.25;margin-bottom:3px;color:var(--c-dd)}.rub__b span{font-size:12.5px;color:var(--ink3)}
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:12px;margin-top:24px}
.brand{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:center;height:74px;background:#fff}
.brand img{max-height:46px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.step{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:var(--r);padding:24px}
.step b{font-family:var(--f-tit);font-size:30px;color:var(--c-l);display:block;line-height:1;margin-bottom:9px}
.step h3{font-size:16.5px;margin-bottom:6px}.step p{font-size:14.5px;color:var(--ink2)}
.band{background:var(--t1);border-top:1px solid var(--t2);border-bottom:1px solid var(--t2)}
.band__in{max-width:1240px;margin:0 auto;padding:40px 26px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:34px;align-items:start}
.band h3{font-family:var(--f-tit);font-size:27px;margin-bottom:8px;color:var(--c-dd)}
.band p,.band li{font-size:14.5px;color:var(--ink2)}
.band ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.band li{padding-left:19px;position:relative}.band li:before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--c-l)}
.ft{background:var(--c-dd);color:#b7cdd7;font-size:14px}
.ft__in{max-width:1240px;margin:0 auto;padding:34px 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.ft b{color:#fff;display:block;margin-bottom:9px;font-size:14.5px}.ft a:hover{color:#fff}
@media(max-width:900px){.stats__in,.steps,.band__in,.ft__in{grid-template-columns:1fr;gap:16px}.hero h1{font-size:40px;max-width:none}.hero__in{grid-template-columns:1fr;gap:26px}.promo__track{aspect-ratio:3/1}.lineas__s figcaption b{font-size:24px}.nav{display:none}}
/* ═══ Variantes de diseño del tema ═══ */
.demo b{color:#fff;background:var(--c);padding:1px 7px;border-radius:5px;margin-right:4px;letter-spacing:.06em;font-size:11px}
.demo a{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.eyeb--hero{color:#c8dbe4}
.btn--hero{background:#fff;color:var(--c-dd)}.btn--hero:hover{background:var(--t2)}
.btn--hero2{background:rgba(255,255,255,.14)}
.logo{height:42px}
/* portada en mosaico: fondo claro, titular grande y cuatro rubros a la vista */
.hero-mosaico .hero{background:var(--t1);color:var(--ink)}
.hero-mosaico .hero__in{padding:56px 26px 54px;grid-template-columns:1fr 1fr}
.hero-mosaico .hero h1{font-family:var(--f-tit);font-size:58px;font-weight:800;letter-spacing:-.025em;line-height:1;color:var(--c-dd)}
.hero-mosaico .hero p{color:var(--ink2);font-size:18px}
.hero-mosaico .hero__deco{background:var(--c);opacity:.09;right:-140px;top:-160px}.hero-mosaico .hero__deco2{background:var(--c-dd);opacity:.05}
.hero-mosaico .eyeb--hero{color:var(--c)}
.hero-mosaico .btn--hero{background:var(--c);color:#fff}.hero-mosaico .btn--hero:hover{background:var(--c-d)}
.hero-mosaico .btn--hero2{background:transparent;color:var(--c-dd);box-shadow:inset 0 0 0 2px var(--c-dd)}.hero-mosaico .btn--hero2:hover{background:var(--c-dd);color:#fff}
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mosaico__i{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:0 10px 28px rgba(31,28,25,.16);transition:.18s}
.mosaico__i:nth-child(2n){transform:translateY(22px)}.mosaico__i:hover{box-shadow:0 16px 36px rgba(31,28,25,.24)}
.mosaico__i img{width:100%;height:100%;object-fit:cover}
.mosaico__i span{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;background:linear-gradient(180deg,rgba(31,28,25,0),rgba(31,28,25,.88));color:#fff}
.mosaico__i b{display:block;font-family:var(--f-tit);font-size:19px;line-height:1.1}.mosaico__i em{font-style:normal;font-size:12.5px;opacity:.85}
.hero-mosaico .stats{background:var(--c-dd)}.hero-mosaico .stat b{color:var(--c-l);font-size:40px}.hero-mosaico .stat span{color:#cfc8bd}
.hero-mosaico .h2{font-size:40px;font-weight:700;letter-spacing:-.015em}
.hero-mosaico .rub__b h3{font-family:var(--f-tit);font-size:17px}
.hero-mosaico .step{border-top:0;border-left:6px solid var(--c)}.hero-mosaico .step b{color:var(--c);font-size:38px}
.hero-mosaico .band{background:#fff}
.botones-pildora .btn{border-radius:999px;padding:10px 20px}.botones-pildora .btn--lg{padding:15px 30px}
@media(max-width:900px){.hero-mosaico .hero h1{font-size:42px}.hero-mosaico .hero__in{grid-template-columns:1fr}.mosaico__i:nth-child(n){transform:none}}