/* Custom Styles for Hospedaje Estudiantes Landing Page */

/* Estilo para el contenedor del banner/hero */
#hero-hospedaje {
    padding-top: 150px; /* Asegura espacio para el header */
    padding-bottom: 100px;
}

/* Ajuste de color para el texto en el HERO para mejor contraste sobre la imagen del banner */
#hero-hospedaje .caption h1,
#hero-hospedaje .caption p.lead {
    color: #2a2a2a; /* Color de texto oscuro para fondo claro/imagen de banner */
}


/* ------------------------------------------------------------------- */
/* ESTILOS DE CAJAS INFORMATIVAS (FONDO BLANCO / GRIS CLARO) */
/* ------------------------------------------------------------------- */

/* Estilo para la caja de información (sección #que-es-hospedaje) */
.info-box {
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--primary-color, #f4b41a); /* Línea de acento */
}
.info-box h4 strong {
    color: var(--secondary-color);
}
.info-box ul li {
    margin-bottom: 8px;
    color: #555;
}

/* ------------------------------------------------------------------- */
/* ESTILOS DE BENEFICIOS (Tarjeta limpia sobre fondo gris) */
/* ------------------------------------------------------------------- */

#beneficios {
    background-color: #f8f9fa; /* Fondo gris muy claro para contraste sutil */
}

/* Estilo de la tarjeta para beneficios */
#beneficios .country-card.card-shadow {
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave */
    border: none;
    min-height: 250px;
    transition: transform 0.3s;
}

#beneficios .country-card.card-shadow:hover {
    transform: translateY(-5px);
}

/* Iconos de Beneficios */
#beneficios .country-card .flag-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 65px; 
    height: 65px;
    background-color: var(--primary-color, #f4b41a); 
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
#beneficios .country-card .flag-icon .fa {
    color: #fff;
    font-size: 30px;
}
#beneficios .country-card h4 strong {
    font-weight: 700;
}


/* ------------------------------------------------------------------- */
/* ESTILOS DE PROCESO (Se mantiene fondo de contraste del tema principal) */
/* ------------------------------------------------------------------- */

#proceso {
    background-color: #334e68 !important; /* Mantenemos este color para un fuerte contraste */
}

/* Contenedor del paso (tarjeta clara sobre el fondo oscuro) */
#proceso .country-card.process-step {
    position: relative;
    padding-top: 50px;
    min-height: 250px;
    background-color: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}

/* Número de paso (1, 2, 3) - Centrado */
#proceso .process-step .step-number {
    position: absolute;
    top: -18px; 
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #Cd5360; 
    color: white;
    font-size: 20px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Iconos de los pasos */
#proceso .process-step .flag-icon {
    background-color: #A93E59 !important; /* Color de acento para los iconos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#proceso .process-step h4 {
    color: #FFF !important; 
    font-weight: 700;
    margin-top: 15px;
}

#proceso .process-step p {
    color: #EEE !important;
}

/* ------------------------------------------------------------------- */
/* ESTILOS DE FORMULARIO (Sección Formulario sobre fondo blanco/gris claro) */
/* ------------------------------------------------------------------- */

#cotizacion {
    background-color: #ffffff !important; /* Fondo blanco */
}

/* Contenedor del formulario - Tarjeta gris claro sobre fondo blanco */
.get-free-quote.modern-form-card {
    background-color: #f8f9fa !important; 
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

/* Estilo general para todos los inputs */
.get-free-quote input,
.get-free-quote select.form-control,
.get-free-quote textarea {
    width: 100%;
    height: 50px; 
    border-radius: 6px; 
    border: 1px solid #ddd; /* Borde sutil */
    outline: none;
    padding: 0px 20px; 
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    background-color: #fff;
    color: #2a2a2a;
    transition: all 0.3s;
}

.get-free-quote input:focus,
.get-free-quote select:focus,
.get-free-quote textarea:focus {
    border-color: #Cd5360;
    box-shadow: 0 0 0 3px #Cd536030; /* Sombra de enfoque de color de acento */
}

/* Ajuste de altura para el campo de texto (textarea) */
.get-free-quote textarea {
    height: 140px; 
    padding-top: 15px;
}

/* Estilo moderno para el SELECT */
.get-free-quote select.minimal-select {
    -webkit-appearance: none; 
    -moz-appearance: none;    
    appearance: none;         
    /* Icono SVG de flecha hacia abajo sutil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232a2a2a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
}
.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}

.whatsapp-icon {
  margin-top:13px;
}