/* =========================================================
   Volks Box Performance — Pachuca, Hidalgo
   Hoja de estilos. Los colores viven en :root, abajo.
   ========================================================= */

:root{
  /* Superficies */
  --ink:        #08090b;
  --surface:    #0f1216;
  --surface-2:  #15191e;
  --surface-3:  #1b2026;
  --line:       #232930;
  --line-soft:  #1a1f25;

  /* Acentos */
  --red:        #d81521;
  --red-bright: #f0252f;
  --red-deep:   #9e0d16;

  /* Texto */
  --text:       #e7eaec;
  --text-2:     #b4bbc1;
  --muted:      #828a92;
  --dim:        #5a626a;

  --wrap:       1240px;
  --radius:     4px;
  --radius-lg:  6px;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
.brand-logo{ width:auto; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap-narrow{ max-width:860px; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff; padding:10px 16px; }
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--red-bright); outline-offset:2px; }

/* ---------------- Tipografía ---------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.3rem); }
h2{ font-size:clamp(1.9rem, 4.2vw, 3rem); }
h3{ font-size:1.22rem; letter-spacing:-.01em; }
h4{ font-size:1rem; letter-spacing:.01em; }

p{ margin:0 0 1rem; }
strong{ color:#fff; font-weight:600; }

/* Etiqueta pequeña, tipo ficha técnica */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
  margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--red); flex:none;
}
.eyebrow.center{ justify-content:center; }

.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-display); font-size:.88rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.92rem 1.6rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn:active{ transform:translateY(1px); }
.btn .ico{ width:18px; height:18px; fill:currentColor; flex:none; }

.btn-primary{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-primary:hover{ background:var(--red-bright); border-color:var(--red-bright); }

.btn-outline{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-outline:hover{ border-color:#49525b; background:rgba(255,255,255,.03); }

.btn-wa{ background:#1faa49; border-color:#1faa49; color:#fff; }
.btn-wa:hover{ background:#25c155; border-color:#25c155; }

.btn-lg{ padding:1.05rem 2rem; font-size:.95rem; }
.btn-block{ width:100%; }

/* ---------------- Barra superior ---------------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono);
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.topbar a{ text-decoration:none; color:var(--text-2); }
.topbar a:hover{ color:#fff; }
.topbar-right{ display:flex; gap:1.6rem; align-items:center; }
.topbar .dot{ color:var(--red); }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,11,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.site-header.is-stuck{ background:rgba(8,9,11,.97); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; gap:1.2rem; min-height:72px; }

.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand-logo{ height:46px; width:auto; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.nav > a{
  font-family:var(--f-display); font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--text-2); padding:.6rem .85rem; border-radius:var(--radius);
  position:relative; transition:color .16s var(--ease), background .16s var(--ease);
}
.nav > a:not(.btn):hover{ color:#fff; background:rgba(255,255,255,.04); }
.nav > a.active{ color:#fff; }
.nav > a.active::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.25rem;
  height:2px; background:var(--red);
}
.nav-cta{ margin-left:.6rem; padding:.68rem 1.2rem; }

.nav-toggle{
  display:none; margin-left:auto;
  width:44px; height:40px; border:1px solid var(--line); border-radius:var(--radius);
  background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text-2); transition:transform .2s var(--ease), opacity .15s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }

.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.05) translate3d(0,0,0); }
  to{   transform:scale(1.16) translate3d(-1.5%,-2%,0); }
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(216,21,33,.16), transparent 62%),
    linear-gradient(180deg, rgba(8,9,11,.80) 0%, rgba(8,9,11,.86) 45%, var(--ink) 97%);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
}

.hero-inner{
  position:relative; z-index:1; text-align:center;
  padding:clamp(2.4rem,5vw,4rem) 24px clamp(3.4rem,7vw,5rem);
}
.hero-logo{ width:min(560px,90%); margin:0 auto clamp(1.2rem,2.6vw,2rem); }
.hero h1{ margin-bottom:1.1rem; }
.hero h1 .hl{ color:var(--red); }
.hero-sub{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(.95rem,1.7vw,1.15rem); letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-2);
  margin:0 auto 1.4rem; max-width:720px;
}
.hero-sub::before,
.hero-sub::after{
  content:""; display:inline-block; vertical-align:middle;
  width:26px; height:1px; background:var(--red); margin:0 .8rem;
}
.hero-lead{ max-width:660px; margin:0 auto 2rem; color:var(--muted); font-size:1.04rem; }
.hero-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* flechita de bajar */
.scroll-hint{ display:none; }
@media (min-height:700px) and (min-width:861px){
  .scroll-hint{
    display:block; position:absolute; left:50%; bottom:96px; z-index:2;
    transform:translateX(-50%);
    width:26px; height:42px; border:1px solid var(--line); border-radius:14px;
  }
  .scroll-hint span{
    position:absolute; left:50%; top:9px; width:3px; height:7px; border-radius:2px;
    background:var(--red); transform:translateX(-50%);
    animation:raton 1.9s var(--ease) infinite;
  }
  @keyframes raton{
    0%{ opacity:0; transform:translate(-50%,0); }
    25%{ opacity:1; }
    75%{ opacity:1; transform:translate(-50%,16px); }
    100%{ opacity:0; transform:translate(-50%,18px); }
  }
}

/* entrada escalonada del hero */
.fade-up{ opacity:0; transform:translateY(16px); animation:subir .7s var(--ease) forwards; }
.fade-up.d1{ animation-delay:.12s; }
.fade-up.d2{ animation-delay:.24s; }
.fade-up.d3{ animation-delay:.36s; }
@keyframes subir{ to{ opacity:1; transform:none; } }

/* Tira de cilindradas */
.cc-strip{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.cc-strip-inner{
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap;
}
.cc-chip{
  flex:1 1 0; min-width:124px;
  padding:1.15rem .8rem; text-align:center;
  border-left:1px solid var(--line-soft);
  text-decoration:none; transition:background .18s var(--ease);
}
.cc-chip:first-child{ border-left:0; }
.cc-chip:hover{ background:var(--surface-2); }
.cc-chip b{
  display:block; font-family:var(--f-display); font-size:1.6rem; font-weight:800;
  color:#fff; letter-spacing:-.02em; line-height:1;
}
.cc-chip span{
  display:block; margin-top:.4rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.cc-chip.is-mod span{ color:var(--red); }

/* ---------------- Secciones ---------------- */
.section{ padding:clamp(3.4rem,7vw,6rem) 0; }
.section-alt{ background:var(--surface); border-block:1px solid var(--line); }

.section-head{ max-width:720px; margin:0 0 clamp(2rem,4vw,3rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-bottom:.9rem; }
.section-sub{ color:var(--muted); font-size:1.03rem; margin:0; }

.note{
  margin:2.4rem 0 0; padding:1.1rem 1.3rem;
  background:var(--surface-2); border-left:2px solid var(--red);
  color:var(--muted); font-size:.93rem;
}
.note p:last-child{ margin:0; }

.grid{ display:grid; gap:1px; }

/* ---------------- Tabla de motores ---------------- */
.lineup{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface-2);
}
.lineup table{ width:100%; border-collapse:collapse; }
.lineup thead th{
  text-align:left; padding:.95rem 1.15rem;
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  background:var(--surface-3); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.lineup tbody td{
  padding:1.15rem; border-bottom:1px solid var(--line-soft);
  vertical-align:middle; font-size:.95rem; color:var(--text-2);
}
.lineup tbody tr:last-child td{ border-bottom:0; }
.lineup tbody tr{ transition:background .16s var(--ease); }
.lineup tbody tr:hover{ background:var(--surface-3); }

.cc-cell b{
  display:block; font-family:var(--f-display); font-size:1.75rem; font-weight:800;
  color:#fff; line-height:1; letter-spacing:-.02em;
}
.cc-cell small{
  display:block; margin-top:.25rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.td-spec{ font-family:var(--f-mono); font-size:.86rem; color:var(--text-2); white-space:nowrap; }
.td-price{
  font-family:var(--f-display); font-size:1.3rem; font-weight:700; color:#fff;
  white-space:nowrap; text-align:right;
}
.td-price small{
  display:block; font-family:var(--f-mono); font-size:.64rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

.tag{
  display:inline-block;
  font-family:var(--f-mono); font-size:.64rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:2px; white-space:nowrap;
}
.tag-opt{ background:rgba(255,255,255,.07); color:var(--text-2); border:1px solid var(--line); }
.tag-mod{ background:rgba(216,21,33,.12); color:#ff6a72; border:1px solid rgba(216,21,33,.4); }

/* Las mismas filas, en tarjeta, para celular */
.lineup-cards{ display:none; }
.lineup-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); padding:1.3rem; margin-bottom:.9rem;
}
.lineup-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.lineup-card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; }
.lineup-card dt{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); padding-top:.18rem;
}
.lineup-card dd{ margin:0; font-size:.9rem; color:var(--text-2); }

/* Bloque: optimización vs modificación */
.split{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:1.2rem;
  margin-top:2.4rem;
}
.split-item{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); padding:1.6rem;
}
.split-item .tag{ margin-bottom:.9rem; }
.split-item h3{ margin-bottom:.6rem; }
.split-item p{ color:var(--muted); font-size:.95rem; margin:0; }

/* ---------------- Catálogo de componentes ---------------- */
.comp-groups{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  align-items:start;
}
.comp-group{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); overflow:hidden;
}
.comp-group-title{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  padding:.9rem 1.3rem; margin:0;
  background:var(--surface-3); border-bottom:1px solid var(--line);
}
.comp-list{ list-style:none; margin:0; padding:0; }
.comp-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
  padding:1.05rem 1.3rem; border-bottom:1px solid var(--line-soft);
}
.comp-item:last-child{ border-bottom:0; }
.comp-text b{ display:block; font-size:.97rem; color:var(--text); font-weight:500; }
.comp-text span{ display:block; font-size:.86rem; color:var(--muted); line-height:1.55; margin-top:.12rem; }
.comp-price{
  font-family:var(--f-display); font-size:1.12rem; font-weight:700;
  color:#fff; white-space:nowrap;
}

/* ---------------- Servicios ---------------- */
.cards{
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--line); overflow:hidden;
}
.card{
  background:var(--surface-2); padding:1.9rem 1.7rem;
  transition:background .18s var(--ease);
}
.card:hover{ background:var(--surface-3); }
.card-n{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--red); display:block; margin-bottom:1.1rem;
}
.card h3{ margin-bottom:.65rem; }
.card p{ color:var(--muted); font-size:.93rem; margin:0; }
.card ul{ list-style:none; margin:1.1rem 0 0; padding:0; }
.card ul li{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em;
  color:var(--text-2); padding:.38rem 0; border-top:1px solid var(--line-soft);
}

/* ---------------- Proceso ---------------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--line); overflow:hidden;
}
.step{ background:var(--surface-2); padding:1.9rem 1.6rem; }
.step-n{
  font-family:var(--f-display); font-size:2.6rem; font-weight:800;
  color:var(--surface-3); line-height:1; display:block; margin-bottom:.6rem;
  -webkit-text-stroke:1px #2c333a;
}
.step h3{ margin-bottom:.5rem; font-size:1.05rem; }
.step p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ---------------- Galería ---------------- */
.gallery{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--line); overflow:hidden;
}
.shot{
  position:relative; margin:0; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center;
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.shot:hover img{ transform:scale(1.04); }
.shot > span{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:#2e353c; text-transform:uppercase;
}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-2);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9));
}

/* ---------------- FAQ ---------------- */
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 3rem 1.25rem 0;
  font-family:var(--f-display); font-size:1.02rem; font-weight:600;
  letter-spacing:.01em; color:var(--text); position:relative;
  transition:color .16s var(--ease);
}
.faq summary:hover{ color:#fff; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:4px; top:50%; background:var(--red);
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
.faq summary::before{ width:13px; height:1.5px; margin-top:-.75px; }
.faq summary::after{ width:1.5px; height:13px; right:9.75px; margin-top:-6.5px; }
.faq details[open] summary::after{ opacity:0; transform:rotate(90deg); }
.faq-body{ padding:0 2rem 1.5rem 0; }
.faq-body p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ---------------- Contacto ---------------- */
.contact-grid{
  display:grid; gap:1.6rem;
  grid-template-columns:minmax(300px,1fr) minmax(320px,1.05fr);
  align-items:start;
}
.info-panel{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); overflow:hidden;
}
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{
  display:grid; grid-template-columns:112px 1fr; gap:1rem; align-items:baseline;
  padding:1.05rem 1.4rem; border-bottom:1px solid var(--line-soft);
}
.info-list li:last-child{ border-bottom:0; }
.info-label{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.info-val{ color:var(--text); font-size:.95rem; }
.info-val a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--line); }
.info-val a:hover{ border-bottom-color:var(--red); }
.info-val .big{
  font-family:var(--f-display); font-size:1.5rem; font-weight:700;
  letter-spacing:-.01em; border:0;
}

.socials{ display:flex; gap:.5rem; flex-wrap:wrap; padding:1.2rem 1.4rem; border-top:1px solid var(--line); }
.socials a{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:.5rem .9rem;
  transition:border-color .16s, color .16s;
}
.socials a:hover{ border-color:var(--red); color:#fff; }

.map-box{
  margin-top:1.2rem; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; min-height:230px; background:var(--surface-2);
  display:grid; place-content:center; text-align:center; gap:.35rem; padding:1.5rem;
}
.map-box span{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.map-box small{ font-size:.78rem; color:#3d444b; }
.map-box iframe{ width:100%; min-height:230px; border:0; display:block; }

.contact-form{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-2); padding:1.6rem;
}
.field{ margin-bottom:1rem; }
.field label{
  display:block; margin-bottom:.4rem;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  width:100%; padding:.78rem .85rem; font-family:var(--f-body); font-size:.95rem;
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#4e565e; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,21,33,.14);
}
.field input.invalid{ border-color:var(--red); }
.form-note{ margin:.9rem 0 0; font-size:.78rem; color:var(--dim); text-align:center; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); background:var(--surface); }
.footer-main{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.4rem;
  padding:3rem 0 2.4rem;
}
.footer-logo{ width:230px; margin-bottom:1.1rem; }
.footer-about{ color:var(--muted); font-size:.9rem; max-width:340px; margin:0; }
.footer-col h4{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.18em;
  color:var(--muted); margin-bottom:1rem; text-transform:uppercase;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:.55rem; }
.footer-col a{ color:var(--text-2); text-decoration:none; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid var(--line-soft); padding:1.3rem 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);
}

/* ---------------- Barra de progreso ---------------- */
.progress{
  position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--red-deep),var(--red-bright));
  z-index:3; transition:width .08s linear;
}

/* ---------------- Ticker ---------------- */
.ticker{
  overflow:hidden; white-space:nowrap;
  background:var(--red);
  border-block:1px solid var(--red-deep);
  padding:.62rem 0;
}
.ticker-track{
  display:inline-block; white-space:nowrap;
  animation:correr 42s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track span{
  font-family:var(--f-display); font-weight:700; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
  padding:0 1.1rem; opacity:.95;
}
.ticker-track i{ color:rgba(255,255,255,.55); font-style:normal; }
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------- Eslóganes ---------------- */
.slogan{
  font-family:var(--f-display); font-weight:700; font-style:italic;
  font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.3;
  color:#fff; margin:0 0 1rem;
  padding-left:.95rem; border-left:3px solid var(--red);
}
.slogan.center{
  border-left:0; padding:0; display:inline-block;
  position:relative; padding-bottom:.7rem;
}
.slogan.center::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:52px; height:3px; background:var(--red);
}
.footer-slogan{
  font-family:var(--f-display); font-weight:700; font-style:italic;
  font-size:1.1rem; color:#fff; margin:0 0 .8rem; line-height:1.25;
}

/* ---------------- Síntomas ---------------- */
.asks{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--line); overflow:hidden;
}
.ask{
  position:relative; background:var(--surface-2); padding:1.8rem 1.6rem 1.7rem;
  transition:background .2s var(--ease);
}
.ask::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.ask:hover{ background:var(--surface-3); }
.ask:hover::after{ transform:scaleX(1); }
.ask-q{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:1.26rem; line-height:1.15; letter-spacing:-.01em;
  color:#fff; margin-bottom:.7rem;
}
.ask p{ margin:0; color:var(--muted); font-size:.94rem; }

.ask-cta{
  margin-top:1.4rem; padding:1.6rem 1.8rem;
  border:1px solid rgba(216,21,33,.45); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(216,21,33,.10), rgba(216,21,33,.03));
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
  flex-wrap:wrap;
}
.ask-cta p{ margin:0; color:var(--text-2); font-size:1rem; max-width:640px; }

/* ---------------- Banda con foto ---------------- */
.banda{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  min-height:420px; display:grid; place-items:center;
  padding:clamp(3.4rem,7vw,5.5rem) 0;
}
.banda-img{
  position:absolute; inset:0; width:100%; height:120%; object-fit:cover;
  top:-10%; will-change:transform;
}
.banda::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,11,.82), rgba(8,9,11,.74));
}
.banda-inner{ position:relative; z-index:1; text-align:center; }
.banda-inner h2{ margin-bottom:1rem; }
.banda-inner p{ color:var(--text-2); max-width:620px; margin:0 auto 1.8rem; }

/* ---------------- Cifras ---------------- */
.cifras{ border-block:1px solid var(--line); background:var(--surface); }
.cifras-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cifra{ padding:2rem 1rem; text-align:center; border-left:1px solid var(--line-soft); }
.cifra:first-child{ border-left:0; }
.cifra strong{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; color:#fff;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.cifra span{
  display:block; margin-top:.55rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------------- Galería: estado interactivo ---------------- */
.shot{ cursor:zoom-in; }
.shot::after{
  content:"Ver"; position:absolute; top:.9rem; right:.9rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
  background:rgba(216,21,33,.92); padding:.3rem .6rem; border-radius:2px;
  opacity:0; transform:translateY(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.shot:hover::after, .shot:focus-within::after{ opacity:1; transform:none; }

/* ---------------- Visor de fotos ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,5,7,.96); backdrop-filter:blur(6px);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:.5rem; padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .2s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.open{ opacity:1; }
.lb-figure{ margin:0; text-align:center; min-width:0; }
.lb-figure img{
  max-width:100%; max-height:76vh; margin:0 auto;
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.lb-figure figcaption{
  margin-top:1rem; font-family:var(--f-mono); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2);
}
.lb-nav, .lb-close{
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:#fff;
  cursor:pointer; border-radius:var(--radius);
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.lb-nav:hover, .lb-close:hover{ background:var(--red); border-color:var(--red); }
.lb-nav{ width:48px; height:72px; font-size:2rem; line-height:1; }
.lb-close{
  position:absolute; top:1rem; right:1rem; width:44px; height:44px;
  font-size:1.7rem; line-height:1;
}
body.lb-abierto{ overflow:hidden; }

/* ---------------- Botón flotante ---------------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; background:#1faa49;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9);
  transition:transform .16s var(--ease), background .16s;
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
.wa-float:hover{ transform:scale(1.06); background:#25c155; }

/* ---------------- Animación ---------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------- Responsivo ---------------- */
@media (max-width:1040px){
  .footer-main{ grid-template-columns:1fr 1fr; }
  .banda-img{ height:100%; top:0; transform:none !important; }

}

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .lineup{ display:none; }
  .lineup-cards{ display:block; }
}

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    padding:.5rem 24px 1.4rem;
    transform:translateY(-140%); transition:transform .26s var(--ease);
    max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .nav.open{ transform:translateY(0); }
  .nav > a{ padding:.95rem .2rem; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:.95rem; }
  .nav > a.active::after{ left:.2rem; right:auto; width:22px; bottom:.5rem; }
  .nav-cta{ margin:1.1rem 0 0; border-bottom:0; justify-content:center; }
  .brand-logo{ height:40px; }
  .topbar-right .hide-sm{ display:none; }
}

@media (max-width:640px){
  .wrap{ padding-inline:18px; }
  .cifras-grid{ grid-template-columns:repeat(2,1fr); }
  .cifra:nth-child(3){ border-left:0; }
  .cifra:nth-child(n+3){ border-top:1px solid var(--line-soft); }
  .ask-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .ask-cta .btn{ width:100%; }
  .lightbox{ grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; padding:1rem; gap:.8rem; }
  .lb-nav{ width:auto; height:48px; font-size:1.6rem; }
  .lb-figure{ grid-column:1/3; grid-row:1; }
  .lb-prev{ grid-column:1; grid-row:2; }
  .lb-next{ grid-column:2; grid-row:2; }
  .lb-figure img{ max-height:64vh; }
  .hero-sub::before, .hero-sub::after{ width:16px; margin:0 .5rem; }
  .topbar{ font-size:.68rem; }
  .topbar-inner{ justify-content:center; }
  .topbar-left{ display:none; }
  .cc-chip{ min-width:50%; flex:1 1 50%; border-top:1px solid var(--line-soft); }
  .cc-chip:nth-child(odd){ border-left:0; }
  .footer-main{ grid-template-columns:1fr; gap:2rem; }
  .info-list li{ grid-template-columns:1fr; gap:.25rem; }
  .hero-actions .btn{ width:100%; }
  .q-total b{ font-size:1.7rem; }
}