/* Secciones de sitio (Home extendida, Sobre Nosotros, Contacto, Financiación, footer).
   Reusa a propósito las variables --ca-* y las clases .ca-btn/.ca-campo/.ca-btn-whatsapp
   que ya define wp-content/plugins/catalogo-autos/catalogo-autos.php (carga en todo el
   sitio) — así los colores y la tipografía quedan garantizados idénticos en todo el sitio. */

/* El menú del header traía un violeta de la paleta de colores global de Astra
   (quedó de la demo Love Nature) — lo pisamos con el rojo de la marca en vez
   de tocar la paleta global entera, para no afectar otras cosas del tema. */
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item:hover > .ast-menu-toggle,
.main-header-menu .ast-masthead-custom-menu-items a:hover,
.main-header-menu .menu-item.focus > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--ca-acento) !important;
}

/* Header oscuro en todo el sitio — el logo nuevo es blanco, necesita
   fondo oscuro para leerse siempre (no solo en Inicio). En Inicio,
   además, el fondo se saca del todo (ver más abajo) para que se vea
   la foto del hero atrás; el texto ya queda blanco acá. */
#masthead,
.main-header-bar,
.ast-primary-header-bar-wrap {
	background-color: #0B0D2A !important;
}
#masthead .main-header-menu .menu-link,
#masthead .ast-masthead-custom-menu-items a,
#masthead .site-title a,
#masthead .site-description {
	color: #fff !important;
}

/* El logo ya trae "autoruiz" escrito adentro — el título del sitio al
   lado ("Automoviles Ruiz") queda redundante, lo sacamos del header. */
#masthead .site-title,
#masthead .site-description {
	display: none !important;
}

/* El botón de las 3 rayas (menú hamburguesa) también traía el violeta
   de la demo vieja — no solo en hover/focus (ya arreglado abajo) sino
   también EN REPOSO: el estilo "fill" del Customizer le pone un fondo
   de color fijo que había quedado violeta. Lo forzamos transparente y
   atamos el ícono SVG al color del botón (currentColor) para que no
   dependa del color fijo que trae el Customizer. Blanco en vez del
   --ca-ink de siempre porque ahora el header es oscuro. */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-outline,
button.menu-toggle {
	color: #fff !important;
	background-color: transparent !important;
	border-color: transparent !important;
}
.ast-mobile-menu-trigger-minimal:hover,
.ast-mobile-menu-trigger-minimal:focus,
.ast-mobile-menu-trigger-fill:hover,
.ast-mobile-menu-trigger-fill:focus,
.ast-mobile-menu-trigger-outline:hover,
.ast-mobile-menu-trigger-outline:focus,
button.menu-toggle:hover,
button.menu-toggle:focus,
button.menu-toggle.toggled {
	color: var(--ca-acento) !important;
	background-color: transparent !important;
	border-color: var(--ca-acento) !important;
}
.mobile-menu-toggle-icon .ast-mobile-svg {
	fill: currentColor !important;
}

/* El header en Inicio pasa a fixed una vez que se pasa el hero (ver más
   abajo) y sale del flujo del documento — sin esto, "Vehículos destacados"
   y el resto quedarían tapados por el header una vez sólido. --ca-header-h
   lo mide hero.js con la altura real. Va en #content (todo lo que sigue
   al hero) y no en body/hero: así no se mete con el posicionamiento del
   header, que necesita su propio top:0 limpio contra #page. */
body.home #content {
	padding-top: var(--ca-header-h, 84px);
}

/* Inicio: el header flota transparente sobre el hero en vez de tener
   su propio fondo — absolute (se va con el scroll, como sale de acá
   arriba de la página) mientras dura el hero. Recién pasa a fixed +
   fondo sólido cuando JS agrega .ca-header-solid, ver más abajo. */
body.home #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
body.home .main-header-bar,
body.home .ast-primary-header-bar-wrap,
body.home .ast-primary-header-bar,
body.home .ast-above-header,
body.home .ast-below-header {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-bottom: none !important;
	border-top: none !important;
	transition: background-color 0.25s ease;
}

/* La barra de admin de WordPress (usuarios logueados) es fixed y tapa
   la parte de arriba del header/logo si no le hacemos lugar — no afecta
   a un visitante normal (no logueado), solo a la vista de administración. */
body.home.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
	body.home.admin-bar #masthead { top: 46px; }
}

/* Una vez que el scroll pasa el hero, JS (hero.js) le agrega esta clase:
   ahí sí pasa a fixed (se queda pegado arriba) y a fondo sólido navy —
   mismo azul del hero. Antes de eso queda tal cual estaba (transparente,
   se va con el scroll junto con el hero, sin quedarse pegado encima). */
body.home #masthead.ca-header-solid {
	position: fixed;
	background-color: #0B0D2A !important;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
}
body.home #masthead.ca-header-solid .main-header-bar,
body.home #masthead.ca-header-solid .ast-primary-header-bar-wrap,
body.home #masthead.ca-header-solid .ast-primary-header-bar {
	background-color: #0B0D2A !important;
}

/* Menú desplegable de mobile — le damos más aire, separador entre
   items y tipografía más grande para que se lea mejor al tacto. */
@media (max-width: 921px) {
	.main-header-bar-navigation.toggled {
		background: var(--ca-panel);
		padding: 4px 20px 20px;
		border-top: 1px solid var(--ca-linea);
	}
	.main-header-bar-navigation.toggled .main-header-menu .menu-item {
		border-bottom: 1px solid var(--ca-linea);
	}
	.main-header-bar-navigation.toggled .main-header-menu .menu-item:last-child {
		border-bottom: none;
	}
	.main-header-bar-navigation.toggled .main-header-menu .menu-link {
		padding: 15px 2px !important;
		font-size: 16px;
		font-weight: 500;
	}

}

/* El popup del menú mobile en este sitio NO es el ".main-header-bar-navigation
   .toggled" clásico de Astra, sino el componente "Mobile Menu" del Header
   Builder (contenedor .ast-mobile-header-wrap .ast-mobile-header-content),
   que Astra pinta con fondo blanco fijo. La regla de arriba que fuerza todo
   el texto del header a blanco (pensada para el header oscuro de siempre)
   también le pega a este popup — texto blanco sobre fondo blanco, invisible.
   Hace falta repetir #masthead para pesar igual que esa regla y ganarle. */
#masthead .ast-mobile-header-wrap .ast-mobile-header-content .menu-link {
	color: var(--ca-ink) !important;
}

.ca-seccion-inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.ca-seccion-angosta{max-width:760px;}
.ca-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ca-acento);margin-bottom:10px;}

/* revelado suave al hacer scroll */
.ca-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);}
.ca-reveal-visible{opacity:1;transform:translateY(0);}

/* misma idea, pero en cascada: los hijos directos entran de a uno,
   cada uno con un poquito más de demora que el anterior. Se usa en
   grillas de tarjetas (catálogo, destacados, características). */
.ca-reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1);}
.ca-reveal-stagger.ca-reveal-visible > *{opacity:1;transform:translateY(0);}
.ca-reveal-stagger > *:nth-child(1){transition-delay:.00s}
.ca-reveal-stagger > *:nth-child(2){transition-delay:.05s}
.ca-reveal-stagger > *:nth-child(3){transition-delay:.10s}
.ca-reveal-stagger > *:nth-child(4){transition-delay:.15s}
.ca-reveal-stagger > *:nth-child(5){transition-delay:.20s}
.ca-reveal-stagger > *:nth-child(6){transition-delay:.25s}
.ca-reveal-stagger > *:nth-child(7){transition-delay:.30s}
.ca-reveal-stagger > *:nth-child(8){transition-delay:.35s}
.ca-reveal-stagger > *:nth-child(n+9){transition-delay:.40s}

@media (prefers-reduced-motion:reduce){
	.ca-reveal{opacity:1;transform:none;transition:none;}
	.ca-reveal-stagger > *{opacity:1;transform:none;transition:none;}
}

/* por qué elegirnos */
.ca-porque{padding:72px 0;}
.ca-porque h2{font-size:30px;font-weight:600;margin:0 0 36px;max-width:520px;text-wrap:balance;color:var(--ca-ink);}
.ca-porque-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.ca-porque-item{padding:24px;border:1px solid var(--ca-linea);border-radius:12px;background:var(--ca-panel);}
.ca-porque-icono{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--ca-fondo);color:var(--ca-acento);margin-bottom:16px;}
.ca-porque-icono svg{width:22px;height:22px;}
.ca-porque-item h3{font-size:16px;font-weight:600;margin:0 0 6px;color:var(--ca-ink);}
.ca-porque-item p{font-size:13px;color:var(--ca-ink-60);line-height:1.5;margin:0;}
@media (max-width:960px){.ca-porque-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.ca-porque-grid{grid-template-columns:1fr;}}
@media (max-width:520px){.ca-porque h2{font-size:24px;}}

/* cta final — banda oscura, misma paleta navy que el hero. A todo el
   ancho de la pantalla (se sale del ast-container angosto de Astra con
   el truco clásico de full-bleed: 100vw + centrado por margen negativo). */
.ca-cta-final{
	width:100vw;
	position:relative;
	left:50%;
	right:50%;
	margin-left:-50vw;
	margin-right:-50vw;
	padding:72px 0;
	background:#0B0D2A;
	color:#FFFFFF;
	text-align:center;
}
.ca-cta-final h2{font-size:30px;font-weight:600;margin:0 0 10px;color:#FFFFFF;}
.ca-cta-final p{color:#AFB1C7;margin:0;font-size:15px;}
.ca-cta-final-social{display:flex;gap:18px;justify-content:center;margin-top:28px;}
.ca-cta-final-social a{
	width:56px;
	height:56px;
	border-radius:50%;
	border:none;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#FFFFFF;
	box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
	transition:transform .18s cubic-bezier(.16,.84,.44,1),box-shadow .18s ease;
}
.ca-cta-final-social a:hover{transform:translateY(-3px);box-shadow:0 12px 22px -8px rgba(0,0,0,.6);}
.ca-cta-final-social svg{width:24px;height:24px;}
.ca-social-instagram{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);}
.ca-social-whatsapp{background:#25D366;}
.ca-social-facebook{background:#1877F2;}
@media (max-width:520px){.ca-cta-final h2{font-size:24px;}}

/* sobre nosotros */
.ca-sobre{padding:72px 0;}
.ca-sobre h1{font-size:34px;font-weight:600;margin:0 0 24px;text-wrap:balance;color:var(--ca-ink);}
.ca-sobre-texto p{color:var(--ca-ink-60);line-height:1.7;margin:0 0 16px;font-size:15px;}
.ca-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;padding-top:36px;border-top:1px solid var(--ca-linea);}
.ca-stat{text-align:center;}
.ca-stat strong{display:block;font-size:34px;font-weight:700;color:var(--ca-acento);}
.ca-stat span{display:block;font-size:13px;color:var(--ca-ink-60);margin-top:4px;}
@media (max-width:640px){.ca-stats{grid-template-columns:1fr;gap:28px;}}
@media (max-width:520px){.ca-sobre h1{font-size:26px;}}

/* contacto */
.ca-contacto{padding:72px 0;}
.ca-contacto h1{font-size:34px;font-weight:600;margin:0 0 36px;color:var(--ca-ink);}
.ca-contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.ca-contacto-form form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.ca-contacto-form .ca-campo-full{grid-column:1/-1;}
.ca-contacto-form .ca-btn{grid-column:1/-1;justify-self:start;}
.ca-contacto-wa-directo{margin-top:4px;}
.ca-contacto-mapa{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--ca-linea);margin-bottom:20px;}
.ca-contacto-mapa iframe{width:100%;height:100%;border:0;display:block;}
.ca-contacto-datos{list-style:none;margin:0;padding:0;}
.ca-contacto-datos li{padding:12px 0;border-top:1px solid var(--ca-linea);font-size:14px;}
.ca-contacto-datos li strong{display:block;font-size:12px;color:var(--ca-ink-60);margin-bottom:2px;}
@media (max-width:860px){.ca-contacto-grid{grid-template-columns:1fr;}}
@media (max-width:520px){.ca-contacto-form form{grid-template-columns:1fr;}.ca-contacto h1{font-size:26px;}}

/* financiación */
.ca-financiacion{padding:72px 0;}
.ca-financiacion h1{font-size:34px;font-weight:600;margin:0 0 8px;color:var(--ca-ink);}
.ca-financiacion-aviso{color:var(--ca-ink-60);font-size:13px;max-width:560px;margin:0 0 32px;}
.ca-cotizador{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;background:var(--ca-fondo);border:1px solid var(--ca-linea);border-radius:12px;}
.ca-cotizador-resultado{margin-top:20px;padding:20px 24px;background:#14100C;color:#F7F3EC;border-radius:12px;font-size:15px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.ca-cotizador-resultado strong{font-size:26px;color:var(--ca-acento);}
.ca-financiacion-form{margin-top:48px;padding-top:36px;border-top:1px solid var(--ca-linea);max-width:520px;}
.ca-financiacion-form h2{font-size:20px;font-weight:600;margin:0 0 16px;color:var(--ca-ink);}
.ca-financiacion-form form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.ca-financiacion-form .ca-btn{grid-column:1/-1;justify-self:start;}
.ca-financiacion-link{font-size:13px;color:var(--ca-ink-60);}
.ca-financiacion-link a{color:var(--ca-acento);}
@media (max-width:640px){.ca-cotizador{grid-template-columns:1fr;}}
@media (max-width:520px){.ca-financiacion-form form{grid-template-columns:1fr;}.ca-financiacion h1{font-size:26px;}}

/* footer */
.ca-footer{background:var(--ca-panel);border-top:1px solid var(--ca-linea);}
.ca-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:56px 24px;}

/* logos de financiación (BBVA / Santander) — mismo tamaño de caja para
   los dos aunque los archivos originales tengan proporciones distintas. */
.ca-footer-financia{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.ca-footer-financia img{width:150px;height:70px;object-fit:contain;object-position:left center;}
.ca-footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ca-acento);margin:0 0 14px;}
.ca-footer-col ul{list-style:none;margin:0;padding:0;}
.ca-footer-col li{margin-bottom:10px;font-size:14px;}
.ca-footer-col a{color:var(--ca-ink);text-decoration:none;}
.ca-footer-col a:hover{color:var(--ca-acento);}
.ca-footer-bottom{border-top:1px solid var(--ca-linea);padding:18px 24px;}
.ca-footer-bottom p{margin:0;font-size:12px;color:var(--ca-ink-60);}
@media (max-width:780px){.ca-footer-grid{grid-template-columns:1fr;gap:32px;}}