/*
Theme Name: Renax Child
Theme URL: https://themeforest.net/item/renax-car-rental-elementor-wordpress-theme/53122009
Description: Child theme of Travol
Author: webRedox WordPress team
Author URI: http://webredox.net/
Template: renax
Version: 1.0
Text Domain: renax-child
*/
/******* Add Your CSS Below This Line *********/

/* ===== Contact Form 7 - Solicitar transfer ===== */
.wpcf7 .cf7-reserva{
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 40px;
  background: #f4f4f4;
  border-radius: 22px;
}

.wpcf7 .cf7-title{
  margin: 0 0 10px 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.wpcf7 .cf7-note{
  margin: 0 0 28px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #6a6a6a;
}

.wpcf7 .cf7-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 18px;
  align-items: start;
}

/* ===== Input fields estilo píldora ===== */
.wpcf7 .cf7-reserva input[type="text"],
.wpcf7 .cf7-reserva input[type="email"],
.wpcf7 .cf7-reserva input[type="tel"],
.wpcf7 .cf7-reserva input[type="date"],
.wpcf7 .cf7-reserva input[type="time"],
.wpcf7 .cf7-reserva input[type="number"]{
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 999px;
  padding: 16px 22px;
  font-size: 16px;
  outline: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* Textarea grande */
.wpcf7 .cf7-reserva textarea{
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 28px;
  padding: 18px 22px;
  min-height: 180px;
  font-size: 16px;
  outline: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  resize: vertical;
}

/* Placeholder */
.wpcf7 .cf7-reserva ::placeholder{
  color: #9a9a9a;
  opacity: 1;
}

/* Focus */
.wpcf7 .cf7-reserva input:focus,
.wpcf7 .cf7-reserva textarea:focus{
  border-color: #d9d9d9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

/* ===== Botones / Forms ===== */
.booking-button,
.wpforms-submit{
  background: #3E5C76 !important;
  color: #fff !important;
}

.booking-button:hover,
.wpforms-submit:hover{
  background: #8B1E2B !important;
  color: #fff !important;
}

/* ===== Footer icons / Social ===== */
div.icon-footer{
  color: #fff !important;
  background-color: #3E5C76;
  border: 1px solid #3E5C76;
}

.social-icons li{
  background: transparent;
  color: #fff;
  border: 1px solid #3E5C76;
}

.social-icons li:hover{
  background: #3E5C76;
}

/* ===== Owl icons ===== */
.owl-item .butn.icon-bg .icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid transparent;
}

.owl-item:hover .butn.icon-bg .icon{
  background-color: #8B1E2B !important;
  border-color: #8B1E2B !important;
  /*color: #fff !important;*/
}

/* ===================================================================== */
/* ============================ HEADER FIX ============================== */
/* ===================================================================== */

/* Elementor duplica el contenedor sticky con la clase spacer.
   Evitamos que interfiera con estilos/hover. */
#header_web.elementor-sticky__spacer{
  position: static !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  visibility: hidden !important;
}

/* Estado por defecto: fijo arriba + transparente */
#header_web:not(.elementor-sticky__spacer){
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;

  /*background: transparent;*/
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}

/* Si tu contenedor tiene padding interno y quieres que el fondo cubra todo */
#header_web:not(.elementor-sticky__spacer) > .e-con-inner{
  width: 100%;
}

/* Estado con scroll: blanco + sombra */
#header_web.header--scrolled:not(.elementor-sticky__spacer){
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* -------- Menú (Elementor) --------
   OJO: tu regla anterior ponía negro con !important a todo y mataba hover/active.
   Ahora lo hacemos específico para items del menú. */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .elementor-item{
  color: #000 !important;
}

/* Hover/focus del menú (cuando está scrolled) */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .elementor-item:hover,
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .elementor-item:focus{
  color: #3E5C76 !important;
}

/* Active/current del menú (cuando está scrolled) */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .current-menu-item > a.elementor-item,
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .current_page_item > a.elementor-item,
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--main .current-menu-ancestor > a.elementor-item{
  color: #8B1E2B !important;
}

/* Si el puntero es underline (Elementor), hacemos que acompañe al hover */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .e--pointer-underline .elementor-item:after{
  background-color: #3E5C76 !important;
}

/* Dropdown (menú burger desplegable) - por si quieres mismo comportamiento */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-nav-menu--dropdown a.elementor-item:hover{
  color: #3E5C76 !important;
}

/* Icono teléfono / botones del header (si quieres mantener comportamiento) */
#header_web .navbar-right .wrap .icon{
  border-color: #8B1E2B !important;
}

#header_web .navbar-right .wrap .icon:hover{
  background-color: #8B1E2B !important;
  border-color: #8B1E2B !important;
  color: #fff !important;
}


.button.owl-dot, a.elementor-button {
	padding: 0px;
}

.legal-link {
	color: #3E5C76;
}

.legal-link:hover{
  color: #8B1E2B;
  text-decoration: underline;
}

.slider-grid-bg .content .item {
        margin-bottom: 30px !important;
}

/* ===== Color para los Subtítulos ===== */
h2.rx-header-banner-sub-title, 
h2.rx-df-page-banner-subtitle,
p.rx-header-banner-sub-title, 
p.rx-df-page-banner-subtitle {
  color: #8B1E2B !important; /* Aplicamos el color de texto a los subtítulos */
}

/* Toggle (tablet/mobile) */
@media (max-width: 1024px){
  #header_web .elementor-menu-toggle svg,
  #header_web .elementor-menu-toggle svg path{
    fill: #fff !important;
  }

  #header_web.header--scrolled .elementor-menu-toggle svg,
  #header_web.header--scrolled .elementor-menu-toggle svg path{
    fill: #000 !important;
  }

  /* Por si Elementor duplica el sticky spacer */
  #header_web.elementor-sticky__spacer{
    visibility: hidden !important;
  }

  /* Asegura que el SVG pinte con currentColor */
  #header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 .elementor-button-icon svg,
  #header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 .elementor-button-icon svg path{
    fill: currentColor !important;
  }

/* Estado base (sin scroll) */
#header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button{
  color: #8B1E2B !important;
}

/* Con scroll */
#header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button{
  color: #000 !important;
}

/* Asegura que el SVG herede correctamente */
#header_web .elementor-element-669d192 svg,
#header_web .elementor-element-669d192 svg path{
  fill: currentColor !important;
}


  /* Hover-like (en móvil cuenta mucho :active / :focus) */
  #header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:hover .elementor-button-icon,
  #header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:active .elementor-button-icon,
  #header_web:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:focus .elementor-button-icon{
    color: #3E5C76 !important;
  }

  /* Si quieres que el hover en scrolled sea rojo (opcional) */
  #header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:hover .elementor-button-icon,
  #header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:active .elementor-button-icon,
  #header_web.header--scrolled:not(.elementor-sticky__spacer) .elementor-element-669d192 a.elementor-button:focus .elementor-button-icon{
    color: #8B1E2B !important;
  }
	
	
  
  /* Hide/reveal header en móvil */
  #header_web{
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    will-change: transform;
  }

  #header_web.header--hidden{
    transform: translateY(-110%);
  }
}

/* ===== Responsive CF7: 1 columna ===== */
@media (max-width: 768px){
  .wpcf7 .cf7-reserva{
    padding: 36px 18px;
  }

  .wpcf7 .cf7-grid{
    grid-template-columns: 1fr;
  }

  .wpcf7 .cf7-actions{
    justify-content: center;
  }
	
	/*Ajuste bestia de paddings en botones de header ya que hereda padding del tema que desplaza el botón innecesariamente*/
  .elementor-1754 .elementor-element.elementor-element-669d192 .elementor-button,
  .elementor-1754 .elementor-element.elementor-element-669d192 .elementor-button,
  .elementor-1526 .elementor-element.elementor-element-669d192 .elementor-button,	
  .elementor-1526 .elementor-element.elementor-element-ba55490 .elementor-button {
    padding: 0px 0px 0px 0px !important;
  }
}



@media (max-width: 1600px){
    .slider-grid-bg .content .item {
        margin-bottom: 15px !important;
    }
	
	.slider-grid-bg .content .item .grid-con {
		padding: 20px !important;
	}
}