/* ============================================================================
   ACOSTA AUDIO SOLUTION — "la mesa de mezcla"
   ---------------------------------------------------------------------------
   El logo no es solo un wordmark: debajo trae una CONSOLA DIGITAL ilustrada, en
   perspectiva, con dos bancos de botones encendidos — ámbar a la izquierda y
   verde a la derecha. Eso es literalmente un medidor de nivel, y es el motivo
   estructural del sitio:

     · .meter / .levels  → bloques segmentados verde→ámbar→dorado (eyebrows,
                           medidor del formulario)
     · .card__top        → la regla de "ticks" de fader sobre cada categoría
     · --grad-word       → el degradado crema→teal del propio wordmark, reusado
                           en los titulares

   Paleta MEDIDA con PIL sobre logo.jpg filtrando por saturación (colorthief no
   está instalado en este ambiente):
     dorado/crema  #f4d66f · #f9e59c   (wordmark)
     ámbar         #f6ae22 · #ee9c23   (barras del ecualizador + botones)
     teal          #7bb7b9 · #74b7ba   (final del degradado del wordmark)
     verde consola #49a170             (banco derecho de botones)
     negro         #040404 · #141014   (fondo dominante)

   NOTA FOTOS: montaje-dj / montaje-banda / cases-inventario / chispa-salon
   salen de un screen recording del grid de IG (1056x948) y nacen a ~470-490px.
   NINGÚN contenedor de esas cuatro debe pasar de ~500px de CSS.
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,h4,p,figure,figcaption,blockquote,ol,ul,fieldset,legend{ margin:0; padding:0 }
fieldset{ border:0 }
ol,ul{ list-style:none }
/* el atributo height del HTML gana sobre aspect-ratio si no se neutraliza */
img,svg,video{ display:block; max-width:100%; height:auto }
button,input,textarea,select{ font:inherit; color:inherit }
a{ color:inherit }

:root{
  --gold:#f4d66f;
  --cream:#f9e59c;
  --amber:#f6ae22;
  --amber-deep:#ee9c23;
  --teal:#7bb7b9;
  --teal-deep:#4d8f94;
  --green:#49a170;

  --ink:#08080a;          /* base, casi el negro del logo */
  --ink-2:#0e0f12;
  --ink-3:#15161b;
  --panel:#101116;
  --line:#26272f;
  --line-soft:#1c1d23;

  --txt:#e9e9ec;
  --txt-dim:#9c9da8;
  --txt-faint:#71727d;

  --wrap:1180px;
  --r:12px;

  --grad-word:linear-gradient(100deg,#f9e59c 0%,#f0d585 26%,#b9cba0 58%,#7bb7b9 88%);

  --f-disp:"Space Grotesk",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
}

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .18vw,1.06rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ width:min(100% - 40px,var(--wrap)); margin-inline:auto }
.wrap--narrow{ width:min(100% - 40px,760px) }
@media (max-width:560px){ .wrap,.wrap--narrow{ width:min(100% - 28px,var(--wrap)) } }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:#161006; padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px }

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;
}

/* ---------- tipografía ---------- */
.h2{
  font-family:var(--f-disp);
  font-weight:700;
  font-size:clamp(1.75rem,1.28rem + 2.05vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.lede{ color:var(--txt-dim); max-width:60ch; margin-top:14px; font-size:1.03rem }
.head{ margin-bottom:44px }
.head--center{ text-align:center }
.head--center .lede{ margin-inline:auto }

.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px;
}
.head--center .eyebrow{ justify-content:center }

/* EL MOTIVO: medidor de nivel segmentado, verde → ámbar → dorado.
   Sale de los dos bancos de botones encendidos de la consola del logo. */
.meter{
  display:block; width:74px; height:9px; flex:none; border-radius:1px;
  background:
    repeating-linear-gradient(90deg,
      currentColor 0 5px, transparent 5px 9px);
  color:var(--green);
  position:relative;
}
.meter::after{
  content:""; position:absolute; inset:0 0 0 45px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 9px);
}

.grad{
  background:var(--grad-word);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-disp); font-weight:600; font-size:.95rem;
  letter-spacing:-.01em;
  padding:.78em 1.35em; border-radius:8px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--lg{ padding:.92em 1.7em; font-size:1rem }
.btn--block{ width:100%; }
.btn--amber{ background:var(--amber); color:#1a1204; box-shadow:0 8px 26px -14px rgba(246,174,34,.9) }
.btn--amber:hover{ background:var(--cream); transform:translateY(-2px) }
.btn--ghost{ border-color:var(--line); color:var(--txt); background:rgba(255,255,255,.03) }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px) }
.ico-wa{ width:19px; height:19px; flex:none }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none } }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line-soft); background:rgba(8,8,10,.92) }
.nav__in{
  width:min(100% - 40px,var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:18px; min-height:70px;
}
@media (max-width:560px){ .nav__in{ width:min(100% - 28px,var(--wrap)) } }

.nav__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.eqmark{ width:26px; height:23px; flex:none; fill:var(--amber) }
.nav__name{
  font-family:var(--f-disp); font-weight:700; font-size:1.12rem; letter-spacing:-.02em;
  line-height:1; display:flex; flex-direction:column; gap:3px;
  background:var(--grad-word); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav__name em{
  font-style:normal; font-family:var(--f-mono); font-weight:400;
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-faint); -webkit-text-fill-color:var(--txt-faint);
}

/* Regla del proyecto: el toggle va pegado a la derecha en móvil. */
.nav__toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--txt); padding:8px; cursor:pointer;
}
.nav__toggle svg{ width:21px; height:21px }
.nav__toggle-close{ display:none }
.nav__toggle[aria-expanded="true"] .nav__toggle-open{ display:none }
.nav__toggle[aria-expanded="true"] .nav__toggle-close{ display:block }

.nav__links{ display:flex; align-items:center; gap:26px }
/* ojo: .nav__links a gana por especificidad sobre .btn — el CTA se re-declara abajo */
.nav__links a{
  font-family:var(--f-disp); font-size:.92rem; font-weight:500;
  color:var(--txt-dim); text-decoration:none; position:relative;
  transition:color .2s ease;
}
.nav__links a:not(.btn):hover{ color:var(--txt) }
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--amber); transition:right .25s ease;
}
.nav__links a:not(.btn):hover::after{ right:0 }
.nav__links a.nav__cta{ color:#1a1204; padding:.6em 1.05em; font-size:.86rem; font-weight:600 }
.nav__links a.nav__cta:hover{ color:#1a1204 }

@media (max-width:900px){
  .nav__toggle{ display:inline-flex }
  .nav__links{
    position:fixed; inset:70px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    padding:8px 24px 26px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .24s ease, opacity .24s ease;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto }
  .nav__links a{ padding:15px 2px; border-bottom:1px solid var(--line-soft); font-size:1.05rem }
  .nav__links a:not(.btn)::after{ display:none }
  .nav__links a.nav__cta{ margin-top:18px; border-bottom:0; justify-content:center; font-size:.98rem; padding:.9em 1.4em }
}

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(48px,6vw,80px) 0 0 }
.hero__bg{ position:absolute; inset:0; z-index:-2 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; opacity:.34; filter:saturate(.82) }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 6%, rgba(8,8,10,.28) 0%, rgba(8,8,10,.86) 56%, var(--ink) 100%),
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.2) 35%, var(--ink) 100%);
}
.hero__in{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; text-align:center }
@media (max-width:560px){ .hero__in{ width:min(100% - 28px,var(--wrap)) } }

.hero__logo{
  width:min(340px,74vw); margin:0 auto clamp(22px,3vw,32px);
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));
}
.hero__h1{
  font-family:var(--f-disp); font-weight:700;
  font-size:clamp(1.95rem,1.2rem + 3.3vw,3.7rem);
  line-height:1.04; letter-spacing:-.032em; text-wrap:balance;
  max-width:16ch; margin-inline:auto;
}
.hero__sub{ color:var(--txt-dim); max-width:56ch; margin:20px auto 0 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px }

/* la fila de "canales" del inventario, como los faders de la consola */
.hero__meter{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  margin:clamp(38px,5vw,58px) auto 0;
  border-top:1px solid var(--line-soft);
  max-width:900px;
}
.hero__meter li{ flex:1 1 130px; border-right:1px solid var(--line-soft) }
.hero__meter li:last-child{ border-right:0 }
.hero__meter a{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 8px; text-decoration:none;
  font-family:var(--f-disp); font-size:.88rem; font-weight:500; color:var(--txt-dim);
  transition:color .2s ease, background-color .2s ease;
}
.hero__meter a:hover{ color:var(--gold); background:rgba(246,174,34,.06) }
.hero__meter-n{ font-family:var(--f-mono); font-size:.68rem; color:var(--amber); letter-spacing:.08em }
@media (max-width:560px){
  .hero__meter li{ flex:1 1 33.333%; border-bottom:1px solid var(--line-soft) }
  .hero__meter li:nth-child(3n){ border-right:0 }
  .hero__meter li:nth-last-child(-n+3){ border-bottom:0 }
}

/* ---------- secciones ---------- */
.sec{ padding:clamp(62px,8vw,110px) 0; position:relative }
.sec--inv{ background:var(--ink) }
.sec--fx{ background-color:var(--ink-2); border-block:1px solid var(--line-soft) }
.sec--montajes{ background-color:var(--ink) }
.sec--eventos{ background-color:var(--ink-2); border-block:1px solid var(--line-soft) }
.sec--form{ background-color:var(--ink) }
.sec--contacto{ background-color:var(--ink-2); border-top:1px solid var(--line-soft); padding-block:clamp(52px,6vw,76px) }

/* ---------- inventario ---------- */
/* align-items:start a propósito: los renglones reales de cada categoría son de
   largo distinto y estirar las tarjetas dejaba huecos de 100px+ bajo las cortas. */
.inv{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); align-items:start }
.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:24px 24px 26px; position:relative; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color:#33343e; transform:translateY(-3px) }
@media (prefers-reduced-motion:reduce){ .card:hover{ transform:none } }

/* la regla de "ticks" de fader sobre cada tarjeta */
.card__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; margin-bottom:16px;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.card__top::before{
  content:""; position:absolute; left:-24px; right:-24px; top:-24px; height:4px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 10px,transparent 10px 18px);
  opacity:.5;
}
.card__n{ font-family:var(--f-mono); font-size:.78rem; color:var(--amber); letter-spacing:.1em }
.card__ico{ width:36px; height:36px; fill:var(--teal); opacity:.85 }
.card__ico .ln{ fill:none; stroke:var(--teal); stroke-width:2; stroke-linecap:round }
.card__ico .thin{ stroke-width:1.2; opacity:.65 }
.card__ico .hole{ fill:var(--panel) }
.card__ico .beam{ fill:var(--teal); opacity:.28 }
.card__ico .spark{ stroke:var(--amber) }
.card__ico .arm{ stroke:var(--amber) }

.card__h{
  font-family:var(--f-disp); font-weight:600; font-size:1.22rem;
  letter-spacing:-.02em; margin-bottom:14px;
}
.spec{ display:grid; gap:10px }
.spec li{ display:grid; gap:2px; padding-left:15px; position:relative }
.spec li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:1px;
  background:var(--green);
}
.spec li:nth-child(n+4)::before{ background:var(--amber) }
.spec b{ font-weight:600; font-size:.95rem; color:var(--txt) }
.spec span{ font-family:var(--f-mono); font-size:.82rem; color:var(--txt-dim); line-height:1.45 }
.card__note{ margin-top:16px; font-size:.86rem; color:var(--txt-faint); font-style:italic }
.card__note a{ color:var(--amber); text-decoration:none; font-style:normal; font-weight:500 }
.card__note a:hover{ text-decoration:underline }

.console{ margin-top:clamp(34px,4vw,52px); opacity:.5 }
.console img{ width:100%; max-width:900px; margin-inline:auto }

/* ---------- efectos ---------- */
.fx{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); align-items:start }
.fx__item{
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  background:var(--ink-3);
}
/* las tres se recortan al mismo retrato para que la fila lea pareja */
.fx__item{ display:grid; grid-template-rows:1fr auto }
.fx__item img{ width:100%; height:100%; min-height:330px; object-fit:cover; aspect-ratio:3/4 }
.fx__item figcaption{ padding:16px 18px 19px; font-size:.88rem; color:var(--txt-dim); line-height:1.55 }
.fx__item figcaption b{ display:block; color:var(--gold); font-family:var(--f-disp); font-weight:600; font-size:1rem; margin-bottom:4px }

/* ---------- pista de baile LED ---------- */
/* La foto es vertical (es un montaje visto desde arriba), así que va en columna
   propia y el texto al lado. El fondo repite la retícula de puntos de la pista. */
.sec--pista{ background-color:var(--ink); position:relative; overflow:hidden }
.sec--pista::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(246,174,34,.5) 1.4px, transparent 1.5px);
  background-size:26px 26px;
  opacity:.09;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.sec--pista .wrap{ position:relative; z-index:1 }

.pista{ display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr 1fr; align-items:center }
@media (max-width:860px){ .pista{ grid-template-columns:1fr } }

.pista__fig{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line-soft);
  background:var(--ink-3);
  box-shadow:0 30px 70px -40px rgba(246,174,34,.35);
}
.pista__fig img{ width:100%; height:auto }


.pista__txt .lede{ max-width:52ch }
.pista__specs{ display:grid; gap:1px; margin:26px 0 26px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden }
.pista__specs li{ background:var(--panel); padding:16px 18px; display:grid; gap:4px }
.pista__k{ font-family:var(--f-mono); font-size:.8rem; color:var(--gold); letter-spacing:-.01em }
.pista__v{ font-size:.88rem; color:var(--txt-dim); line-height:1.5 }

/* ---------- galería de montajes ---------- */
/* 10 fotos, dos de ellas a doble columna = 12 celdas = 4 filas exactas de 3 */
.gal{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)) }
.gal__i{
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  background:var(--ink-3);
  /* la foto absorbe el alto sobrante para que la fila quede pareja sin huecos */
  display:grid; grid-template-rows:1fr auto;
}
.gal__i img{ width:100%; height:100%; min-height:246px; object-fit:cover }
.gal__i--wide{ grid-column:span 2 }
.gal__i--wide img{ min-height:320px }
/* la foto absorbe el alto de la fila, así que el encuadre se fija a mano donde
   el sujeto no está en el centro vertical del original */
.op-30{ object-position:50% 30% !important }
.op-38{ object-position:50% 38% !important }
.op-62{ object-position:50% 62% !important }
@media (max-width:700px){
  .gal__i--wide{ grid-column:span 1 }
  .gal__i--wide img{ min-height:246px }
}
.gal__i figcaption{ padding:15px 17px 18px; display:grid; gap:5px }
.gal__i figcaption b{ font-family:var(--f-disp); font-weight:600; font-size:1rem; color:var(--gold) }
.gal__i figcaption span{ font-size:.86rem; color:var(--txt-dim); line-height:1.5 }

/* ---------- tipos de evento ---------- */
.tipos{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)) }
.tipo{
  padding:24px 22px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line-soft);
  border-top:3px solid var(--amber);
}
.tipo:nth-child(2){ border-top-color:var(--teal) }
.tipo:nth-child(3){ border-top-color:var(--green) }
.tipo:nth-child(4){ border-top-color:var(--gold) }
.tipo h3{ font-family:var(--f-disp); font-weight:600; font-size:1.15rem; letter-spacing:-.02em; margin-bottom:9px }
.tipo p{ font-size:.92rem; color:var(--txt-dim); line-height:1.6 }

.claims{
  margin-top:clamp(34px,4vw,52px);
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
}
.claim{ background:var(--ink-2); padding:22px 20px; display:grid; gap:7px; align-content:start }
.claim__k{ font-family:var(--f-mono); font-size:.9rem; color:var(--gold); letter-spacing:-.01em }
.claim__v{ font-size:.86rem; color:var(--txt-dim); line-height:1.5 }

/* ---------- formulario ---------- */
.form{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:16px;
  padding:clamp(22px,3vw,34px); display:grid; gap:18px;
}
.grid2{ display:grid; gap:18px; grid-template-columns:1fr 1fr }
@media (max-width:600px){ .grid2{ grid-template-columns:1fr } }

.field{ display:grid; gap:7px }
/* scoped a hijo directo: si no, gana sobre .check span */
.field > label,.field legend{
  font-family:var(--f-disp); font-size:.85rem; font-weight:500; color:var(--txt-dim);
  letter-spacing:.005em;
}
.field legend{ margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:9px }
.legend__hint{ font-family:var(--f-mono); font-size:.7rem; color:var(--txt-faint); text-transform:lowercase; letter-spacing:.04em }

.field input,.field select,.field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:9px;
  padding:.78em .9em; color:var(--txt); font-size:.97rem;
  transition:border-color .18s ease, background-color .18s ease;
}
.field textarea{ resize:vertical; min-height:104px }
.field input::placeholder,.field textarea::placeholder{ color:#5c5d67 }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--amber); background:#0b0b0e }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.field select option{ background:var(--ink-2); color:var(--txt) }

.field--checks{ background:var(--ink-3); border:1px solid var(--line-soft); border-radius:12px; padding:20px }

/* el medidor de nivel del formulario: se enciende según los servicios marcados */
.levels{ display:flex; gap:4px; margin-bottom:16px }
.levels i{
  flex:1; height:7px; border-radius:2px; background:#22232b;
  transition:background-color .22s ease;
}
.levels i.on{ background:var(--green) }
.levels i.on:nth-child(n+6){ background:var(--amber) }
.levels i.on:nth-child(8){ background:var(--gold) }

.checks{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr)) }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:2px 0 }
.check input{
  appearance:none; width:19px; height:19px; flex:none; cursor:pointer;
  border:1px solid var(--line); border-radius:5px; background:var(--ink);
  display:grid; place-content:center;
  transition:background-color .16s ease, border-color .16s ease;
}
.check input::after{
  content:""; width:10px; height:6px; border-left:2px solid #1a1204; border-bottom:2px solid #1a1204;
  transform:rotate(-45deg) scale(0); transition:transform .16s ease;
}
.check input:checked{ background:var(--amber); border-color:var(--amber) }
.check input:checked::after{ transform:rotate(-45deg) scale(1) }
/* especificidad: .field > label no lo alcanza, pero .field legend sí a los <span> sueltos */
.check span{ font-family:var(--f-body); font-size:.93rem; color:var(--txt); line-height:1.35 }

.form__err{
  background:rgba(220,70,60,.1); border:1px solid rgba(220,70,60,.42); border-radius:9px;
  padding:11px 14px; font-size:.88rem; color:#f2a49c;
}
.form__note{ font-size:.79rem; color:var(--txt-faint); text-align:center; line-height:1.5 }

/* ---------- contacto ---------- */
.contacto{ display:grid; gap:34px; grid-template-columns:1.15fr .85fr; align-items:center }
@media (max-width:820px){ .contacto{ grid-template-columns:1fr } }
.contacto .h2{ font-size:clamp(1.45rem,1.1rem + 1.5vw,2.2rem) }
.contacto__list{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden }
.contacto__list li{ background:var(--ink); padding:17px 20px; display:grid; gap:3px }
.contacto__list .k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-faint) }
.contacto__list a{ font-family:var(--f-disp); font-size:1.02rem; font-weight:500; color:var(--gold); text-decoration:none; word-break:break-word }
.contacto__list a:hover{ text-decoration:underline }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:1px solid var(--line-soft); padding:30px 0 96px }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; justify-content:space-between }
.foot__c{ font-size:.78rem; color:var(--txt-faint); line-height:1.55 }

/* ---------- WhatsApp flotante ---------- */
.wafab{
  position:fixed; right:16px; bottom:16px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-content:center;
  background:#25d366; color:#08130a;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.75);
  transition:transform .2s ease;
}
.wafab svg{ width:30px; height:30px }
.wafab:hover{ transform:scale(1.07) }
@media (prefers-reduced-motion:reduce){ .wafab:hover{ transform:none } }

/* ---------- revelado ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-visible{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}