/* JF Automotriz 2.0 — lo que WordPress necesita encima de jf2-base.css (la vista previa aprobada, tal cual).
   Solo agrega; no cambia lo que la vista previa ya resolvió. */

/* La barra de administración de WordPress (sesión iniciada) no tapa el encabezado fijo. */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}

/* Horario en el pie, bajo los datos de contacto. */
.footer-horario{display:block;font-size:12px;color:var(--muted);margin:12px 0;line-height:1.6}

/* Páginas escritas en el editor (page.php). */
.jf2-prosa{max-width:70ch;font-size:16px;line-height:1.8;color:#d6d4d0}
.jf2-prosa>*:first-child{margin-top:0}
.jf2-prosa p{margin:0 0 1.15em}
.jf2-prosa h2{font-size:clamp(24px,3vw,32px);margin:2em 0 .6em;line-height:1.15}
.jf2-prosa h3{font-size:20px;margin:1.6em 0 .5em}
.jf2-prosa a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.jf2-prosa ul,.jf2-prosa ol{padding-left:1.3em;margin:0 0 1.2em}
.jf2-prosa li{margin-bottom:.4em}
.jf2-prosa img{max-width:100%;height:auto;border-radius:4px}
.jf2-prosa blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:2px solid var(--red);color:var(--ink)}
.jf2-prosa table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:14px}
.jf2-prosa th,.jf2-prosa td{padding:.6em .8em;border:1px solid var(--line);text-align:left}

/* Catálogo y ficha (plantillas de impleCode del tema 0.7.7) dentro del encabezado y el pie nuevos.
   legacy.css y catalog.css ya vienen encerrados en .jf2-legado; acá solo se acomoda el contenedor. */
main.jf2-legado{display:block;min-height:60vh;padding-bottom:40px}
@media (max-width:700px){main.jf2-legado{padding-bottom:90px}}

/* WordPress pone la clase «page» en <body> de toda página; en la vista previa .page es la sección con
   aire arriba y abajo. Sin esto, el body heredaba 68 px arriba (franja vacía sobre el encabezado). */
body.page{padding:0}

/* William, 02-nov-2026: «hay partes blancas que no deberían ser fondo blanco». Las tres bandas crema de
   la vista previa (Liquidaciones en la portada, la cabecera de Ofertas y el cierre de Quiénes somos)
   pasan a la piel oscura del resto, como .editorial-block. El rojo de los botones se queda. Los recuadros
   claros detrás de las fotos de producto también se quedan: las fotos vienen con fondo blanco. */
.liquidation-section,.ofertas-banda{background:#131416;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nosotros-cierre{background:#131416;color:var(--ink);border:1px solid var(--line)}
.liquidation-section .kicker,.ofertas-banda .kicker{color:var(--muted)}
.liquidation-section p,.ofertas-cabeza p,.nosotros-cierre p{color:var(--muted)}
.liquidation-list,.ofertas-tabs{border-top-color:var(--line)}
.liquidation-item{border-bottom-color:var(--line)}
.liquidation-item:hover{color:#fff}
.liquidation-item:hover strong{color:#fff}
.liquidation-item .sku,.liquidation-list .fine,.ofertas-tab{color:var(--muted)}
.liquidation-item.con-foto img{border-color:var(--line)}
.ofertas-tab+.ofertas-tab{border-left-color:var(--line)}
.ofertas-tab:hover,.ofertas-tab[aria-current="page"]{color:var(--ink)}
.nosotros-cierre .btn.secondary{color:var(--ink);border-color:#57575a}
/* Sobre fondo oscuro vuelve el anillo de foco claro de todo el sitio. */
.ofertas-banda :focus-visible,.liquidation-section :focus-visible,.nosotros-cierre :focus-visible{outline-color:#f1d6ac}

/* Portada del prototipo aprobado (William, 02-nov-2026): texto y buscador a la izquierda; a la
   derecha la tarjeta con la foto ambiental de repuestos y su rótulo (.hero-art de la base). */
.portada--arte{min-height:0;padding:76px 0 0;justify-content:flex-start}
.portada--arte:before,.portada--arte:after{display:none}
.portada--arte .portada-contenido{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,490px);gap:72px;align-items:center}
.portada--arte .portada-copy{padding-bottom:64px}
.portada-arte{margin:0 28px 64px 0}
.portada-arte .hero-side-note{text-transform:uppercase}
.portada-arte .index{text-transform:uppercase}
@media(max-width:980px){.portada--arte .portada-contenido{grid-template-columns:1fr;gap:8px}.portada--arte .portada-copy{padding-bottom:24px}.portada-arte{margin:0 0 40px;aspect-ratio:16/9;max-height:none}}
@media(max-width:700px){.portada--arte{padding-top:40px}.portada-arte{margin-bottom:28px;height:245px;aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.portada-arte .hero-photo{transition:none;transform:none}}

/* Contacto: formulario WPForms 222 (William, 03-nov-2026) con la piel oscura del sitio. */
.contacto-wpforms .wpforms-container{margin:24px 0 0!important}
.contacto-wpforms .wpforms-field{padding:0 0 18px!important}
.contacto-wpforms .wpforms-field-label,.contacto-wpforms .wpforms-field-sublabel{color:#bcbab6!important;font-size:12px!important;font-weight:500!important}
.contacto-wpforms .wpforms-required-label{color:#ed7a7e!important}
.contacto-wpforms input[type=text],.contacto-wpforms input[type=email],.contacto-wpforms input[type=tel],.contacto-wpforms input[type=number],.contacto-wpforms select,.contacto-wpforms textarea{width:100%!important;max-width:none!important;min-height:46px;background:#111214!important;color:var(--ink)!important;border:1px solid #55565a!important;border-radius:3px!important;padding:11px 12px!important;font-size:16px!important;box-shadow:none!important}
.contacto-wpforms textarea{min-height:140px}
.contacto-wpforms input:focus,.contacto-wpforms select:focus,.contacto-wpforms textarea:focus{border-color:#c9c7c3!important;outline:2px solid #f1d6ac!important;outline-offset:2px}
.contacto-wpforms ::placeholder{color:#8e8e93!important}
.contacto-wpforms .wpforms-submit{background:var(--red)!important;border:1px solid var(--red)!important;color:#fff!important;border-radius:3px!important;min-height:50px;padding:13px 22px!important;font-size:13px!important;font-weight:600!important}
.contacto-wpforms .wpforms-submit:hover{background:#a92027!important;border-color:#a92027!important}
.contacto-wpforms .wpforms-error,.contacto-wpforms label.wpforms-error{color:#ff8a8f!important}
.contacto-wpforms .wpforms-confirmation-container-full{background:#1d2a20!important;border:1px solid #3e6b48!important;color:var(--ink)!important}

/* jf2-relacionados-oscuros: el plugin pinta .related-products gris claro (#f4f4f4) y el título
   quedaba claro sobre claro. En la ficha va al fondo oscuro del sitio (03-nov-2026). */
.jf2-legado #product_page .related-products{background:var(--surface,#18191b)!important;border:1px solid var(--line,#2c2d30)!important;box-shadow:none!important}
.jf2-legado #product_page .related-products .catalog-header{color:var(--ink,#f3f0eb)!important}