/* =====================================================
   MULTISERVICIO AUTOMOTRIZ SB — Design Tokens v1.0 (Fase 2 §2, bloqueados)
   Sistema "Claridad Técnica". Compartido por TODAS las páginas: Inicio,
   las 30 páginas de Servicio (CPT), Landings de Ads, y páginas Elementor.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');
/* PRODUCCIÓN: reemplazar este @import por un archivo de fuente variable
   autoalojado (1-2 requests) — ver Fase 2 §2, nota de rendimiento. */

:root{
  --navy-950:#0A1830;
  --navy-800:#0F2A4D;
  --navy-700:#1B3D6B;
  --navy-100:#E7ECF3;

  --amber-600:#B9790E;
  --amber-500:#E3A729;
  --amber-100:#FBF0DA;

  --white:#FFFFFF;
  --gray-50:#F7F8FA;
  --gray-100:#EEF1F4;
  --gray-200:#E2E6EC;
  --gray-400:#9AA5B4;

  --ink-900:#12161C;
  --ink-600:#4B5565;

  --warm-1:#EFE6D8;
  --warm-2:#E4D2AE;

  --font-base:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:2.75rem; --text-5xl:3.25rem;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4rem; --sp-7:6rem;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(10,24,48,.06),0 1px 3px rgba(10,24,48,.08);
  --shadow-md:0 8px 20px rgba(10,24,48,.10),0 2px 6px rgba(10,24,48,.06);
  --shadow-lg:0 20px 40px rgba(10,24,48,.16);

  --ease:cubic-bezier(.22,.8,.24,1);
  --dur-fast:150ms; --dur-base:280ms; --dur-slow:520ms;

  --container-max:1240px;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font-base);color:var(--ink-900);background:var(--white);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-base);line-height:1.14;margin:0 0 .45em;font-weight:600;letter-spacing:-.01em;}
p{margin:0 0 1em;color:var(--ink-600);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;background:none;border:0;cursor:pointer;}

.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--sp-2);}
.skip-link{position:absolute;left:0;top:-48px;background:var(--navy-800);color:#fff;padding:.75rem 1rem;z-index:1000;transition:top .15s ease;}
.skip-link:focus{top:0;}
:focus-visible{outline:3px solid var(--amber-500);outline-offset:2px;}

.ds-label,.module-tag{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:var(--text-xs);
  color:var(--navy-800);font-weight:500;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--navy-100);padding:.35rem .8rem;border-radius:var(--radius-pill);margin-bottom:var(--sp-2);
}
.svc-lede{font-size:var(--text-lg);max-width:60ch;color:var(--ink-600);}
.ds-note{font-size:var(--text-sm);color:var(--ink-600);}

/* La animación de entrada se activa SOLO si el JS que la controla está vivo:
   la clase .js-reveal la pone un script inline en <head> (ver functions.php).
   Sin esa clase el contenido se ve siempre. Antes .reveal era opacity:0 de
   entrada y el observador nunca existió, así que todo lo que llevaba .reveal
   quedaba invisible en el sitio publicado — no ocultar contenido detrás de
   una animación que puede no ejecutarse. */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.js-reveal .reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1;transform:none;transition:none;} }

.placeholder-warm,.placeholder-media{
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--navy-800);font-size:.85rem;padding:var(--sp-2);min-height:220px;border-radius:var(--radius-lg);
}
.placeholder-warm{background:linear-gradient(135deg,var(--warm-1),var(--warm-2));font-weight:500;}
.placeholder-media{background:repeating-linear-gradient(135deg,#eef1f5,#eef1f5 10px,#e6e9ee 10px,#e6e9ee 20px);border:1px dashed #b9c0cc;color:var(--ink-600);}

/* fill/stroke en .icon (no en selectores descendientes): los íconos se
   referencian con <use href="#icon-x"> y el contenido del <symbol> solo
   hereda propiedades SVG heredables, no reglas de selector de descendencia. */
.icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* =====================================================
   BOTONES
   ===================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;
  border-radius:var(--radius-sm);font-weight:600;font-size:var(--text-base);border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
  white-space:nowrap;cursor:pointer;
  /* Un <button> no hereda tipografía del body como sí lo hace un <a>. Sin
     esto, los botones de pago saldrían en la fuente del sistema. */
  font-family:inherit;line-height:inherit;
}
.btn:hover{transform:translateY(-1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(227,167,41,.4);}
.btn-primary{background:var(--amber-500);color:var(--navy-950);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:#cf951f;box-shadow:var(--shadow-md);}
.btn-secondary{background:var(--navy-800);color:#fff;}
.btn-secondary:hover{background:var(--navy-950);}
.btn-outline{background:transparent;border-color:var(--navy-800);color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-800);color:#fff;}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-lg{padding:1rem 1.75rem;font-size:var(--text-lg);}
.btn-sm{padding:.55rem .9rem;font-size:.85rem;}

/* =====================================================
   ESTADOS — Reportado / En curso / Verificado / Recomendación
   ===================================================== */
.state{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;}
.state-reported{background:var(--gray-100);color:var(--ink-600);}
.state-verified{background:var(--amber-100);color:var(--amber-600);font-weight:600;}
.state-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* =====================================================
   MARCO DE EVIDENCIA — activo visual central del sistema
   ===================================================== */
.evidence-frame{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(135deg,var(--gray-100),var(--navy-100));border:1px solid var(--gray-200);}
.ef-corner{position:absolute;width:22px;height:22px;border-color:var(--amber-500);}
.ef-corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid;border-radius:4px 0 0 0;}
.ef-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid;border-radius:0 4px 0 0;}
.ef-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 4px;}
.ef-corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 4px 0;}
.ef-caption{position:absolute;bottom:var(--sp-1);left:var(--sp-1);right:var(--sp-1);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--navy-950);background:rgba(255,255,255,.88);backdrop-filter:blur(4px);padding:.4rem .7rem;border-radius:var(--radius-sm);}
.ef-pin{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--navy-950);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;box-shadow:0 0 0 3px rgba(255,255,255,.85);}
.ef-pin.verified{background:var(--amber-500);color:var(--navy-950);}
.ef-findings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.ef-findings li{display:flex;gap:.75rem;align-items:flex-start;}
.ef-findings .ef-num{width:22px;height:22px;border-radius:50%;background:var(--navy-100);color:var(--navy-800);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;margin-top:1px;}
.ef-findings li.is-verified .ef-num{background:var(--amber-500);color:var(--navy-950);}
.ef-findings .ef-tag{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-900);display:block;}
.ef-findings .ef-desc{font-size:var(--text-sm);color:var(--ink-600);margin:.15rem 0 0;}
.link-arrow{font-weight:700;color:var(--navy-950);}

/* =====================================================
   HEADER + NAV
   ===================================================== */
/* Sin backdrop-filter a propósito: creaba un containing block nuevo que rompía
   el position:fixed del menú lateral en móvil, y por eso el <nav> vivía fuera
   del <header>. Con un fondo casi opaco se ve prácticamente igual y permite
   tener logo, menú y botones en una sola fila. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid var(--gray-200);height:var(--header-h);}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;flex-shrink:0;}
/* El cuadro con las iniciales pasó a ser el logo real (assets/img). */
.logo-mark{width:38px;height:38px;object-fit:contain;flex-shrink:0;display:block;}
.logo-text{display:none;font-size:.95rem;}
.logo-text strong{color:var(--amber-600);}

/* En móvil el nav es un panel lateral fijo; en escritorio (ver más abajo) se
   convierte en una fila más dentro de .header-inner. */
.main-nav{
  position:fixed;top:var(--header-h);right:0;bottom:0;left:0;background:#fff;
  transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;padding:var(--sp-3);z-index:99;
}
.main-nav.is-open{transform:translateX(0);}
.main-nav ul{display:flex;flex-direction:column;gap:.25rem;}
.main-nav a{display:block;padding:.85rem 0;font-weight:600;border-bottom:1px solid var(--gray-200);}

.header-actions{display:none;align-items:center;gap:1rem;}
.phone-link{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--navy-800);}
.menu-toggle{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;}
.menu-toggle span{width:22px;height:2px;background:var(--ink-900);transition:transform .2s ease,opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Mega-menú de Servicios (Fase 2 §6) ---------- */
.mega-menu{padding-top:var(--sp-2);}
.mega-menu-toggle{display:flex;align-items:center;gap:.3rem;}
.mega-menu-toggle .icon{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease);}
.mega-menu-panel{display:none;flex-direction:column;gap:0;padding-left:var(--sp-2);border-left:2px solid var(--gray-200);margin:.25rem 0 .75rem;}
.mega-menu.is-open .mega-menu-panel{display:flex;}
.mega-menu.is-open .mega-menu-toggle .icon{transform:rotate(180deg);}
.mega-menu-cluster{padding:.5rem 0;}
.mega-menu-cluster-title{display:block;font-weight:700;color:var(--navy-950);padding:.4rem 0 !important;border:0 !important;}
.mega-menu-cluster a{padding:.5rem 0 !important;font-weight:500 !important;font-size:.88rem;color:var(--ink-600);border:0 !important;}
.mega-menu-cluster .mega-menu-ver-todos{color:var(--amber-600);font-weight:600 !important;}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb{padding:var(--sp-2) 0;background:var(--gray-50);border-bottom:1px solid var(--gray-200);}
.breadcrumb-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:var(--text-xs);color:var(--ink-600);}
.breadcrumb-inner a{color:var(--navy-800);font-weight:500;}
.breadcrumb-inner a:hover{color:var(--amber-600);}
.breadcrumb-inner [aria-current="page"]{color:var(--ink-600);}

/* =====================================================
   FAQ ACCORDION (nativo <details>/<summary> — cero JS, accesible por defecto)
   ===================================================== */
.faq-accordion{display:flex;flex-direction:column;gap:.6rem;}
.faq-item{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:0 var(--sp-2);}
.faq-item summary{padding:var(--sp-2) 0;font-weight:600;cursor:pointer;list-style:none;color:var(--navy-950);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';float:right;color:var(--amber-600);font-weight:700;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{padding-bottom:var(--sp-2);margin:0;}

/* =====================================================
   CHECKLISTS incluye / no-incluye
   ===================================================== */
.benefit-list{display:flex;flex-direction:column;gap:.6rem;margin:var(--sp-2) 0 var(--sp-3);}
/* El ítem NO puede ser flex: con flex, un <strong> dentro del texto se
   convierte en un item aparte y queda en su propia columna, con el resto de
   la frase desalineado al lado. Se ve apenas una viñeta lleva negritas, como
   en Empresas y Flotas. Con posicionamiento absoluto del icono, el texto
   fluye completo y admite cualquier marcado interno. */
.benefit-list li{
  display:block;position:relative;padding-left:1.7rem;
  font-size:var(--text-base);color:var(--ink-900);
}
.benefit-list li > .icon,
.benefit-list li > .icon-minus{position:absolute;left:0;top:.2em;}
.benefit-list-positive .icon{color:var(--amber-600);flex-shrink:0;}
.benefit-list-negative{color:var(--ink-600);}
.benefit-list-negative li{color:var(--ink-600);}
.icon-minus{width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-400);font-weight:700;}
.svc-incluye-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
@media (min-width:700px){ .svc-incluye-grid{grid-template-columns:1fr 1fr;} }

/* Las dos columnas necesitan leerse como opuestas de un vistazo: encabezado
   propio, fondo distinto y borde de color. Sin eso, "no incluye" se confunde
   con más cosas incluidas. */
.incluye-col{padding:var(--sp-3);border-radius:var(--radius-lg);border:1px solid var(--gray-200);}
.incluye-col-si{background:#fff;border-left:3px solid var(--amber-500);}
.incluye-col-no{background:var(--gray-50);border-left:3px solid var(--gray-400);}
.incluye-titulo{
  display:flex;align-items:center;gap:.5rem;font-size:var(--text-base);
  color:var(--navy-950);margin-bottom:var(--sp-2);
}
.incluye-col-si .incluye-titulo .icon{color:var(--amber-600);}
.incluye-col-no .incluye-titulo{color:var(--ink-600);}
.incluye-col .benefit-list{margin-top:0;margin-bottom:0;}
.incluye-nota{
  margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--gray-200);
  font-size:var(--text-sm);color:var(--ink-600);
}
.incluye-nota strong{color:var(--navy-950);}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{background:#0a1522;color:#c9d2de;padding:var(--sp-6) 0 var(--sp-3);}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.footer-brand p{margin:.25rem 0;}
.footer-brand .logo-mark{margin-bottom:var(--sp-2);}
/* El pie concentra dirección, teléfonos y horario — lo que más se consulta.
   El gris de origen quedaba muy apagado sobre el fondo oscuro. */
.footer-brand p,.footer-nap{color:#e8edf4;}
.footer-nap a{color:#fff;font-weight:500;}
.footer-hours{color:#cbd5e1 !important;}
.footer-nav a{color:#e8edf4;}
.footer-nav a:hover{color:var(--amber-500);}
.footer-hours{color:#8b97a8;font-size:.85rem;}
.footer-nav h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;}
.footer-nav li{margin-bottom:.5rem;}
.footer-nav a{color:#c9d2de;font-size:.9rem;}
/* Solo se pinta cuando hay mapa real (ver footer.php): el recuadro punteado
   de "pendiente" dejaba un hueco visible en el pie del sitio publicado. */
.footer-map{min-height:160px;border-radius:var(--radius-md);overflow:hidden;background:#12212f;}
.footer-bottom{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid #1c2a38;font-size:.8rem;color:#8b97a8;}
.footer-social{display:flex;gap:1rem;}
.footer-social a{color:#c9d2de;}
@media (min-width:860px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
  /* Con mapa cargado vuelve a cuatro columnas. :has() lo resuelve sin JS ni
     clases extra; donde no esté soportado, quedan tres y el mapa baja — que
     es una degradación aceptable, no un layout roto. */
  .footer-grid:has(.footer-map){grid-template-columns:1.4fr 1fr 1fr 1.4fr;}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
}

/* =====================================================
   CTA FINAL — compartido por Inicio, Servicio y Landing
   ===================================================== */
.final-cta{padding:var(--sp-6) 0;background:var(--navy-950);color:#fff;text-align:center;}
.final-cta h2{font-size:clamp(1.6rem,4vw,2.25rem);color:#fff;margin-bottom:.4rem;}
.final-cta p{color:#A9B7CA;margin-bottom:var(--sp-3);}
.final-cta-actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch;max-width:380px;margin-inline:auto;}
@media (min-width:640px){ .final-cta-actions{flex-direction:row;max-width:none;justify-content:center;} }

/* =====================================================
   STICKY MOBILE CTA + WHATSAPP FLOAT
   ===================================================== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:.5rem;padding:.6rem;background:#fff;border-top:1px solid var(--gray-200);box-shadow:0 -4px 12px rgba(0,0,0,.06);}
.sticky-cta-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem;border-radius:var(--radius-sm);font-weight:700;font-size:.9rem;border:2px solid var(--navy-800);color:var(--navy-800);}
.sticky-cta-primary{background:var(--navy-800);color:#fff;}
.whatsapp-float{position:fixed;right:1rem;bottom:4.75rem;z-index:95;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);}

/* =====================================================
   CADENA DE PROCESO (4 pasos) — compartida entre Inicio y Servicio
   ===================================================== */
.process-steps{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
.process-steps li{background:var(--gray-50);border-radius:var(--radius-md);padding:var(--sp-3);position:relative;}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--amber-500);color:var(--navy-950);font-weight:800;margin-bottom:.75rem;font-family:var(--font-mono);}
.process-steps h3{font-size:1.05rem;}
.process-steps p{color:var(--ink-600);font-size:.92rem;margin:0;}
@media (min-width:600px){ .process-steps{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .process-steps{grid-template-columns:repeat(4,1fr);} }

/* =====================================================
   CARDS genéricas (servicio, artículo)
   ===================================================== */
.services-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);}
.service-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-3);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}
.service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.service-card h3{font-size:1rem;color:var(--navy-950);margin-bottom:.35rem;}
.service-card p{font-size:.88rem;color:var(--ink-600);margin:0;}
@media (min-width:640px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .services-grid{grid-template-columns:repeat(3,1fr);} }

/* =====================================================
   BREAKPOINTS — header/nav/footer
   ===================================================== */
@media (min-width:1200px){
  .logo-text{display:inline;}
  /* Logo y botones no se encogen: el que cede espacio es el menú del centro. */
  .logo{flex-shrink:0;}
  .header-actions{display:flex;flex-shrink:0;}
  .menu-toggle{display:none;}
  /* El nav deja de ser panel lateral y pasa a ocupar el espacio libre entre el
     logo y los botones, centrado. */
  .main-nav{position:static;transform:none;top:auto;right:auto;bottom:auto;left:auto;padding:0;background:transparent;overflow:visible;flex:1 1 auto;min-width:0;}
  .main-nav ul{flex-direction:row;gap:1.15rem;align-items:center;justify-content:center;}
  .main-nav > ul > li > a,.mega-menu-toggle{padding:0;border:0;font-weight:600;font-size:.875rem;white-space:nowrap;}
}

/* Entre 1200 y 1360px el número de teléfono es lo primero que sobra: se deja
   solo el ícono, que sigue siendo pulsable, y el menú recupera aire. */
@media (min-width:1200px) and (max-width:1360px){
  .phone-link span{display:none;}
  .main-nav ul{gap:.9rem;}
}

@media (min-width:1200px){

  /* El panel se ancla al NAV completo, no al ítem "Servicios": centrado sobre
     el ítem se salía de la pantalla, y anclado a su borde izquierdo se saldría
     por la derecha ahora que el menú está al centro. Colgando del nav siempre
     queda dentro del contenedor. */
  .main-nav{position:relative;}
  /* padding-top:0 anula el que necesita el acordeón en móvil. Sin esto,
     "Servicios" aparecía 1rem más abajo que el resto de los ítems. */
  .mega-menu{position:static;padding-top:0;display:flex;align-items:center;}
  .mega-menu-toggle{line-height:1;}
  .mega-menu-panel{
    display:flex !important;flex-direction:row;flex-wrap:wrap;gap:var(--sp-3);
    position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
    background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
    padding:var(--sp-3);width:min(880px,88vw);border-left:0;margin:0;
    opacity:0;visibility:hidden;pointer-events:none;
    /* El retardo de 220ms en `visibility` da margen para cruzar del botón al
       panel. Sin él, al soltar el puntero el panel desaparecía de golpe y no
       alcanzabas a llegar. */
    transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility 0s linear .22s;
  }

  /* Puente invisible que cubre el espacio entre el botón y el panel. Como es
     hijo del panel, mantener el puntero ahí conserva el :hover del <li>. */
  .mega-menu-panel::before{
    content:"";position:absolute;left:0;right:0;top:-22px;height:22px;
  }

  .mega-menu:hover .mega-menu-panel,
  .mega-menu:focus-within .mega-menu-panel,
  .mega-menu.is-open .mega-menu-panel{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility 0s;
  }
  .mega-menu-cluster{flex:1 1 190px;padding:0;}

  .sticky-cta{display:none;}
}

/* ---------- Promovidos desde inicio.css ----------
   Nacieron en la home, pero hoy los usan también las fichas de servicio
   (.symptom-chip, con el modificador .symptom-chip-static en servicio.css),
   SB Lab (.lede, .hero-full-eyebrow) y las entradas del blog. Como inicio.css
   solo se encola en la plantilla de la home, ahí quedaban sin estilo. */
.lede{font-size:var(--text-lg);max-width:60ch;color:var(--ink-600);}
.hero-full-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.07em;color:#F3D896;margin-bottom:var(--sp-2);}
.symptom-picker{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--sp-3) 0;}
.symptom-chip{
  padding:.65rem 1.1rem;border-radius:var(--radius-pill);border:1.5px solid var(--gray-200);
  background:#fff;font-weight:600;font-size:var(--text-sm);color:var(--navy-800);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.symptom-chip:hover{border-color:var(--navy-800);}
.symptom-chip[aria-pressed="true"]{background:var(--amber-500);border-color:var(--amber-500);color:var(--navy-950);}

/* Envoltorio del CTA final: limita el ancho del texto centrado para que en
   pantallas anchas el párrafo no cruce toda la pantalla. */
.final-cta-inner{max-width:680px;margin-inline:auto;}
.footer-legal{font-size:var(--text-xs);color:#7C8CA3;}

/* ---------- Tarjetas de ruta ----------
   Nacieron en la portada pero las reutiliza /contacto/ para ofrecer las
   tres vías de contacto. Viven acá porque inicio.css solo se encola en
   la plantilla de la home. */
.path-selector{padding:var(--sp-6) 0 var(--sp-5);}
.path-selector h2{font-size:clamp(1.5rem,3.6vw,2.25rem);color:var(--navy-950);}
.path-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
.path-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:var(--sp-3);
  border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);background:#fff;
  transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.path-card:hover{box-shadow:var(--shadow-lg);border-color:var(--amber-500);transform:translateY(-3px);}
.path-icon{width:48px;height:48px;border-radius:var(--radius-md);background:var(--navy-950);color:var(--amber-500);display:flex;align-items:center;justify-content:center;margin-bottom:.25rem;}
.path-card h3{font-size:var(--text-lg);color:var(--navy-950);}
.path-card p{font-size:var(--text-sm);margin-bottom:.25rem;}
.path-cta{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--amber-600);font-size:var(--text-sm);}
@media (min-width:700px){ .path-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1100px){ .path-grid{grid-template-columns:repeat(4,1fr);} }
.path-module{padding:var(--sp-6) 0;}
.path-module-alt{background:var(--gray-50);}
.path-module h2{font-size:clamp(1.5rem,3.6vw,2.25rem);color:var(--navy-950);}
.path-module-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:center;}
.path-module-grid > *{min-width:0;} /* evita que un botón nowrap fuerce el ancho de la columna 1fr */
@media (min-width:900px){ .path-module-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5);} }

/* El logo del pie va sobre fondo oscuro y necesita algo más de aire. */
.footer-brand .logo-mark{width:52px;height:52px;}

/* ---------- Franja de compromisos (template-parts/promesas.php) ----------
   Tres tarjetas parejas. No llevan ámbar de fondo: el ámbar está reservado
   para evidencia verificada, y esto es una promesa, no un hallazgo. */
.promesas-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:860px){ .promesas-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-3);} }
.promesa-card{
  background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--amber-500);
  border-radius:var(--radius-lg);padding:var(--sp-3);
}
.svc-section-alt .promesa-card{background:#fff;}
.promesa-icono{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--radius-sm);background:var(--navy-100);color:var(--navy-800);margin-bottom:var(--sp-2);
}
.promesa-card h3{font-size:var(--text-base);color:var(--navy-950);margin-bottom:.4rem;line-height:1.3;}
.promesa-card p{font-size:var(--text-sm);color:var(--ink-600);margin:0;}

/* ---------- CTA de dos escalones (template-parts/cta-guia.php) ---------- */
.final-cta-bajada{max-width:56ch;margin-inline:auto;}
.cta-prueba{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;
  margin-top:var(--sp-3);margin-bottom:0;font-size:var(--text-sm);color:#A9B7CA;
}
.cta-prueba .stars{margin-top:0;}

/* ---------- Precio de referencia en la ficha de servicio ---------- */
.precio-ficha{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem var(--sp-2);
  margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);
}
.precio-ficha strong{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--navy-950);line-height:1.1;}
.precio-ficha .precio-nota{font-size:var(--text-sm);color:var(--ink-600);flex:1 1 22ch;margin:0;}
.precio-ficha a{font-size:var(--text-sm);white-space:nowrap;}

/* =========================================================================
   GUÍAS POR SÍNTOMA
   Ver inc/sintomas.php. Viven en global.css y no en un archivo aparte porque
   varios de estos bloques (costo-box, mito-box, causas-lista) se reutilizan
   en Segunda opinión y en las fichas de servicio.
   ========================================================================= */

/* ---------- Semáforo de urgencia ----------
   Tres niveles con color propio. El rojo es el único lugar del sistema donde
   usamos un tono de alarma: está reservado para "no sigas manejando". */
.urgencia-box{
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);max-width:64ch;
  background:#fff;border:1px solid var(--gray-200);border-left-width:4px;border-radius:var(--radius-md);
}
.urgencia-box p{margin:0;font-size:var(--text-sm);color:var(--ink-900);}
.urgencia-etiqueta{
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.urgencia-alta{border-left-color:#B42318;}
.urgencia-alta .urgencia-etiqueta{color:#B42318;}
.urgencia-media{border-left-color:var(--amber-500);}
.urgencia-media .urgencia-etiqueta{color:var(--amber-600);}
.urgencia-baja{border-left-color:var(--navy-800);}
.urgencia-baja .urgencia-etiqueta{color:var(--navy-800);}

.urgencia-punto{
  display:block;width:10px;height:10px;border-radius:50%;margin-bottom:.6rem;
  background:var(--navy-800);
}
.urgencia-punto.urgencia-alta{background:#B42318;border:0;}
.urgencia-punto.urgencia-media{background:var(--amber-500);border:0;}
.urgencia-punto.urgencia-baja{background:var(--navy-800);border:0;}

/* ---------- Lista de causas ---------- */
.causas-lista{list-style:none;display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);padding:0;}
.causa-item{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2);align-items:start;
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-3);
}
.svc-section-alt .causa-item{background:#fff;}
.causa-num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--navy-950);color:#fff;font-family:var(--font-mono);
  font-weight:700;font-size:var(--text-sm);flex-shrink:0;
}
.causa-cuerpo h3{font-size:1.05rem;color:var(--navy-950);margin-bottom:.45rem;}
.causa-senal{font-size:var(--text-sm);color:var(--ink-900);margin-bottom:.4rem;}
.causa-senal strong{color:var(--navy-950);}
.causa-implica{font-size:var(--text-sm);color:var(--ink-600);margin:0;}

/* ---------- "Antes de que te coticen" ----------
   El bloque que dice qué NO hace falta cambiar. Lleva el borde ámbar porque
   es el argumento de confianza del sitio, no un aviso más. */
.mito-box{
  max-width:70ch;background:#fff;border:1px solid var(--gray-200);border-left:4px solid var(--amber-500);
  border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4);
}
.mito-box h2{font-size:clamp(1.3rem,3vw,1.75rem);color:var(--navy-950);margin:.4rem 0 .6rem;}
.mito-box p{color:var(--ink-900);margin-bottom:var(--sp-2);}
.mito-box p:last-child{margin-bottom:0;}

/* ---------- Cuánto cuesta averiguarlo ---------- */
.costo-box{
  margin-top:var(--sp-3);max-width:64ch;padding:var(--sp-3);
  background:var(--navy-950);color:#fff;border-radius:var(--radius-lg);
}
.costo-box strong{display:block;font-family:var(--font-mono);font-size:var(--text-xl);color:var(--amber-500);margin-bottom:.5rem;}
.costo-box p{color:#D8E0EC;font-size:var(--text-sm);margin-bottom:var(--sp-2);}
.costo-box p strong{display:inline;font-family:inherit;font-size:inherit;color:#fff;}
.costo-box a{color:var(--amber-500);font-size:var(--text-sm);}

/* ---------- Hub de síntomas ---------- */
.sintomas-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);}
@media (min-width:700px){ .sintomas-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .sintomas-grid{grid-template-columns:repeat(3,1fr);} }
.sintoma-card{
  display:block;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:var(--sp-3);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.sintoma-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.sintoma-card h3{font-size:1.1rem;color:var(--navy-950);margin-bottom:.45rem;}
.sintoma-card p{font-size:var(--text-sm);color:var(--ink-600);margin-bottom:.75rem;}
.sintoma-card-mas{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--navy-800);text-transform:uppercase;letter-spacing:.03em;}
.sintoma-card-otro{background:var(--gray-50);border-style:dashed;}

/* ---------- Fichas de otros síntomas al pie de cada guía ---------- */
.sintomas-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-3);}
.sintoma-chip{
  display:inline-block;padding:.5rem .9rem;background:#fff;border:1px solid var(--gray-200);
  border-radius:999px;font-size:var(--text-sm);color:var(--navy-950);
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.sintoma-chip:hover{border-color:var(--navy-800);background:var(--navy-100);}
.sintoma-chip-otro{border-style:dashed;color:var(--ink-600);}

/* Precio de referencia dentro de la tarjeta de servicio. */
.service-card-precio{
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--amber-600);
  margin-bottom:.35rem !important;
}

/* Encabezado que solo leen los lectores de pantalla. */
.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;
}

/* ---------- Pie del mega menú ----------
   Los dos accesos que no caben en la barra y que son, justamente, por donde
   entra quien todavía no sabe qué servicio necesita. */
.mega-menu-pie{
  grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:.6rem;
  margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--gray-200);
}
@media (min-width:700px){ .mega-menu-pie{grid-template-columns:repeat(2,1fr);gap:var(--sp-2);} }
.mega-menu-pie a{
  display:block;padding:.7rem .9rem;border-radius:var(--radius-md);
  background:var(--gray-50);border:1px solid var(--gray-200);
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.mega-menu-pie a:hover{border-color:var(--amber-500);background:#fff;}
.mega-menu-pie strong{display:block;color:var(--navy-950);font-size:var(--text-sm);}
.mega-menu-pie span{display:block;color:var(--ink-600);font-size:var(--text-xs);margin-top:.15rem;}

/* =========================================================================
   RESEÑAS Y PRUEBA SOCIAL
   Estaban en inicio.css, que solo carga en la portada. Al empezar a usarse
   en fichas de servicio, guías de síntoma, segunda opinión y empresas, .stars
   se quedaba sin display:flex y las cinco estrellas se apilaban en columna
   dentro del contador del CTA. Viven acá porque ya son componentes de sitio.
   ========================================================================= */
.testimonials{padding:var(--sp-6) 0;}
.testimonials h2{font-size:clamp(1.4rem,3.4vw,2rem);color:var(--navy-950);margin-bottom:var(--sp-3);}
.testimonials-track{display:grid;grid-template-columns:1fr;gap:var(--sp-2);}
@media (min-width:640px){ .testimonials-track{grid-template-columns:repeat(3,1fr);} }
.testimonial-card{background:var(--gray-50);border-radius:var(--radius-lg);padding:var(--sp-3);margin:0;}
.svc-section-alt .testimonial-card{background:#fff;}
.testimonial-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;}
.testimonial-card p{font-size:var(--text-sm);margin:0;color:var(--ink-900);}
.testimonial-meta{display:block;font-size:var(--text-xs);color:var(--ink-600);}

.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-weight:600;font-size:var(--text-sm);flex-shrink:0;
}

/* inline-flex y flex-shrink:0 para que el grupo de estrellas nunca se
   comprima ni se envuelva cuando es hijo de un contenedor flex. */
.stars{display:inline-flex;flex-shrink:0;gap:2px;color:var(--amber-500);margin-top:.15rem;}
.stars .icon{width:13px;height:13px;fill:currentColor;stroke:none;}
.stars-lg{margin-top:0;}
.stars-lg .icon{width:16px;height:16px;}

.reviews-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  background:var(--gray-50);border-radius:var(--radius-lg);border:1px solid var(--gray-200);
}
.svc-section-alt .reviews-summary{background:#fff;}
.reviews-score{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.reviews-score > strong{font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--navy-950);line-height:1;}
.reviews-count{font-size:var(--text-sm);color:var(--ink-600);}
.reviews-meta{font-size:var(--text-sm);color:var(--ink-600);margin:0;max-width:52ch;}
.reviews-cta{margin-top:var(--sp-3);}
.promesas-pie{margin-top:var(--sp-3);font-size:var(--text-sm);color:var(--ink-600);}

/* =========================================================================
   CONSULTA DE PATENTE (template-parts/consulta-patente.php)
   El intercambio es datos de contacto por datos del vehículo, así que el
   bloque tiene que verse como una herramienta útil y no como un formulario
   de captura. De ahí el campo de patente grande y en monoespaciada.
   ========================================================================= */
.patente-form{
  max-width:640px;margin-top:var(--sp-3);padding:var(--sp-3);
  background:#fff;border:1px solid var(--gray-200);border-top:3px solid var(--amber-500);
  border-radius:var(--radius-lg);
}
.patente-titulo-compacto{font-size:1.1rem;color:var(--navy-950);margin-bottom:.5rem;}
.patente-form label{
  display:block;font-size:var(--text-sm);font-weight:600;color:var(--navy-950);margin-bottom:.3rem;
}
.patente-form input[type="text"],
.patente-form input[type="tel"],
.patente-form input[type="email"]{
  width:100%;padding:.7rem .9rem;font-size:var(--text-base);
  border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink-900);
}
.patente-form input:focus{
  outline:none;border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(227,167,41,.25);
}
/* La patente es el campo protagonista: grande, monoespaciada y con tracking,
   como se lee en una placa. */
.patente-fila-patente input{
  font-family:var(--font-mono) !important;font-size:1.4rem !important;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;
  max-width:14ch;
}
.patente-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-2);}
@media (min-width:640px){ .patente-grid{grid-template-columns:repeat(3,1fr);} }
.patente-acepto{
  display:flex !important;align-items:flex-start;gap:.6rem;margin:var(--sp-2) 0 !important;
  font-weight:400 !important;font-size:var(--text-sm) !important;color:var(--ink-600) !important;
}
.patente-acepto input{margin-top:.2rem;flex-shrink:0;width:auto !important;}
.patente-acepto a{color:var(--navy-800);text-decoration:underline;}
.patente-nota{font-size:var(--text-xs);color:var(--ink-600);margin-top:var(--sp-2);max-width:56ch;}

.patente-resultado{margin-top:var(--sp-3);padding:var(--sp-3);border-radius:var(--radius-md);}
.patente-resultado-ok{background:var(--navy-950);color:#fff;}
.patente-resultado-ok p{color:#D8E0EC;margin-bottom:0;}
.patente-resultado-titulo{color:#fff !important;font-weight:600;margin-bottom:.75rem !important;}
.patente-resultado-titulo strong{font-family:var(--font-mono);color:var(--amber-500);}
.patente-resultado-error{background:#FEF3F2;border:1px solid #FDA29B;color:#912018;}
.patente-resultado-error p{margin:0;color:#912018;}
.patente-ficha{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem var(--sp-2);margin:0 0 var(--sp-2);
}
@media (min-width:640px){ .patente-ficha{grid-template-columns:repeat(3,1fr);} }
.patente-dato dt{
  font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.05em;color:#A9B7CA;margin-bottom:.15rem;
}
.patente-dato dd{margin:0;color:#fff;font-weight:600;}
.patente-resultado .patente-nota{color:#A9B7CA;}
/* El botón "Consultar otra patente" vive dentro de un fondo oscuro
   (.patente-resultado-ok): el .btn-outline normal usa navy sobre transparente
   y quedaría invisible ahí, así que se recolorea en ámbar solo en ese
   contexto. */
.patente-reiniciar{margin-top:var(--sp-2) !important;}
.patente-resultado-ok .patente-reiniciar{border-color:var(--amber-500);color:var(--amber-500);}
.patente-resultado-ok .patente-reiniciar:hover{background:var(--amber-500);color:var(--navy-950);}

/* ---------- Tarjetas de tipo de consulta ----------
   Radio nativo escondido detrás de una tarjeta clicable: la elección tiene
   que sentirse como escoger un producto, no como llenar un formulario. La
   marca de check aparece con la clase .is-selected, que pone patente.js al
   escuchar el evento change — así funciona igual con o sin soporte de :has(). */
.patente-opciones{border:none;padding:0;margin:var(--sp-3) 0 0;}
.patente-opciones legend{
  font-size:var(--text-sm);font-weight:600;color:var(--navy-950);margin-bottom:.7rem;padding:0;width:100%;
}
.patente-opciones-grid{display:grid;grid-template-columns:1fr;gap:.65rem;}
@media (min-width:640px){ .patente-opciones-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .patente-opciones-grid{grid-template-columns:repeat(3,1fr);} }

.patente-opcion{
  display:flex !important;flex-direction:column;gap:.3rem;position:relative;
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2);
  border:1.5px solid var(--gray-200);border-radius:var(--radius-md);
  background:#fff;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .1s ease;
  font-weight:400 !important;font-size:var(--text-sm) !important;margin:0 !important;
}
.patente-opcion:hover{border-color:var(--amber-500);transform:translateY(-1px);}
.patente-opcion input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.patente-opcion.is-selected{
  border-color:var(--amber-500);background:#FFFBF0;
  box-shadow:0 0 0 1px var(--amber-500);
}
.patente-opcion:has(input:focus-visible){outline:2px solid var(--amber-600);outline-offset:2px;}
.patente-opcion-icon{color:var(--amber-600);}
.patente-opcion-titulo{font-size:var(--text-sm);font-weight:700;color:var(--navy-950);}
.patente-opcion-desc{font-size:var(--text-xs);color:var(--ink-600);line-height:1.4;}
/* Punto de selección en la esquina, como un radio pero grande y fácil de ver
   en el celular. */
.patente-opcion::after{
  content:"";position:absolute;top:.65rem;right:.65rem;width:18px;height:18px;
  border:1.5px solid var(--gray-400);border-radius:50%;background:#fff;
  transition:border-color .15s ease,background .15s ease;
}
.patente-opcion.is-selected::after{
  border-color:var(--amber-500);background:var(--amber-500);
  box-shadow:inset 0 0 0 3px #fff;
}
/* La opción de reporte completo se destaca: es la que más leads completos
   entrega, así que conviene que se note primero. */
.patente-opcion-destacada{border-color:var(--amber-100);}
.patente-opcion-badge{
  position:absolute;top:-.6rem;left:.65rem;
  background:var(--amber-500);color:var(--navy-950);
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:.15rem .5rem;border-radius:999px;
}

/* ---------- Franja de cobertura (portada) ----------
   Responde en una línea la pregunta que más llega por WhatsApp: "¿atienden
   autos diésel?". Va inmediatamente bajo el hero porque descartar al taller
   por no saberlo es la fuga más barata de tapar. */
.cobertura{background:var(--navy-100);border-block:1px solid var(--gray-200);}
.cobertura-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--sp-3);padding-block:.85rem;
}
.cobertura-titulo{
  margin:0;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.06em;color:var(--navy-800);flex-shrink:0;
}
.cobertura ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:0;}
.cobertura li{font-size:var(--text-sm);color:var(--ink-900);display:flex;align-items:center;}
.cobertura li:not(:last-child)::after{content:"·";margin-left:1.4rem;color:var(--gray-400);}
.cobertura a{color:var(--navy-950);text-decoration:underline;text-underline-offset:2px;}
.cobertura a:hover{color:var(--amber-600);}
@media (max-width:640px){ .cobertura li:not(:last-child)::after{display:none;} }
/* En el primer pantallazo del celular (sin haber scrolleado nada), esta franja
   cae justo en la esquina donde vive el botón flotante de WhatsApp — mismo
   caso que .precio-garantia. */
@media (max-width:480px){
  .cobertura-inner{padding-right:4rem;}
}
/* La casilla opcional se distingue de la obligatoria: sin ese contraste, el
   visitante marca las dos por inercia y el consentimiento deja de ser libre. */
.patente-acepto-opcional{
  padding-top:.6rem;border-top:1px dashed var(--gray-200);
}
.patente-opcional{display:block;font-size:var(--text-xs);color:var(--ink-600);margin-top:.15rem;}

/* ---------- Sello de garantía junto al CTA ----------
   Va en la misma línea que la prueba social porque es el mismo trabajo: dar
   respaldo en el instante de decidir. Se destaca del resto del texto para que
   se lea aunque el ojo solo pase por encima. */
.cta-garantia{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--amber-500);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.cta-garantia:hover{color:#fff;}
.cta-sep{color:#4A5B75;}
@media (max-width:520px){
  /* En pantalla angosta los separadores sobran: cada dato ya salta de línea. */
  .cta-sep{display:none;}
  .cta-prueba{gap:.35rem .6rem;}
}

/* La garantía ocupa la fila completa bajo el precio: es un respaldo del
   conjunto, no una nota al pie de la cifra. */
.precio-garantia{
  flex-basis:100%;display:flex;align-items:center;gap:.4rem;
  margin:.6rem 0 0;padding-top:.6rem;border-top:1px solid var(--gray-200);
  font-size:var(--text-sm);color:var(--ink-600);
}
.precio-garantia .icon{color:var(--amber-600);flex-shrink:0;}
.precio-garantia a{color:var(--navy-950);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.precio-garantia a:hover{color:var(--amber-600);}
/* En celular el texto de garantía puede caer justo detrás del botón flotante
   de WhatsApp (position:fixed, siempre en la misma esquina de la pantalla,
   sin relación con el largo de esta tarjeta). Este padding le deja el espacio
   libre para que ninguna palabra quede tapada. */
@media (max-width:480px){
  .precio-garantia{padding-right:4rem;}
}

/* ---------- Razones para consultar la patente ----------
   Van antes del formulario porque son la respuesta a "¿y yo para qué haría
   esto?". Sin ellas el bloque pedía tres datos personales a cambio de un dato
   que el dueño del auto ya cree saber. */
.patente-motivos{
  list-style:none;display:grid;grid-template-columns:1fr;gap:var(--sp-2);
  margin:var(--sp-3) 0 0;padding:0;max-width:760px;
}
@media (min-width:860px){ .patente-motivos{grid-template-columns:repeat(3,1fr);max-width:none;} }
.patente-motivos li{
  display:flex;gap:.7rem;align-items:flex-start;
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-3);
}
.svc-section-alt .patente-motivos li{background:#fff;}
.patente-motivos .icon{color:var(--amber-600);flex-shrink:0;margin-top:.15rem;}
.patente-motivos strong{display:block;color:var(--navy-950);font-size:var(--text-sm);margin-bottom:.2rem;}
.patente-motivos div{font-size:var(--text-xs);color:var(--ink-600);line-height:1.5;}

/* ---------- Pago en línea ---------- */
.pago-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:700px){ .pago-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .pago-grid{grid-template-columns:repeat(3,1fr);} }
/* El formulario existe solo para que el botón viaje por POST: no debe pintar
   ni ocupar nada por su cuenta. */
.sb-pago-form{margin:0;padding:0;border:0;display:contents;}
.pago-card{
  display:block;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:var(--sp-3);transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
  /* Es un <button>: hay que devolverle la apariencia de tarjeta. */
  width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.pago-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--amber-500);}
.pago-card:focus-visible{outline:2px solid var(--amber-500);outline-offset:3px;}
/* Spans y no <h3>/<p>: dentro de un <button> solo cabe contenido en línea. */
.pago-card-nombre{
  display:block;font-family:var(--font-display,inherit);font-size:1.05rem;font-weight:700;
  line-height:1.3;color:var(--navy-950);margin-bottom:.3rem;
}
.pago-card-desc{display:block;font-size:var(--text-sm);color:var(--ink-600);line-height:1.55;}
.pago-card .pago-monto{display:block;margin-bottom:.5rem;}
.pago-card-ir{
  display:block;margin-top:var(--sp-2);font-size:var(--text-sm);
  font-weight:600;color:var(--amber-600);
}
.pago-monto{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--amber-600) !important;margin-bottom:.5rem !important;}

.pago-resumen{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center;justify-content:space-between;
  margin-top:var(--sp-3);padding:var(--sp-3);background:var(--gray-50);
  border:1px solid var(--gray-200);border-left:4px solid var(--amber-500);border-radius:var(--radius-lg);
}
.pago-resumen h3{font-size:1.3rem;color:var(--navy-950);margin:.3rem 0;}
.pago-resumen p{font-size:var(--text-sm);color:var(--ink-600);margin:0;max-width:52ch;}
.pago-monto-grande{
  font-family:var(--font-mono);font-size:var(--text-2xl) !important;
  color:var(--navy-950) !important;font-weight:600;flex-shrink:0;
}
/* Pedirle el WhatsApp al cliente DESPUÉS de que pagó. */
.pago-contacto{
  margin-top:var(--sp-3);padding:var(--sp-3);background:#fff;
  border:1px solid var(--gray-200);border-left:4px solid var(--amber-500);
  border-radius:var(--radius-lg);max-width:70ch;
}
.pago-contacto-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-bottom:var(--sp-3);}
@media (min-width:760px){ .pago-contacto-grid{grid-template-columns:1.2fr 1fr .8fr;} }
.pago-contacto label{
  display:block;font-size:var(--text-sm);font-weight:600;
  color:var(--navy-950);margin-bottom:.35rem;
}
.pago-contacto-opc{font-weight:400;color:var(--ink-600);}
.pago-contacto input{
  width:100%;padding:.7rem .9rem;font:inherit;font-size:var(--text-base);
  color:var(--navy-950);background:#fff;
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
}
.pago-contacto input:focus{outline:none;border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(227,167,41,.25);}
.pago-contacto-nota{margin:var(--sp-2) 0 0;font-size:var(--text-sm);color:var(--ink-600);}
.pago-error{
  background:#FEF3F2;border:1px solid #FDA29B;color:#912018;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-md);margin-bottom:var(--sp-3);
}