/* RESET BÁSICO */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* =========================================
   NUEVA NAVEGACIÓN PREMIUM
   ========================================= */

/* La barra flota sobre la foto */
nav.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    position: absolute; /* Truco: Se pone ENCIMA de la portada */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box; /* Para que el padding no ensanche la web */
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); /* Sombra suave para leer el texto */
}

/* --- EL NUEVO LOGO --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.logo-box {
    background-color: white; /* Cuadrado blanco */
    color: #333;
    width: 65px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 800; /* Letra muy gruesa */
    border-radius: 4px; /* Bordes un pelín redondeados */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.logo-text {
    color: white; /* Texto en blanco para resaltar sobre la foto */
    font-size: 1.3rem;
    font-weight: 300; /* Letra fina y elegante */
    letter-spacing: 2px; /* Mucho espacio entre letras (muy premium) */
    text-transform: uppercase;
}

/* --- ENLACES DEL MENÚ --- */
nav ul.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
}

nav a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9); /* Blanco un poco transparente */
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.3s;
}

nav a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5); /* Brillo al pasar el ratón */
}

/* Botón especial de contacto en el menú */
.btn-nav {
    border: 1px solid white;
    padding: 8px 20px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.btn-nav:hover {
    background: white;
    color: #333 !important; /* Se vuelve negro al pasar el ratón */
}

/* HERO SECTION (PORTADA) */
header {
    /* Ajuste fino: 0.3 da el equilibrio exacto entre luz y legibilidad */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/Gemini_Generated_Image_qboc9tqboc9tqboc.png');
    background-size: cover;
    background-position: center;
    height: 85vh; /* Buena altura */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    color: white;
    position: relative;
}
/* SECCIÓN FLEX LIVING MEJORADA */
.section-flex {
    background-color: #f8fbff; /* Un azul muy muy clarito, casi blanco */
    padding: 80px 20px;
}

.subtitle {
    color: #007bff; /* Azul corporativo */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

.intro-text {
    max-width: 700px;
    margin: 0 auto 50px auto;
    font-size: 1.1rem;
    color: #666;
}

/* TARJETAS DE BENEFICIOS (FEATURES) */
.feature-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

.feature-card:hover {
    transform: translateY(-10px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #007bff; /* Borde azul al pasar el ratón */
}

/* ICONOS */
.icon-circle {
    width: 70px;
    height: 70px;
    background-color: #eef6ff; /* Fondo azulito para el icono */
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 1.8rem;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* CAJA DE PERFILES (PARA QUIÉN ES) */
.profiles-box {
    margin-top: 80px;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: left;
    border-left: 5px solid #007bff; /* Línea decorativa a la izquierda */
}

.profiles-content h3 {
    margin-top: 0;
    color: #333;
}

.check-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dos columnas automáticas */
    gap: 15px;
}

.check-list li {
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-list i {
    color: #28a745; /* Check verde */
    font-size: 1.1rem;
}
/* SECCIONES GENERALES */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.bg-gray {
    background-color: #f9f9f9;
}

h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* GRID SYSTEM */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* TARJETAS MEJORADAS */
.accommodation-card {
    background: white;
    border-radius: 12px; /* Bordes más redondeados */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* Sombra más elegante */
    overflow: hidden; /* Esto hace que la imagen respete los bordes redondos */
    transition: transform 0.3s ease; /* Animación suave al pasar el ratón */
    padding: 0; /* Quitamos el padding general para que la foto toque los bordes */
    text-align: left;
    display: flex;
    flex-direction: column;
}

.accommodation-card:hover {
    transform: translateY(-5px); /* La tarjeta "flota" al pasar el ratón */
}

/* IMÁGENES DE LAS TARJETAS */
.card-img {
    width: 100%;
    height: 200px; /* Altura fija para que todas sean iguales */
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformarse */
}

.card-content {
    padding: 25px; /* El texto sí lleva margen interno */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ETIQUETAS DE ESTADO */
.badge {
    background: #444;
    color: white;
    padding: 5px 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 15px;
}

.badge-blue { background-color: #007bff; }
.badge-dark { background-color: #222; }

/* DETALLES */
.pet-friendly {
    color: #28a745;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* EFECTO BLANCO Y NEGRO PARA "PRÓXIMAMENTE" */
.grayscale {
    filter: grayscale(100%);
    opacity: 0.7;
}

.img-overlay-container {
    position: relative;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px 20px;
    font-weight: bold;
    border: 2px solid white;
    white-space: nowrap;
}

/* BOTONES */
.btn {
    display: inline-block;
    background: #333;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
}

.btn-outline {
    display: inline-block;
    border: 1px solid #333;
    color: #333;
    padding: 8px 20px;
    text-decoration: none;
    margin-top: 15px;
    font-size: 0.9rem;
}

.btn-disabled {
    display: inline-block;
    color: #999;
    font-size: 0.9rem;
    margin-top: 15px;
    border: 1px dashed #ccc;
    padding: 8px 20px;
}

/* DETALLES */
.quote {
    font-style: italic;
    color: #666;
    margin-bottom: 40px;
}

.profiles ul {
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
}


/* SECCIÓN CONTACTO */
.section-contact {
    background-color: #222; /* Fondo oscuro elegante */
    color: white;
    padding: 80px 20px;
}

/* Frase del Equipo */
.team-commitment {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.commitment-text {
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.8;
    color: #ddd;
}

.divider {
    width: 60px;
    height: 3px;
    background-color: #007bff; /* Línea azul decorativa */
    margin: 30px auto 0 auto;
}

/* Contenedor del Formulario */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info a la izquierda, Form a la derecha */
    gap: 50px;
    background: #333;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Info Izquierda */
.contact-info h3 {
    margin-top: 0;
    color: white;
    font-size: 1.8rem;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.info-list li {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
}

.info-list i {
    color: #007bff;
}

/* Formulario Derecha */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #aaa;
}

input, textarea {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #444;
    background: #222;
    color: white;
    font-family: inherit;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #007bff;
    background: #2a2a2a;
}

.btn-full {
    width: 100%;
    background-color: #007bff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-full:hover {
    background-color: #0056b3;
}

/* Footer final pequeñito */
footer {
    background: #111;
    color: #666;
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
}

/* Adaptación para móvil */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
}

/* =========================================
   NUEVOS ESTILOS DE VENTANA MODAL FLOTANTE
   ========================================= */

/* El fondo oscuro que cubre toda la pantalla */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Hacemos el fondo un poco más oscuro para que resalten más las tarjetas */
    background-color: rgba(0,0,0,0.85); 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px); /* Más desenfoque de fondo */
    padding: 20px; /* Un poco de margen en móviles */
}

/* El contenedor invisible que centra todo */
.modal-content {
    /* --- CAMBIOS CLAVE AQUÍ --- */
    background-color: transparent; /* Quitamos el fondo blanco */
    box-shadow: none; /* Quitamos la sombra de la caja */
    /* -------------------------- */
    
    width: 100%;
    max-width: 1100px; /* Aumentamos el ancho máximo para que ocupen más pantalla */
    text-align: center;
    position: relative;
    color: white; /* IMPORTANTE: El texto del título ahora es blanco */
}

/* Título y descripción del modal */
.modal-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para leer mejor */
}

.modal-content p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Botón de cerrar (X) */
.close-btn {
    position: absolute;
    top: -40px; /* Lo subimos para que no moleste al título */
    right: 0;
    color: white; /* Ahora la X es blanca */
    font-size: 35px;
    font-weight: 300;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.7;
}

.close-btn:hover { opacity: 1; transform: rotate(90deg); } /* Pequeño giro al pasar el ratón */

/* Grid interno del modal - Más espacioso */
.modal-grid {
    display: grid;
    /* Aumentamos el tamaño mínimo de 200px a 280px para que sean más grandes */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Más espacio entre ellas */
    margin-top: 50px;
}

/* --- LAS TARJETAS FLOTANTES --- */
.sub-card {
    background: white; /* Las tarjetas sí siguen siendo blancas */
    padding: 20px;
    border-radius: 15px;
    /* Sombra mucho más fuerte para que parezcan que vuelan alto */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); 
    text-align: left;
    
    /* Preparación para la animación */
    opacity: 0; /* Empiezan invisibles */
    transform: translateY(50px); /* Empiezan más abajo */
    /* Animación: nombre, duración, tipo, y "forwards" para que se queden en el sitio final */
    animation: floatUpFadeIn 0.6s ease-out forwards;
}

/* --- DINAMISMO: Retraso escalonado --- */
/* Esto hace que aparezca una, luego otra, y luego la otra */
.sub-card:nth-child(1) { animation-delay: 0.1s; }
.sub-card:nth-child(2) { animation-delay: 0.3s; }
.sub-card:nth-child(3) { animation-delay: 0.5s; }

/* Estilos internos de la tarjeta */
.sub-card:hover {
    transform: translateY(-10px) scale(1.02); /* Al pasar el ratón suben un poco más */
    transition: transform 0.3s ease;
}

.sub-card img {
    width: 100%;
    height: 180px; /* Fotos un poco más altas */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

.sub-card h4 {
    margin: 10px 0;
    color: #333;
    font-size: 1.2rem;
}

.btn-small {
    display: block; /* Botón ancho completo */
    text-align: center;
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 15px;
}

.btn-small:hover { background-color: #0056b3; box-shadow: 0 5px 15px rgba(0,123,255,0.3); }

/* --- LA NUEVA ANIMACIÓN --- */
/* Las tarjetas suben desde abajo y aparecen */
@keyframes floatUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9); /* Empiezan abajo y un poco más pequeñas */
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1); /* Terminan en su sitio y tamaño normal */
    }
}

/* =========================================
   ANIMACIONES GENERALES DE LA WEB
   ========================================= */

/* 1. Animación inicial para la Portada (Hero) */
/* El texto de la portada aparecerá solo al cargar */
.hero-content {
    animation: floatUpHero 1s ease-out forwards;
    opacity: 0; /* Invisible al principio */
    transform: translateY(30px); /* Un poco más abajo */
}

@keyframes floatUpHero {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Clase para ocultar elementos antes de hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px); /* Empiezan 50px más abajo */
    transition: all 0.8s ease-out; /* Tardan 0.8s en colocarse */
}

/* 3. Clase que añadiremos con JS cuando el elemento sea visible */
.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Vuelven a su sitio */
}

/* =========================================
   CORRECCIÓN PARA MÓVIL (Menú Ordenado)
   ========================================= */
@media (max-width: 768px) {

    /* 1. NAVEGACIÓN: Vertical y con fondo */
    nav.navbar {
        position: relative; /* En móvil dejamos que ocupe su espacio real */
        background-color: #111; /* Fondo negro para que se lea perfecto */
        flex-direction: column; /* Elementos uno debajo de otro */
        padding: 20px;
        height: auto; /* Altura automática según el contenido */
    }

    /* 2. LOGO: Centrado */
    .logo-container {
        margin-bottom: 20px; /* Separación con los enlaces */
        justify-content: center;
    }

    .logo-text {
        font-size: 1.1rem; /* Un poco más pequeño */
    }

    /* 3. ENLACES: Visibles y ordenados */
    .nav-links {
        display: flex !important; /* Forzamos que se vean */
        flex-wrap: wrap; /* Si no caben, bajan a otra línea */
        justify-content: center; /* Centrados */
        gap: 15px; /* Espacio entre botones */
        width: 100%;
        padding: 0;
    }

    nav a {
        font-size: 0.85rem;
        background: rgba(255,255,255,0.1); /* Botoncito gris suave */
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-block;
    }

    /* Botón de contacto destacado también en móvil */
    .btn-nav {
        background: white;
        color: #333 !important;
    }

    /* 4. AJUSTE DE LA PORTADA */
    header {
        height: 50vh; /* Portada más bajita en móvil */
        margin-top: 0; 
    }
    
   /* TÍTULO IMPACTANTE */
.hero-content h1 {
    font-family: 'Montserrat', sans-serif; /* Aseguramos la fuente moderna */
    font-size: 3.5rem; /* Grande, pero sin pasarse */
    font-weight: 900; /* EXTRA NEGRITA (La clave para que no se pierda) */
    text-transform: uppercase; /* Todo mayúsculas */
    line-height: 1.1;
    margin: 0 auto 20px auto;
    max-width: 900px;
    
    /* Esta sombra negra hace que el texto "salte" del fondo naranja */
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6); 
}

    /* 5. RESTO DE AJUSTES (Para que no se rompa lo demás) */
    .grid-3, .features-grid, .modal-grid, .contact-wrapper {
        grid-template-columns: 1fr; 
        gap: 30px;
    }

    .modal { padding: 10px; align-items: flex-start; overflow-y: scroll; }
    .modal-content { margin-top: 60px; }
    .close-btn { top: -50px; right: 0; background: #333; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; }
}
/* ESTO ES EL TEXTO SECUNDARIO (La descripción debajo del título) */
.hero-content p {
    font-size: 1.3rem;      /* Tamaño de letra un poco más grande */
    font-weight: 500;       /* Grosor medio (ni fino ni muy gordo) */
    color: white;           /* Blanco puro */
    max-width: 800px;       /* Que no se estire demasiado a lo ancho */
    margin: 0 auto 30px auto; /* Centrado y con espacio debajo */
    line-height: 1.5;       /* Espacio entre líneas para leer mejor */
    
    /* LA CLAVE: Sombra negra detrás para que se lea sobre la foto clara */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
/* =========================================
   REBRANDING: PALETA TIERRA Y NATURALEZA
   ========================================= */

/* 1. EL LOGO (Caja Terracota) */
.logo-box, .logo-number {
    background-color: #C8553D !important; /* Caldera */
    color: white !important;
}

/* 2. BOTONES PRINCIPALES (Terracota) */
.btn, .btn-small {
    background-color: #C8553D !important;
    border: none;
    color: white !important;
    transition: all 0.3s ease;
}

.btn:hover, .btn-small:hover {
    background-color: #A03E2A !important; /* Un terracota más oscuro al pasar el ratón */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(200, 85, 61, 0.4); /* Sombra rojiza */
}

/* 3. BOTONES DE BORDE (Outline) */
.btn-outline {
    border: 2px solid #C8553D !important;
    color: #C8553D !important;
    background: transparent;
}

.btn-outline:hover {
    background-color: #C8553D !important;
    color: white !important;
}

/* 4. TEXTOS Y TÍTULOS (Moka en lugar de negro) */
body, h2, h3, h4 {
    color: #4A3B32; /* Marrón Moka oscuro, más suave que el negro */
}

/* El texto de la portada (si lo pusiste oscuro) */
.hero-content p {
    color: #f5e9e2 !important; 
}

/* 5. ICONOS Y DETALLES (Verde Hierba) */
/* Esto cambiará el color de los iconos de "Wifi", "Ahorro", etc. */
.feature-card i, .icon-green {
    color: #6A8E2F !important; /* Verde Hierba */
}

/* 6. ENLACES DEL MENÚ (Hover en Terracota) */
nav a:hover {
    color: #C8553D !important; /* Al pasar el ratón por el menú se pone terracota */
    text-shadow: none;
}

/* 7. PIE DE PÁGINA (Fondo Moka) */
footer {
    background-color: #4A3B32 !important; /* Fondo marrón elegante */
    color: #E8DCC6; /* Texto color crema suave */
}
/* =========================================
   ESTILO DE TARJETAS (FEATURES) CON BRANDING
   ========================================= */

/* 1. La tarjeta en sí */
.feature-card, .sub-card {
    background-color: #fff; /* Fondo blanco limpio */
    border: 1px solid rgba(200, 85, 61, 0.15); /* Borde sutil Terracota */
    box-shadow: 0 10px 30px rgba(74, 59, 50, 0.05); /* Sombra suave color Moka */
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón (Hover) */
.feature-card:hover, .sub-card:hover {
    transform: translateY(-5px);
    border-color: #C8553D; /* El borde se pone Terracota intenso */
    box-shadow: 0 15px 30px rgba(200, 85, 61, 0.15); /* Resplandor Terracota */
}

/* 2. El círculo del icono */
/* Cambiamos el fondo azul pálido por tu Verde Hierba (o Terracota si prefieres) */
.feature-card i {
    background-color: #6A8E2F !important; /* Verde Hierba */
    color: white !important; /* Icono blanco para contraste perfecto */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Centrado vertical */
    border-radius: 50%; /* Círculo perfecto */
    font-size: 1.8rem;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(106, 142, 47, 0.3); /* Sombra verde */
}

/* 3. Los Textos */
.feature-card h3 {
    color: #C8553D; /* Título en Terracota */
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-card p {
    color: #4A3B32; /* Texto descriptivo en Marrón Moka */
    opacity: 0.9;
}

/* =========================================
   CORRECCIÓN FORZOSA: BLOQUE "¿PARA QUIÉN?"
   ========================================= */

/* Usamos una selección más específica para asegurar que gane */
div.audience-card, section .audience-card {
    /* 1. EL FONDO: Forzamos el color crema/marrón claro */
    background-color: #F7F3EF !important; 
    
    /* 2. LA LÍNEA LATERAL: Cambiamos el azul por Terracota */
    border-left: 6px solid #C8553D !important; 
    
    /* 3. BORDES REDONDEADOS: Forzamos la curva */
    border-radius: 15px !important; /* Redondeado en las 4 esquinas */
    
    /* 4. LIMPIEZA: Quitamos cualquier borde azul extra que pudiera haber */
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    outline: none !important;
    
    /* Espaciado y sombra para que flote bonito */
    padding: 40px !important;
    margin-top: 50px !important;
    box-shadow: 0 10px 30px rgba(74, 59, 50, 0.08) !important; 
}

/* Forzar el color de los textos dentro de la tarjeta */
.audience-card h3, .audience-card p, .audience-card li {
    color: #4A3B32 !important; /* Marrón oscuro */
}

/* Forzar los ticks (✓) a color verde o terracota */
.audience-card i, .audience-card span.check {
    color: #6A8E2F !important; /* Verde Hierba */
}
/* =========================================
   CORRECCIÓN: TEXTO "NUEVA FORMA DE ALQUILAR"
   ========================================= */

/* Forzamos que los subtítulos pequeños sean Terracota en vez de azules */
h5, h6, .subtitle, .section-header span {
    color: #C8553D !important; /* Color Caldera/Terracota */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* =========================================
   CORRECCIÓN: SECCIÓN CONTACTO (LUMINOSA)
   ========================================= */

/* 1. El Fondo General de la Sección */
#contacto, .contact-wrapper, footer {
    background-color: #F7F3EF !important; /* Color Crema suave */
    color: #4A3B32 !important; /* Texto en Marrón Moka */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 2. Títulos y Textos */
#contacto h2, .contact-wrapper h2, 
#contacto p, .contact-wrapper p {
    color: #4A3B32 !important; /* Aseguramos que se lean bien */
    text-shadow: none !important; /* Quitamos sombras si las hubiera */
}

/* 3. La Caja del Formulario (Si tiene fondo propio) */
.contact-form-box, form {
    background-color: #ffffff !important; /* Fondo blanco limpio */
    box-shadow: 0 15px 40px rgba(74, 59, 50, 0.1) !important; /* Sombra suave moka */
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(200, 85, 61, 0.1); /* Borde sutil terracota */
}

/* 4. Los Campos de Texto (Inputs) */
input, textarea, select {
    background-color: #F9F9F9 !important; /* Gris muy clarito */
    border: 1px solid #E0E0E0 !important;
    color: #333 !important;
    border-radius: 8px;
    padding: 15px;
}

/* Al hacer clic en un campo */
input:focus, textarea:focus {
    border-color: #C8553D !important; /* Borde Terracota al escribir */
    outline: none;
    background-color: #fff !important;
}

/* 5. Etiquetas del formulario (Nombre, Email...) */
label {
    color: #6B5A4E !important; /* Marrón medio */
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
/* =========================================
   CONTACTO: VERSIÓN DARK MOKA (Elegante)
   ========================================= */

/* 1. Fondo Oscuro (Color Moka) */
#contacto, .contact-wrapper, footer {
    background-color: #4A3B32 !important; /* Marrón oscuro corporativo */
    color: #F7F3EF !important; /* Texto color crema suave */
    position: relative;
    z-index: 1;
}

/* 2. Títulos y Textos de la izquierda ("Hablemos", Dirección...) */
#contacto h2, .contact-wrapper h2, 
.section-header h2,
#contacto p, .contact-wrapper p {
    color: #F7F3EF !important; /* Crema claro para leerse sobre lo oscuro */
}

/* 3. Iconos de contacto (Ubicación, mail, tlf) */
/* Los pasamos a color Terracota para que brillen sobre el fondo oscuro */
.contact-info i, .contact-wrapper i, .fas, .fa-map-marker-alt {
    color: #C8553D !important; 
}

/* 4. La Caja del Formulario (Blanca para contraste máximo) */
.contact-form-box, form {
    background-color: #FFFFFF !important; /* Blanco puro */
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important; /* Sombra fuerte para profundidad */
    border: none !important;
}

/* 5. Textos DENTRO del formulario (Labels: Nombre, Email...) */
/* Como el fondo del formulario es blanco, estas letras deben ser oscuras */
form label, .contact-form-box h3, .contact-form-box p {
    color: #4A3B32 !important; /* Volvemos al marrón oscuro aquí */
}

/* 6. Los Inputs (Donde escribes) */
input, textarea, select {
    background-color: #F2F2F2 !important; /* Gris muy suave */
    border: 1px solid #ddd !important;
    color: #333 !important;
}

input:focus, textarea:focus {
    background-color: #fff !important;
    border-color: #C8553D !important; /* Borde terracota al escribir */
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.1);
}

/* 7. Botón de Enviar (Branding) */
button[type="submit"], .btn-submit {
    background-color: #C8553D !important;
    color: white !important;
    width: 100%;
    font-weight: bold;
    letter-spacing: 1px;
}

button[type="submit"]:hover {
    background-color: #A03E2A !important;
    transform: translateY(-2px);
}
/* AJUSTE PARA MÓVIL (Añade esto al final del CSS en la sección @media) */
@media (max-width: 768px) {
    nav.navbar {
        padding: 15px 20px;
        flex-direction: row; /* En móvil mantenemos el logo a un lado */
    }
    .logo-text { font-size: 1rem; letter-spacing: 2px; }
    .logo-box { width: 35px; height: 35px; font-size: 1.2rem; }
    .nav-links { display: none; } /* Ocultamos menú en móvil por simplicidad, o lo dejamos como lista */

    /* --- ARREGLO DE ALOJAMIENTOS EN MÓVIL --- */
    
    /* 1. Que la cuadrícula sea de UNA sola columna */
    .grid-3 {
        display: grid;
        grid-template-columns: 1fr !important; /* Una columna obligatoria */
        gap: 40px; /* Espacio generoso entre tarjeta y tarjeta */
        padding: 0 15px; /* Margen a los lados para que no toque la pantalla */
        width: 100%;
        box-sizing: border-box;
    }

    /* 2. Ajuste de la tarjeta */
    .accommodation-card {
        width: 100%; /* Que ocupe el ancho disponible */
        max-width: 400px; /* Pero que no se haga gigante en móviles anchos */
        margin: 0 auto; /* Centrada */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra más suave */
    }

    /* 3. La foto un poco más bajita para que se vea el texto rápido */
    .img-container {
        height: 180px; 
    }

    /* 4. Textos un pelín más pequeños */
    .accommodation-card h3 {
        font-size: 1.3rem;
        margin-top: 15px;
    }
}
/* =========================================
   ARREGLO DE EMERGENCIA MÓVIL (ALOJAMIENTOS)
   ========================================= */

/* Usamos @media para pantallas menores de 768px (Móviles) */
@media screen and (max-width: 768px) {
    
    /* 1. Forzamos al contenedor a ser FLEXIBLE VERTICAL */
    #alojamientos .grid-3 {
        display: flex !important;
        flex-direction: column !important; /* Uno debajo de otro */
        gap: 50px !important; /* Mucho espacio entre tarjetas */
        padding: 0 20px !important;
    }

    /* 2. Forzamos el tamaño de la tarjeta */
    .accommodation-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
        display: block !important; /* Asegura que se comporte como bloque */
    }

    /* 3. Ajuste de la foto */
    .img-container {
        width: 100% !important;
        height: 200px !important;
    }
}
/* =========================================
   MINI-LOGO EN EL TEXTO (4 STANCIAS)
   ========================================= */

.marca-texto {
    display: inline-flex;      /* Para que fluya con el texto */
    align-items: center;       /* Centrado verticalmente */
    gap: 5px;                  /* Espacio entre el 4 y STANCIAS */
    vertical-align: middle;    /* Alineación perfecta con las letras de al lado */
    margin: 0 2px;             /* Un poco de aire a los lados */
    transform: translateY(-2px); /* Pequeño ajuste visual hacia arriba */
}

/* El cuadrado del 4 */
.marca-texto .num {
    background-color: #C8553D; /* Tu color Terracotta */
    color: white !important;   /* El 4 siempre blanco */
    font-weight: 900;
    padding: 2px 6px;          /* Tamaño del cuadradito */
    border-radius: 4px;        /* Bordes redondeados */
    font-size: 0.9em;          /* Un pelín más pequeño que el texto para no molestar */
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* La palabra STANCIAS */
.marca-texto .txt {
    text-transform: uppercase;
    font-weight: 700;          /* Negrita */
    letter-spacing: 1px;       /* Elegante */
    color: inherit;            /* Hereda el color del párrafo donde esté (blanco o marrón) */
}
/* =========================================
   CORRECCIÓN GROSOR DEL NÚMERO "4"
   ========================================= */

/* 1. En el Logo Principal (Menú de navegación) */
.logo-box, .logo-number {
    font-weight: 700 !important; /* Bajamos de 900/800 a 700 (Negrita limpia) */
    /* Opcional: Si aún lo ves gordo, prueba con 600 */
}

/* 2. En el "Mini-Logo" dentro de los textos */
.marca-texto .num {
    font-weight: 700 !important; /* Bajamos el grosor */
    padding: 2px 5px !important; /* Un pelín más de aire a los lados */
}
/* =========================================
   GRID 2x2 PARA "FLEX LIVING" (4 Cajas)
   ========================================= */

.grid-balanceada {
    display: grid;
    /* Esto crea 2 columnas idénticas: 2 arriba y 2 abajo */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Espacio entre cajas */
    max-width: 1000px; /* Ancho máximo para que no se estiren demasiado */
    margin: 0 auto; /* Centrado en la pantalla */
    padding: 0 20px;
}

/* AJUSTE PARA MÓVIL (1 Columna) */
@media (max-width: 768px) {
    .grid-balanceada {
        grid-template-columns: 1fr; /* Una debajo de otra en el móvil */
        gap: 40px;
    }
}

/* =========================================
   TÍTULO PORTADA (EQUILIBRADO)
   ========================================= */

.hero-content h1 {
    /* 1. TAMAÑO AJUSTADO */
    font-size: 3rem !important; /* Antes era 3.8rem, ahora es más controlado */
    font-weight: 800 !important; /* Negrita fuerte, pero no exagerada */
    line-height: 1.2 !important;
    text-transform: uppercase;
    
    /* 2. EFECTO VISUAL */
    color: #FFFFFF !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.4);
    
    /* 3. SEPARACIÓN CLAVE */
    /* Esto es lo que hace que se diferencie del texto de abajo */
    margin-bottom: 30px !important; 
}

/* AJUSTE PARA MÓVIL (Más elegante) */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem !important; /* Tamaño ideal para leer en el teléfono */
        margin-bottom: 20px !important;
    }
}

/* =========================================
   LOGO DEFINITIVO (MEDIDAS FORZADAS)
   ========================================= */

/* 1. EL CUADRADO DEL 4 (Forzamos a que sea cuadrado perfecto) */
.logo-box {
    /* Medidas fijas: 36x36 píxeles. Ni más, ni menos. */
    width: 36px !important; 
    height: 36px !important;
    
    /* Quitamos cualquier relleno raro */
    padding: 0 !important;
    
    /* Centrado perfecto del número dentro del cuadrado */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Ajustes visuales */
    border-radius: 4px !important;
    vertical-align: middle !important;
    
    /* Aseguramos que no herede alturas de línea raras */
    line-height: 1 !important;
}

/* El número 4 dentro */
.logo-number, .logo-box span {
    font-size: 1.4rem !important; /* Tamaño del número */
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    top: -1px; /* Pequeño ajuste óptico */
}

/* 2. LA PALABRA "STANCIAS" (Estirada verticalmente) */
/* Este selector busca el texto que hay en el menú al lado de la caja */
nav .brand-logo a, nav a span:not(.logo-box) {
    display: inline-block !important; /* Necesario para que funcione el estirado */

    /* EL TRUCO: Estiramos la letra un 25% hacia arriba (scaleY) */
    transform: scaleY(1.25) !important;
    transform-origin: bottom left; /* Para que crezca desde abajo y no se mueva */

    /* Mantenemos la fuente y grosor */
    font-weight: 700 !important;
    letter-spacing: 0.5px !important; /* Un pelín de aire para que se lea bien al estirarse */

    /* Distancia correcta del cuadrado */
    margin-left: 8px !important;
}

/* =========================================
   ARREGLO DE ETIQUETAS (VERDES, REDONDAS Y FLOTANTES)
   ========================================= */

/* Esto afecta a cualquier texto que esté sobre la foto del alojamiento */
.accommodation-card .img-container span,
.tag, .tag.blue, .tag.dark {
    /* 1. POSICIÓN (Crucial para que floten y no sean barras largas) */
    position: absolute !important; 
    top: 15px !important;
    left: 15px !important;
    z-index: 10 !important;
    
    /* 2. TAMAÑO (Crucial para que sean pastillas pequeñas) */
    display: inline-block !important; 
    width: auto !important; /* Evita que se estiren al 100% */
    
    /* 3. DISEÑO (Verde y Redondo) */
    background-color: #6A8E2F !important; /* Tu verde */
    color: #FFFFFF !important;
    border-radius: 50px !important; /* Forma de pastilla perfecta */
    padding: 6px 15px !important;   /* Relleno para que respire */
    
    /* 4. TEXTO */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
    border: none !important;
    margin: 0 !important;
}

/* =========================================
   SOLUCIÓN DEFINITIVA: ETIQUETA CENTRADA BAJO FOTO
   ========================================= */

/* 1. PERMITIMOS QUE LA ETIQUETA "CUELGUE" FUERA DE LA FOTO */
.accommodation-card .img-container {
    overflow: visible !important; /* Clave: deja que la etiqueta se salga por abajo */
    position: relative !important;
    z-index: 1;
}

/* 2. COMO QUITAMOS EL "OVERFLOW", REDONDEAMOS LA FOTO MANUALMENTE */
.accommodation-card .img-container img {
    border-radius: 15px 15px 0 0 !important; /* Solo esquinas de arriba */
}

/* 3. POSICIÓN EXACTA DE LA ETIQUETA (Verde, Centrada y Abajo) */
.accommodation-card .img-container span,
.tag {
    /* Posición */
    position: absolute !important;
    top: auto !important;    /* Anulamos lo de arriba */
    bottom: 330px !important; /* La bajamos para que quede mitad en foto, mitad fuera */
    left: 50% !important;     /* Al centro horizontal */
    transform: translateX(-50%) !important; /* Truco matemático para centrado perfecto */
    z-index: 100 !important;
    
    /* Estilo (Pastilla Verde) */
    background-color: #6A8E2F !important;
    color: white !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    width: auto !important;
    white-space: nowrap !important; /* Que el texto no se parta */
}

/* 4. EMPUJAMOS EL TÍTULO PARA QUE NO SE PEGUE A LA ETIQUETA */
.accommodation-card h3 {
    margin-top: 25px !important; /* Espacio extra arriba del título */
}

/* Estilos del Footer Compacto e Interactivo */
.site-footer {
    background-color: #4A3B32; /* Marrón oscuro de la marca */
    color: #E8DCC6; /* Color crema para el texto */
    padding: 40px 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    position: relative;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-column {
    margin-bottom: 20px;
}

.brand-logo {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.logo-box {
    background-color: #C8553D; /* Naranja de la marca */
    color: white;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 10px;
}

.logo-text {
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
}

.footer-description {
    line-height: 1.5;
    opacity: 0.8;
}

.footer-heading {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

/* Línea decorativa naranja debajo de los títulos */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #C8553D;
}

.footer-links, .contact-info, .legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li, .contact-info li {
    margin-bottom: 10px;
}

.footer-links a, .contact-info a, .legal-links a {
    color: #E8DCC6;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto hover en los enlaces */
.footer-links a:hover, .contact-info a:hover, .legal-links a:hover {
    color: #C8553D;
    transform: translateX(5px); /* Pequeño desplazamiento a la derecha */
}

.contact-info i {
    color: #C8553D;
    margin-right: 10px;
}

.social-icons {
    margin-top: 15px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Efecto hover en iconos sociales */
.social-icon:hover {
    background-color: #C8553D;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(200, 85, 61, 0.3);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.8rem;
    position: relative;
}

.legal-links {
    display: flex;
}

.legal-links li {
    margin-left: 20px;
}

/* Botón "Volver arriba" */
.back-to-top {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #C8553D;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.back-to-top:hover {
    background-color: #A03E2A;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .legal-links {
        margin-top: 10px;
        justify-content: center;
    }
    .legal-links li {
        margin: 0 10px;
    }
    .back-to-top {
        position: static;
        margin-top: 20px;
    }
}

/* AJUSTE BOTÓN "VOLVER ARRIBA" */
.back-to-top {
    bottom: 30px !important; /* Lo subimos un poco */
    right: 30px !important;  /* Lo separamos del borde */
    z-index: 100 !important; /* Aseguramos que flote encima de todo */
}

/* Opcional: Dar espacio al texto legal para que no choque */
.footer-bottom {
    padding-right: 70px !important; /* Espacio de seguridad a la derecha */
}

/* =========================================
   AJUSTE: CENTRAR LOGO Y TEXTO DEL FOOTER
   ========================================= */

/* Afecta solo a la primera columna (la del logo) */
.logo-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo horizontalmente */
    text-align: center;  /* Centra el texto del párrafo */
}

/* Ajuste fino para que el logo se vea perfecto */
.logo-column .brand-logo {
    justify-content: center;
    margin-bottom: 20px; /* Un poco más de aire con el texto */
    width: 100%;
}

/* Opcional: Si quieres que el texto no sea tan ancho y se lea mejor */
.footer-description {
    max-width: 300px; /* Limita el ancho para que quede más compacto */
    margin: 0 auto;   /* Asegura que esté centrado */
}

/* =========================================
   SECCIÓN CONTACTO PREMIUM
   ========================================= */

/* Fondo general suave para resaltar la tarjeta blanca */
.section-contact {
    background-color: #F7F3EF; /* Crema suave */
    padding: 80px 20px;
}

/* Texto de compromiso centrado */
.team-commitment {
    max-width: 800px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.commitment-text {
    font-size: 1.2rem;
    color: #4A3B32; /* Moka */
    font-style: italic;
    margin-top: 15px;
}

.divider-center {
    width: 60px;
    height: 3px;
    background-color: #C8553D; /* Terracota */
    margin: 20px auto 0 auto;
}

/* --- LA TARJETA FLOTANTE (Wrapper) --- */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Izquierda más estrecha, Formulario más ancho */
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(74, 59, 50, 0.1); /* Sombra elegante Moka */
    overflow: hidden; /* Para que nada se salga de las esquinas redondas */
    max-width: 1100px;
    margin: 0 auto;
}

/* --- IZQUIERDA: INFORMACIÓN --- */
.contact-info {
    background-color: #4A3B32; /* Moka Oscuro */
    color: #F7F3EF; /* Texto Crema */
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h3 {
    color: white;
    font-size: 2rem;
    margin-bottom: 20px;
}

.info-desc {
    opacity: 0.8;
    margin-bottom: 40px;
    line-height: 1.6;
}

.info-list li {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.info-list a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

.info-list a:hover { color: #C8553D; }

/* Iconos en círculo */
.icon-box {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #C8553D; /* Icono Naranja */
    flex-shrink: 0;
}

/* Redes Sociales Mini */
.social-mini {
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.social-mini a {
    color: white;
    font-size: 1.2rem;
    margin-right: 20px;
    transition: 0.3s;
}
.social-mini a:hover { color: #C8553D; transform: translateY(-3px); }


/* --- DERECHA: FORMULARIO INTERACTIVO --- */
.contact-form {
    padding: 50px;
    background-color: white;
}

/* Campos en fila (Nombre y Teléfono juntos) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4A3B32;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Estilo de los Inputs (La clave de la interactividad) */
input, textarea {
    width: 100%;
    padding: 15px;
    background-color: #F9F9F9;
    border: 2px solid transparent; /* Invisible por defecto */
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Al hacer clic en un campo */
input:focus, textarea:focus {
    background-color: white;
    border-color: #C8553D; /* Se ilumina en Naranja */
    box-shadow: 0 5px 15px rgba(200, 85, 61, 0.1);
    outline: none;
}

/* Checkbox Legal */
.form-legal {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    font-size: 0.85rem;
    color: #666;
}
.form-legal a { color: #C8553D; text-decoration: underline; }

/* Botón Enviar */
.btn-full {
    width: 100%;
    background-color: #C8553D;
    color: white;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
}

.btn-full:hover {
    background-color: #A03E2A;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(200, 85, 61, 0.3);
}

/* MÓVIL */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr; /* Una columna */
    }
    .form-grid {
        grid-template-columns: 1fr; /* Inputs uno debajo de otro */
    }
    .contact-form, .contact-info {
        padding: 30px;
    }
}

/* =========================================
   ARREGLO FINAL: SECCIÓN CONTACTO (TARJETA PARTIDA)
   ========================================= */

/* 1. EL FONDO DE LA SECCIÓN (Color Crema para separar del Footer) */
.section-contact {
    background-color: #F7F3EF !important; /* Fondo claro */
    padding: 80px 20px !important;
    position: relative;
    z-index: 10;
}

/* 2. EL TÍTULO "COMPROMISO" (Color oscuro para que se lea sobre crema) */
.team-commitment h2, 
.team-commitment p, 
.commitment-text {
    color: #4A3B32 !important; /* Moka oscuro */
    text-shadow: none !important;
}

/* 3. LA TARJETA PRINCIPAL (La caja que contiene todo) */
.contact-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important; /* Izquierda estrecha, Derecha ancha */
    background: white !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(74, 59, 50, 0.15) !important; /* Sombra elegante */
    overflow: hidden !important; /* CRUCIAL: Recorta lo que sobresalga */
    max-width: 1000px !important;
    margin: 40px auto 0 auto !important;
}

/* 4. COLUMNA IZQUIERDA (Info en Moka) */
.contact-info {
    background-color: #4A3B32 !important; /* Fondo oscuro */
    color: white !important;
    padding: 50px 40px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h3 { color: white !important; font-size: 2rem; margin-bottom: 20px; }
.contact-info p, .contact-info a { color: rgba(255,255,255,0.9) !important; }
.icon-box { background: rgba(255,255,255,0.1) !important; color: #C8553D !important; }

/* 5. COLUMNA DERECHA (Formulario Blanco) */
.contact-form {
    background-color: #FFFFFF !important;
    padding: 50px !important;
}

/* 6. ARREGLO DE LOS INPUTS (Para que se lean bien) */
input, textarea {
    background-color: #F4F4F4 !important; /* Gris un poco más oscuro */
    color: #333333 !important; /* Texto negro fuerte */
    border: 1px solid #E0E0E0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box !important; /* Evita que se salgan del ancho */
}

input::placeholder, textarea::placeholder {
    color: #888888 !important; /* Placeholder visible */
}

input:focus, textarea:focus {
    background-color: #FFFFFF !important;
    border-color: #C8553D !important; /* Borde Naranja al escribir */
    outline: none !important;
}

/* 7. ARREGLO DEL CHECKBOX LEGAL (Lo que se salía en la foto) */
.form-legal {
    display: flex !important;
    align-items: flex-start !important; /* Alineado arriba */
    gap: 12px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

.form-legal input[type="checkbox"] {
    width: 20px !important; /* Tamaño fijo */
    height: 20px !important;
    margin: 0 !important;
    flex-shrink: 0; /* Evita que el cuadradito se aplaste */
    cursor: pointer;
}

.form-legal label {
    font-size: 0.85rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-wrap: break-word !important; /* Rompe el texto si es muy largo */
}

/* Botón naranja fuerte */
.btn-full {
    background-color: #C8553D !important;
    color: white !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    cursor: pointer;
}

/* MÓVIL */
@media (max-width: 768px) {
    .contact-wrapper { grid-template-columns: 1fr !important; }
    .contact-info { padding: 40px 30px !important; text-align: center; }
    .contact-form { padding: 30px 20px !important; }
    .info-list li { justify-content: center; }
}

/* =========================================
   CORRECCIÓN: CENTRAR ICONO MALETA
   ========================================= */

/* 1. FORZAMOS EL CENTRADO DE TODOS LOS ICONOS DE BENEFICIOS */
.feature-card i, 
.feature-card .icon-circle {
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    
    /* LA CLAVE: Márgenes automáticos a los lados centran el bloque */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important; /* Mantenemos el espacio con el título */
    
    /* Aseguramos que no haya reglas extrañas de alineación */
    float: none !important;
    text-align: center !important;
}

/* 2. ASEGURAMOS QUE EL TEXTO DE LA TARJETA TAMBIÉN SE CENTRE */
.feature-card {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Esto centra todo lo que haya dentro */
}

/* =========================================
   CORRECCIÓN: HACER ANCHA LA CAJA "¿PARA QUIÉN?"
   ========================================= */

/* Buscamos la caja específica por su estilo visual */
.profiles-box, 
.audience-card,
section .audience-card { /* Usamos varios nombres por seguridad */
    
    /* 1. ANCHURA: La obligamos a ocupar casi toda la pantalla */
    width: 100% !important;
    max-width: 1000px !important; /* Mismo ancho que el resto de la web */
    
    /* 2. POSICIÓN: Centrada */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 3. EVITAR QUE SE ENCOJA: Le decimos que NO es parte de un grid */
    flex: none !important;
    display: block !important;
    
    /* 4. ESPACIADO INTERNO */
    padding: 50px !important;
    box-sizing: border-box !important;
}

/* También aseguramos que la lista de dentro se expanda */
.check-list, .profiles-content ul {
    display: grid !important;
    /* Dos columnas amplias para los checks */
    grid-template-columns: 1fr 1fr !important; 
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* AJUSTE PARA MÓVIL (Para que ahí sí se ponga en una columna) */
@media (max-width: 768px) {
    .check-list, .profiles-content ul {
        grid-template-columns: 1fr !important;
    }
}

/* =================================================
   🔥 SOLUCIÓN DEFINITIVA: ROMPER LA CUADRÍCULA
   ================================================= */

/* Apuntamos a la caja de "¿Para quién es...?" */
.profiles-box, 
div[class*="profile"], 
.audience-card {
    
    /* ESTO ES LA CLAVE: Le obliga a ocupar todas las columnas */
    grid-column: 1 / -1 !important; 
    
    /* Aseguramos el ancho total */
    width: 100% !important;
    max-width: 1000px !important; /* O el ancho que prefieras */
    
    /* La centramos y le damos aire */
    margin: 50px auto !important;
    display: block !important;
    
    /* Restauramos su aspecto */
    background-color: #fdfdfd !important; /* Fondo suave */
    padding: 40px !important;
    border-radius: 15px !important;
    border-left: 5px solid #C8553D !important; /* Tu línea terracota */
}

/* Forzamos que la lista de dentro se vea bien */
.check-list, 
.profiles-content ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Dos columnas de texto */
    gap: 20px !important;
    text-align: left !important;
}

/* En móvil sí dejamos que sea una sola columna */
@media (max-width: 768px) {
    .check-list, 
    .profiles-content ul {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   AJUSTE DE MARCA: "STANCIAS" FINO Y PEGADO
   ========================================= */

/* 1. LA PALABRA "STANCIAS" (Fina y Elegante) */
/* Apuntamos a las clases habituales del texto del logo */
.logo-text,
.marca-texto .txt,
.brand-logo span:last-child {
    font-weight: 400 !important; /* Grosor Normal/Fino (quita la negrita) */
    letter-spacing: 1px !important; /* Un ligero espaciado para el toque elegante */
    text-transform: uppercase !important; /* Asegura mayúsculas */
}

/* 2. ACERCAR EL "4" AL TEXTO */
/* Reducimos el espacio a la derecha del cuadradito o número "4" */
.logo-box,
.marca-texto .num,
.brand-logo span:first-child {
    margin-right: 0px !important; /* Muy cerquita. Ajusta este número si lo quieres más o menos pegado */
}