/* ============================================================
   PALETA / TOKENS
   Claro por defecto · oscuro por sistema · oscuro/claro por stamp
   ============================================================ */
:root{
  --ground:#EDF0F1;
  --panel:#FFFFFF;
  --panel-2:#F6F8F9;
  --ink:#14181B;
  --ink-2:#3E4750;
  --ink-3:#6B7783;
  --line:#D2D9DD;
  --line-strong:#AAB5BC;
  --accent:#1140D8;
  --accent-2:#0B2E9B;
  --accent-soft:rgba(17,64,216,.08);
  --signal:#D9491A;
  --ok:#137355;
  --plate-sheen:rgba(20,24,27,.045);
  --rivet:#C4CDD3;
  --shadow:0 1px 0 rgba(20,24,27,.05), 0 12px 28px -22px rgba(20,24,27,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1214;
    --panel:#171C20;
    --panel-2:#1C2328;
    --ink:#E9EEF0;
    --ink-2:#B4BFC6;
    --ink-3:#818E97;
    --line:#293238;
    --line-strong:#3B464D;
    --accent:#7098FF;
    --accent-2:#A9C1FF;
    --accent-soft:rgba(112,152,255,.12);
    --signal:#FF8348;
    --ok:#3FBF93;
    --plate-sheen:rgba(255,255,255,.035);
    --rivet:#39444B;
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 14px 30px -22px #000;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;   /* scrollbars y controles del navegador oscuros */
  --ground:#0E1214;
  --panel:#171C20;
  --panel-2:#1C2328;
  --ink:#E9EEF0;
  --ink-2:#B4BFC6;
  --ink-3:#818E97;
  --line:#293238;
  --line-strong:#3B464D;
  --accent:#7098FF;
  --accent-2:#A9C1FF;
  --accent-soft:rgba(112,152,255,.12);
  --signal:#FF8348;
  --ok:#3FBF93;
  --plate-sheen:rgba(255,255,255,.035);
  --rivet:#39444B;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 14px 30px -22px #000;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
:root{
  --display:"Helvetica Neue Condensed Bold","HelveticaNeue-CondensedBold","Arial Narrow","Roboto Condensed","Liberation Sans Narrow",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  padding-bottom:76px;
}
@media (min-width:760px){ body{padding-bottom:0} }

.wrap{width:min(1120px,100% - 2.4rem);margin-inline:auto}
.sec{padding-block:clamp(3rem,7vw,5.5rem)}
.sec + .sec{border-top:1px solid var(--line)}

h1,h2,h3{
  font-family:var(--display);
  font-stretch:condensed;
  font-weight:700;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
  line-height:.94;
  letter-spacing:.005em;
}
p{margin:0}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0;
}

/* ============================================================
   PLACA DE DATOS (HERO)
   ============================================================ */
.hero{padding-block:clamp(1.6rem,4vw,3rem) clamp(3rem,6vw,4.5rem)}

.plate{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:clamp(1.6rem,4.4vw,3.4rem);
  overflow:hidden;
}
.plate::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,var(--plate-sheen) 0 1px,transparent 1px 4px);
  pointer-events:none;
}
.plate::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid var(--line);
  pointer-events:none;
}
.rivet{
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--rivet);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.28);
}
.rivet.tl{top:16px;left:16px}
.rivet.tr{top:16px;right:16px}
.rivet.bl{bottom:16px;left:16px}
.rivet.br{bottom:16px;right:16px}

.plate-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.5rem}

.status{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.1rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
}
.status .dot{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  display:inline-block;margin-right:.45rem;vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){ .status .dot{animation:none} }

/* "Revisión gratis" en la barra de estado.
   El texto NO parpadea: sobre blanco un verde oscuro pierde legibilidad al
   bajar la opacidad (medido: caía a 2.6:1). Lo que late es un fondo tenue
   detrás, como una etiqueta de estado encendida — mismo verde --ok del punto
   de "técnicos disponibles" y mismo compás de 2.4s, esquinas rectas para no
   romper la estética de placa. */
.status .gratis{
  color:var(--ok);
  font-weight:700;
  display:inline-block;
  padding:.16rem .45rem;
  margin:-.16rem 0;
  background:color-mix(in srgb,var(--ok) 13%,transparent);
  animation:latido 2.4s ease-in-out infinite;
}
@keyframes latido{
  0%,100%{background-color:color-mix(in srgb,var(--ok) 15%,transparent)}
  50%    {background-color:color-mix(in srgb,var(--ok) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .status .gratis{animation:none}
}

.status .sep{color:var(--line-strong)}
/* En pantallas angostas la barra de estado se parte en varias líneas y las
   barras "/" quedan huérfanas al inicio de un renglón. Ahí sobran: el salto de
   línea ya separa los datos. */
@media (max-width:620px){
  .status{flex-direction:column;align-items:flex-start;gap:.5rem}
  .status .sep{display:none}
}


h1{font-size:clamp(2.6rem,8.6vw,5.4rem)}
h1 .lead-line{display:block;color:var(--accent)}

.hero-sub{
  max-width:52ch;
  font-size:clamp(1rem,2.3vw,1.14rem);
  color:var(--ink-2);
}

/* Ficha técnica */
.spec{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.spec div{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.85rem 1rem;
  background:var(--panel-2);
}
.spec dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 .3rem;
}
.spec dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.3}

/* ============================================================
   BOTONES
   ============================================================ */
.actions{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.5rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,background-color .15s ease,border-color .15s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
:root[data-theme="dark"] .btn-primary{color:#0B1016}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-primary{color:#0B1016}}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.sec-head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.2rem;max-width:60ch}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,3rem)}
.sec-head p{color:var(--ink-2)}

.grid{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.card{
  background:var(--panel);
  padding:1.5rem 1.4rem 1.6rem;
  display:flex;flex-direction:column;gap:.65rem;
  transition:background-color .15s ease;
}
.card:hover{background:var(--panel-2)}
.card .ico{color:var(--accent);width:34px;height:34px}
.card h3{font-size:1.32rem;letter-spacing:.02em}
.card p{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.card .faults{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:auto;padding-top:.7rem;border-top:1px dashed var(--line);
}

/* ============================================================
   REPUESTOS
   ============================================================ */
.split{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media (min-width:880px){ .split{grid-template-columns:.85fr 1.15fr;gap:3.2rem} }

.parts{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  padding:.5rem .8rem;
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--ink-2);
}
.note{
  margin-top:1.4rem;padding:1rem 1.2rem;
  border-left:3px solid var(--signal);
  background:var(--panel);
  font-size:.93rem;color:var(--ink-2);
}
.note strong{color:var(--ink)}

/* ============================================================
   PROCESO (secuencia real → numeración justificada)
   ============================================================ */
.steps{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  counter-reset:step;
}
.step{background:var(--panel);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--accent);font-weight:700;
}
.step h3{font-size:1.18rem}
.step p{font-size:.89rem;color:var(--ink-2)}

/* ============================================================
   COBERTURA / FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:68ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:1.05rem 0;list-style:none;
  font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.15rem}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 1.15rem;color:var(--ink-2);font-size:.94rem;max-width:62ch}

/* ============================================================
   CIERRE
   ============================================================ */
.closer{background:var(--panel);border:1px solid var(--line-strong);padding:clamp(1.8rem,5vw,3.2rem);box-shadow:var(--shadow)}
.closer h2{font-size:clamp(2rem,5.4vw,3.4rem);margin-bottom:.9rem}
.closer .tel{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.5rem,5.2vw,2.4rem);
  letter-spacing:.02em;color:var(--accent);text-decoration:none;
  display:inline-block;margin-block:.4rem 1.4rem;
  font-variant-numeric:tabular-nums;
}
.closer .tel:hover{text-decoration:underline;text-underline-offset:5px}

.legal{
  padding-block:1.8rem 2.6rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
}

/* ============================================================
   BARRA FIJA MÓVIL
   ============================================================ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-strong);
  border-top:1px solid var(--line-strong);
}
.bar a{
  padding:1.05rem .8rem;text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.bar .call{background:var(--panel);color:var(--ink)}
.bar .wa{background:var(--accent);color:#fff}
:root[data-theme="dark"] .bar .wa{color:#0B1016}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bar .wa{color:#0B1016}}
@media (min-width:760px){ .bar{display:none} }

/* ============================================================
   FOTOS EN TARJETAS (página principal)
   ============================================================ */
a.card{text-decoration:none;color:inherit}
.card picture{display:flex;justify-content:center}
.card .photo{display:block;width:auto;max-width:100%;height:280px;object-fit:contain;margin:0 auto .4rem;filter:drop-shadow(0 14px 12px rgba(20,24,27,.22))}
.card .more{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-top:.5rem}
.card:hover .more{text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   PÁGINAS POR EQUIPO
   ============================================================ */
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-decoration:none}
.crumb:hover{color:var(--accent)}
.plate-cols{display:grid;gap:2.2rem;align-items:center;grid-template-columns:1fr}
@media (min-width:860px){ .plate-cols{grid-template-columns:1.12fr .88fr} }
.hero-img{display:block;width:auto;height:auto;max-width:100%;max-height:460px;margin-inline:auto;filter:drop-shadow(0 22px 18px rgba(0,0,0,.3))}

.fallas{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.falla{background:var(--panel);padding:1.3rem 1.35rem;display:flex;flex-direction:column;gap:.45rem}
.falla h3{font-size:1.16rem}
.falla p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.falla .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--signal);text-transform:uppercase;font-weight:700}
.plate-cols h1{font-size:clamp(2.2rem,5.6vw,4.2rem)}

/* La línea azul del titular normalmente son 2-3 palabras ("Revisión Gratis").
   En las páginas por equipo carga la lista de cobertura completa, que a tamaño
   de titular desbordaría la placa: se asienta más pequeña y con más interlínea,
   leyéndose como subtítulo sin dejar de ser parte del h1. */
h1 .lead-cobertura{
  font-size:.44em;
  line-height:1.15;
  letter-spacing:.01em;
  margin-top:.35em;
  text-wrap:balance;
}

/* En móvil la foto va PRIMERO: es lo que da la señal antes que el texto.
   En escritorio se mantiene al lado, que ahí se ven las dos cosas de un vistazo. */
@media (max-width:859px){
  .plate-cols{gap:1.4rem}
  .plate-cols picture{order:-1}
  /* 230px: la foto sigue siendo lo primero que se ve, pero deja el titular
     y el botón de WhatsApp dentro de la primera pantalla. */
  .hero-img{max-height:230px}
}


/* ============================================================
   ANCLAS PARA VÍNCULOS DE GOOGLE ADS
   El destino no queda pegado al borde superior al saltar
   ============================================================ */
/* Salto instantáneo a propósito: el scroll suave se congela en pestañas
   en segundo plano y puede fallar al abrir un anuncio. */
:target{scroll-margin-top:1.5rem}
#garantia,#cobertura{scroll-margin-top:2.5rem}