/* paginas.css — estilos de las páginas de contenido a medida (SB Lab, hubs,
   Nosotros). Vive aparte de servicio.css porque son bloques de layout
   editorial (héroes con imagen de fondo, bloques alternos, grillas de casos)
   que las fichas de servicio no usan.

   Origen: prototipos/sb-lab/css/style.css y prototipos/nosotros/css/style.css,
   que hasta ahora nunca se habían migrado al tema — sin este archivo la página
   SB Lab se renderiza sin layout. Depende de global.css (tokens, .container,
   .placeholder-warm) y de servicio.css (.svc-section, .faq-accordion). */

/* ---------- Hero con imagen de fondo (SB Lab, Nosotros) ---------- */
.page-hero{position:relative;min-height:42vh;display:flex;align-items:flex-end;overflow:hidden;}
.page-hero-media{position:absolute;inset:0;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,18,36,.86) 0%,rgba(8,18,36,.45) 55%,rgba(8,18,36,.15) 100%);}
.page-hero-content{position:relative;z-index:1;color:#fff;padding-block:var(--sp-5) var(--sp-4);}
.page-hero h1{font-size:clamp(1.8rem,4.6vw,2.75rem);max-width:20ch;font-weight:700;color:#fff;}
.page-hero-content p{font-size:var(--text-lg);color:#D8E0EC;max-width:56ch;}

/* ---------- Hero simple, sin imagen (hubs: Servicios, Precios, Blog) ------- */
.simple-hero{padding:var(--sp-6) 0 var(--sp-4);background:var(--gray-50);}
.simple-hero h1{font-size:clamp(1.8rem,4.4vw,2.5rem);color:var(--navy-950);max-width:20ch;}

/* ---------- Bloques alternos texto/imagen ---------- */
.alt-block{padding:var(--sp-6) 0;}
.alt-block-alt{background:var(--gray-50);}
.alt-block-inner{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:center;}
.alt-block h2{font-size:clamp(1.5rem,3.6vw,2.25rem);color:var(--navy-950);}
@media (min-width:900px){
  .alt-block-inner{grid-template-columns:1fr 1fr;gap:var(--sp-5);}
  /* direction:rtl invierte el orden visual de las columnas sin tocar el orden
     del DOM, así el lector de pantalla sigue leyendo texto → imagen. */
  .alt-block-inner.reverse{direction:rtl;}
  .alt-block-inner.reverse > *{direction:ltr;}
}

/* ---------- Grilla de casos de diagnóstico (SB Lab) ---------- */
.case-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:760px){ .case-grid{grid-template-columns:repeat(3,1fr);} }
.case-card{display:block;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;background:#fff;transition:box-shadow var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);}
.case-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.case-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.case-card .placeholder-warm{aspect-ratio:4/3;border-radius:0;min-height:0;}
.case-card-body{padding:var(--sp-2) var(--sp-3) var(--sp-3);}
.case-card h3{font-size:var(--text-base);color:var(--navy-950);margin-bottom:.3rem;}
.case-card p{font-size:var(--text-sm);color:var(--ink-600);margin:0;}

/* Nota de ejemplo ilustrativo — nunca usar en un dato verificado (el ámbar
   está reservado para evidencia confirmada, ver el sistema de diseño). */
.example-note{
  display:inline-block;margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--amber-600);background:var(--amber-100);padding:.3rem .7rem;border-radius:var(--radius-sm);
}

/* ---------- Migrado desde los prototipos de Nosotros, Contacto,
   Empresas y Flotas y Revisión Pre-Compra. Igual que con SB Lab, estas
   reglas vivían solo en prototipos/*/css/style.css y nunca se habían
   llevado al tema. ---------- */

/* — nosotros — */
/* ---------- Equipo ---------- */
.team-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-3);}
.team-card{text-align:center;}
.team-photo{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--sp-2);}
.team-card h3{font-size:var(--text-lg);color:var(--navy-950);margin-bottom:.2rem;}
.team-card span{font-size:var(--text-sm);color:var(--ink-600);}
@media (min-width:640px){ .team-grid{grid-template-columns:repeat(3,1fr);} }
/* ---------- Galería de instalaciones ---------- */
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
.gallery-grid .placeholder-warm{aspect-ratio:4/3;min-height:0;}
@media (min-width:640px){ .gallery-grid{grid-template-columns:repeat(4,1fr);} }
/* ---------- Barra de estadísticas (idéntica a Inicio, mismo componente) ---------- */
.stat-bar{background:var(--navy-950);padding:var(--sp-4) 0;}
.stat-bar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);text-align:center;}
.stat-big strong{display:block;font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--amber-500);font-weight:600;}
.stat-big span{font-size:var(--text-xs);color:#A9B7CA;text-transform:uppercase;letter-spacing:.04em;}
@media (min-width:640px){ .stat-bar-grid{grid-template-columns:repeat(4,1fr);} }
.pending-note{
  display:inline-block;margin-top:.5rem;font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--amber-600);background:var(--amber-100);padding:.3rem .7rem;border-radius:var(--radius-sm);
}

/* — contacto — */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5);} }
.icon-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);}
.icon-list li{display:flex;align-items:flex-start;gap:.75rem;}
.icon-list .icon-wrap{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--navy-100);color:var(--navy-800);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-list strong{display:block;color:var(--navy-950);}
.icon-list span,.icon-list a{color:var(--ink-600);font-size:var(--text-sm);}
.quick-links{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:760px){ .quick-links{grid-template-columns:repeat(3,1fr);} }

/* — empresas-y-flotas — */
.icon-list span{color:var(--ink-600);font-size:var(--text-sm);}

/* — revision-pre-compra — */
.price-box{
  border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-3);
  background:#fff;max-width:420px;
}
.price-box .price-note{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-600);}

/* Alternativa cuando aún no hay shortcode de formulario cargado. */
.contact-fallback{border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-3);background:#fff;}
.contact-fallback p{margin-bottom:var(--sp-2);color:var(--ink-600);}

/* ---------- Proporción de las fotos ----------
   Las imágenes que entran por sb_imagen() en bloques editoriales no tenían
   proporción definida: en una grilla con filas de altura pareja se estiraban.
   Se fija el encuadre y se recorta, que es lo que conserva la foto sin
   deformarla. */
.gallery-grid img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);display:block;
}
.alt-block-inner img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);display:block;
}
.page-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
/* 16:9 es la proporción real de las fotos que entran acá. Forzarlas a 4:3
   con object-fit:cover les recortaba un cuarto del ancho, y por eso se veían
   apretadas: no era la foto, era el contenedor. */
.module-photo{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
  border-radius:var(--radius-lg);display:block;align-self:center;
}

/* Foto de encabezado en páginas con hero simple (Empresas y Flotas). */
/* La foto de flota es 1400x787 (16:9). Forzarla a 4/5 en móvil recortaba el
   55% del ancho y dejaba solo la franja central: el pavimento entre las
   camionetas. Se respeta la proporción original en todos los tamaños. */
.hero-foto{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%;border-radius:var(--radius-lg);display:block;}

/* La foto de Contacto se adapta a su columna en vez de forzar un recorte fijo:
   así no se comprime si la imagen no viene en 4:3 exacto. */
.contact-grid img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--radius-md);display:block;}

/* ---------- Foto del equipo (Nosotros) ----------
   Va sola en su columna: repartida en una grilla de dos quedaba recortada y
   no se distinguía a nadie, que es justo lo contrario de lo que busca una
   foto de equipo. */
.equipo-foto{margin:0;}
.equipo-foto-img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-lg);display:block;
}
.equipo-foto figcaption{
  margin-top:.6rem;font-size:var(--text-sm);color:var(--ink-600);
}

/* =========================================================================
   PASAPORTE VEHICULAR 360 (template-revision-pre-compra.php)
   ========================================================================= */

/* ---------- Los riesgos que no se ven ---------- */
.riesgo-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:700px){ .riesgo-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .riesgo-grid{grid-template-columns:repeat(3,1fr);} }
.riesgo-card{
  background:#fff;border:1px solid var(--gray-200);border-top:3px solid #B42318;
  border-radius:var(--radius-md);padding:var(--sp-3);
}
.riesgo-card h3{font-size:1rem;color:var(--navy-950);margin-bottom:.45rem;}
.riesgo-card p{font-size:var(--text-sm);color:var(--ink-600);margin:0;}

/* ---------- Las cuatro etapas ----------
   Numeración grande a la izquierda con una línea que las une: la idea es que
   se lea como un recorrido encadenado y no como cuatro servicios sueltos,
   que es justo lo que diferencia al producto. */
.etapas-lista{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-3);}
.etapa{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:var(--sp-3);position:relative;
}
.etapa-num{position:relative;display:flex;justify-content:center;}
.etapa-num span{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--navy-950);color:var(--amber-500);
  font-family:var(--font-mono);font-size:1.05rem;font-weight:700;
}
/* La línea que conecta una etapa con la siguiente. */
@media (min-width:640px){
  .etapa:not(:last-child) .etapa-num::after{
    content:"";position:absolute;top:52px;left:50%;transform:translateX(-50%);
    width:2px;height:calc(100% + var(--sp-3) + 6px);background:var(--gray-200);
  }
}
.etapa-tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.05em;color:var(--amber-600);margin-bottom:.35rem;
}
.etapa-cuerpo h3{font-size:1.25rem;color:var(--navy-950);margin-bottom:.6rem;}
.etapa-cuerpo p{font-size:var(--text-sm);color:var(--ink-900);margin-bottom:.7rem;}
.etapa-nota{
  background:var(--gray-50);border-left:3px solid var(--amber-500);
  padding:.7rem .9rem;border-radius:var(--radius-sm);color:var(--ink-600) !important;
}
.etapa-corte{
  background:#FEF3F2;border-left:3px solid #B42318;
  padding:.7rem .9rem;border-radius:var(--radius-sm);color:#912018 !important;margin-bottom:0 !important;
}
@media (max-width:639px){
  .etapa{grid-template-columns:1fr;gap:var(--sp-2);}
  .etapa-num{justify-content:flex-start;}
}

/* ---------- El veredicto ---------- */
.veredicto-lista{list-style:none;margin:0 0 .7rem;padding:0;display:grid;gap:.6rem;}
.veredicto-lista li{font-size:var(--text-sm);color:var(--ink-900);}
.veredicto-marca{
  display:inline-block;margin-right:.5rem;padding:.15rem .6rem;border-radius:999px;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.v-si{background:#DCFAE6;color:#085D3A;}
.v-quiza{background:var(--amber-100);color:var(--amber-600);}
.v-no{background:#FEE4E2;color:#912018;}

/* ---------- Comparativa de alternativas ---------- */
.comparativa{display:grid;grid-template-columns:1fr;gap:var(--sp-2);margin-top:var(--sp-3);}
@media (min-width:860px){ .comparativa{grid-template-columns:repeat(3,1fr);} }
.comp-col{
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:var(--sp-3);
}
.comp-col h3{font-size:1rem;color:var(--ink-600);margin-bottom:var(--sp-2);}
.comp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.comp-col li{font-size:var(--text-sm);color:var(--ink-600);padding-left:1.1rem;position:relative;}
.comp-col li::before{content:"·";position:absolute;left:.3rem;color:var(--gray-400);font-weight:700;}
/* La columna propia se destaca sola: fondo blanco, borde ámbar y texto en
   navy. No hace falta ningún adjetivo para que se note cuál es la buena. */
.comp-col-destacada{background:#fff;border-color:var(--amber-500);border-width:2px;}
.comp-col-destacada h3{color:var(--navy-950);}
.comp-col-destacada li{color:var(--ink-900);}
.comp-col-destacada li::before{content:"✓";color:var(--amber-600);font-size:var(--text-sm);}

/* ---------- Los dos planes ----------
   El destacado no lleva ningún "más vendido": se distingue solo por el borde
   ámbar y el fondo blanco. El contenido de la lista tiene que hacer el
   trabajo de convencer, no una etiqueta. */
.planes{display:grid;grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-3);align-items:start;}
@media (min-width:860px){ .planes{grid-template-columns:repeat(2,1fr);} }
.plan{
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-3);
}
.plan-destacado{background:#fff;border:2px solid var(--amber-500);box-shadow:var(--shadow-md);}
.plan-tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-600);
  background:#fff;border:1px solid var(--gray-200);padding:.25rem .7rem;border-radius:999px;
}
.plan-tag-destacado{background:var(--amber-100);border-color:var(--amber-500);color:var(--amber-600);}
.plan h3{font-size:1.35rem;color:var(--navy-950);margin:var(--sp-2) 0 .3rem;}
.plan-precio{
  font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--navy-950);
  line-height:1.1;margin-bottom:.5rem;
}
.plan-destacado .plan-precio{color:var(--amber-600);}
.plan-bajada{font-size:var(--text-sm);color:var(--ink-600);margin-bottom:var(--sp-3);}
.plan-lista{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;gap:.6rem;}
.plan-lista li{
  display:block;position:relative;padding-left:1.7rem;
  font-size:var(--text-sm);color:var(--ink-900);
}
.plan-lista li > .icon{position:absolute;left:0;top:.2em;color:var(--amber-600);}
.plan-iva{font-size:var(--text-sm);color:var(--ink-600);margin:-.35rem 0 .6rem;}
/* La letra chica va dentro de la viñeta y no en una nota al pie: si la
   condición se lee después del precio, ya se leyó tarde. */
.plan-fino{display:block;font-size:var(--text-xs);color:var(--ink-600);margin-top:.15rem;}
/* El compromiso de respuesta en Empresas y Flotas. Va bajo el H1 y tiene que
   leerse como un compromiso, no como una bajada más: por eso el fondo, el
   borde lateral y el reloj. Es el dato que un gerente de flota compara entre
   proveedores. */
.promesa-flota{
  display:flex;gap:.75rem;align-items:flex-start;
  margin:var(--sp-3) 0;padding:var(--sp-2) var(--sp-3);
  max-width:64ch;background:var(--gray-50);
  border:1px solid var(--gray-200);border-left:4px solid var(--amber-500);
  border-radius:var(--radius-lg);
  font-size:var(--text-base);color:var(--ink-900);line-height:1.6;
}
.promesa-flota .icon{color:var(--amber-600);flex-shrink:0;margin-top:.3rem;}
.promesa-flota strong{color:var(--navy-950);}

/* Los dos botones del plan —pagar y consultar— quedaban pegados: son hermanos
   directos y .btn es inline-flex, así que entre ellos solo había un espacio de
   texto. Apilados y a ancho completo se separan de verdad, y de paso el blanco
   de toque en móvil deja de ser un problema. */
.plan .btn{display:flex;width:100%;}
.plan .btn + .btn,
.plan .sb-pago-form + .btn{margin-top:.75rem;}
/* Los dos botones del plan, apilados: el de pago manda y el de consultar
   queda como alternativa, no como competencia. */
.plan .btn{display:flex;width:100%;margin-bottom:.6rem;}
.plan .btn:last-child{margin-bottom:0;}