/*
Theme Name: Hello Elementor Child
Theme URI: https://outletocasionlp.com/
Description: Tema hijo de Hello Elementor para Outlet Ocasión (rediseño 2026).
Author: Outlet Ocasión
Template: hello-elementor
Version: 1.5.0
Text Domain: hello-elementor-child
*/

/* =========================================================================
   1. Variables
   ========================================================================= */
:root {
	--primary-color: #c32228;      /* Rojo del logo (logooo.png). Blanco encima: 5,87:1 */
	--secondary-color: #34495e;    /* Gris elegante */
	--accent-color: #d4af37;       /* Dorado */
	--text-dark: #222;
	--text-light: #666;
	--white: #fff;
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Derivadas */
	--primary-dark: #a11c21;       /* hover del rojo (blanco encima: 7,77:1) */
	--primary-soft: rgba(195, 34, 40, .08);
	--heading-color: var(--text-dark); /* titulares en oscuro: el rojo se reserva para acción/marca */
	--accent-dark: #8a6d12;        /* dorado legible sobre blanco (4,9:1); dorado puro solo decorativo */
	--surface: #f7f8fa;
	--border: #e6e9ee;
	--radius: 14px;
	--shadow-sm: 0 2px 10px rgba(17, 24, 39, .06);
	--shadow-md: 0 14px 34px rgba(17, 24, 39, .14);
	--transition: .25s ease;

	/* Escala de espaciado */
	--space-xs: .5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--section-padding: clamp(3rem, 6vw, 5.5rem);
	--container: 1200px;
	--gutter: 16px;
}

/* =========================================================================
   2. Tipografía
   ========================================================================= */
body {
	font-family: var(--font-body);
	color: var(--text-dark);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--heading-color);
	line-height: 1.2;
	letter-spacing: -.01em;
}

h1 { font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3, h4, h5, h6 { font-weight: 600; }

p { margin-bottom: var(--space-sm); }

a { color: var(--primary-color); transition: color var(--transition); }
a:hover, a:focus { color: var(--primary-dark); }

/* Tipografías globales de Elementor (el kit usa Roboto): se redirigen a las
   nuevas fuentes por variables, sin tocar Elementor. */
.elementor-kit-3049 {
	--e-global-typography-primary-font-family: 'Poppins';
	--e-global-typography-secondary-font-family: 'Poppins';
	--e-global-typography-text-font-family: 'Inter';
	--e-global-typography-accent-font-family: 'Inter';
}

/* =========================================================================
   3. Espaciado y contenedor
   ========================================================================= */
.oo-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.oo-section { padding-block: var(--section-padding); }
.oo-section--alt { background: var(--surface); }

/* =========================================================================
   4. Hero (vídeo de fondo + degradado + texto centrado)
   a) En Elementor (portada, sección a584ef8): clase CSS "oo-hero" en la sección;
      Elementor pone el vídeo de fondo, la imagen de respaldo y el degradado.
   b) En HTML propio: <section class="oo-hero"><video class="oo-hero__video" …>
      <div class="oo-hero__content">…</div></section> (esta hoja pone el degradado).
   ========================================================================= */
.oo-hero { color: var(--white); }

.oo-hero:not(.elementor-section) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 78vh, 760px);
	padding: var(--space-xl) var(--gutter);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	background: var(--secondary-color);
}

.oo-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oo-hero:not(.elementor-section)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(20, 27, 36, .72) 0%, rgba(20, 27, 36, .88) 100%);
	pointer-events: none;
}

.oo-hero__content {
	max-width: 760px;
	margin-inline: auto;
}

.oo-hero h1,
.oo-hero h2 {
	color: var(--white);
	margin-bottom: var(--space-sm);
}

/* Filete rojo de marca bajo el titular */
.oo-hero h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: .45em auto 0;
	border-radius: 2px;
	background: var(--primary-color);
}

.oo-hero__lead {
	font-size: 18px;
	color: #e5e7eb;
	margin-bottom: var(--space-md);
}

/* Indicador de scroll (ratón con rueda animada) */
.oo-scroll {
	display: block;
	width: 26px;
	height: 42px;
	margin: 0 auto;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 14px;
	position: relative;
	opacity: .85;
	transition: opacity var(--transition), border-color var(--transition);
}
.oo-scroll span {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--white);
	animation: oo-scroll 1.8s ease-in-out infinite;
}
.oo-scroll:hover,
.oo-scroll:focus-visible { opacity: 1; border-color: var(--white); }
.oo-scroll:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
@keyframes oo-scroll {
	0%   { transform: translateY(0);    opacity: 1; }
	70%  { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0);    opacity: 0; }
}

/* Legibilidad sobre el vídeo: sombra suave + centrado forzado en la sección de Elementor */
.oo-hero h1,
.oo-hero .elementor-heading-title {
	text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}
.elementor-section.oo-hero > .elementor-container { justify-content: center; }
.elementor-section.oo-hero .elementor-widget-wrap {
	justify-content: center;
	text-align: center;
}
/* Respaldo de la capa oscura por si la de Elementor no carga */
.elementor-section.oo-hero { background-color: #111; }

@media (prefers-reduced-motion: reduce) {
	.oo-hero__video,
	.oo-hero .elementor-background-video-container { display: none; }
	.oo-scroll span { animation: none; }
}

/* =========================================================================
   4b. Cabecera (plantilla HFE 6118): logo centrado en vertical con el menú
   El <img> en línea deja un hueco de línea base debajo → bloque.
   ========================================================================= */
.elementor-6118 .elementor-element-c652a96 a,
.elementor-6118 .elementor-element-c652a96 img {
	display: block;
	line-height: 0;
}
.elementor-6118 .elementor-element-c652a96 img { margin-inline: auto; }
.elementor-6118 .elementor-element-ea9ee73 > .elementor-container { align-items: center; }

/* =========================================================================
   5. Botones
   ========================================================================= */
.oo-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .85em 1.8em;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
	background: var(--primary-color);
	color: var(--white);
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.oo-btn:hover,
.oo-btn:focus {
	color: var(--white);
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(195, 34, 40, .28);
}

/* Variante dorada (uso puntual: "oferta", "premium"): texto oscuro, 7,6:1 */
.oo-btn--accent,
.oo-btn--accent:hover,
.oo-btn--accent:focus {
	background: var(--accent-color);
	color: var(--text-dark);
}

.oo-btn--outline {
	background: transparent;
	color: var(--white);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
}

/* =========================================================================
   6. Tarjetas de vehículo (plugin outlet-vehiculos-pro: .ovp-card)
   El plugin imprime su CSS en línea después del <head>; "body" sube la
   especificidad para que estas reglas manden sin !important.
   ========================================================================= */
body .ovp-shortcode-grid { gap: var(--space-md); }

body .ovp-card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

body .ovp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(195, 34, 40, .35);
}

body .ovp-card-body { padding: 20px 20px 22px; }

body .ovp-card-marca {
	font-family: var(--font-body);
	color: var(--primary-color);
	letter-spacing: .08em;
}

body .ovp-card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--heading-color);
	margin-bottom: 16px;
}

body .ovp-spec-label { color: #6b7280; }   /* 4.8:1 sobre blanco */
body .ovp-spec-value { color: var(--text-dark); font-weight: 500; }

body .ovp-card-price,
body .ovp-price-main {
	font-family: var(--font-heading);
	color: var(--primary-color);
}

body .ovp-card .ovp-price-main { font-weight: 700; }
/* El plugin pinta la oferta en ámbar #f59e0b (2,1:1, ilegible): rojo oscuro + la etiqueta "oferta" ya la distingue */
body .ovp-card .ovp-price-main.oferta { color: var(--primary-dark); }
body .ovp-price-old { color: #6b7280; }

body .ovp-card-actions { gap: 10px; }

body .ovp-btn-more {
	background: var(--secondary-color);
	color: var(--white);
	border-radius: 999px;
	transition: background var(--transition);
}

body .ovp-btn-more:hover,
body .ovp-btn-more:focus {
	background: var(--primary-color);
	color: var(--white);
}

/* Verde WhatsApp del plugin (#25D366 = 2:1 sobre blanco) → verde oscuro legible; al pasar, fondo verde marca */
body .ovp-card .ovp-btn-whatsapp { color: #0f7a40; border-color: #25d366; border-radius: 999px; }
body .ovp-card .ovp-btn-whatsapp:hover { color: #0b3d22; background: #25d366; }

body .ovp-card a:focus-visible,
.oo-btn:focus-visible {
	outline: 3px solid var(--primary-color);
	outline-offset: 2px;
}

/* =========================================================================
   7. Ficha de vehículo (templates/single-vehiculos.php del plugin)
   Los rojos del plugin ya usan var(--primary-color); aquí solo contraste.
   ========================================================================= */
body .ovp-single-subtitle,
body .ovp-price-old,
body .ovp-share-title { color: #6b7280; }                 /* #999 = 2,8:1 → 4,8:1 */

body .ovp-single-title,
body .ovp-description-title { font-family: var(--font-heading); }

body .ovp-btn-whatsapp:not(.ovp-card .ovp-btn-whatsapp) {  /* #25D366 + blanco = 2:1 → 5,4:1 */
	background: #0f7a40;
	color: var(--white);
}
body .ovp-btn-whatsapp:not(.ovp-card .ovp-btn-whatsapp):hover { background: #0b5f32; color: var(--white); }

body .ovp-btn-llamar:hover { background: var(--primary-dark); }
body .ovp-btn-imprimir { background: var(--secondary-color); }  /* azul #2563eb fuera de paleta */
body .ovp-btn-imprimir:hover { background: #2c3e50; }

/* =========================================================================
   8. Etiquetas de estado (CSS adicional .Disponible / .Reservado / .Vendido
   se mantiene en el Personalizador; aquí la oferta)
   ========================================================================= */
body .ovp-badge-oferta,
.Oferta {
	background: var(--primary-color);
	color: var(--white);
}

/* =========================================================================
   10. Página Contacto (3694)
   ========================================================================= */
.oo-contact-head .elementor-heading-title { text-shadow: none; }
.oo-contact-intro p { max-width: 560px; margin: .5rem auto 0; }

.oo-contact-card > .elementor-element-populated {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 32px 20px 26px !important;   /* el padding de columna de Elementor manda con más especificidad */
	margin: 10px;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.oo-contact-card > .elementor-element-populated:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(195, 34, 40, .35);
}
.oo-contact-value p { margin: 0; line-height: 1.5; }
.oo-contact-value a { color: var(--text-dark); font-weight: 500; text-decoration: none; word-break: break-word; }
.oo-contact-value a:hover,
.oo-contact-value a:focus { color: var(--primary-color); text-decoration: underline; }

.oo-contact-map iframe {
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	display: block;
}

/* =========================================================================
   11. Formularios (shortcode [oo_vende_coche])
   ========================================================================= */
.oo-form-wrap {
	max-width: 760px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: var(--shadow-md);
	padding: clamp(22px, 4vw, 40px);
	font-family: var(--font-body);
}
.oo-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.oo-field { display: flex; flex-direction: column; min-width: 0; }
.oo-field--full { grid-column: 1 / -1; }
.oo-field label {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 6px;
}
.oo-field label span[aria-hidden] { color: var(--primary-color); }

.oo-form input[type="text"],
.oo-form input[type="tel"],
.oo-form input[type="email"],
.oo-form select,
.oo-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font: inherit;
	font-size: 16px;                       /* 16px: iOS no hace zoom al enfocar */
	color: var(--text-dark);
	background: #fbfbfc;
	border: 1.5px solid #d6dbe1;
	border-radius: 10px;
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
	-webkit-appearance: none;
	appearance: none;
}
.oo-form select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.oo-form textarea { min-height: 120px; resize: vertical; }
.oo-form ::placeholder { color: #8a929c; }

.oo-form input:focus,
.oo-form select:focus,
.oo-form textarea:focus {
	outline: none;
	background: var(--white);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px var(--primary-soft);
}

.oo-field__error {
	min-height: 0;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--primary-dark);
}
.oo-field__error:empty { display: none; }
.oo-field.is-invalid input,
.oo-field.is-invalid select,
.oo-field.is-invalid textarea { border-color: var(--primary-color); background: #fff7f7; }

.oo-field--check { margin-top: 18px; }
.oo-check {
	display: flex !important;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: var(--text-light) !important;
	cursor: pointer;
}
.oo-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--primary-color); }
.oo-check a { color: var(--primary-color); }

.oo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.oo-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 22px;
	min-height: 54px;
	border: 0;
	font-size: 17px;
	cursor: pointer;
}
.oo-form__submit:disabled { opacity: .7; cursor: progress; transform: none; }
.oo-form__submit.is-loading .oo-form__submit-text::after { content: "…"; }
.oo-form__note { margin: 12px 0 0; font-size: 13px; color: var(--text-light); text-align: center; }
.oo-form__status { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--primary-dark); text-align: center; }
.oo-form__status:empty { display: none; }

.oo-form-ok { text-align: center; padding: 12px 0; outline: none; }
.oo-form-ok__icon {
	width: 64px; height: 64px; margin: 0 auto 14px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #e7f5ec; color: #0f7a40;
	font-size: 32px; font-weight: 700;
}
.oo-form-ok__title { font-size: 26px; margin-bottom: 8px; }
.oo-form-ok p { color: var(--text-light); max-width: 480px; margin: 0 auto 20px; }
.oo-btn--whatsapp { background: #0f7a40; color: var(--white); }
.oo-btn--whatsapp:hover,
.oo-btn--whatsapp:focus { background: #0b5f32; color: var(--white); box-shadow: 0 8px 20px rgba(15, 122, 64, .28); }

@media (max-width: 640px) {
	.oo-form__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   9. Móvil
   ========================================================================= */
@media (max-width: 767px) {
	:root { --space-xl: 2.5rem; }
	.oo-hero:not(.elementor-section) { min-height: 70vh; }
	body .ovp-card:hover { transform: none; }
}