/* ===========================================================
   BonyElectric — base compartida para los 3 conceptos
   Tokens reales del proyecto. Disciplina de color estricta:
   electric (#FFC72C) SOLO en acciones; brass (#E6A700) en zonas
   premium (certificación/garantías). Sin glow, sin retícula.
   =========================================================== */

:root {
  --carbon-900:#0E0F12;
  --carbon-850:#121419;
  --carbon-800:#16181D;
  --carbon-700:#1F2228;
  --carbon-600:#2A2E36;
  --bone:#F4F2EC;
  --bone-72:rgba(244,242,236,.72);
  --bone-52:rgba(244,242,236,.52);
  --bone-38:rgba(244,242,236,.38);
  --bone-12:rgba(244,242,236,.12);
  --bone-08:rgba(244,242,236,.08);
  --electric:#FFC72C;
  --brass:#E6A700;
  --steel:#6B7B8C;
  --steel-soft:rgba(107,123,140,.16);

  --ff-display:"Archivo",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,monospace;

  --r-sm:8px;
  --r-md:12px;
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--carbon-900);
  color:var(--bone);
  font-family:var(--ff-display);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}

::selection{background:var(--electric);color:var(--carbon-900);}

/* ---- foco de teclado: amarillo eléctrico (acción/foco) ---- */
:focus-visible{
  outline:2px solid var(--electric);
  outline-offset:3px;
  border-radius:2px;
}

/* ---- utilidades ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.mono{font-family:var(--ff-mono);font-feature-settings:"tnum";}
.eyebrow{
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin:0;
}
.muted{color:var(--bone-72);}
.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;}

/* ---- botones ---- */
.btn{
  --bh:1;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.92em 1.4em;border-radius:var(--r-sm);
  font-weight:700;font-size:1rem;letter-spacing:-.01em;line-height:var(--bh);
  border:1px solid transparent;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
  will-change:transform;
}
.btn svg{width:1.15em;height:1.15em;flex:none;}
.btn-primary{background:var(--electric);color:var(--carbon-900);}
.btn-primary:hover{background:#ffd454;transform:translateY(-2px);}
.btn-secondary{border-color:var(--bone-12);color:var(--bone);background:transparent;}
.btn-secondary:hover{border-color:var(--electric);color:var(--electric);}
.btn-sm{padding:.62em 1.05em;font-size:.9rem;}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ---- WhatsApp flotante persistente ---- */
.wa-fab{
  position:fixed;right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));z-index:80;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.15em;border-radius:999px;
  background:var(--electric);color:var(--carbon-900);
  font-weight:700;font-size:.95rem;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
  transition:transform .2s ease;
  animation:fab-in .5s ease both;animation-delay:.6s;
}
.wa-fab svg{width:1.5em;height:1.5em;}
.wa-fab .wa-fab__txt{display:none;}
@media (min-width:560px){.wa-fab .wa-fab__txt{display:inline;}}
.wa-fab:hover{transform:translateY(-3px);}
@keyframes fab-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.wa-fab{animation:none;}.wa-fab:hover{transform:none;}}

/* ---- reveal al scroll (no oculta si JS falla) ---- */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none;}
}

/* ---- imagen placeholder de respaldo (si una foto faltara) ---- */
.ph{background:
  repeating-linear-gradient(135deg,var(--carbon-800),var(--carbon-800) 10px,var(--carbon-850) 10px,var(--carbon-850) 20px);}

/* ---- antes / después (mejora progresiva: ambas visibles sin JS) ---- */
.ba{position:relative;}
.ba__pair{display:grid;gap:10px;}
@media (min-width:760px){.ba__pair{grid-template-columns:1fr 1fr;}}
.ba__cell{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--bone-08);}
.ba__cell img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.ba__tag{
  position:absolute;left:12px;top:12px;
  padding:.34em .7em;border-radius:6px;
  background:rgba(14,15,18,.82);backdrop-filter:blur(4px);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone);
}
.ba__tag--after{color:var(--electric);}

/* ---- acordeón accesible ---- */
.acc__item{border-top:1px solid var(--bone-08);}
.acc__item:last-child{border-bottom:1px solid var(--bone-08);}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:1rem;
  padding:1.4rem 0;background:none;border:0;text-align:left;
}
.acc__btn:focus-visible{outline-offset:-2px;}
.acc__ix{font-family:var(--ff-mono);font-size:.8rem;color:var(--steel);flex:none;width:2.4ch;}
.acc__ttl{font-family:var(--ff-display);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;flex:1;}
.acc__sign{flex:none;width:22px;height:22px;position:relative;color:var(--steel);transition:color .2s;}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;}
.acc__sign::before{left:0;right:0;top:10px;height:2px;}
.acc__sign::after{top:0;bottom:0;left:10px;width:2px;transition:transform .25s ease;}
.acc__btn[aria-expanded="true"] .acc__sign{color:var(--electric);}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:scaleY(0);}
.acc__btn[aria-expanded="true"] .acc__ttl{color:var(--bone);}
.acc__panel{overflow:hidden;height:0;}
.acc__panel-inner{padding:0 0 1.6rem 3.4ch;color:var(--bone-72);max-width:62ch;}
.acc__panel-inner .who{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:.5rem;}
@media (prefers-reduced-motion:reduce){.acc__panel{transition:none!important;}}

/* ---- header móvil base ---- */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;color:var(--bone);}
.nav-toggle svg{width:26px;height:26px;}
@media (min-width:880px){.nav-toggle{display:none;}}