/* v3 base — @font-face, reset, keyframes, scrollbars. Consume tokens.css antes que este fichero. */

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/BricolageGrotesque-var.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-var.woff2') format('woff2');font-weight:400 700;font-display:swap}

/* Sin reset de box-sizing ni de img: el template no lo tiene (Home.dc.html:35-51) y los anchos
   fijos del diseño (.container 1180px + padding, chips, checkboxes) están calculados sobre
   content-box. Los pocos elementos que necesitan border-box lo declaran ellos mismos. */
body{margin:0;background:#fff;font-family:var(--font-body);color:var(--c-ink)}
a{color:var(--c-brand);text-decoration:none}
a:hover{color:var(--c-green-text)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}
input::placeholder{color:var(--c-disabled)}

/* keyframes — Home.dc.html:44-51 */
@keyframes dcExpand{from{opacity:0;max-height:0;transform:translateY(-6px)}to{opacity:1;max-height:320px;transform:translateY(0)}}
@keyframes dcPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes dcFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dcSecFloat{0%{transform:translateY(0) rotate(0deg) scale(.7);opacity:0}12%{opacity:.55}75%{opacity:.4}100%{transform:translateY(-46vh) rotate(var(--rot,16deg)) scale(1.15);opacity:0}}
/* brillo de la barra de oferta (chrome, Home.dc.html:68) */
@keyframes promoSheen{0%,55%{left:-40%}100%{left:140%}}

/* scrollbars de marca — mismo bloque del helmet; thumb hover usa var(--c-brand) */
html{scrollbar-color:#a9bfb1 #eef0ee}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c5d2c9;border-radius:20px;border:3px solid #f6f7f6;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--c-brand);border:3px solid #f6f7f6;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* Estética del image-slot del template (image-slot.js:295,335-336): fondo neutro plano,
   anillo discontinuo y caption — la misma que .reviews__ph replica en home.css. */
.ph{position:relative;background:rgba(127,127,127,.08);display:flex;align-items:center;justify-content:center;font:13px/1.3 system-ui,-apple-system,sans-serif;color:var(--c-muted)}
.ph::after{content:'';position:absolute;inset:0;pointer-events:none;border:1.5px dashed currentColor;opacity:.35}
.ph span{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75;text-align:center}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,28px)}

/* Home.dc.html:69 — el template solo desactiva la máquina de escribir y las tres tarjetas de
   resultado ([style*="scType"],[style*="scRes"]); scTab y el resto de animaciones siguen vivas.
   Aquí esos elementos llevan clase en vez de estilo inline, de ahí los selectores. */
@media (prefers-reduced-motion:reduce){
  .trust__typed,.trust__result--first,.trust__result--second,.trust__result--third{animation:none!important;width:auto!important;max-width:none!important;opacity:1!important;transform:none!important}
}