/* ==========================================================================
   DMS Nutrition — Hoja de estilos del sitio estático
   Basada en el diseño original de index.html (negro + naranja, Barlow).
   Índice:
     01 Tokens            08 Catálogo y tarjetas      15 Carrito (drawer y página)
     02 Base              09 Ficha de producto        16 Toast / WhatsApp flotante
     03 Accesibilidad     10 Bloques de info          17 Páginas internas
     04 Cabecera          11 FAQ                      18 Responsive ≤1000px
     05 Hero (inicio)     12 Nosotros / bandas        19 Responsive ≤700px
     06 Banda y confianza 13 Contacto y formularios   20 Movimiento reducido
     07 Secciones         14 Tablas y documentos
     00 Fuentes propias · 21-38 componentes (oscuro, Vendé, /qr/, Calidad, carrito, presentación, cosmos)
   Regla: todo color sale de los tokens de :root. No usar hex sueltos.
   ========================================================================== */

/* 00 · Fuentes propias (en /fuentes/, sin Google Fonts): cargan igual y al instante en todas las páginas,
   así el menú no cambia de tamaño al pasar de una sección a otra. Licencia OFL en fuentes/. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fuentes/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fuentes/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fuentes/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fuentes/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url(../fuentes/barlow-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fuentes/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fuentes/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fuentes/barlow-condensed-latin-800-normal.woff2) format('woff2')}
/* 01 · Tokens ------------------------------------------------------------ */
:root{
  --ink:#171719;          /* texto principal y paneles oscuros */
  --ink-2:#262025;        /* panel oscuro secundario */
  --orange:#f77622;       /* acento: botones y señales (texto encima: --ink) */
  --orange-hover:#ffa260;
  --orange-soft:#faaa70;  /* acento sobre fondo oscuro */
  --orange-dark:#a64300;  /* hover de enlaces sobre blanco (contraste 6:1) */
  --purple:#6c3180;       /* detalle decorativo */
  --foco:#ffd27a;         /* contorno de foco de teclado (contraste > 10:1 sobre negro) */
  --paper:#f5f5f2;        /* superficie suave */
  --white:#fff;
  --muted:#5f5f5f;        /* texto secundario sobre blanco (6,4:1) */
  --muted-dark:#b5b5ad;   /* texto secundario sobre oscuro */
  --line:#e2e2da;         /* bordes */
  --ok:#1f7a3d;
  --error:#b3261e;
  --wa:#25d366;           /* verde oficial de WhatsApp */
  --font:'Barlow',Arial,sans-serif;
  --font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --max:1320px;
  --gutter:6%;
  --header-h:88px;
}

/* 02 · Base -------------------------------------------------------------- */
@view-transition{navigation:auto}
/* Barra superior y cabecera quietas al cambiar de página (no se funden ni saltan) */
.announcement{view-transition-name:dms-anuncio}
.site-header{view-transition-name:dms-cabecera}
::view-transition-old(dms-anuncio),::view-transition-new(dms-anuncio),::view-transition-old(dms-cabecera),::view-transition-new(dms-cabecera){animation:none}
html{scrollbar-gutter:stable}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--white);font-family:var(--font);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--font-display);text-wrap:balance}
h1{font-weight:800;font-size:clamp(44px,6.4vw,110px);line-height:.94;letter-spacing:-1.5px;margin-bottom:25px}
h1 em{font-style:normal;color:var(--orange)}
h2{font-size:clamp(36px,4vw,54px);line-height:1.03;font-weight:700;letter-spacing:-.5px;margin-bottom:20px}
h2 em{font-style:normal;color:var(--orange-dark)}
h3{font-size:21px;line-height:1.2}
p{text-wrap:pretty}
.small{font-size:13px;color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:2.2px;font-weight:700;margin:0 0 20px;text-transform:uppercase}
.ico{width:22px;height:22px;flex:none}

/* Botones */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:16px 26px;background:var(--orange);color:var(--ink);font-size:13px;letter-spacing:1px;font-weight:800;border:0;text-transform:uppercase;transition:background .2s,transform .2s,color .2s}
.button:hover{background:var(--orange-hover);transform:translateY(-2px)}
.button.dark{background:var(--ink);color:var(--white)}
.button.dark:hover{background:#363636}
.button.outline-light{background:transparent;color:var(--white);border:2px solid var(--orange)}
.button.outline-light:hover{background:var(--orange);color:var(--ink)}
.button[disabled]{opacity:.6;pointer-events:none}
.text-link{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;margin-top:16px;border-bottom:1px solid;padding-bottom:6px}
.text-link:hover{color:var(--orange-dark)}

/* 03 · Accesibilidad ----------------------------------------------------- */
.skip{position:fixed;top:-100px;left:10px;z-index:200;background:var(--white);padding:14px 18px;font-weight:700}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;box-shadow:0 0 0 6px #0a0a0bcc} /* claro y visible sobre fondos oscuros y naranjas */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* honeypot antispam */

/* 04 · Cabecera ---------------------------------------------------------- */
.announcement{background:var(--ink);color:var(--white);text-align:center;font-size:12px;letter-spacing:2px;padding:10px 4%;font-weight:600}
.announcement i{font-style:normal;color:var(--orange);margin:0 14px}
.site-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:50;border-bottom:1px solid #eee}
.logo{width:150px;height:auto}
#navigation{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}
#navigation a{padding:6px 0;border-bottom:2px solid transparent}
#navigation a:hover{color:var(--orange-dark)}
#navigation a[aria-current="page"]{border-bottom-color:var(--orange)}
.header-actions{display:flex;align-items:center;gap:14px}
.cart-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);background:var(--white)}
.cart-button:hover{border-color:var(--ink)}
.cart-count{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--orange);color:var(--ink);font-size:12px;font-weight:800;display:grid;place-items:center}
.cart-count[data-n="0"]{display:none}
.cart-count.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.35)}}
.menu-toggle{display:none;align-items:center;gap:8px;background:none;border:0;font-size:12px;font-weight:700;letter-spacing:1px;padding:10px 0}

/* 05 · Hero (inicio) ----------------------------------------------------- */
.hero{min-height:650px;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.hero-copy{padding:70px 0 24px 10%;position:relative;z-index:2}
.hero .eyebrow{color:var(--orange-soft)}
.hero-description{color:#cacaca;font-size:18px;line-height:1.55;margin-bottom:28px;max-width:46ch}
.hero-bottom{display:flex;justify-content:space-between;margin-top:50px;padding-right:35px;font-size:10px;letter-spacing:1.8px;color:#aaa}
.hero-visual{position:relative;isolation:isolate;background:radial-gradient(ellipse at 55% 50%,#653429,transparent 65%),linear-gradient(140deg,var(--ink),var(--ink-2));min-height:650px}
.giant{font-family:var(--font-display);position:absolute;font-size:26vw;line-height:1;left:0;top:50px;font-weight:800;color:transparent;-webkit-text-stroke:1px #ffffff15;transform:rotate(-9deg);z-index:-1;user-select:none}
.orbit{position:absolute;width:460px;height:460px;border:1px solid #f7762230;border-radius:50%;top:100px;left:8%;z-index:-1;animation:spin 60s linear infinite}
.orbit:after{content:'';position:absolute;inset:35px;border:1px solid #ffffff09;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-primary{position:absolute;width:63%;height:78%;object-fit:contain;top:15%;right:0;transform:rotate(8deg);filter:drop-shadow(0 28px 16px #0008);animation:float 7s ease-in-out infinite}
.hero-secondary{position:absolute;width:56%;height:76%;object-fit:contain;left:-2%;top:3%;transform:rotate(-10deg);filter:drop-shadow(0 24px 16px #0008)}
@keyframes float{50%{translate:0 -12px}}
.visual-caption{position:absolute;bottom:24px;left:8%;right:8%;display:flex;justify-content:space-between;color:#b5a69e;font-size:9px;letter-spacing:1.5px}

/* 06 · Banda y confianza ------------------------------------------------- */
.brand-strip{background:var(--orange);padding:20px 0;overflow:hidden;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:1px}
.brand-track{display:flex;width:max-content;animation:vmarquee 80s linear infinite;will-change:transform}
.brand-group{display:flex;align-items:center;flex:none}
.brand-group>*{margin-right:40px;white-space:nowrap}
.brand-track b{font-size:28px}
@keyframes marquee{to{transform:translateX(-50%)}}
.trust{border-bottom:1px solid var(--line)}
.trust-list{list-style:none;margin:0 auto;padding:30px var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:calc(var(--max) + 12%)}
.trust-list li{display:flex;gap:14px;align-items:flex-start}
.trust-list .ico{width:30px;height:30px;color:var(--orange-dark)}
.trust-list strong{display:block;font-size:15px}
.trust-list span{font-size:14px;color:var(--muted)}

/* 07 · Secciones --------------------------------------------------------- */
.section{padding:88px var(--gutter);max-width:calc(var(--max) + 12%);margin:0 auto}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:35px}
.section-heading>p{font-size:16px;line-height:1.65;color:var(--muted);margin-bottom:22px;max-width:360px}
.steps{background:var(--paper);max-width:none}
.steps-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:45px;counter-reset:s}
.steps-list li{border-top:2px solid var(--ink);padding-top:22px}
.step-n{font-family:var(--font-display);font-size:44px;font-weight:800;color:var(--orange-dark);line-height:1}
.steps-list h3{font-size:23px;margin:14px 0 10px}
.steps-list p{color:var(--muted);margin:0;max-width:36ch}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:45px;margin:36px 0 0}
.proof-grid article{border-top:2px solid var(--ink);padding-top:22px}
.proof-grid span{font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:700}
.proof-grid h3{font-size:23px;margin:18px 0 12px}
.proof-grid p{font-size:16px;line-height:1.65;color:var(--muted);margin:0}

/* 08 · Catálogo y tarjetas ----------------------------------------------- */
.catalog-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid #ddd;padding-bottom:22px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{border:1px solid #ddd;background:var(--white);padding:12px 20px;font-size:14px}
.filters button.active{color:var(--white);background:var(--ink);border-color:var(--ink)}
.filters button:hover{border-color:var(--ink)}
.sort{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.sort select{border:1px solid #ddd;padding:11px 14px;background:var(--white)}
.result-count{font-size:12px;color:var(--muted);margin:20px 0}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px}
.product-card{display:flex;flex-direction:column}
.product-card[hidden]{display:none}
.product-image{background:var(--paper);position:relative;display:block;aspect-ratio:1;padding:22px;overflow:hidden}
.product-image img{height:100%;width:100%;object-fit:contain;transition:transform .35s}
.product-card:hover .product-image img{transform:scale(1.06)}
.badge-off{position:absolute;top:12px;left:12px;z-index:1;background:var(--ink);color:var(--white);font-size:12px;font-weight:800;padding:5px 9px;letter-spacing:.5px}
.product-category{font-size:11px;letter-spacing:1.4px;color:var(--muted);text-transform:uppercase;margin:18px 0 6px;font-weight:600}
.product-name{font-family:var(--font);font-size:19px;line-height:1.25;margin:0 0 6px;font-weight:700}
.product-name a:hover{color:var(--orange-dark)}
.product-format{color:var(--muted);font-size:14px;margin:0 0 10px}
.price{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.price strong{font-size:22px;font-weight:800}
.price s,.buy-price s{color:var(--muted);font-size:14px}
.card-add{margin-top:auto;align-self:stretch;border:1px solid var(--ink);background:var(--white);padding:13px 10px;font-size:12px;font-weight:800;letter-spacing:.8px;text-align:center;transition:background .2s,color .2s}
.card-add:hover{background:var(--ink);color:var(--white)}
.card-add.added{background:var(--ok);border-color:var(--ok);color:var(--white)}

/* 09 · Ficha de producto ------------------------------------------------- */
.page-hero .breadcrumb,.product-top .breadcrumb{margin-bottom:26px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;font-size:13px;color:var(--muted)}
.breadcrumb li+li:before{content:'/';margin-right:8px;opacity:.6}
.breadcrumb a:hover{color:var(--orange-dark);text-decoration:underline}
.product-top{padding-top:36px;padding-bottom:56px}
.product-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gallery{position:sticky;top:calc(var(--header-h) + 20px);display:grid;gap:12px}
.gallery-main{background:var(--paper);aspect-ratio:1;display:grid;place-items:center;padding:30px;overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.gallery-main img.fade{opacity:0}
.thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.thumb{flex:none;width:88px;height:88px;padding:6px;border:1px solid var(--line);background:var(--paper)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb[aria-current="true"]{border:2px solid var(--ink)}
.buy-box h1{font-size:clamp(38px,4vw,58px);line-height:1;margin-bottom:10px}
.buy-box .eyebrow{color:var(--orange-dark);margin-bottom:12px}
.buy-format{color:var(--muted);font-weight:600;margin-bottom:22px}
.buy-price{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.buy-price strong{font-family:var(--font-display);font-size:46px;line-height:1}
.buy-price .badge-off{position:static}
.buy-note{font-size:13px;color:var(--muted);margin-bottom:22px}
.buy-summary{font-size:17px;line-height:1.6;margin-bottom:24px;max-width:56ch}
.buy-form{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:16px}
.variant{flex:1 1 100%}
.qty{display:inline-flex;border:1px solid var(--ink);height:52px}
.qty button{width:46px;background:var(--white);border:0;font-size:20px}
.qty button:hover{background:var(--paper)}
.qty input{width:52px;border:0;text-align:center;font-weight:700;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.add-to-cart{flex:1;min-width:200px}
.wa-buy{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);padding:14px;font-weight:700;font-size:14px;margin-bottom:26px}
.wa-buy .ico{color:#128c4a}
.wa-buy:hover{border-color:var(--ink)}
.seals{list-style:none;padding:20px 0 0;margin:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seals li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.seals .ico{color:var(--orange-dark)}
.sticky-buy{display:none}

/* 10 · Bloques de información -------------------------------------------- */
.product-info{padding-top:0}
.info-nav{display:flex;gap:28px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:40px;position:sticky;top:var(--header-h);background:var(--white);z-index:5;padding-top:14px}
.info-nav a{padding:0 0 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.info-nav a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px}
.info-block h2{font-family:var(--font);font-size:24px;letter-spacing:0;line-height:1.2;margin-bottom:14px}
.info-block p{color:#444;max-width:62ch;line-height:1.7}
.info-block#que-es{grid-column:1/-1}
.info-block#que-es p{font-size:18px}
.info-block#documentacion,.info-block#composicion{grid-column:span 1}
.check-list,.dot-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.check-list li{display:flex;gap:10px;align-items:flex-start}
.check-list .ico{color:var(--ok);margin-top:1px}
.check-list.light .ico{color:var(--orange)}
.dot-list li{padding-left:20px;position:relative}
.dot-list li:before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--orange)}
.warn{background:var(--paper);padding:24px;border-left:4px solid var(--orange);grid-column:1/-1}
.warn p{margin:0}

/* 11 · FAQ --------------------------------------------------------------- */
.faq-list{max-width:900px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:6px;top:16px;font-size:28px;font-weight:400;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 22px;max-width:70ch;line-height:1.7}
.related{border-top:1px solid var(--line)}

/* 12 · Nosotros / bandas oscuras ----------------------------------------- */
.about{display:grid;grid-template-columns:1fr 1fr}
.about-brand{background:var(--ink);padding:70px 12%;display:flex;flex-direction:column;justify-content:space-between;gap:80px;position:relative;overflow:hidden}
.about-brand:after{content:'';position:absolute;width:440px;height:440px;border:70px solid #6c318033;border-radius:50%;right:-180px;top:50px}
.about-brand img{width:230px;z-index:1}
.about-brand p{font-family:var(--font-display);font-size:64px;font-weight:700;line-height:1;color:var(--white);margin-bottom:0;z-index:1}
.about-copy{background:var(--paper);padding:70px 12%}
.about-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:#555;max-width:56ch}
/* Banda distribuidores: bloque "flotante" separado por aire blanco, para que no se pegue
   a otros bloques negros (por ejemplo la mitad negra de .about). */
.dist-band{position:relative;isolation:isolate;overflow:hidden;background:#0d0d0e;color:var(--white);padding:64px 6%;margin:88px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:4px solid var(--orange)}
.dist-band:after{content:'';position:absolute;z-index:-1;right:-120px;top:50%;width:520px;aspect-ratio:1;translate:0 -50%;background:url(../imagenes/web/marca/dms-emblema-900.webp) center/contain no-repeat;opacity:.16;animation:vspin 50s linear infinite}
.dist-band:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 85% 50%,#f7762230,transparent 60%)}
.dist-band .button.outline-light{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.dist-band .button.outline-light:hover{background:var(--white);border-color:var(--white)}
.dist-band .eyebrow{color:var(--orange-soft)}
.dist-band p:not(.eyebrow){color:#cacaca;max-width:60ch;margin:0}
.dist-band .check-list{color:#d8d8d0;margin-top:10px}
.contact{background:var(--orange);padding:65px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:35px}
.contact h2{font-size:clamp(44px,5vw,64px)}
.contact p{line-height:1.6;margin-bottom:0}
.contact-actions p{font-size:13px;padding-top:18px}

/* 13 · Contacto y formularios -------------------------------------------- */
.page-hero{background:var(--ink);color:var(--white);padding:46px var(--gutter) 64px}
.page-hero .breadcrumb ol{color:var(--muted-dark)}
.page-hero .eyebrow{color:var(--orange-soft)}
.page-hero h1{font-size:clamp(46px,6vw,92px);margin-bottom:18px}
.page-hero>p:last-child{color:#cacaca;font-size:18px;max-width:62ch;margin:0}
.contact-page{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
.contact-form h2,.checkout h2{font-family:var(--font);font-size:24px;letter-spacing:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;letter-spacing:.2px}
.field.wide,.check.wide{grid-column:1/-1}
.field input,.field select,.field textarea{min-height:50px;border:1px solid #cfcfc6;padding:12px 14px;font-size:16px;font-weight:400;background:var(--white);width:100%}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:2px solid var(--orange);outline-offset:0}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-size:13px;font-weight:700;margin-bottom:10px}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radio{display:flex;align-items:center;gap:8px;border:1px solid #cfcfc6;padding:12px 16px;font-size:15px;cursor:pointer}
.radio:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.radio input{accent-color:var(--ink)}
.form-status{margin:16px 0 0;font-weight:700}
.form-status.ok{color:var(--ok)}
.form-status.error{color:var(--error)}
.contact-aside{display:grid;gap:14px}
.contact-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);padding:22px}
a.contact-card:hover{border-color:var(--ink)}
.contact-card .ico{width:28px;height:28px;color:var(--orange-dark)}
.contact-card.wa .ico{color:#128c4a}
.contact-card span,.contact-card .cc-txt{display:flex;flex-direction:column;gap:3px}
.contact-card small{color:var(--muted);font-size:13px}
.zones{list-style:none;padding:0;margin:4px 0;display:flex;flex-wrap:wrap;gap:6px 14px}
.contact-social{display:flex;gap:18px;flex-wrap:wrap;padding:10px 4px;font-size:14px}
.contact-social a{text-decoration:underline;text-underline-offset:4px}

/* 14 · Tablas y documentos ----------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;font-size:13px;color:var(--muted);padding:12px 16px;caption-side:top}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--paper);font-size:13px;letter-spacing:.3px}
tbody th{font-weight:600}
tbody tr:last-child>*{border-bottom:0}
tbody th a{text-decoration:underline;text-underline-offset:3px}
.doc-links{display:flex;flex-direction:column;gap:6px}
.doc-links a{font-size:14px;text-decoration:underline;text-underline-offset:3px}
.reg-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}
.reg-list div{background:var(--paper);padding:12px 14px}
.reg-list dt{font-size:11px;letter-spacing:1px;font-weight:700;color:var(--muted);text-transform:uppercase}
.reg-list dd{margin:4px 0 0;font-weight:700}
.doc-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.doc-list.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:20px}
.doc-list a{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:14px 16px;font-weight:700}
.doc-list a:hover{border-color:var(--ink)}
.doc-list .ico{color:var(--orange-dark)}
.doc-list span{display:flex;flex-direction:column}
.doc-list small{font-weight:400;color:var(--muted);font-size:12px}
.qr-band{background:var(--paper);padding:70px var(--gutter);display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.qr-band img{width:260px;justify-self:center;background:var(--white);padding:16px}
.qr-band p{max-width:60ch;color:#444}
.qr-steps{padding-left:20px;display:grid;gap:8px;font-weight:600}

/* 15 · Carrito ----------------------------------------------------------- */
.cart-drawer{margin:0 0 0 auto;height:100vh;height:100dvh;max-height:none;width:min(440px,100vw);border:0;padding:0;background:var(--white)}
.cart-drawer[open]{display:flex;flex-direction:column;animation:slidein .28s ease-out}
@keyframes slidein{from{transform:translateX(100%)}}
.cart-drawer::backdrop{background:#000a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:30px;margin:0}
.drawer-close{background:none;border:0;padding:8px}
.drawer-body{flex:1;overflow:auto;padding:8px 24px}
.drawer-foot{padding:20px 24px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;gap:12px}
.drawer-total{display:flex;justify-content:space-between;font-size:18px}
.drawer-total strong{font-size:24px}
.drawer-empty{padding:40px 0;text-align:center;color:var(--muted)}
.cart-lines{list-style:none;padding:0;margin:0}
.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:72px;height:72px;object-fit:contain;background:var(--paper);padding:6px}
.cart-line-name{display:block;font-weight:700;font-size:15px;line-height:1.3}
.cart-line-name small{display:block;font-weight:500;color:var(--muted)}
.cart-line-price{font-weight:800;text-align:right}
.cart-line .qty{height:38px;margin-top:8px}
.cart-line .qty button{width:34px;font-size:16px}
.cart-line .qty input{width:36px}
.line-remove{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;padding:6px 0 0;display:block;margin-left:auto}
.checkout{max-width:calc(var(--max) + 12%)}
.checkout h1{font-size:clamp(46px,6vw,80px)}
.checkout-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.checkout-items{position:sticky;top:calc(var(--header-h) + 20px)}
.checkout-form{background:var(--paper);padding:32px}
.checkout-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding:18px 0;margin-top:8px}
.checkout-total strong{font-family:var(--font-display);font-size:40px}
.wa-send{width:100%;background:var(--wa);color:#0b2e17}
.wa-send:hover{background:#4be083}
.checkout-empty,.checkout-done{padding:40px 0}
.checkout-done{max-width:640px}
.checkout-done .order-id{font-family:var(--font-display);font-size:34px;font-weight:800}

/* 16 · Toast / WhatsApp flotante ----------------------------------------- */
.toast{position:fixed;left:16px;right:16px;bottom:24px;margin:0 auto;width:fit-content;max-width:440px;translate:0 160%;visibility:hidden;background:var(--ink);color:var(--white);padding:14px 20px;font-weight:600;z-index:120;transition:translate .3s,visibility .3s;display:flex;gap:16px;align-items:center}
.toast.show{translate:0 0;visibility:visible}
.toast a{color:var(--orange-soft);text-decoration:underline;white-space:nowrap}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);color:var(--white);display:grid;place-items:center;box-shadow:0 8px 24px #0004;transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float .ico{width:30px;height:30px}

/* 17 · Páginas internas -------------------------------------------------- */
.story{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start}
.story-copy p{font-size:17px;line-height:1.75;color:#444;max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--white);padding:26px 22px;display:flex;flex-direction:column-reverse;gap:6px}
.stats dd{margin:0;font-family:var(--font-display);font-size:48px;font-weight:800;line-height:1}
.stats dt{font-size:14px;color:var(--muted)}
.values{padding-top:0}
.closing{text-align:center}
.closing-quote{font-family:var(--font-display);font-size:clamp(30px,3.5vw,46px);font-weight:700;max-width:24ch;margin:0 auto 26px;line-height:1.1}
.simple-page{min-height:50vh}
.simple-page h1{font-size:clamp(46px,6vw,80px)}
.simple-page p{color:var(--muted);font-size:18px;max-width:52ch}
.guides>p{color:var(--muted)}

/* Pie */
.site-footer{background:var(--ink);color:#bbb;padding:60px var(--gutter) 25px;display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px;font-size:14px}
.footer-brand img{width:150px;height:auto;margin-bottom:18px}
.footer-brand p{max-width:34ch;line-height:1.6}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a:hover{color:var(--white)}
.footer-title{color:var(--white);font-weight:700;letter-spacing:1px;font-size:12px;text-transform:uppercase;margin-bottom:4px}
.footer-note{grid-column:1/-1;border-top:1px solid #ffffff26;padding-top:24px;font-size:12px;line-height:1.7;margin:0}

/* 18 · Responsive ≤1000px ------------------------------------------------ */
@media (min-width:1600px){.hero-copy{padding-left:15%}.hero,.hero-visual{min-height:750px}}
@media (max-width:1100px){
  #navigation{gap:18px;font-size:13px}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:1000px){
  .hero-copy{padding-top:55px}
  .hero,.hero-visual{min-height:580px}
  .visual-caption{display:none}
  .trust-list{grid-template-columns:1fr 1fr}
  .about-copy,.about-brand{padding:55px 9%}
  .about-brand p{font-size:56px}
  .product-layout,.checkout-layout,.contact-page,.story,.qr-band{grid-template-columns:1fr;gap:36px}
  .gallery,.checkout-items{position:static}
  .info-grid{grid-template-columns:1fr}
  .dist-band,.contact{flex-direction:column;align-items:flex-start}
  .dist-band{margin:64px var(--gutter)}
  .dist-band:after{width:360px;right:-140px}
}

/* 19 · Responsive ≤700px ------------------------------------------------- */
@media (max-width:700px){
  :root{--header-h:68px}
  .announcement{font-size:9px;letter-spacing:1.2px}
  .announcement span:first-child,.announcement span:first-child+i{display:none}
  .site-header{padding:0 5%}
  .logo{width:118px}
  .menu-toggle{display:flex}
  #navigation{display:none;position:absolute;top:var(--header-h);left:0;right:0;padding:24px 6%;background:var(--white);border-bottom:1px solid #ddd;flex-direction:column;font-size:18px;gap:18px}
  #navigation.open{display:flex;max-height:calc(100vh - var(--header-h) - 40px);max-height:calc(100dvh - var(--header-h) - 40px);overflow-y:auto;overscroll-behavior:contain}
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-copy{padding:44px 6% 20px}
  h1{font-size:64px;letter-spacing:-1.2px}
  .hero-description{font-size:16px}
  .hero-bottom{display:none}
  .hero-visual{min-height:360px}
  .hero-primary{width:56%;height:96%;right:5%;top:0}
  .hero-secondary{width:50%;height:90%;left:6%;top:-6%}
  .giant{font-size:64vw;top:0;left:12%}
  .orbit{width:280px;height:280px;top:10px;left:20%}
  .brand-strip{font-size:17px;padding:15px 0}
  .trust-list{grid-template-columns:1fr;gap:16px;padding:24px 6%}
  .section{padding:56px 6%}
  .section-heading{display:block;margin-bottom:24px}
  .steps-list{grid-template-columns:1fr;gap:26px}
  .catalog-tools{flex-direction:column;align-items:stretch}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .filters button{flex:none;font-size:13px;padding:10px 14px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .product-image{padding:12px}
  .product-category{font-size:10px;letter-spacing:.7px;margin-top:14px}
  .product-name{font-size:16px}
  .product-format{font-size:12px}
  .price strong{font-size:18px}
  .card-add{font-size:11px;padding:11px 6px}
  .about{grid-template-columns:1fr}
  .about-brand{padding:40px 6%;gap:45px}
  .about-brand img{width:170px}
  .about-brand p{font-size:50px}
  .about-copy{padding:45px 6%}
  .proof-grid{grid-template-columns:1fr;gap:20px}
  .contact{padding:45px 6%}
  .product-top{padding-top:20px}
  .gallery-main{padding:16px}
  .thumb{width:68px;height:68px}
  .buy-price strong{font-size:40px}
  .seals{grid-template-columns:1fr}
  .info-nav{gap:18px;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none}
  .form-grid{grid-template-columns:1fr}
  .checkout-form{padding:20px 16px;margin:0}  /* antes margin:0 -6% → quedaba corrido a la izquierda con un hueco a la derecha */
  .page-hero{padding:30px 6% 44px}
  .stats dd{font-size:32px}
  .stats div{padding:20px 14px}
  .site-footer{grid-template-columns:1fr 1fr;gap:26px}
  .table-wrap.responsive{border:0}
  .table-wrap.responsive thead{display:none}
  .table-wrap.responsive tr{display:grid;border:1px solid var(--line);margin-bottom:12px}
  .table-wrap.responsive th,.table-wrap.responsive td{border:0;padding:8px 14px}
  .table-wrap.responsive td:before{content:attr(data-label);display:block;font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:700;text-transform:uppercase}
  /* Barra fija de compra en la ficha */
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--white);border-top:1px solid var(--line);padding:10px 5% calc(10px + env(safe-area-inset-bottom));justify-content:space-between;align-items:center;gap:14px;translate:0 110%;transition:translate .25s}
  .sticky-buy.show{translate:0 0}
  .sticky-buy div{display:flex;flex-direction:column;line-height:1.2}
  .sticky-buy span{font-weight:800;font-size:18px}
  .sticky-buy .button{min-height:46px;padding:12px 22px}
  .product-page~.wa-float,.has-sticky .wa-float{bottom:84px}
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
}

/* 20 · Movimiento reducido ----------------------------------------------- */
/* DECISIÓN DE NACHO (01/10/2026): las animaciones se ven SIEMPRE, también en PCs o celulares
   con "Efectos de animación" apagados (prefers-reduced-motion). Por eso estas reglas ya no usan
   @media (prefers-reduced-motion:reduce): solo se activan si alguien agrega la clase
   "sin-movimiento" al <html>. Para volver a respetar la preferencia del sistema, cambiar
   "html.sin-movimiento" por "@media (prefers-reduced-motion:reduce)" en este bloque y los de abajo. */
html.sin-movimiento{scroll-behavior:auto}
html.sin-movimiento *,html.sin-movimiento *:before,html.sin-movimiento *:after{animation:none!important;transition:none!important}

/* 21 · Ajustes de desborde en grillas (min-width:0 evita que el contenido ensanche la columna) */
.catalog-tools>*,.story>*,.product-layout>*,.checkout-layout>*,.contact-page>*,.info-grid>*,.qr-band>*{min-width:0;max-width:100%}
@media (max-width:700px){.sort{justify-content:space-between}.sort select{flex:1}}

/* ==========================================================================
   22 · Menú: ítem destacado (Vendé DMS)
   ========================================================================== */
#navigation a.nav-cta{background:var(--ink);color:var(--white);padding:9px 16px;border:0;letter-spacing:.3px}
#navigation a.nav-cta:hover{background:var(--orange);color:var(--ink)}
#navigation a.nav-cta[aria-current="page"]{background:var(--orange);color:var(--ink)}

/* ==========================================================================
   23 · Tema oscuro (body.theme-dark) — usado por vende-dms.html
   ========================================================================== */
.theme-dark{--void:#0a0a0b;background:var(--void);color:var(--white)}
.theme-dark .announcement{background:var(--orange);color:var(--ink)}
.theme-dark .announcement i{color:var(--ink)}
.theme-dark .site-header{background:rgba(10,10,11,.82);border-bottom-color:#ffffff14}
.theme-dark #navigation a:hover{color:var(--orange-soft)}
.theme-dark #navigation a.nav-cta{background:var(--orange);color:var(--ink)}
.theme-dark .cart-button{background:transparent;border-color:#ffffff2e;color:var(--white)}
.theme-dark .menu-toggle{color:var(--white)}
.theme-dark .breadcrumb ol{color:var(--muted-dark)}
.theme-dark .faq{max-width:none;padding-left:var(--gutter);padding-right:var(--gutter)}
.theme-dark .faq-list{border-color:#ffffff1f;margin:0 auto}
.theme-dark .faq h2{text-align:center}
.theme-dark .faq details{border-color:#ffffff1f}
.theme-dark .faq details p{color:#b9b9b2}
.theme-dark .site-footer{background:#050506;border-top:1px solid #ffffff12}
@media (max-width:700px){.theme-dark #navigation{background:var(--void);border-bottom-color:#ffffff1f}}

/* ==========================================================================
   24 · Vendé DMS — página de impacto
   ========================================================================== */
.vende{overflow:hidden}
.vende .eyebrow{color:var(--orange-soft)}
.vende h2{color:var(--white)}
.v-section{padding:110px var(--gutter);max-width:calc(var(--max) + 12%);margin:0 auto}

/* Hero a pantalla completa */
.v-hero{position:relative;min-height:calc(100vh - var(--header-h) - 38px);min-height:calc(100svh - var(--header-h) - 38px);display:grid;place-items:center;text-align:center;padding:60px var(--gutter) 110px;isolation:isolate}
.v-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.v-gridlines{position:absolute;inset:-2px;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 72%)}
.v-glow{position:absolute;left:50%;top:44%;width:min(1100px,140vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#f7762255 0%,#6c318033 32%,transparent 62%);filter:blur(10px);animation:vpulse 6s ease-in-out infinite}
@keyframes vpulse{50%{opacity:.6;scale:1.08}}
.v-emblem{position:absolute;left:50%;top:44%;width:min(760px,118vw);translate:-50% -50%;opacity:.22;animation:vspin 40s linear infinite;filter:saturate(1.2)}
@keyframes vspin{to{rotate:360deg}}
.v-hero-inner{max-width:1180px;display:flex;flex-direction:column;align-items:center}
.v-hero .breadcrumb{margin-bottom:26px}
.v-logo{width:min(440px,78vw);height:auto;margin-bottom:34px;filter:drop-shadow(0 10px 40px #f7762240);animation:vrise 1s cubic-bezier(.2,.8,.2,1) both}
.v-eyebrow{letter-spacing:3px;animation:vrise 1s .15s both}
.v-title{font-size:clamp(44px,7vw,112px);line-height:.88;letter-spacing:-2px;margin:0 0 30px;text-transform:uppercase}
.v-title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.v-title .ln>span{display:inline-block;animation:vline .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i) * .12s)}
.v-title em{font-style:normal;background:linear-gradient(90deg,#ffc04d,var(--orange),#e0457b,#a35bd0,#e0457b,var(--orange),#ffc04d);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:vshine 6s linear infinite}
@keyframes vline{from{transform:translateY(105%)}}
@keyframes vrise{from{opacity:0;transform:translateY(24px)}}
@keyframes vshine{to{background-position:-200% 0}}
.v-sub{font-size:clamp(18px,1.9vw,23px);line-height:1.5;color:#c9c9c2;max-width:50ch;margin:0 auto 38px;animation:vrise 1s .8s both;text-wrap:balance}
.v-sub em{font-style:normal;font-weight:700;color:var(--white)}
.v-sub em:last-of-type{color:var(--orange-soft)}
.v-ctas{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;animation:vrise 1s .95s both}
.v-btn{min-height:62px;padding:18px 34px;font-size:15px;box-shadow:0 0 0 0 #f7762280;animation:vring 2.4s infinite}
@keyframes vring{70%{box-shadow:0 0 0 18px #f7762200}100%{box-shadow:0 0 0 0 #f7762200}}
.v-btn .ico{width:24px;height:24px}
.v-link{display:inline-flex;gap:10px;align-items:center;font-weight:700;font-size:13px;letter-spacing:1.4px;border-bottom:1px solid #ffffff55;padding-bottom:6px}
.v-link:hover{color:var(--orange-soft);border-color:var(--orange)}
.v-scroll{position:absolute;bottom:28px;left:50%;translate:-50% 0;width:28px;height:46px;border:2px solid #ffffff55;border-radius:14px}
.v-scroll span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--orange);animation:vscroll 1.8s infinite}
@keyframes vscroll{to{transform:translateY(16px);opacity:0}}

/* Marquesina gigante */
.v-marquee{border-block:1px solid #ffffff1a;padding:26px 0;overflow:hidden;background:#0d0d0e;display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* Pista: 2 grupos idénticos; se desplaza -50% (exactamente un grupo) → bucle sin costura.
   Se anima con transform en GPU (translate3d) para que sea fluido en celulares. */
.v-track{display:flex;width:max-content;animation:vmarquee 68s linear infinite;will-change:transform;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,88px);line-height:1;text-transform:uppercase}
.v-track--rev{animation-direction:reverse;animation-duration:84s;font-size:clamp(28px,3.6vw,52px)}
.v-group{display:flex;align-items:center;flex:none}
.v-group>*{margin-right:44px}
.v-track span{color:var(--white);white-space:nowrap}
.v-track--rev span{color:transparent;-webkit-text-stroke:1.5px #ffffffa6}
.v-track b{color:var(--orange);font-size:.6em;display:inline-block;animation:vspin 6s linear infinite}
.v-marquee:hover .v-track{animation-play-state:paused}
@keyframes vmarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Manifiesto */
.v-manifest{text-align:center;max-width:980px}
.v-manifest h2{font-size:clamp(40px,5.4vw,76px)}
.v-manifest p:last-child{font-size:20px;line-height:1.6;color:#c9c9c2;max-width:58ch;margin:0 auto}

/* Las 3 reglas */
.v-rules{display:grid;gap:0;padding-top:20px}
.v-rule{position:relative;display:grid;grid-template-columns:minmax(160px,.7fr) 2fr;gap:40px;align-items:center;padding:64px 0;border-top:1px solid #ffffff1f}
.v-rule:last-child{border-bottom:1px solid #ffffff1f}
.v-num{font-family:var(--font-display);font-weight:800;font-size:clamp(120px,16vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--orange);opacity:.9}
.v-tema{font-size:13px;letter-spacing:3px;font-weight:700;color:var(--muted-dark);margin-bottom:18px}
.v-ellos{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;font-size:clamp(19px,2vw,25px);line-height:1.35;margin-bottom:18px}
.v-ellos span{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--ink);background:#b9b9b2;padding:3px 8px}
.v-ellos em{font-style:normal;color:#c9c9c2}
.v-nosotros{font-family:var(--font-display);font-size:clamp(40px,5.2vw,84px);line-height:.95;font-weight:800;text-transform:uppercase;letter-spacing:-.5px;margin:0 0 18px}
.v-nosotros:before{content:'NOSOTROS';display:block;font-family:var(--font);font-size:12px;letter-spacing:3px;color:var(--orange);margin-bottom:12px}
.v-texto{font-size:18px;color:#c9c9c2;max-width:52ch;margin:0}

/* Frase gigante */
.v-statement{position:relative;text-align:center;padding:140px var(--gutter);background:radial-gradient(ellipse at 50% 40%,#2a1408 0%,var(--void) 65%);isolation:isolate}
.v-emblem-2{position:absolute;left:50%;top:38%;width:min(620px,100vw);translate:-50% -50%;opacity:.14;z-index:-1;animation:vspin 60s linear infinite reverse}
.v-statement h2{font-size:clamp(64px,13vw,210px);line-height:.84;letter-spacing:-3px;text-transform:uppercase;margin-bottom:30px}
.v-statement h2 em{font-style:normal;color:var(--orange)}
.v-statement>p{font-size:clamp(18px,2vw,24px);color:#d8d8d0;max-width:40ch;margin:0 auto 70px}
.v-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ffffff1f;border:1px solid #ffffff1f;max-width:1100px;margin:0 auto}
.v-stats div{background:var(--void);padding:34px 20px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px} /* dt va primero en el HTML (válido); el número se ve arriba */
.v-stats dd{margin:0;font-family:var(--font-display);font-size:clamp(48px,5vw,76px);font-weight:800;line-height:1;color:var(--white)}
.v-stats dt{font-size:14px;color:var(--muted-dark)}

/* Kit */
.v-kit h2,.v-quienes h2,.v-pasos h2{font-size:clamp(38px,4.6vw,64px);max-width:20ch}
.v-kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff1a;border:1px solid #ffffff1a;margin-top:44px}
.v-kit-grid article{background:var(--void);padding:36px 30px;transition:background .3s}
.v-kit-grid article:hover{background:#151517}
.v-kit-grid span{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--orange)}
.v-kit-grid h3{font-size:22px;margin:16px 0 10px}
.v-kit-grid p{color:#b9b9b2;margin:0}

/* Quiénes */
.v-quienes{padding-top:0}
.v-q-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.v-q-grid article{border-top:3px solid var(--orange);padding-top:22px}
.v-q-grid h3{font-family:var(--font-display);font-size:34px;text-transform:uppercase;margin-bottom:10px}
.v-q-grid p{color:#b9b9b2;margin:0}

/* Pasos */
.v-pasos{padding-top:0}
.v-pasos ol{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v-pasos li{background:#131315;padding:34px 28px;position:relative;overflow:hidden}
.v-pasos li span{position:absolute;right:14px;top:-10px;font-family:var(--font-display);font-size:120px;font-weight:800;color:#ffffff0d;line-height:1}
.v-pasos h3{font-size:24px;margin:0 0 10px;color:var(--white)}
.v-pasos p{color:#b9b9b2;margin:0;max-width:30ch}

/* Cierre */
.v-final{position:relative;text-align:center;padding:150px var(--gutter);border-top:1px solid #ffffff14;isolation:isolate;overflow:hidden}
.v-final .v-glow{top:50%;z-index:-1}
.v-final h2{font-size:clamp(52px,9vw,150px);line-height:.88;text-transform:uppercase;letter-spacing:-2px;max-width:12ch;margin:0 auto 24px}
.v-final h2 em{font-style:normal;color:var(--orange)}   /* el resaltado en naranja claro: el naranja oscuro global (h2 em) no se lee sobre negro */
.v-final>p{font-size:20px;color:#d8d8d0;margin:0 auto 40px;max-width:44ch}

/* Aparición al hacer scroll (solo si hay JS: clase .js en <html>) */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0) * .1s)}
.js .rv.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1000px){
  .v-rule{grid-template-columns:1fr;gap:10px;padding:52px 0}
  .v-num{font-size:110px}
  .v-stats{grid-template-columns:1fr 1fr}
  .v-kit-grid{grid-template-columns:1fr 1fr}
  .v-q-grid{grid-template-columns:1fr 1fr}
  .v-pasos ol{grid-template-columns:1fr}
}
@media (max-width:700px){
  .v-section{padding:72px 6%}
  .v-hero{padding:40px 6% 100px;min-height:calc(100vh - var(--header-h) - 30px);min-height:calc(100svh - var(--header-h) - 30px)}
  .v-title{letter-spacing:-1px}
  .v-logo{margin-bottom:26px}
  .v-ctas{flex-direction:column;gap:20px;width:100%}
  .v-btn,.v-btn-play{width:100%;justify-content:center}
  .v-gridlines{background-size:40px 40px}
  .v-marquee{padding:18px 0;gap:10px}
  .v-track{animation-duration:44s}
  .v-track--rev{animation-duration:56s}
  .brand-track{animation-duration:60s}
  .brand-group>*{margin-right:22px}
  .v-group>*{margin-right:26px}
  .v-statement{padding:96px 6%}
  .v-statement h2{letter-spacing:-1.5px}
  .v-stats div{padding:24px 14px}
  .v-kit-grid,.v-q-grid{grid-template-columns:1fr}
  .v-final{padding:100px 6%}
}
html.sin-movimiento.js .rv{opacity:1;transform:none}

/* ==========================================================================
   25 · Calidad: llamado a la página QR
   ========================================================================== */
.qr-cta{margin:0 var(--gutter) 88px;padding:48px 6%;background:var(--ink);color:var(--white);display:flex;justify-content:space-between;align-items:center;gap:32px;border-top:4px solid #d4a63a;background-image:radial-gradient(ellipse at 90% 50%,#d4a63a26,transparent 60%)}
.qr-cta .eyebrow{color:#e6c870}
.qr-cta h2{color:var(--white);margin-bottom:12px}
.qr-cta p:not(.eyebrow){color:#cacaca;max-width:60ch;margin:0}
@media (max-width:1000px){.qr-cta{flex-direction:column;align-items:flex-start}}

/* ==========================================================================
   26 · /qr/ — Verificación: oro y plata sobre negro
   ========================================================================== */
.qr-page{--gold:linear-gradient(100deg,#fff4c2 0%,#e6b84a 22%,#a87821 42%,#ffe9a3 58%,#c8952c 78%,#fff4c2 100%);--silver:linear-gradient(100deg,#ffffff 0%,#bfc3c9 25%,#7d828a 45%,#f4f6f8 62%,#a3a8b0 82%,#ffffff 100%);--gold-solid:#e2b54e}
.qr-page .eyebrow{color:#e6c870}
.q-silver-eyebrow{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent!important;background-size:200% 100%}

/* Hero */
.q-hero{position:relative;min-height:calc(100vh - var(--header-h) - 38px);min-height:calc(100svh - var(--header-h) - 38px);display:grid;place-items:center;text-align:center;padding:50px var(--gutter) 90px;isolation:isolate;overflow:hidden}
.q-glow{position:absolute;left:50%;top:40%;width:min(1000px,150vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#e2b54e40 0%,#a8782122 30%,transparent 62%);animation:vpulse 6s ease-in-out infinite}
.q-rays{position:absolute;left:50%;top:40%;width:220vmax;aspect-ratio:1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,#e2b54e14 0deg 4deg,transparent 4deg 18deg);mask-image:radial-gradient(circle,#000 0%,transparent 55%);-webkit-mask-image:radial-gradient(circle,#000 0%,transparent 55%);animation:vspin 90s linear infinite}
.q-hero-inner{max-width:1100px;display:flex;flex-direction:column;align-items:center}
.q-hero .breadcrumb{margin-bottom:22px}
.q-seal{position:relative;width:min(300px,68vw);aspect-ratio:1;margin-bottom:30px;animation:vrise 1s both;filter:drop-shadow(0 0 40px #e2b54e55)}
.q-seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:vspin 30s linear infinite}
.q-seal-emblem{position:absolute;inset:24%;width:52%;height:52%;object-fit:contain;animation:vspin 14s linear infinite reverse}
.q-seal-check{position:absolute;right:6%;bottom:8%;width:23%;aspect-ratio:1;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 0 0 6px #0a0a0b,0 10px 30px #0008;animation:qpop .6s 1s cubic-bezier(.3,1.6,.5,1) both}
.q-seal-check svg{width:58%;fill:none;stroke:#1a1203;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes qpop{from{transform:scale(0)}}
.q-eyebrow{letter-spacing:3.5px;animation:vrise 1s .15s both}
.q-title{font-size:clamp(52px,9vw,150px);line-height:.86;letter-spacing:-2px;margin:0 0 28px;text-transform:uppercase;color:#e9ebee}
.q-title .ln{display:block;overflow:hidden;padding-bottom:.05em}
.q-title .ln>span{display:inline-block;animation:vline .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i) * .14s);background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.q-title .ln-oro>span{background:none}
/* En una línea con resaltado, el texto común va en su propio .q-plata (si el degradado queda en el
   span de la línea, Chrome lo pinta como un recuadro gris o el texto desaparece: pasó con "ES") */
.q-title .q-plata{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.q-title em{font-style:normal;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:vshine 5s linear infinite;filter:drop-shadow(0 4px 24px #e2b54e66)}
.q-sub{font-size:clamp(17px,1.8vw,22px);line-height:1.55;color:#c9c9c2;max-width:52ch;margin:0 auto 34px;animation:vrise 1s .7s both}
.q-jump{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;animation:vrise 1s .85s both}
.q-jump a{padding:13px 22px;border:1px solid #e2b54e80;color:#f3dc9a;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;transition:background .2s,color .2s}
.q-jump a:hover{background:var(--gold);color:#1a1203;border-color:transparent}

/* Pilares */
.q-pilares{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #e2b54e33;background:#0d0d0e}
.q-pilares article{padding:44px 6%;border-right:1px solid #e2b54e22}
.q-pilares article:last-child{border-right:0}
.q-pilares .ico{width:38px;height:38px;color:var(--gold-solid);margin-bottom:16px}
.q-pilares h3{font-family:var(--font-display);font-size:38px;text-transform:uppercase;margin:0 0 8px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-pilares p{color:#b9b9b2;margin:0;max-width:34ch}

/* Bloques */
.q-h2{font-size:clamp(42px,5.4vw,80px)!important;text-transform:uppercase;line-height:.92;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent!important;background-size:200% 100%;animation:vshine 9s linear infinite;max-width:16ch}
.q-intro{color:#c9c9c2;font-size:18px;max-width:64ch;margin:0 0 40px}

/* Autorizados */
.q-aut-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.q-aut{position:relative;padding:32px 30px 30px;background:linear-gradient(160deg,#17171a,#0d0d0e);border:1px solid #ffffff1a;overflow:hidden;transition:border-color .3s,transform .3s}
.q-aut:before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--gold)}
.q-aut:hover{border-color:#e2b54e88;transform:translateY(-4px)}
.q-zona{display:flex;gap:8px;align-items:flex-start;font-size:13px;letter-spacing:.5px;color:#e6c870;font-weight:600;margin-bottom:12px;padding-right:110px}
.q-zona .ico{width:18px;height:18px;flex:none;margin-top:1px}
.q-aut h3{font-family:var(--font-display);font-size:34px;text-transform:uppercase;line-height:1;margin:0 0 10px;color:var(--white)}
.q-dir,.q-nota{color:#b9b9b2;margin:0 0 6px;font-size:15px}
.q-wa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;color:var(--white);border-bottom:1px solid #25d36688;padding-bottom:4px}
.q-wa .ico{color:var(--wa)}
.q-badge{position:absolute;top:26px;right:22px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:1.5px;color:#1a1203;background:var(--gold);padding:5px 9px}
.q-badge .ico{width:14px;height:14px}

/* Registros */
.q-table{border-color:#e2b54e40;background:#0d0d0e}
.q-table thead th{background:#16140f;color:#e6c870;border-color:#e2b54e33;text-transform:uppercase;letter-spacing:1px;font-size:12px}
.q-table td,.q-table th{border-color:#ffffff14;color:#d8d8d0}
.q-table tbody tr{transition:background .2s}
.q-table tbody tr:hover{background:#e2b54e0d}
.q-prod{display:flex;align-items:center;gap:12px;color:var(--white);font-weight:700}
.q-prod img{width:48px;height:48px;object-fit:contain;background:#ffffff0d;padding:3px}
.q-gold-txt{color:#f3dc9a!important;font-weight:700}
.q-table .doc-links a{display:inline-flex;align-items:center;gap:6px;color:#f3dc9a;text-decoration:none;border-bottom:1px solid #e2b54e55}
.q-table .doc-links .ico{width:16px;height:16px}

/* Sin TACC */
.q-cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.q-cert{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px 24px;background:linear-gradient(180deg,#1a1a1d,#0d0d0e);border:1px solid #ffffff1f;transition:transform .3s,border-color .3s}
.q-cert:hover{transform:translateY(-6px);border-color:#c9ced6}
.q-cert img{width:110px;height:110px;object-fit:contain;margin-bottom:6px;transition:transform .3s}
.q-cert:hover img{transform:scale(1.07) rotate(-3deg)}
.q-cert-sello{font-size:11px;font-weight:800;letter-spacing:2px;color:#0d0d0e;background:var(--silver);padding:4px 10px;background-size:200% 100%;animation:vshine 6s linear infinite}
.q-cert strong{font-size:17px;color:var(--white)}
.q-cert small{color:#9c9c93}

.q-final h2{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:vshine 7s linear infinite}
.q-final .q-glow{top:50%;z-index:-1}
.q-final h2 em{color:transparent}   /* el resaltado también en oro (sigue el degradado del título) */
.q-btn{background:var(--gold);color:#1a1203;background-size:200% 100%;animation:vshine 6s linear infinite}
.q-btn:hover{background:var(--white)}

@media (max-width:1000px){
  .q-pilares{grid-template-columns:1fr}
  .q-pilares article{border-right:0;border-bottom:1px solid #e2b54e22;padding:30px 6%}
  .q-aut-grid{grid-template-columns:1fr}
  .q-cert-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .q-hero{padding:34px 6% 70px}
  .q-title{letter-spacing:-1px}
  .q-jump a{flex:1 1 100%}
  .q-zona{padding-right:0;margin-top:34px}
  .q-badge{top:18px;left:30px;right:auto}
  .q-aut h3{font-size:28px}
  .q-cert img{width:84px;height:84px}
  .q-cert strong{font-size:15px}
  .qr-cta{margin:0 var(--gutter) 64px}
}
.qr-cta .button{background:linear-gradient(100deg,#fff4c2,#e6b84a 40%,#c8952c 70%,#ffe9a3);color:#1a1203;white-space:nowrap}
.qr-cta .button:hover{background:var(--white)}

/* 27 · Ítem de menú dorado (QR) — "estilo": "oro" en navegacion.json.
   Degradado oro continuo (sin cortes) + reflejo de luz suave que lo cruza. */
#navigation a.nav-oro,.theme-dark #navigation a.nav-oro{position:relative;overflow:hidden;isolation:isolate;color:#2a1c04;font-weight:800;letter-spacing:1.5px;
  background:linear-gradient(135deg,#fff6cf 0%,#f3d27a 22%,#d9a53b 48%,#b47f22 66%,#e9c063 84%,#fff1c0 100%);
  box-shadow:inset 0 1px 0 #fffbe6,inset 0 -2px 0 #8a5d12,0 0 0 1px #c99a3a,0 6px 22px #d9a53b55;text-shadow:0 1px 0 #fff3c466}
#navigation a.nav-oro:after{content:'';position:absolute;inset:-20% auto -20% -70%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,#fffdf2cc,transparent);transform:skewX(-22deg);animation:qsweep 4.5s ease-in-out infinite}
@keyframes qsweep{0%,60%{left:-70%}100%{left:140%}}
#navigation a.nav-oro:hover,#navigation a.nav-oro[aria-current="page"]{color:#2a1c04;filter:brightness(1.08) saturate(1.1)}
#navigation{gap:28px}
#navigation a.nav-cta+a.nav-cta{margin-left:-16px}
@media (max-width:1100px){#navigation{gap:16px}#navigation a.nav-cta+a.nav-cta{margin-left:-8px}}
@media (max-width:700px){#navigation{align-items:stretch}#navigation a.nav-cta,#navigation a.nav-cta+a.nav-cta{margin-left:0;padding:14px 16px}}


/* ==========================================================================
   28 · Páginas épicas (inicio, nosotros, calidad, contacto) — tema oscuro
   ========================================================================== */
.e-hero .v-sub p{margin:0}
.e-hero--short{min-height:70vh;min-height:70svh}
.e-hero--oro .v-title em{background:linear-gradient(100deg,#fff4c2,#e6b84a 22%,#a87821 42%,#ffe9a3 58%,#c8952c 78%,#fff4c2);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.e-hero--oro .v-eyebrow{color:#e6c870}
.e-hero--oro .v-emblem{opacity:.14}
/* Productos flotando en el hero del inicio */
.h-float{position:absolute;width:clamp(120px,15vw,250px);height:auto;filter:drop-shadow(0 30px 30px #000a);animation:hfloat 7s ease-in-out infinite;opacity:.95}
.h-float.f1{left:4%;top:16%;rotate:-12deg}
.h-float.f2{right:5%;top:12%;rotate:10deg;animation-delay:-2s}
.h-float.f3{left:9%;bottom:6%;rotate:8deg;animation-delay:-4s;width:clamp(100px,12vw,200px)}
.h-float.f4{right:8%;bottom:4%;rotate:-8deg;animation-delay:-1s;width:clamp(100px,12vw,200px)}
@keyframes hfloat{50%{translate:0 -18px}}
@media (max-width:1100px){.h-float{opacity:.35}}
@media (max-width:700px){.h-float.f3,.h-float.f4{display:none}.h-float.f1{left:-30px;top:8%;width:120px}.h-float.f2{right:-30px;top:4%;width:120px}}

/* Pilares (confianza) */
.e-pilares{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #ffffff1a;background:#0d0d0e}
.e-pilares--4{grid-template-columns:repeat(4,1fr)}
.e-pilares article{padding:40px 5%;border-right:1px solid #ffffff14}
.e-pilares article:last-child{border-right:0}
.e-pilares .ico{width:36px;height:36px;color:var(--orange);margin-bottom:14px}
.e-pilares h3{font-family:var(--font-display);font-size:30px;text-transform:uppercase;margin:0 0 8px;color:var(--white)}
.e-pilares p{color:#b9b9b2;margin:0;font-size:15px}
@media (max-width:1000px){.e-pilares,.e-pilares--4{grid-template-columns:1fr 1fr}.e-pilares article{border-bottom:1px solid #ffffff14}}
@media (max-width:700px){.e-pilares,.e-pilares--4{grid-template-columns:1fr}.e-pilares article{border-right:0;padding:28px 6%}}

/* Encabezados de sección */
.e-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px}
.e-head>p{color:#b9b9b2;max-width:380px;margin:0 0 10px;line-height:1.65}
.e-head .v-link{margin-top:14px}
.e-h2{font-size:clamp(40px,5vw,72px)!important;text-transform:uppercase;line-height:.92;color:var(--white)}
.e-h2 em{font-style:normal;color:var(--orange)}
@media (max-width:700px){.e-head{display:block}}

/* Tarjetas de producto sobre fondo oscuro */
.theme-dark .product-image{background:radial-gradient(circle at 50% 62%,#2b1d14 0%,#141416 68%);border:1px solid #ffffff12}
.theme-dark .product-card:hover .product-image{border-color:#f7762266}
.theme-dark .product-category{color:#9c9c93}
.theme-dark .product-name a{color:var(--white)}
.theme-dark .product-name a:hover{color:var(--orange-soft)}
.theme-dark .product-format{color:#b9b9b2}
.theme-dark .price strong{color:var(--white)}
.theme-dark .price s{color:#8d8d86}
.theme-dark .badge-off{background:var(--orange);color:var(--ink)}
.theme-dark .card-add{background:transparent;color:var(--white);border-color:#ffffff40}
.theme-dark .card-add:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.theme-dark .dist-band{border:1px solid #ffffff1a;border-top:4px solid var(--orange)}
.theme-dark .qr-cta{background-color:#0d0d0e;border:1px solid #e2b54e33;border-top:4px solid #d4a63a}
.theme-dark .qr-cta .eyebrow{display:flex;gap:8px;align-items:center}
.theme-dark .qr-cta .eyebrow .ico{width:18px;height:18px}

/* Nosotros: historia */
.e-story{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
.e-story-num{font-family:var(--font-display);font-weight:800;font-size:clamp(120px,17vw,280px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--orange);letter-spacing:-4px}
.e-story-copy p:not(.eyebrow){color:#c9c9c2;font-size:18px;line-height:1.75;max-width:60ch}
.e-stats-band{padding:60px var(--gutter)}
.e-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.e-story{grid-template-columns:1fr;gap:20px}.e-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.e-grid-4{grid-template-columns:1fr}}

/* Calidad: QR y guías */
.e-qr{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:center}
.e-qr-steps{list-style:none;padding:0;margin:0 0 34px;display:grid;gap:14px}
.e-qr-steps li{display:flex;gap:16px;align-items:center}
.e-qr-steps span{font-family:var(--font-display);font-size:34px;font-weight:800;background:linear-gradient(135deg,#fff4c2,#d9a53b 50%,#b47f22);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:44px}
.e-qr-steps p{margin:0;color:#d8d8d0;font-size:17px}
.e-qr-frame{position:relative;justify-self:center;padding:22px;background:#fff;border-radius:6px;box-shadow:0 0 0 2px #d9a53b,0 0 0 10px #0a0a0b,0 0 0 12px #d9a53b88,0 0 60px #d9a53b55;overflow:hidden}
.e-qr-frame img{width:min(300px,62vw);height:auto;display:block}
.e-qr-scan{position:absolute;left:0;right:0;height:3px;top:10%;background:linear-gradient(90deg,transparent,#d9a53b,#fff4c2,#d9a53b,transparent);box-shadow:0 0 18px #e2b54e;animation:qscan 2.6s ease-in-out infinite alternate}
@keyframes qscan{to{top:88%}}
.e-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.e-doc{display:flex;flex-direction:column;gap:8px;padding:28px 24px;background:linear-gradient(160deg,#18171a,#0d0d0e);border:1px solid #e2b54e33;transition:transform .3s,border-color .3s}
.e-doc:hover{transform:translateY(-5px);border-color:#e2b54e}
.e-doc .ico{width:34px;height:34px;color:#e2b54e}
.e-doc strong{font-size:19px;color:var(--white)}
.e-doc small{color:#9c9c93}
.e-doc span{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:1.5px;color:#f3dc9a}
.e-doc span .ico{width:16px;height:16px}
@media (max-width:1000px){.e-qr{grid-template-columns:1fr}}

/* Contacto oscuro */
.e-wa-btn{background:var(--wa);color:#0b2e17;min-height:62px;padding:18px 30px;font-size:15px;box-shadow:0 0 0 0 #25d36680;animation:vring 2.4s infinite}
.e-wa-btn:hover{background:#4be083}
.e-wa-btn .ico{width:24px;height:24px}
.e-card{background:linear-gradient(160deg,#151517,#0d0d0e);border:1px solid #ffffff1a;padding:36px}
.theme-dark .contact-form h2{color:var(--white)}
.theme-dark .field{color:#e8e8e2}
.theme-dark .field input,.theme-dark .field select,.theme-dark .field textarea{background:#0a0a0b;border-color:#ffffff2e;color:var(--white)}
.theme-dark .field input::placeholder,.theme-dark .field textarea::placeholder{color:#8f8f86} /* contraste 5,6:1 */
.theme-dark .field input:focus,.theme-dark .field select:focus,.theme-dark .field textarea:focus{border-color:var(--orange);outline:2px solid #f7762266}
.theme-dark .check{color:#b9b9b2}
.theme-dark .check input{accent-color:var(--orange)}
.theme-dark .form-status.ok{color:#4be083}
.theme-dark .form-status.error{color:#ff8a80}
.theme-dark .contact-card{background:#111113;border-color:#ffffff1f;color:var(--white)}
.theme-dark a.contact-card:hover{border-color:var(--orange)}
.theme-dark .contact-card small{color:#9c9c93}
.theme-dark .contact-card .ico{color:var(--orange)}
.e-wa-card{border-color:#25d36666!important;background:linear-gradient(160deg,#0f2417,#0d0d0e)!important}
.e-wa-card .ico{color:var(--wa)!important}
.e-wa-card strong{font-size:22px}
.e-dist-card{border-top:3px solid var(--orange)!important}
.theme-dark .contact-social{color:#d8d8d0}
@media (max-width:700px){.e-card{padding:24px 18px}}

/* ==========================================================================
   29 · Catálogo, ficha de producto y carrito en tema oscuro
   ========================================================================== */
/* Catálogo */
.theme-dark .catalog-tools{border-color:#ffffff1f}
.theme-dark .filters button{background:transparent;border-color:#ffffff2e;color:#d8d8d0}
.theme-dark .filters button:hover{border-color:var(--orange);color:var(--white)}
.theme-dark .filters button.active{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.theme-dark .sort{color:#d8d8d0}
.theme-dark .sort select{background:#111113;border-color:#ffffff2e;color:var(--white)}
.theme-dark .result-count{color:#9c9c93}

/* Ficha */
.theme-dark .product-top{padding-top:36px}
.theme-dark .gallery-main{background:radial-gradient(circle at 50% 58%,#2e1e14 0%,#121214 70%);border:1px solid #ffffff14;position:relative;overflow:hidden}
.theme-dark .gallery-main:before{content:'';position:absolute;inset:-10%;background:url(../imagenes/web/marca/dms-emblema-900.webp) center/70% no-repeat;opacity:.07;animation:vspin 60s linear infinite}
.theme-dark .gallery-main img{position:relative;filter:drop-shadow(0 30px 30px #000c)}
.theme-dark .thumb{background:#121214;border-color:#ffffff1f}
.theme-dark .thumb[aria-current="true"]{border-color:var(--orange)}
.theme-dark .buy-box h1{color:var(--white);text-transform:uppercase;font-size:clamp(40px,4.4vw,66px);line-height:.92}
.theme-dark .buy-box .eyebrow{color:var(--orange-soft)}
.theme-dark .buy-format{color:#b9b9b2}
.theme-dark .buy-price strong{color:var(--white)}
.theme-dark .buy-note{color:#b9b9b2;font-size:15px;border-left:3px solid var(--orange);padding-left:12px}
.theme-dark .buy-summary{color:#d8d8d0}
.theme-dark .qty{border-color:#ffffff40}
.theme-dark .qty button,.theme-dark .qty input{background:#111113;color:var(--white)}
.theme-dark .qty button:hover{background:#1c1c1f}
.theme-dark .field select{background:#111113;border-color:#ffffff2e;color:var(--white)}
.theme-dark .add-to-cart{box-shadow:0 0 0 0 #f7762280;animation:vring 2.4s infinite}
.theme-dark .wa-buy{border-color:#25d36655;color:var(--white)}
.theme-dark .wa-buy .ico{color:var(--wa)}
.theme-dark .seals{border-color:#ffffff1f}
.theme-dark .seals li{color:#d8d8d0}
.theme-dark .seals .ico{color:var(--orange)}
.theme-dark .info-nav{background:#0a0a0bf2;border-color:#ffffff1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.theme-dark .info-nav a{color:#9c9c93}
.theme-dark .info-nav a:hover{color:var(--white)}
.theme-dark .info-block h2{color:var(--white);font-family:var(--font-display);text-transform:uppercase;font-size:30px;letter-spacing:.2px}
.theme-dark .info-block p,.theme-dark .check-list li,.theme-dark .dot-list li{color:#c9c9c2}
.theme-dark .check-list .ico{color:var(--orange)}
.theme-dark .warn{background:#16110c;border-left-color:var(--orange)}
.theme-dark .table-wrap{border-color:#ffffff1f}
.theme-dark table{color:#d8d8d0}
.theme-dark thead th{background:#151517;color:var(--white)}
.theme-dark th,.theme-dark td{border-color:#ffffff14}
.theme-dark caption{color:#9c9c93}
.theme-dark .reg-list div{background:#141416;border:1px solid #ffffff12}
.theme-dark .reg-list dt{color:#9c9c93}
.theme-dark .reg-list dd{color:var(--white)}
.theme-dark .doc-list a{border-color:#ffffff1f;color:var(--white);background:#111113}
.theme-dark .doc-list a:hover{border-color:var(--orange)}
.theme-dark .doc-list .ico{color:var(--orange)}
.theme-dark .doc-list small{color:#9c9c93}
.theme-dark .related{border-color:#ffffff14}
.theme-dark .sticky-buy{background:#0d0d0ef2;border-color:#ffffff1f;color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Carrito */
.theme-dark .checkout h1{color:var(--white);text-transform:uppercase}
.theme-dark .checkout h2{color:var(--white)}
.theme-dark .checkout-form{background:linear-gradient(160deg,#151517,#0d0d0e);border:1px solid #ffffff1a}
.theme-dark .cart-line{border-color:#ffffff14}
.theme-dark .cart-line img{background:#141416}
.theme-dark .cart-line-name{color:var(--white)}
.theme-dark .cart-line-name small,.theme-dark .line-remove,.theme-dark .small{color:#9c9c93}
.theme-dark legend{color:var(--white)}
.theme-dark .radio{border-color:#ffffff2e;color:#d8d8d0}
.theme-dark .radio:has(input:checked){border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange);color:var(--white)}
.theme-dark .radio input{accent-color:var(--orange)}
.theme-dark .checkout-total{border-color:var(--white);color:var(--white)}
.theme-dark .checkout-empty p,.theme-dark .checkout-done p{color:#d8d8d0}
.theme-dark .checkout-done .order-id{color:var(--orange)}
/* Selector de vendedor autorizado */
.prov{margin-bottom:26px}
.prov .small{margin:0 0 14px}
.prov-grid{display:grid;gap:10px}
.prov-card{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid #cfcfc6;cursor:pointer;transition:border-color .2s,background .2s}
.prov-card input{margin-top:4px;accent-color:var(--orange);width:18px;height:18px;flex:none}
.prov-card span{display:flex;flex-direction:column;gap:4px}
.prov-card strong{font-size:16px}
.prov-card small{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--muted)}
.prov-card small .ico{width:16px;height:16px;flex:none;color:var(--orange-dark)}
.prov-card:has(input:checked){border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.theme-dark .prov-card{border-color:#ffffff2e;background:#0f0f11}
.theme-dark .prov-card strong{color:var(--white)}
.theme-dark .prov-card small{color:#9c9c93}
.theme-dark .prov-card small .ico{color:var(--orange)}
.theme-dark .prov-card:has(input:checked){background:#1a120b}
.drawer-note{margin:0;color:var(--muted);font-size:14px}


/* ==========================================================================
   30 · Vitrina de fondo del hero (reemplaza a los productos chicos flotando)
   Productos grandes, difuminados (~25 % de opacidad) que se van intercambiando
   con un fundido lento. 4 por lado, ciclo de 20 s (5 s cada uno).
   La derecha va desfasada 2,5 s para que nunca cambien los dos a la vez.
   ========================================================================== */
.vitrina{position:absolute;top:50%;width:clamp(260px,34vw,560px);aspect-ratio:1;translate:0 -50%;pointer-events:none}
.vitrina--izq{left:-4%}
.vitrina--der{right:-4%}
.vitrina img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;filter:blur(5px) saturate(1.1);
  animation:vitrina 20s ease-in-out infinite;animation-delay:calc(var(--n) * 5s - 20s);will-change:opacity,transform}
/* El desenfoque queda FIJO (se calcula una vez); solo se animan opacidad y movimiento → liviano */
.vitrina--der img{animation-delay:calc(var(--n) * 5s - 17.5s)}
.vitrina--izq img{rotate:-8deg}
.vitrina--der img{rotate:8deg}
@keyframes vitrina{
  0%{opacity:0;transform:scale(.92) translateY(20px)}
  8%{opacity:.26;transform:scale(1) translateY(0)}
  22%{opacity:.26;transform:scale(1.05) translateY(-10px)}
  30%{opacity:0;transform:scale(1.1) translateY(-20px)}
  100%{opacity:0}
}
.h-float{display:none}
@media (max-width:1000px){.vitrina{width:52vw}.vitrina img{animation-name:vitrina-suave}}
/* Celular y tablet: sin productos difuminados (se superponían con el logo) */
@media (max-width:900px){.vitrina{display:none}}
/* Saltos de línea solo en pantallas grandes (texto del hero de inicio) */
@media (max-width:900px){br.br-pc{display:none}}
.v-sub:has(br.br-pc){max-width:62ch}
@media (max-width:700px){.vitrina{width:78vw;top:46%}.vitrina--izq{left:-30%}.vitrina--der{right:-30%}}
.sin-movimiento .vitrina img{animation:none!important;opacity:0}.sin-movimiento .vitrina img:first-child{opacity:.2;filter:blur(4px)}
/* Evita que se corten las tildes (Ó, É) en los títulos que entran línea por línea */
.v-title .ln,.q-title .ln{padding-top:.12em;margin-top:-.12em}
@keyframes vitrina-suave{0%{opacity:0}8%,22%{opacity:.2}30%,100%{opacity:0}}

/* 31 · Tabla de registros (/qr/): celdas alineadas y certificados como botones.
   El contenedor flex va DENTRO de la celda (una <td> con display:flex rompe la tabla). */
.q-table th,.q-table td{vertical-align:middle;padding:14px 18px}
.q-table tbody th{width:28%}
.q-prod{text-decoration:none!important}
.q-prod:hover{color:#f3dc9a}
.q-docs{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.q-docs a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e2b54e66;color:#f3dc9a;font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.q-docs a:hover{background:linear-gradient(135deg,#fff6cf,#d9a53b 55%,#b47f22);color:#1a1203;border-color:transparent}
.q-docs .ico{width:16px;height:16px}
@media (max-width:700px){.q-table tbody th{width:auto}.q-docs a{white-space:normal}}
.q-table td[data-label="RNE"],.q-table td[data-label="Código de barras"]{white-space:nowrap}

/* 32 · Carrito lateral (drawer) en oscuro — antes se abría blanco */
.cart-drawer{background:#0d0d0e;color:var(--white);border-left:1px solid #ffffff1a}
.cart-drawer::backdrop{background:#000c}
.drawer-head,.drawer-foot{border-color:#ffffff1a}
.drawer-head h2{color:var(--white);text-transform:uppercase}
.drawer-close{color:var(--white)}
.drawer-close:hover{color:var(--orange)}
.cart-drawer .cart-line{border-color:#ffffff14}
.cart-drawer .cart-line img{background:#18181b}
.cart-drawer .cart-line-name{color:var(--white)}
.cart-drawer .cart-line-name small,.cart-drawer .line-remove,.drawer-empty,.drawer-note{color:#9c9c93}
.cart-drawer .qty{border-color:#ffffff40}
.cart-drawer .qty button,.cart-drawer .qty input{background:#141416;color:var(--white)}
.cart-drawer .button.dark{background:transparent;border:1px solid #ffffff40;color:var(--white)}
.cart-drawer .button.dark:hover{border-color:var(--orange);color:var(--orange)}
.e-hero .v-sub em:first-of-type{display:inline-block;font-size:1.18em;margin-bottom:6px}

/* ==========================================================================
   33 · Fondo de cada ficha: solo el cielo vivo del catálogo en canvas (estrellas que titilan
   + fugaces). Sin emblema, grilla ni resplandor (pedido de Nacho, 02/10/2026): el emblema
   girando queda solo en productos.html. Función fondo_producto() del build.
   ========================================================================== */
.product-top{position:relative;isolation:isolate}
.p-bg{position:absolute;z-index:-1;top:-40px;bottom:-80px;left:50%;width:100vw;translate:-50% 0;pointer-events:none;overflow:hidden}
/* La galería deja ver el fondo a través */
.theme-dark .product-page .gallery-main{background:radial-gradient(circle at 50% 58%,#2e1e14e6 0%,#121214c4 72%)} /* sin backdrop-filter: sobre un fondo animado obliga a recalcular el desenfoque en cada cuadro */
.theme-dark .product-page .thumb{background:#121214cc}

/* ==========================================================================
   34 · Polvo de oro (Calidad) — en canvas, tema "oro" (js bloque 11): partículas doradas que suben,
   se mecen, titilan y brillan, más un destello dorado que cruza cada 6–10 s.
   Hero: .cosmos--hero dentro del .v-bg. Toda la página: .cosmos--pagina (capa fija, sin tapar clics).
   ========================================================================== */
.qr-page{position:relative}
.cosmos--pagina{position:fixed;inset:0;z-index:3}

/* ==========================================================================
   35 · Carrito en 3 pasos (asistente) — se activa con .js-wizard
   ========================================================================== */
.wz-progress{list-style:none;display:none;gap:8px;margin:0 0 24px;padding:0;counter-reset:wz}
.js-wizard .wz-progress{display:grid;grid-template-columns:repeat(3,1fr)}
.wz-progress li{position:relative;padding-top:12px;font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#77776f;border-top:3px solid #ffffff1f;transition:color .3s,border-color .3s}
.wz-progress li.on{color:var(--white);border-top-color:var(--orange)}
.paso{border:1px solid #ffffff1a;padding:0;margin:0 0 14px;background:#0f0f11;transition:border-color .3s,opacity .3s}
.paso-head{display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;margin:0;font-size:18px;font-weight:800;color:var(--white);float:left}
.paso-head+*{clear:both}
.paso-n{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;border:2px solid #ffffff40;font-size:15px;transition:background .3s,border-color .3s,color .3s}
.paso-t{flex:none}
.paso-res{flex:1;min-width:0;font-size:14px;font-weight:500;color:#9c9c93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paso-edit{display:none;background:none;border:0;color:var(--orange-soft);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:4px}
.paso-body{padding:4px 20px 22px}
.paso-label{font-size:13px;font-weight:700;margin:4px 0 10px;color:var(--white)}
.paso .radios{margin-bottom:20px}
.paso .prov{margin:22px 0}
.paso-next{width:100%;margin-top:6px}
.paso small{font-weight:400;color:#9c9c93}
/* Estados (solo con JS) */
.js-wizard .paso.activo{border-color:var(--orange);box-shadow:0 0 0 1px #f7762244,0 20px 50px #0008}
.js-wizard .paso.activo .paso-n{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.js-wizard .paso.hecho .paso-n{background:#1f7a3d;border-color:#1f7a3d;color:transparent;position:relative}
.js-wizard .paso.hecho .paso-n:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px}
.js-wizard .paso.hecho .paso-edit{display:inline-block}
.js-wizard .paso.hecho .paso-body,.js-wizard .paso.bloqueado .paso-body{display:none}
.js-wizard .paso.bloqueado{opacity:.45}
.js-wizard .paso.activo .paso-body{animation:wz-in .35s ease-out}
@keyframes wz-in{from{opacity:0;transform:translateY(-8px)}}
.js-wizard .paso.activo .paso-res{display:none}
@media (max-width:700px){.paso-head{padding:16px 14px;font-size:16px;gap:10px}.paso-body{padding:4px 14px 18px}.paso-res{font-size:12px}}
/* Sin marca de agua (emblema) detrás de la foto principal del producto */
.theme-dark .gallery-main:before{content:none;display:none}
.prov-card:focus-within{outline:none}
.field-label{display:block}.field-label small{font-weight:400;color:#9c9c93}

/* ==========================================================================
   36 · presentacion.html — intro cinematográfica + principios
   Secuencia (js/site.js bloque 10, atributo data-paso en .pr-intro):
   1 logo aparece · 2 "Hay algo que cambió" · 3 impacto (logo explota + destello + onda)
   4 "La suplementación fue reinventada" · 5 "No vendemos suplementos" · 6 "Somos una herramienta de ventas"
   Sin JS se ve todo junto, estático. Con movimiento reducido se reproduce igual.
   ========================================================================== */
.pr-intro{position:relative;min-height:calc(100vh - var(--header-h) - 38px);min-height:calc(100svh - var(--header-h) - 38px);display:grid;place-items:center;text-align:center;padding:40px var(--gutter) 90px;isolation:isolate;overflow:hidden}
.pr-glow{position:absolute;left:50%;top:50%;width:min(1000px,150vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(circle,#f7762240 0%,#6c318030 32%,transparent 62%);opacity:.8}
.pr-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fff 0%,#ffd2a8 25%,#f77622 50%,transparent 75%);opacity:0;mix-blend-mode:screen}
.pr-onda{position:absolute;left:50%;top:50%;width:40px;height:40px;translate:-50% -50%;border-radius:50%;border:3px solid #f7a65a;opacity:0}
.pr-logo{width:min(520px,80vw);margin:0 auto 22px}
.pr-logo img{width:100%;height:auto;filter:drop-shadow(0 0 40px #f7762255)}
.pr-cambio{font-size:clamp(22px,3vw,40px);font-weight:300;letter-spacing:.5px;color:#d8d8d0;margin:0 0 30px;font-style:italic}
.pr-frases{display:grid;gap:26px}
.pr-frase{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.4vw,86px);line-height:.92;letter-spacing:-1px;max-width:min(1100px,100%);margin-inline:auto;text-wrap:balance;margin:0;color:var(--white)}
.pr-frase em{font-style:normal;background:linear-gradient(90deg,#ffc04d,var(--orange),#e0457b,#a35bd0,#e0457b,var(--orange),#ffc04d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vshine 6s linear infinite}
.pr-frase .ln{display:block;overflow:hidden;padding-top:.1em;margin-top:-.1em}
.pr-frase .ln>span{display:inline-block}
.pr-saltar,.pr-scroll{display:none}

/* Con JS: modo película */
.pr-intro.play .pr-logo,.pr-intro.play .pr-cambio{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;width:min(560px,82vw)}
.pr-intro.play .pr-cambio{top:calc(50% + min(150px,24vw));width:auto;white-space:nowrap;opacity:0;transition:opacity .6s,transform .6s;transform:translateY(14px)}
.pr-intro.play .pr-logo{opacity:0;transform:scale(.7);filter:blur(12px);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1),filter 1s}
.pr-intro.play .pr-frases{display:block;position:relative;width:100%}
.pr-intro.play .pr-frase{position:absolute;left:50%;top:50%;width:min(1100px,calc(100vw - 2 * var(--gutter)));max-width:none;translate:-50% -50%;visibility:hidden}
.pr-intro.play .pr-frase.on{visibility:visible}
.pr-intro.play .pr-frase.on .ln>span{animation:pr-slam .7s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--i) * .16s)}
.pr-intro.play .pr-frase.off{animation:pr-out .5s ease-in forwards;visibility:visible}
@keyframes pr-slam{0%{transform:translateY(110%) scale(1.15);filter:blur(6px)}100%{transform:none;filter:none}}
@keyframes pr-out{to{opacity:0;transform:scale(1.08);filter:blur(10px)}}
.pr-intro.play[data-paso="1"] .pr-logo,.pr-intro.play[data-paso="2"] .pr-logo{opacity:1;transform:scale(1);filter:blur(0)}
.pr-intro.play[data-paso="2"] .pr-cambio{opacity:1;transform:none}
.pr-intro.play[data-paso="3"] .pr-logo{opacity:0;transform:scale(5);filter:blur(16px);transition:opacity .55s ease-in,transform .6s cubic-bezier(.7,0,.8,.4),filter .5s}
.pr-intro.play[data-paso="3"] .pr-flash{animation:pr-flash .9s ease-out}
.pr-intro.play[data-paso="3"] .pr-onda{animation:pr-onda 1.1s ease-out}
.pr-intro.play[data-paso="3"]{animation:pr-shake .45s .1s}
@keyframes pr-flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes pr-onda{0%{opacity:1;width:40px;height:40px;border-width:6px}100%{opacity:0;width:220vmax;height:220vmax;border-width:1px}}
@keyframes pr-shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
.pr-intro.play .pr-saltar{display:block;position:absolute;right:var(--gutter);bottom:28px;background:none;border:1px solid #ffffff40;color:#d8d8d0;padding:10px 16px;font-size:11px;font-weight:800;letter-spacing:2px}
.pr-intro.play .pr-saltar:hover{border-color:var(--orange);color:var(--white)}
.pr-intro.play.fin .pr-saltar{display:none}
.pr-intro.play.fin .pr-scroll{display:block}
.pr-intro.play.fin .pr-glow{animation:vpulse 6s ease-in-out infinite}

/* Principios */
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.pr-card{position:relative;padding:40px 36px 36px;background:#0f0f11;overflow:hidden;isolation:isolate;border:1px solid #ffffff14}
.pr-card:before{content:'';position:absolute;z-index:-2;inset:-60%;background:conic-gradient(from 0deg,transparent 0 70%,#f77622 80%,#ffc04d 85%,transparent 92%);animation:vspin 6s linear infinite;opacity:.0;transition:opacity .4s}
.pr-card:after{content:'';position:absolute;z-index:-1;inset:1px;background:linear-gradient(160deg,#151517,#0b0b0c)}
.pr-card:hover:before,.pr-card.in:before{opacity:1}
.pr-num{position:absolute;right:18px;top:-6px;font-family:var(--font-display);font-size:150px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px #f7762255;pointer-events:none}
.pr-clave{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:2.5px;color:var(--orange-soft);margin-bottom:14px}
.pr-clave .ico{width:18px;height:18px}
.pr-card h3{font-family:var(--font-display);font-size:clamp(30px,3.2vw,44px);line-height:.95;text-transform:uppercase;margin:0 0 14px;max-width:16ch;color:var(--white)}
.pr-card p:last-child{color:#c9c9c2;font-size:17px;line-height:1.6;margin:0;max-width:44ch}
.pr-card--oro:before{background:conic-gradient(from 0deg,transparent 0 65%,#a87821 75%,#fff4c2 82%,#e6b84a 88%,transparent 95%)}
.pr-card--oro .pr-clave{color:#f3dc9a}
.pr-card--oro .pr-num{-webkit-text-stroke-color:#e2b54e77}
.pr-card--oro h3{background:linear-gradient(100deg,#fff4c2,#e6b84a 30%,#a87821 55%,#ffe9a3 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-final h2{max-width:22ch;font-size:clamp(40px,6vw,96px)}
.pr-final h2 em{font-style:normal;color:var(--orange)}
@media (max-width:900px){.pr-grid{grid-template-columns:1fr}.pr-num{font-size:110px}}
@media (max-width:700px){.pr-intro.play .pr-saltar{right:auto;left:var(--gutter)}.pr-card{padding:30px 22px 26px}.pr-frase{letter-spacing:-1px}.pr-intro.play .pr-cambio{white-space:normal;width:86vw}}
.sin-movimiento .pr-card:before{opacity:0!important}

/* ==========================================================================
   37 · Botón "Ver la presentación" (Vendé DMS → presentacion.html)
   ========================================================================== */
.button.v-btn-play{display:inline-flex;align-items:center;gap:12px;background:transparent;color:var(--white);border:1.5px solid #ffffff55;transition:border-color .3s,background .3s,box-shadow .3s}
.button.v-btn-play:hover{border-color:var(--orange);background:#f7762218;box-shadow:0 0 28px #f7762244}
.play-ico{position:relative;width:26px;height:26px;border-radius:50%;background:var(--orange);flex:none;box-shadow:0 0 0 0 #f77622aa;animation:play-pulso 2.2s ease-out infinite}
.play-ico:after{content:'';position:absolute;left:10px;top:7px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes play-pulso{0%{box-shadow:0 0 0 0 #f77622aa}70%{box-shadow:0 0 0 12px #f7762200}100%{box-shadow:0 0 0 0 #f7762200}}

/* ==========================================================================
   38 · Cosmos: cielo estrellado vivo (función cosmos() del build + js/site.js bloque 11)
   Estrellas y fugaces en <canvas>: cada estrella titila a su ritmo, 3 profundidades que se
   desplazan a distinta velocidad, algunas "chispean" y cruza una fugaz cada 2 a 5 s.
   Nebulosas en CSS: degradados radiales suaves que respiran (sin filter ni mix-blend, que son
   caros). Pedido de Nacho: "que parezca vivo". Inicio: capa fija detrás de toda la página.
   Presentación: aparece en el final.
   ========================================================================== */
.cosmos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cosmos-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos .neb{position:absolute;border-radius:50%;opacity:.55;will-change:transform;animation:cos-neb 30s ease-in-out infinite alternate}
.cosmos .neb-1{width:70vmax;height:50vmax;left:-18vmax;top:0;background:radial-gradient(closest-side,#7a2f8e99,#3b1a5a44 50%,transparent)}
.cosmos .neb-2{width:60vmax;height:44vmax;right:-16vmax;top:34%;background:radial-gradient(closest-side,#f7762288,#a3305a3a 50%,transparent);animation-duration:36s;animation-delay:-12s}
.cosmos .neb-3{width:54vmax;height:36vmax;left:20%;bottom:-12vmax;background:radial-gradient(closest-side,#2a4fa888,#1a2a5a33 50%,transparent);animation-duration:42s;animation-delay:-24s}
@keyframes cos-neb{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vmax,-4vmax,0) scale(1.2)}}

/* Inicio: el cosmos queda fijo detrás de toda la página */
.cosmos--fondo{position:fixed;z-index:-1}
body.con-cosmos{background:#050507}
body.con-cosmos .e-hero .v-gridlines{opacity:.35}

/* Presentación: el cosmos aparece recién en el final */
.cosmos--pres{opacity:0;transition:opacity 3.5s ease}
.pr-logo-final{display:none}
.pr-intro.play .pr-logo-final{display:block;position:absolute;left:50%;top:50%;width:min(980px,90vw);translate:-50% -50%;opacity:0;transform:scale(.55);filter:blur(24px);pointer-events:none;
  transition:opacity 3.2s ease 1.4s,transform 4.5s cubic-bezier(.16,.84,.3,1) 1.4s,filter 3.2s ease 1.4s}
.pr-logo-final img{width:100%;height:auto;filter:drop-shadow(0 0 60px #f7762266) drop-shadow(0 0 140px #a35bd044)}
.pr-intro.play[data-paso="7"] .cosmos--pres{opacity:1}
.pr-intro.play[data-paso="7"] .pr-logo-final{opacity:1;transform:scale(1);filter:blur(0)}
.pr-intro.play[data-paso="7"] .pr-glow{opacity:.45}
.pr-intro.play[data-paso="7"] .v-gridlines{opacity:0;transition:opacity 3s}
/* Modo película (js bloque 10): barra, menú y WhatsApp se apagan lento durante la intro.
   body.pr-pelicula lo pone el JS solo en presentacion.html */
body.pr-pelicula .announcement,body.pr-pelicula .site-header{transition:opacity .8s ease,visibility .8s}
body.pr-pelicula .wa-float,body.pr-pelicula .mol-float,body.pr-pelicula .sonido-float{transition:opacity .8s ease,visibility .8s,transform .2s}
body.pr-cine .announcement,body.pr-cine .site-header,body.pr-cine .wa-float,body.pr-cine .mol-float,body.pr-cine .sonido-float{opacity:0;visibility:hidden;transition:opacity 2.4s ease,visibility 2.4s}
body.pr-cine .site-header:focus-within{opacity:1;visibility:visible}
body.pr-cine .pr-saltar{opacity:.55}
/* La última frase se difumina lentamente */
.pr-intro.play[data-paso="7"] .pr-frase.off{animation:pr-out-lento 2.4s ease-in-out forwards}
@keyframes pr-out-lento{0%{opacity:1;filter:blur(0);transform:scale(1)}100%{opacity:0;filter:blur(18px);transform:scale(1.12)}}

/* ==========================================================================
   39 · Iluminación en movimiento (función luces(): Nosotros, Contacto, Vendé DMS)
   2 haces de luz tipo escenario (cono hecho con conic-gradient, sin máscaras) que barren desde
   arriba, 2 orbes de color que viajan y un brillo diagonal que cruza cada tanto.
   Solo se animan transform/opacity: liviano y compatible.
   ========================================================================== */
.luces{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.luces .haz{position:absolute;top:-6%;left:50%;width:min(1100px,150vw);height:120%;margin-left:min(-550px,-75vw);transform-origin:50% 0;opacity:.8;will-change:transform;
  background:conic-gradient(from 168deg at 50% 0,transparent 0deg,#ffb36b2e 6deg,#ffc9905c 12deg,#ffb36b2e 18deg,transparent 24deg);
  animation:luz-barre 13s ease-in-out infinite alternate}
.luces .haz-1{left:22%}
.luces .haz-2{left:78%;background:conic-gradient(from 168deg at 50% 0,transparent 0deg,#c38bff2e 6deg,#d3a6ff55 12deg,#c38bff2e 18deg,transparent 24deg);animation-duration:17s;animation-direction:alternate-reverse}
@keyframes luz-barre{0%{transform:rotate(-24deg);opacity:.6}50%{opacity:1}100%{transform:rotate(24deg);opacity:.7}}
.luces .orbe{position:absolute;width:min(620px,90vw);aspect-ratio:1;border-radius:50%;will-change:transform;
  background:radial-gradient(circle,#f7762240 0%,#f7762214 35%,transparent 66%);left:8%;top:8%;animation:luz-orbe 19s ease-in-out infinite alternate}
.luces .orbe-2{left:auto;right:4%;top:30%;background:radial-gradient(circle,#6c3180 0%,#6c318022 30%,transparent 66%);opacity:.55;animation-duration:24s;animation-direction:alternate-reverse}
@keyframes luz-orbe{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(22vw,8vh,0) scale(1.2)}66%{transform:translate3d(8vw,22vh,0) scale(.9)}100%{transform:translate3d(30vw,-4vh,0) scale(1.1)}}
.luces .barrido{position:absolute;top:-30%;left:-60%;width:40%;height:160%;rotate:18deg;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,transparent,#ffffff14 40%,#ffd9b02e 50%,#ffffff14 60%,transparent);animation:luz-cruza 9s ease-in-out infinite;animation-delay:2s}
@keyframes luz-cruza{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}38%{transform:translate3d(320%,0,0);opacity:1}46%,100%{transform:translate3d(360%,0,0);opacity:0}}
.luces--suave .haz{opacity:.6}.luces--suave .orbe-1{opacity:.7}
@media (max-width:700px){.luces .haz-1{left:50%}.luces .haz-2{display:none}}

/* ==========================================================================
   40 · Accesibilidad y avisos (auditoría 02/10/2026)
   ========================================================================== */
/* Mensaje de error debajo de cada campo (js validate()) */
.field-error{display:block;margin-top:6px;font-size:13px;font-weight:600;color:#ff9f87}
[aria-invalid="true"]{border-color:#ff7a59!important}
/* Estado de la copia del pedido y aviso sin JavaScript */
.copia-estado{color:#9fd8a8}
.copia-estado.aviso{color:#ffb38a;font-weight:600}
.noscript-aviso{border:1px solid var(--orange);padding:16px 18px;margin:0 0 24px;color:var(--white);background:#1a120b}
.noscript-aviso a{color:var(--orange-soft);font-weight:700}
/* Botón "Pausar animaciones" del pie */
.pausar-anim{background:none;border:0;padding:0;margin-left:6px;font:inherit;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.8}
.pausar-anim:hover{opacity:1;color:var(--orange-soft)}
/* Alto contraste de Windows: los títulos con degradado pasan a color sólido del sistema */
@media (forced-colors:active){
  .v-title em,.q-title .ln>span,.q-title em,.q-plata,.q-silver-eyebrow,.q-pilares h3,.q-h2,.q-h2 em,.q-final h2,.q-final h2 em,.e-qr-steps span,.pr-frase em,.pr-card--oro h3{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText}
  .cosmos,.luces,.p-bg,.v-bg{display:none}
}

/* ==========================================================================
   41 · La fórmula DMS (molecula.html): molécula 3D de beneficios (js/site.js bloque 12)
   La molécula y el panel aparecen solo con JavaScript (html.js). Sin JavaScript, o si el canvas
   no arranca (html.mol-no), queda la lista #mol-lista con los 10 beneficios. Colores por grupo: --gc (base),
   --gc2 (claro) y --gcf (fondo suave). Los mismos colores usa el canvas (COL en el JS).
   ========================================================================== */
[data-g="reglas"]{--gc:#f77622;--gc2:#ffc08a;--gcf:#f776221a}
[data-g="ganancia"]{--gc:#e9b23c;--gc2:#fff1bf;--gcf:#e9b23c1a}
[data-g="confianza"]{--gc:#a35bd0;--gc2:#e6c4ff;--gcf:#a35bd022}
[data-g="producto"]{--gc:#3d8bff;--gc2:#c2dcff;--gcf:#3d8bff1e}
/* Solo en molecula.html la cabecera no queda fija al bajar: más lugar para la molécula y el panel */
body.cabecera-libre .site-header{position:relative}
.mol-hero{position:relative;max-width:calc(var(--max) + 12%);margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter) clamp(48px,6vw,90px)}
.mol-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"escena intro" "escena panel";grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,72px);align-items:start}
.mol-intro{grid-area:intro;position:relative;z-index:1;padding-top:clamp(8px,2vw,28px)}
.mol-title{font-size:clamp(50px,5.4vw,96px);margin-bottom:16px}
.mol-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#c9c9c2;max-width:44ch;margin:0 0 22px;animation:vrise 1s .8s both}
.mol-escena,.mol-panel{display:none}
.js .mol-escena,.js .mol-panel{display:block}   /* con .js (se pone en el <head>) ocupan su lugar desde el primer cuadro: sin saltos (CLS) */
.mol-no .mol-escena,.mol-no .mol-panel{display:none}   /* el JS no pudo arrancar la molécula: queda solo la lista */
.mol-escena{grid-area:escena;position:relative;width:100%;max-width:680px;aspect-ratio:1/1;margin:0 auto;touch-action:pan-y;-webkit-user-select:none;user-select:none;animation:vrise 1.2s .2s both}
.mol-arrastre,.mol-arrastre .mol-atomo{cursor:grabbing}
/* El canvas es más grande que la escena (14% de cada lado) para que los resplandores no se corten en un borde recto */
.mol-lienzo{position:absolute;left:-14%;top:-14%;width:128%;height:128%;display:block;pointer-events:none}
.mol-atomos{position:absolute;inset:0}
.mol-atomo{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent;touch-action:pan-y;will-change:transform}
.mol-atomo:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.mol-ayuda{position:absolute;left:50%;bottom:1%;translate:-50% 0;margin:0;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:#0b0b0ed9;border:1px solid #ffffff24;font-size:13px;font-weight:600;letter-spacing:.3px;color:#f2f2ee;white-space:nowrap;pointer-events:none;opacity:0;animation:mol-ayuda-in .8s 2.2s forwards}
.mol-usada .mol-ayuda{animation:mol-ayuda-out .45s forwards}
@keyframes mol-ayuda-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mol-ayuda-out{from{opacity:1}to{opacity:0;transform:translateY(10px)}}
.mol-ayuda-dedo{width:16px;height:16px;flex:none;border-radius:50%;background:var(--orange);animation:play-pulso 2.2s ease-out infinite}
/* Textos según el dispositivo: .mol-t (pantalla táctil) / .mol-m (mouse) */
.mol-m{display:none}
@media (hover:hover) and (pointer:fine){.mol-t{display:none}.mol-m{display:inline}}
html.sin-movimiento .mol-ayuda{opacity:1}
html.sin-movimiento .mol-usada .mol-ayuda{opacity:0}
/* Panel del beneficio elegido */
.mol-panel{grid-area:panel;position:relative;z-index:1;scroll-margin-bottom:84px}  /* 84px: el botón flotante de WhatsApp no tapa el panel */
.mol-vista{min-height:300px}
.mol-card{position:relative;padding:26px 26px 24px;border-radius:22px;background:linear-gradient(165deg,#1c1c22f2,#0c0c0ff2);border:1px solid #ffffff1c;box-shadow:0 30px 80px -34px #000,inset 0 1px 0 #ffffff12;overflow:hidden;animation:mol-in .5s cubic-bezier(.2,.8,.2,1) both}
.mol-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gc,var(--orange)),var(--gc2,#ffc08a),transparent)}
.mol-card:after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,var(--gcf,#f776221a),transparent);pointer-events:none}
@keyframes mol-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
/* Arriba: número grande a la izquierda y grupo · clave a su lado */
.mol-card:not(.mol-inicio){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:end}
.mol-card:not(.mol-inicio)>*{grid-column:1/-1}
.mol-card .mol-num{grid-column:1;font-family:var(--font-display);font-weight:800;font-size:clamp(52px,4.6vw,68px);line-height:.8;color:var(--gc)}
.mol-card .mol-num~.mol-grupo{grid-column:2;padding-bottom:4px}
.mol-grupo{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:#b5b5ad}
.mol-grupo .ico{width:18px;height:18px;color:var(--orange)}
.mol-clave{color:var(--gc2)}
.mol-card-t,.mol-item h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.8vw,44px);line-height:.95;letter-spacing:-.3px;color:var(--white);margin:12px 0;text-wrap:balance}
.mol-texto{margin:0;font-size:17px;line-height:1.55;color:#d2d2cb}
.mol-vs{display:grid;gap:10px;margin-top:18px}
.mol-otros,.mol-dms{margin:0;padding:12px 16px;border-radius:14px;font-size:15.5px;line-height:1.45}
.mol-otros{background:#ffffff08;border:1px solid #ffffff16;color:#ababa4}
.mol-dms{background:var(--gcf);border:1px solid var(--gc);color:var(--white);font-weight:600}
.mol-otros b,.mol-dms b{display:block;font-size:11px;letter-spacing:2px;margin-bottom:4px}
.mol-otros b{color:#ff9a86}
.mol-dms b{color:var(--gc2)}
.mol-inicio-t{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,3vw,48px);line-height:.95;margin:14px 0 12px}
.mol-inicio .button{margin-top:22px}
.mol-leyenda{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mol-leyenda li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid #ffffff1f;background:#ffffff08;font-size:11.5px;font-weight:700;letter-spacing:1.6px;color:#e6e6df}
.mol-leyenda li:before{content:"";width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gc2),var(--gc) 55%)}
.mol-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px}
.mol-progreso{flex:1;min-width:0}
.mol-flecha{width:50px;height:50px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid #ffffff44;background:transparent;color:var(--white);cursor:pointer;transition:border-color .25s,background .25s}
.mol-flecha:hover{border-color:var(--orange);background:#f7762222}
.mol-flecha .ico{width:22px;height:22px}
.mol-flecha--prev .ico{transform:scaleX(-1)}
.mol-puntos{display:flex;gap:7px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.mol-puntos li{width:9px;height:9px;border-radius:50%;background:#ffffff26;transition:background .3s,transform .3s}
.mol-puntos li.v{background:var(--gc)}
.mol-puntos li.on{transform:scale(1.45);box-shadow:0 0 0 2px #0a0a0b,0 0 0 3.5px var(--gc2)}
.mol-cuenta{margin:9px 0 0;text-align:center;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#b5b5ad}
.mol-completo{margin-top:16px;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,#2a1f0a,#170f05);border:1px solid #e9b23c88;box-shadow:0 0 50px -10px #e9b23c66;animation:mol-in .6s cubic-bezier(.2,.8,.2,1) both}
.mol-completo[hidden]{display:none}
.mol-completo-t{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-family:var(--font-display);font-weight:800;font-size:30px;text-transform:uppercase;color:#ffd27a}
.mol-completo-t .ico{width:26px;height:26px}
.mol-completo p{margin:0 0 14px;color:#e9e3d2}
.mol-completo .button{width:100%;justify-content:center}
/* Botón "Ver los 10 beneficios" (Vendé DMS y Presentación) */
.v-btn-mol .ico{width:24px;height:24px;color:var(--orange)}
/* Lista de los 10 (también es lo que se ve sin JavaScript) */
.mol-lista .e-h2{margin-bottom:46px}
.mol-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.mol-item{position:relative;padding:28px 28px 26px 104px;border-radius:22px;background:#111114e8;border:1px solid #ffffff14;overflow:hidden}
.mol-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc)}
.mol-item .mol-num{position:absolute;left:26px;top:22px;font-family:var(--font-display);font-weight:800;font-size:58px;line-height:1;color:var(--gc)}
.mol-item h3{font-size:clamp(26px,2.2vw,34px);margin:8px 0 10px}
@media (max-width:900px){
  .mol-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "escena" "panel";grid-template-rows:auto}
  .mol-intro{text-align:center;padding-top:0}
  .mol-sub{margin:0 auto 4px}
  .mol-escena{max-width:560px}
  .mol-vista{min-height:0}
  .mol-items{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .mol-hero{padding-top:20px}
  .mol-title{font-size:clamp(46px,13vw,64px);margin-bottom:12px}
  .mol-escena{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
  .mol-card{padding:22px 20px 20px}
  .mol-texto{font-size:16px}
  .mol-item{padding:22px 20px 22px 78px}
  .mol-item .mol-num{left:18px;top:18px;font-size:46px}
}
@media (forced-colors:active){.js .mol-escena,.js .mol-panel{display:none}}

/* ==========================================================================
   42 · Acceso flotante a "La fórmula DMS" (pie(): átomo chico arriba del globo de WhatsApp)
   En todas las páginas menos molecula.html. Con el mouse encima (o con el teclado) se despliega
   "10 BENEFICIOS" hacia la izquierda. Una vez por visita se asoma solo unos segundos (JS bloque 13).
   Centrado sobre el globo: PC 58 px a 20 px del borde → centro a 49 px; celular 52 px a 14 px → 40 px.
   ========================================================================== */
.mol-float{position:fixed;right:27px;bottom:90px;z-index:60;display:flex;align-items:center;height:44px;border-radius:999px;background:#141418ee;border:1px solid #ffffff2e;color:var(--white);box-shadow:0 8px 22px #0006;transition:border-color .25s,box-shadow .25s}
.mol-float-ico{width:42px;height:42px;flex:none;display:grid;place-items:center}
.mol-float .ico{width:24px;height:24px;color:var(--orange);animation:mol-gira 14s linear infinite}
.mol-float-t{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;padding-left:0;font-size:11.5px;font-weight:700;letter-spacing:1.6px;transition:max-width .4s ease,opacity .3s ease,padding .4s ease}
.mol-float:hover,.mol-float.asoma{border-color:var(--orange);box-shadow:0 8px 22px #0006,0 0 22px #f7762244}
.mol-float:hover .mol-float-t,.mol-float:focus-visible .mol-float-t,.mol-float.asoma .mol-float-t{max-width:150px;opacity:1;padding-left:16px}
.mol-float:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
@keyframes mol-gira{to{transform:rotate(360deg)}}
@media (max-width:700px){
  .mol-float{right:18px;bottom:76px}
  .product-page~.mol-float,.has-sticky .mol-float{bottom:146px}   /* la ficha sube el WhatsApp por la barra de compra */
}

/* ==========================================================================
   43 · Sonido ambiente (pie(): botón abajo a la izquierda; JS bloque 14)
   Nace con [hidden]: solo aparece si el navegador tiene Web Audio. Apagado = parlante con cruz;
   prendido = parlante con ondas que laten. Solo el ícono, sin texto que se despliegue (pedido de Nacho).
   Alineado con el centro del globo de WhatsApp (PC 49 px del borde de abajo; celular 40 px).
   ========================================================================== */
.sonido-float{position:fixed;left:20px;bottom:27px;z-index:60;display:flex;align-items:center;height:44px;padding:0;border-radius:999px;background:#141418ee;border:1px solid #ffffff2e;color:#d9d9d2;box-shadow:0 8px 22px #0006;cursor:pointer;font:inherit;transition:border-color .25s,box-shadow .25s,color .25s}
.sonido-float[hidden]{display:none}
.site-footer{padding-bottom:88px}   /* la última línea del pie queda arriba de los botones flotantes (sonido, átomo, WhatsApp) */
.sonido-ico{width:42px;height:42px;flex:none;display:grid;place-items:center}
.sonido-float .ico{width:22px;height:22px}
.sonido-float:hover{border-color:var(--orange)}
.sonido-float:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.sonido-float .son-onda{display:none}
.sonido-float[aria-pressed="true"]{color:var(--white);border-color:#f7762299;box-shadow:0 8px 22px #0006,0 0 20px #f7762233}
.sonido-float[aria-pressed="true"] .son-mudo{display:none}
.sonido-float[aria-pressed="true"] .son-onda{display:inline;color:var(--orange);animation:son-late 2.6s ease-in-out infinite}
.sonido-float[aria-pressed="true"] .son-onda-2{animation-delay:.5s}
@keyframes son-late{0%,100%{opacity:.35}50%{opacity:1}}
@media (max-width:700px){
  .sonido-float{left:14px;bottom:18px}
  .product-page~.site-footer{padding-bottom:156px}   /* en la ficha los botones van más arriba por la barra de compra */
  .product-page~.sonido-float,.has-sticky .sonido-float{bottom:88px}   /* arriba de la barra de compra de la ficha */
}
@media print{.sonido-float,.mol-float{display:none}}