/*
Theme Name: Hello Elementor Child
Theme URI: https://www.solucionweb.com/
Description: Tema hijo personalizado para Hello Elementor con login privado, reglas de acceso, botones flotantes configurables, WhatsApp, shortcodes básicos administrables y seguridad antispam para formularios.
Author: Solución Web
Author URI: https://www.solucionweb.com/
Template: hello-elementor
Version: 2.4.8
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-login, translation-ready, elementor, child-theme
*/

/* ---------- Generales ---------- */
/* clip y no hidden: con hidden el documento se vuelve contenedor de
   desplazamiento y deja de funcionar el position: sticky (banner fijo). */
html, body{
	overflow-x: clip;
}

.margin-left-auto{
	margin-left: auto;
}

.margin-top-auto{
	margin-top: auto;
}

/* Párrafos
   (.elementor .elementor-widget-text-editor delante: el «espaciado de párrafos»
   del widget se emite con cuatro clases y dejaba margen bajo el último.) */
.elementor .elementor-widget-text-editor.p-no-bottom p:last-child{
	margin-bottom: 0;
	margin-block-end: 0;
}

.p-no-bottom-all p{
	margin-bottom: 0;
}


/* ----- Header ----- */
@media (max-width: 1024px){
	.elementor-element-d6e5abe .e-n-menu-wrapper{
		box-sizing: border-box;
		max-height: calc(100vh - 49px);
		overflow-y: auto;
		background-color: var(--e-global-color-accent) !important;
		padding: 12px 18px 18px;
		border-radius: 0 0 20px 20px;
		box-shadow: 0 18px 40px rgba(17,18,20,.18);
	}
	.elementor-element-d6e5abe .e-n-menu-heading{
		display: flex;
		flex-direction: column;
		width: 100% !important;
		gap: 0;
	}
	.elementor-element-d6e5abe .e-n-menu-item{
		width: 100% !important;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}
	.elementor-element-d6e5abe .e-n-menu-title{
		box-sizing: border-box;
		width: 100% !important;
		min-height: 48px;
		background: transparent !important;
	}
	.elementor-element-d6e5abe .e-n-menu-title-container{
		padding: 14px 0 !important;
		color: rgba(255, 255, 255, .82) !important;
	}
	.elementor-element-d6e5abe .e-n-menu-dropdown-icon{
		color: rgba(255, 255, 255, .82) !important;
	}
	.elementor-element-d6e5abe .e-n-menu-content{
		position: static !important;
		width: 100% !important;
		transform: none !important;
	}
	.elementor-element-d6e5abe .elementor-element-14d0375,
	.elementor-element-d6e5abe .elementor-element-efe1197{
		width: 100% !important;
		margin: 0 0 12px;
		padding: 18px 20px;
		border-radius: 14px;
	}
}

/* ronda 42: la flecha del botón «Haz tu cita» se muestra también en móvil */



/* Formulario de cotización (#form-cotizacion: popup 255 y página Contacto)
   Colores, tipografías, campos y botones van en los ajustes del widget. Aquí
   solo lo que el formulario de Elementor no expone: las opciones de radio y
   de casilla como tarjetas en rejilla con su círculo de selección, y los
   textos que el propio campo HTML imprime con clase (.paso, .texto-descriptivo). */
span.texto-descriptivo{
	display: block;
	color: var(--e-global-color-text);
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	letter-spacing: 0;
	width: 100%;
}

span.paso{
	color: var(--e-global-color-primary);
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
}

/* Opciones (radio y casillas): tarjeta con círculo a la izquierda */
#form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-subgroup,
#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-subgroup {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    width: 100%;
}

#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-subgroup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option:nth-child(5) {
    grid-column: span 2;
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-option,
#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos input[type="radio"],
#form-cotizacion .elementor-field-group-tipo_vehiculo input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-option > label,
#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option > label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px;
    border: 1.5px solid var(--e-global-color-ba97f2c);
    border-radius: 14px;
    background: var(--e-global-color-mlblanc);
    color: var(--e-global-color-accent);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .3s var(--ml-ease), background-color .3s var(--ml-ease), transform .35s var(--ml-ease-out);
}

#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option > label {
    padding: 13px 14px;
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-option > label::before,
#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option > label::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--e-global-color-ba97f2c);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color .3s var(--ml-ease), box-shadow .3s var(--ml-ease), background-color .3s var(--ml-ease);
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-option > label:hover,
#form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option > label:hover {
    border-color: var(--e-global-color-primary);
    background: var(--e-global-color-mlrosa1);
    transform: translateY(-2px);
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos input[type="radio"]:checked + label,
#form-cotizacion .elementor-field-group-tipo_vehiculo input[type="checkbox"]:checked + label {
    border-color: var(--e-global-color-primary);
    background: var(--e-global-color-mlrosa1);
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos input[type="radio"]:checked + label::before,
#form-cotizacion .elementor-field-group-tipo_vehiculo input[type="checkbox"]:checked + label::before {
    border-color: var(--e-global-color-primary);
    background: var(--e-global-color-primary);
    box-shadow: inset 0 0 0 4.5px var(--e-global-color-mlblanc);
}

#form-cotizacion .elementor-field-group-cantidad_vehiculos input[type="radio"]:focus-visible + label,
#form-cotizacion .elementor-field-group-tipo_vehiculo input[type="checkbox"]:focus-visible + label {
    outline: 3px solid rgb(227 9 24 / 18%);
    outline-offset: 2px;
}

#form-cotizacion .elementor-field-group-tipo_vehiculo > .elementor-field-label {
    width: 100%;
    margin-bottom: 12px;
}

/* Campos: 58 px de alto y anillo rojo al enfocar (el foco no tiene control) */
#form-cotizacion input.elementor-field-textual,
#form-cotizacion select.elementor-field-textual {
    height: 58px;
    padding: 0 16px;
    transition: border-color .3s var(--ml-ease), box-shadow .3s var(--ml-ease);
}

#form-cotizacion select.elementor-field-textual {
    padding-right: 42px;
}

#form-cotizacion .elementor-field-textual:focus {
    border-color: var(--e-global-color-primary);
    box-shadow: 0 0 0 4px rgb(227 9 24 / 10%);
    outline: 0;
}

/* Navegación entre pasos: filete superior y botones en línea */
#form-cotizacion .e-form__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--e-global-color-mlbord2);
}

#form-cotizacion .e-form__buttons__wrapper {
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 767px) {
    #form-cotizacion .elementor-field-group-cantidad_vehiculos .elementor-field-subgroup,
    #form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-subgroup {
        grid-template-columns: 1fr;
    }

    #form-cotizacion .elementor-field-group-tipo_vehiculo .elementor-field-option:nth-child(5) {
        grid-column: auto;
    }

    #form-cotizacion .e-form__buttons {
        flex-wrap: wrap;
    }
}


/* ---------- Blog ---------- */
/* Enlaces dentro del Editor de texto de los artículos (el widget no tiene color de enlace) */
.ml-blog-texto a{
	color: var(--e-global-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ml-blog-texto a:hover{
	color: var(--e-global-color-secondary);
}

/* Anterior / siguiente: ocultar la columna o la sección cuando no hay entrada que mostrar */
.ml-blog-nav-col:not(:has(.e-loop-item)),
.ml-blog-nav:not(:has(.e-loop-item)){
	display: none;
}

/* Imagen con enlace en las tarjetas del blog: el <a> de Elementor es inline-block y no deja que la imagen ocupe el 100% */
.ml-blog-img a{
	display: block;
}

/* Anterior / siguiente: las dos tarjetas miden lo mismo (el Loop Grid y su tarjeta llenan el alto de la columna)
   y la imagen ocupa todo el alto de la tarjeta horizontal */
.ml-blog-nav-col .elementor-widget-loop-grid,
.ml-blog-nav-col .elementor-widget-loop-grid > .elementor-widget-container,
.ml-blog-nav-col .elementor-loop-container,
.ml-blog-nav-col .e-loop-item,
.ml-blog-nav-col .ml-blog-card-h{
	height: 100%;
}

.ml-blog-card-h .ml-blog-img a{
	height: 100%;
}

/* Etiquetas "Artículo anterior / siguiente": son texto, no enlace */
.ml-blog-nav-label .elementor-button{
	cursor: default;
}