/* ============================================================
TUTTI HUASI — ESTILOS PÁGINA DE CONTACTO
============================================================ */

/* ========================
LINK ACTIVO EN NAVBAR
Resalta "CONTACTO" en el menú cuando estás en esa página
======================== */
.nav-activo {
    color: var(--color-dorado) !important;
}

.nav-activo::after {
    width: 100% !important; /* Línea dorada siempre visible */
}

/* ========================
/* --- Fuentes e Identidad Visual --- */
h1, .title-community {
    font-family: 'Cabin Sketch', cursive, sans-serif;
}

/* --- Fondo de la página modificado a un beige suave --- */
body {
    background-color: #fcf8f2; /* Un beige crema muy sutil y elegante */
}

/* --- Ajuste de espaciado por Navbar flotante --- */
main {
    padding-top: 40px; 
}

/* --- Colores y Fondos Personalizados --- */
.bg-light-purple {
    background-color: #e9e7fd;
}

.bg-soft-purple {
    background-color: #f1effd;
}

.text-pink {
    color: #d63384;
}

/*================*/
/*TITULO DE CONTACTO*/
/*================*/
.titulo-contacto h1 {
    color: #000000; /* Un tono índigo elegante */
    margin-bottom: 30px;
}

.titulo-contacto span {
    color: var(--color-dorado); /* Un tono índigo vibrante para resaltar "Aliados" */
}

@media (min-width: 998.98px) {
    .titulo-contacto {
        margin-left: 200px;
        margin-right: 200px;
    }
}
/* ============================================================
   TARJETAS DE CONTACTO (Efecto de rotación libre)
   ============================================================ */

.card-contacto {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Inclinación alternada imitando tu prototipo */
.row > div:nth-child(1) .card-contacto { 
    transform: rotate(-1.5deg); 
}
.row > div:nth-child(2) .card-contacto { 
    transform: rotate(1.2deg); 
}
.row > div:nth-child(3) .card-contacto { 
    transform: rotate(-1deg); 
}

/* Efecto Hover: Las tarjetas se enderezan y se elevan */
.card-contacto:hover {
    transform: rotate(0deg) translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Enlaces de comunicación */
.contact-link {
    color: #4f46e5;
    font-size: 1rem;
    word-break: break-all; /* Evita que correos largos rompan la tarjeta en móviles */
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #312e81;
}

/* Bordes de color de las tarjetas */
.border-yellow { border: 2px solid var(--color-dorado); }
.border-blue   { border: 2px solid #3b82f6; }
.border-gold   { border: 2px solid #d97706; }

/* Contenedor Circular para los Iconos */
.icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.4rem;
    color: #ffffff;
}

.bg-yellow { background-color: var(--color-dorado) }
.bg-blue   { background-color: #3b82f6; }
.bg-gold   { background-color: #d97706; }

/* ============================================================
   SECCIÓN: NUESTRA COMUNIDAD EN ACCIÓN
   ============================================================ */

/* Galería de imágenes responsiva */
.gallery-img {
    width: 100%;
    height: 240px;
    object-fit: cover; /* Recorta la imagen proporcionalmente sin deformarla */
    border: 4px solid #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Borde inferior rosa para la tercera imagen del diseño */
.row > div:nth-child(3) .gallery-img {
    border-bottom: 6px solid #d63384;
}

/* --- Ajustes Responsivos (Mobile First) --- */
@media (max-width: 768px) {
    /* En pantallas pequeñas es mejor quitar la rotación para que sea más fácil de leer al hacer scroll */
    .row > div .card-contacto { 
        transform: rotate(0deg); 
    }
    
    .gallery-img {
        height: 200px;
    }
}

/* ============================================================
   ESTILOS DE UBICACIÓN PREMIUM (MAPA ARTÍSTICO)
   ============================================================ */

.title-ubicacion {
    font-family: 'Cabin Sketch', cursive, sans-serif;
    color: #4338ca; /* Un tono índigo elegante */
    line-height: 1.2;
}

/* El marco contenedor que simula el cuadro interactivo */
.mapa-marco-artistico {
    position: relative;
    background: #ffffff;
    padding: 18px;
    border-radius: 30px; /* Bordes muy suaves y circulares */
    box-shadow: 0 20px 50px rgba(165, 140, 115, 0.2); /* Sombra cálida beige/arena */
    border: 3px solid #ebdccb; /* Borde color pergamino */
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

/* Redondear el mapa interno */
.mapa-marco-artistico iframe {
    border-radius: 20px;
    display: block;
}

/* Efecto hover interactivo: se levanta sutilmente */
.mapa-marco-artistico:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 25px 60px rgba(165, 140, 115, 0.3);
}

/* --- Notas musicales decorativas que flotan a los lados --- */
.decoracion-nota {
    position: absolute;
    font-size: 1.8rem;
    color: rgba(214, 51, 132, 0.2); /* Color rosa sutil transparente */
    z-index: 10;
    pointer-events: none; /* No interrumpe los clics en el mapa */
}

.nota-1 {
    top: 25px;
    left: 35px;
    transform: rotate(-15deg);
}

.nota-2 {
    bottom: 35px;
    right: 35px;
    transform: rotate(20deg);
}

/* --- Ajuste responsivo para celulares --- */
@media (max-width: 768px) {
    .mapa-marco-artistico {
        padding: 10px;
        border-radius: 20px;
    }
    .mapa-marco-artistico iframe {
        height: 320px; /* Reducimos la altura en móviles para mejor usabilidad */
        border-radius: 12px;
    }
    .decoracion-nota {
        display: none; /* Quitamos las notas en móvil para no saturar */
    }
}