/* Base: reset, tipografía y utilidades compartidas */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-md)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);text-wrap:balance;letter-spacing:-.025em;line-height:1.12;color:var(--text)}
h2{font-size:var(--fs-h2);font-weight:800}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:color-mix(in srgb,var(--accent) 18%,#fff)}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--space-section)}
.sec--tight{padding-block:calc(var(--space-section) * .65)}
.sec--white{background:var(--surface);border-block:1px solid var(--border)}
.ico{width:20px;height:20px;flex:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 var(--fs-xs)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s4) var(--s6);margin-bottom:var(--s6)}
.sec-head--center{justify-content:center;text-align:center}
.sec-head--center .sec-head__t{justify-items:center}
.sec-head__t{display:grid;gap:var(--s3);max-width:660px}
.sec-head p.lead,.lead{color:var(--muted);font-size:var(--fs-lg);line-height:1.6}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hl{color:var(--accent);font-weight:600}


/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--radius-sm);font:600 .9375rem/1 var(--font-sans);letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--cta-shadow)}

.btn--line{border-color:var(--border-strong);background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}

.btn--soft{background:var(--accent-soft);color:var(--accent)}

.btn--wa{background:var(--whatsapp);color:var(--on-whatsapp);box-shadow:var(--wa-shadow)}

.btn--block{width:100%}
.btn--sm{min-height:40px;padding:0 var(--s4);font-size:.875rem}
.btn--lg{min-height:54px;padding:0 var(--s6);font-size:1rem;border-radius:var(--radius)}
.btn .ico{width:18px;height:18px}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:38px;padding:0 var(--s4);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:.875rem;font-weight:500;cursor:pointer;transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease),transform .12s var(--ease)}

.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.chip .ico{width:16px;height:16px;color:var(--subtle)}

.skeleton{min-height:60vh;display:grid;place-items:center;color:var(--muted);font-size:var(--fs-sm)}
.load-error{max-width:560px;margin:80px auto;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.load-error h1{font-size:1.3rem;margin-bottom:8px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* Efectos al pasar el mouse: solo en equipos con mouse (en el celular no quedan "pegados") */
@media (hover:hover) and (pointer:fine){
.hl:hover{text-decoration:underline;text-underline-offset:3px}
.btn--primary:hover{background:var(--accent-hover)}
.btn--line:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border-strong));color:var(--accent)}
.btn--soft:hover{background:color-mix(in srgb,var(--accent) 14%,#fff)}
.btn--wa:hover{background:color-mix(in srgb,var(--whatsapp) 90%,#000)}
.chip:hover{border-color:var(--border-strong);background:var(--surface-2)}
}
@media (hover:hover) and (pointer:fine){.chip[aria-pressed="true"]:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}}

/* =========================================================
   Sensación de app nativa en el celular (Emil Kowalski · mobile-native)
   ========================================================= */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,[role="button"],[role="tab"],summary,label,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}
button,[role="button"],[role="tab"],summary,.btn,.chip,.icon-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{caret-color:var(--accent);accent-color:var(--accent)}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
*{scrollbar-color:var(--border-strong) transparent}
.btn:active,.chip:active{transition-duration:80ms}