/* =====================================================
   CPT SERVICIO — estilos exclusivos de single-servicio.php y single-landing_ads.php.
   Depende de global.css (tokens, botones, evidence-frame, estados, FAQ, checklists).
   ===================================================== */

.svc-section{padding:var(--sp-6) 0;}
.svc-section-alt{background:var(--gray-50);}

/* ---------- Formulario compartido (Contacto, Empresas y Flotas, Garantías...) ----------
   Antes vivía duplicado en contacto/css/style.css y empresas-y-flotas/css/style.css;
   se promueve acá para que cualquier página nueva con formulario lo reutilice sin copiar. */
.contact-form{display:flex;flex-direction:column;gap:var(--sp-2);max-width:520px;}
.contact-form label{font-weight:600;font-size:var(--text-sm);margin-bottom:.3rem;display:block;}
.contact-form input,.contact-form textarea,.contact-form select{
  width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);
  font-size:var(--text-base);font-family:var(--font-base);background:#fff;
}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(227,167,41,.25);}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--sp-2);}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr;} }
.consent-row{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--text-xs);color:var(--ink-600);}
.consent-row input{width:auto;flex-shrink:0;margin-top:.2rem;}
.consent-row a{color:var(--navy-800);text-decoration:underline;}

.svc-hero{padding:var(--sp-5) 0 var(--sp-5);background:var(--white);}
.hero-v3-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:var(--sp-2);}
.svc-hero-inner{display:flex;flex-direction:column;gap:var(--sp-3);}
.svc-hero h1{font-size:clamp(1.8rem,4.4vw,2.75rem);color:var(--navy-950);max-width:18ch;}
.svc-hero-media{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;}
/* Los dos CTA del hero eran inline-flex sueltos: con títulos largos ("Agenda
   tu diagnóstico de check engine") el segundo caía a la línea siguiente con
   un ancho distinto y quedaban descuadrados. Flex con gap los alinea, y en
   pantallas angostas se apilan a ancho completo. */
.svc-hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--sp-3);align-items:stretch;}
@media (max-width:560px){
  .svc-hero-ctas{flex-direction:column;align-items:stretch;}
  /* .btn lleva white-space:nowrap; en móvil un texto largo desbordaría. */
  .svc-hero-ctas .btn{white-space:normal;text-align:center;}
}
@media (min-width:900px){
  .svc-hero-inner{flex-direction:row;align-items:center;gap:var(--sp-5);}
  .svc-hero-copy,.svc-hero-media{flex:1;}
}

.svc-riesgos{list-style:disc;padding-left:1.2rem;margin-top:var(--sp-2);}
.svc-riesgos li{color:var(--ink-600);margin-bottom:.4rem;}

/* ---------- Marco de Evidencia: layout de 2 columnas (imagen + hallazgos) ----------
   .evidence-frame/.ef-* viven en global.css (tokens/estados compartidos); .ev-columns
   es el grid que las coloca lado a lado — antes solo existía en inicio/css/style.css,
   por eso colapsaba a una columna en las páginas de servicio (Diagnóstico Automotriz). */
.ev-columns{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:start;margin:var(--sp-2) 0;}
.ev-columns > *{min-width:0;}
@media (min-width:760px){ .ev-columns{grid-template-columns:1fr 1fr;} }

.symptom-chip-static{
  padding:.55rem 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);display:inline-block;
}

.symptom-picker{display:flex;flex-wrap:wrap;gap:.6rem;margin:var(--sp-2) 0;}

/* ---------- Tabla de servicio (ej. mantención por intervalo) ----------
   Envuelta en .svc-table-wrap con overflow-x:auto a propósito: una tabla
   ancha en mobile NUNCA debe romper el layout de la página (mismo tipo de
   bug de overflow horizontal ya corregido antes en el proyecto). */
.svc-table-wrap{overflow-x:auto;margin:var(--sp-3) 0;-webkit-overflow-scrolling:touch;border:1px solid var(--gray-200);border-radius:var(--radius-md);}
.svc-table{width:100%;border-collapse:collapse;min-width:480px;}
.svc-table th,.svc-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--gray-200);font-size:var(--text-sm);}
.svc-table tr:last-child td{border-bottom:0;}
.svc-table th{font-family:var(--font-mono);text-transform:uppercase;font-size:var(--text-xs);color:var(--ink-600);letter-spacing:.04em;background:var(--gray-50);}
.svc-table td:first-child{font-weight:600;color:var(--navy-950);white-space:nowrap;}

/* =====================================================
   LANDING (Ads) — se suma a lo anterior cuando existe assets/css/landing.css
   ===================================================== */
.lp-hero{background:linear-gradient(180deg,#fff 0%,var(--gray-50) 100%);}

/* El marco de evidencia recorta en vez de estirar: una foto deformada
   contradice el argumento de la página, que es mostrar evidencia real. */
.evidence-frame{aspect-ratio:4/3;overflow:hidden;}
.evidence-frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Barra del método (single-servicio.php) ----------
   Las cuatro secciones eran una secuencia —problema, diagnóstico, evidencia,
   recomendación— pero había que leer la página entera para darse cuenta.
   Esta barra la hace visible y permite saltar directo. */
.metodo-barra{
  background:var(--navy-950);color:#fff;border-block:1px solid rgba(255,255,255,.08);
}
.metodo-barra-inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--sp-3);
  padding-block:.85rem;
}
.metodo-barra-titulo{
  font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.06em;color:var(--amber-500);flex-shrink:0;
}
.metodo-barra ol{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0;
}
.metodo-barra li{display:flex;align-items:center;}
/* La flecha separadora es decorativa: fuera del flujo de lectura asistida. */
.metodo-barra li:not(:last-child)::after{content:"→";margin-left:1.25rem;color:#4A5B75;}
.metodo-barra a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--text-sm);color:#D8E0EC;
}
.metodo-barra a:hover{color:#fff;}
.metodo-barra a span{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:rgba(227,167,41,.18);color:var(--amber-500);
  font-family:var(--font-mono);font-size:11px;font-weight:700;flex-shrink:0;
}
@media (max-width:640px){
  .metodo-barra li:not(:last-child)::after{display:none;}
  .metodo-barra ol{gap:.5rem 1rem;}
}