/* =====================================================
   CRISOLES
   STYLE.CSS
===================================================== */

:root{

    --violeta:#5A1D8F;
    --violetaClaro:#7B35CC;

    --verde:#9CCB3C;

    --amarillo:#F3B333;

    --blanco:#FFFFFF;

    --gris:#C7C7C7;

    --fondo:#0B0912;
    
    --fondo1:#3b1073e8;

    --fondo2:#171222;

    --transparente:rgba(255,255,255,.05);

    --sombra:0 20px 60px rgba(0,0,0,.45);

    --radio:18px;

    --transicion:.35s;

}


/* ========================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--fondo1); 
    /* ACA */

    color:white;

    overflow-x:hidden;

}


/* Fondo */

  body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at top,var(#3b1073e8) 0%,transparent 10%),
    radial-gradient(circle at bottom,#170c28 0%,transparent 45%);

    opacity:.22;

    z-index:-2;

}  

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:url("../img/noise.png");

    opacity:.09;

    pointer-events:none;

    z-index:-1;

}


/* ========================================= */
/* INTRO */
/* ========================================= */

#intro{

    position:fixed;

    inset:0;

    background:var(--fondo);

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    z-index:99999;

}

.logoIntro{

    width:220px;

    z-index:30;

    animation:aparecerLogo 1.4s;

}


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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;

    backdrop-filter:blur(14px);

    background:rgba(8,8,8,.18);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:2000;

    transition:.35s;

}

.logo img{

    width:50px;

}

nav{

    display:flex;

    gap:40px;

}

nav a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:var(--verde);

}

.botonWhatsapp{

    background:var(--verde);

    color:black;

    padding:14px 28px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.botonWhatsapp:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(156,203,60,.4);

}

/* NOSTROS */
/* Contenedor general para 3 imágenes (Bloque 1) */
.galeria-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

.galeria-3 .img-principal {
    grid-column: span 2; /* La primera imagen ocupa todo el ancho arriba */
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

.galeria-3 img:not(.img-principal) {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

/* Contenedor general para 2 imágenes (Bloque 2) */
.galeria-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.galeria-2 img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

/* Ajuste general para imágenes únicas o contenedores de imagen */
.bloque-nosotros .imagen img {
    width: 100%;
    max-height: 310px;
    object-fit: cover;
    border-radius: 8px;
}

/* Adaptabilidad para Celulares (Responsive) */
@media (max-width: 768px) {
    .galeria-3, .galeria-2 {
        grid-template-columns: 1fr; /* En celular se apilan ordenadamente para no achicarse de más */
    }
    
    .galeria-3 .img-principal {
        grid-column: span 1;
        height: 200px;
    }
    
    .galeria-3 img:not(.img-principal), .galeria-2 img {
        height: 180px;
    }
}

/* finNOSTROS */


.verde {
    color: #2ab431;  /* Verde oscuro y elegante */
    
        }  
#nosotros {
        padding: 100px 5%;
        /* background: #ffffff; */
        color: #333;
    }

    .nosotros-container {
        display: flex; /* Esto es lo que pone la imagen al lado del texto */
        align-items: center; /* Centra verticalmente texto e imagen */
        justify-content: space-between; /* Separa las columnas */
        gap: 50px; /* Espacio entre el texto y la imagen */
        max-width: 1200px;
        margin: 0 auto; /* Centra el contenedor en la pantalla */
    }

    .nosotros-texto {
        flex: 1; /* El texto ocupará el 50% del ancho */
    }

    .nosotros-texto h2 {
        font-size:3.5rem;
        color: #511b87; /* Violeta principal */
        margin-bottom: 20px;
        line-height: 1.1;

    }

    .nosotros-texto p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #ffffff;
    }

    .nosotros-accent {
        width: 60px;
        height: 4px;
        background: #7b2cbf; /* Violeta vibrante */
        margin-top: 30px;
    }

    .nosotros-imagen {
        flex: 1; /* La imagen ocupará el otro 50% del ancho */
    }

    .nosotros-imagen img {
        width: 100%;
        height: auto; /* Mantiene la proporción de la imagen */
        border-radius: 30px; /* Bordes redondeados modernos */
       
        transition: transform 0.5s ease;
    }

    .nosotros-imagen img:hover {
        transform: scale(1.02); /* Efecto sutil al pasar el mouse */
    }

    /* RESPONSIVE (Para celulares) */
    @media (max-width: 768px) {
        .nosotros-container {
            flex-direction: column; /* En pantallas chicas, la imagen vuelve a estar abajo */
            text-align: center;
        }
        .nosotros-texto h2 { font-size: 2.5rem; }
        .nosotros-accent { margin: 30px auto; }
    }

/* ========================================= */

/* Estilos generales para la sección */
#nosotros {
    padding: 60px 20px;
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
}

.nosotros-container-alternado {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espacio generoso entre cada bloque del zigzag */
}

.nosotros-header {
    text-align: center;
    margin-bottom: 20px;
}

h2 {
    font-size: 2.5em;
    color: #2c3e50;
}

h3 {
    color: #27ae60;
    margin-bottom: 12px;
}

.bloque-nosotros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.bloque-nosotros .texto,
.bloque-nosotros .imagen {
    flex: 1;
}

/* Espaciado entre los dos párrafos de un mismo bloque */
.bloque-nosotros .texto p + p {
    margin-top: 16px;
}

.bloque-nosotros .imagen img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- ZIGZAG --- */
.bloque-nosotros {
    flex-direction: row;
}

.bloque-nosotros.invertido {
    flex-direction: row-reverse;
}

.verde {
    color: #27ae60;
    font-weight: bold;
}

.nosotros-accent {
    height: 5px;
    background-color: #27ae60;
    width: 100px;
    margin: 10px auto 0;
}

/* --- RESPONSIVE DESIGN (Celulares) --- */
@media (max-width: 768px) {
    .bloque-nosotros,
    .bloque-nosotros.invertido {
        flex-direction: column-reverse; /* Imagen abajo y texto arriba en móvil */
        text-align: center;
    }

    .bloque-nosotros .texto,
    .bloque-nosotros .imagen {
        width: 100%;
    }
}

/* --- RESPONSIVE DESIGN (Para celulares) --- */
@media (max-width: 768px) {
    .bloque-nosotros,
    .bloque-nosotros.invertido {
        flex-direction: column; /* Apila los elementos */
        text-align: center;
    }

    .bloque-nosotros .texto,
    .bloque-nosotros .imagen {
        width: 100%;
    }
    
    /* En móvil, aseguramos que la imagen aparezca antes que el texto si se desea, 
       o mantenemos el orden del HTML. Para este caso, el orden visual será Imagen -> Texto 
       en los bloques "invertido" si no cambiamos el orden, pero el flex-direction: column 
       respetará el orden del DOM. Vamos a forzar que la imagen vaya primero en móvil para mejor UX.*/
    
    .bloque-nosotros {
        display: flex;
        flex-direction: column-reverse; /* Imagen debajo del texto en móvil */
    }
    
    .bloque-nosotros.invertido {
        display: flex;
        flex-direction: column-reverse; /* Imagen debajo del texto en móvil */
    }
}

section{

    padding:120px 10%;

}

section h2{

    font-family:"Anton",sans-serif;

    letter-spacing:2px;

    font-size:3rem;

    margin-bottom:30px;

    color:white;

}

section p{

    font-size:1.5rem;

    color:#d9d9d9;

    line-height:1.8;

    max-width:850px;

}



/* ========================================= */
/* ACTIVIDADES */
/* ========================================= */

/* #gridActividades{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.cardActividad{

    background:rgba(255,255,255,.05);

    border-radius:var(--radio);

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

}

.cardActividad:hover{

    transform:translateY(-10px);

    box-shadow:var(--sombra);

}

.cardActividad img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.cardContenido{

    padding:25px;

}

.cardContenido h3{

    margin-bottom:15px;

    font-size:1.4rem;

}

.cardContenido p{

    font-size:.95rem;

    margin-bottom:25px;

}

.cardContenido a{

    color:var(--verde);

    text-decoration:none;

    font-weight:700;

} */

#gridActividades {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
}

/* El card ahora es un enlace (<a>), por eso usamos 'a.cardActividad' */
a.cardActividad {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--radio);
    overflow: hidden;
    transition: .35s;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .08);
    display: block;
    text-decoration: none; /* Quitamos el subrayado por defecto del enlace */
    color: inherit;        /* Hereda el color del texto del body */
}

a.cardActividad:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra);
}

a.cardActividad img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.cardContenido {
    padding: 25px;
}

.cardContenido h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #2d871b; 
    transition: color 0.3s ease;
}

.cardContenido p {
    font-size: .95rem;
    margin-bottom: 25px;
    color: #ffffff; /* Color de texto legible */
}

.cardContenido span {
    color: #2d871b; 
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

/* Efectos al pasar el mouse por toda la tarjeta */
a.cardActividad:hover h3 {
    color: #371058; 
}

a.cardActividad:hover span {
    text-decoration: underline;
    color: #371058;

}
/* ========================================= */
/* EVENTOS */
/* ========================================= */

.contenedorEventos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    margin-top: 60px;
}

.evento{

    background:var(--transparente);

    border-radius:18px;

    padding:30px;

    border-left:6px solid var(--verde);

}
.evento img {
    height: 200px;         /* Altura fija para uniformidad */
    object-fit: cover;      /* Recorta la imagen para que no se deforme */
}



/* ========================================= */
/* CTA */
/* ========================================= */

#contacto{

    text-align:center;

}

.botonFinal{

    display:inline-block;

    margin-top:40px;

    padding:18px 42px;

    background:var(--verde);

    color:black;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.botonFinal:hover{

    transform:scale(1.05);

}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    max-width: 1000px;
    margin: 40px auto 0;
    text-align: left;
}

.contacto-info p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #9CCB3C;
}

.redes-sociales {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.redes-sociales a {
    color: #9CCB3C;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
}
.redes-sociales {
    margin-top: 20px;
    display: flex;
    gap: 25px;
}

.redes-sociales a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--verde);
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.redes-sociales a:hover {
    color:#371058;
    transform: translateY(-3px);
}

.redes-sociales .icon {
    width: 25px; /* Tamaño del icono */
    height: 25px;
}
/* Responsive para celulares */
@media (max-width: 768px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .redes-sociales {
        justify-content: center;
    }
}
/* ========================================= */
/* FOOTER */
/* ========================================= */

footer{

    padding:50px;

    text-align:center;

    background:#09070f;

    border-top:1px solid rgba(255,255,255,.06);

}

footer img{

    width:150px;

    margin-bottom:20px;

}

footer p{

    color:#8f8f8f;

}


/* ========================================= */
/* SCROLL */
/* ========================================= */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--violeta);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--verde);

}

/* ========================================= */
/* ALQUILER DE ESPACIOS (ESTILOS) */
/* ========================================= */
/* Estilo unificado para tarjetas de Alquiler */
.cardAlquiler {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--radio);
    overflow: hidden;
    transition: .35s;
    border: 1px solid rgba(255, 255, 255, .08);
    display: block;
    text-decoration: none;
    color: inherit;
}

.cardAlquiler:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra);
}

/* Efectos al pasar el mouse por toda la tarjeta de alquiler */
.cardAlquiler:hover h3 {
    color: #371058; 
}

.cardAlquiler:hover span {
    text-decoration: underline;
    color: #371058;
}

/* Ajuste del carrusel dentro de la tarjeta para que coincida con el img de 230px */
.cardAlquiler .carrusel-contenedor {
    height: 230px;
    width: 100%;
}

.cardEspacio {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: .35s;
}

.cardEspacio:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra);
}

.carrusel-wrapper {
    position: relative;
    overflow: hidden;
}

.carrusel-contenedor {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 250px;
    scrollbar-width: none; /* Ocultar scrollbar */
}

.carrusel-contenedor::-webkit-scrollbar { display: none; }

.carrusel-contenedor img {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
}

/* Flechas */
.flecha-izq, .flecha-der {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #2d871bd3;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}
.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }

/* El estilo del enlace de consulta igual al de las actividades */
.cardEspacio .cardContenido {
    padding: 25px;
}

.cardEspacio .cardContenido h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #2d871b; /* El mismo verde de tus actividades */
}

.cardEspacio .cardContenido a {
    color: #2d871b; /* Color de consulta */
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    margin-top: 15px;
    transition: .3s;
}

.cardEspacio .cardContenido a:hover {
    text-decoration: underline;
    color: #371058; /* Violeta al hacer hover */
}

.cardEspacio .cardContenido h3:hover {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #371058;
}
/* ========================================= */
/* ANIMACIONES BASE */
/* ========================================= */

@keyframes aparecerLogo{

    from{

        opacity:0;

        transform:scale(.6);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
/* Aplicamos el efecto de zoom específicamente al carrusel cuando pasas el mouse por la tarjeta */
.cardActividad:hover .carrusel-contenedor img {
    transform: scale(1.08);
}

/* Aseguramos que la transición sea suave */
.carrusel-contenedor img {
    transition: transform .5s ease;
}
/* Ajustes para la franja final de Copyright y Firma del Desarrollador */
        .footer-bottom-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-bottom-content p {
            margin: 0;
            color: #94a3b8;
        }

        .developer-credit {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            color: #64748b;
        }

        .developer-logo {
            height: 22px; /* Tamaño ideal para que no quite protagonismo pero se lea bien */
            width: auto;
            transition: var(--transition);
            opacity: 0.7; /* Arranca un poco apagado */
            display: block;
        }

        .developer-logo:hover {
            opacity: 1; /* Se ilumina al 100% al pasar el mouse */
            transform: scale(1.05);
        }

        element.style {
            font-size: .95rem;
        }
        .logo-wordmark {
            font-family: var(--sans);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: white;
        }
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .logo-wordmark span {
            color: #4d7dff;
        }


        /* ========================================= */
/* TARJETAS UNIFICADAS (ACTIVIDADES Y ALQUILER) */
/* ========================================= */

/* Esta clase es la que controla el diseño visual para todas las tarjetas */
.cardActividad {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--radio);
    overflow: hidden;
    transition: .35s;
    border: 1px solid rgba(255, 255, 255, .08);
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.cardActividad:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra);
}

/* Efecto Brillo (el ::before que pediste) */
.cardActividad::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(255,255,255,.08));
    opacity: 0;
    transition: .4s;
    pointer-events: none;
}

.cardActividad:hover::before { opacity: 1; }

/* Estilo de Contenido */
.cardContenido { padding: 25px; }

.cardContenido h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #2d871b; 
    transition: .3s;
}

.cardContenido p {
    font-size: .95rem;
    margin-bottom: 25px;
    color: #ffffff;
}

.cardContenido span {
    color: #2d871b; 
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}
/* Color blanco para los textos de contacto */
.contacto-info p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #ffffff; /* Esto pone el texto en blanco */
}

/* Opcional: Para resaltar un poco más las etiquetas (Dirección, Email, etc.) */
.contacto-info p strong {
    color: var(--verde); /* Mantenemos el verde para el título del dato */
    margin-right: 5px;
}

/* Efectos Hover Unificados */
.cardActividad:hover h3 { color: #371058; }
.cardActividad:hover span { text-decoration: underline; color: #371058; }

/* Ajustes específicos para el carrusel de alquiler */
.cardActividad .carrusel-wrapper { height: 230px; position: relative; }
.cardActividad .carrusel-contenedor { display: flex; overflow-x: auto; height: 100%; scroll-snap-type: x mandatory; }
.cardActividad .carrusel-contenedor img { width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; transition: transform .5s ease; }
.cardActividad:hover .carrusel-contenedor img { transform: scale(1.08); }

/* Flechas de Alquiler */
.flecha-izq, .flecha-der {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: white; border: none;
    padding: 8px 12px; cursor: pointer; z-index: 10; border-radius: 50%;
}
.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }
        /* En celulares, apilamos el copyright y la firma en el centro */
        @media (max-width: 768px) {
            .footer-bottom-content {
                justify-content: center;
                flex-direction: column;
                text-align: center;
            }
        }
        /* Ajustes para celulares en el footer */
        @media (max-width: 900px) {
            .footer-grid {
                grid-template-columns: 1fr; /* Pasa a 1 sola columna */
            }
            .split-list {
                grid-template-columns: 1fr; /* Las sucursales se apilan verticalmente */
            }
        }
        /* Responsive Design Rules */
        @media (max-width: 1024px) {
            .grid-4 {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none; /* Can be augmented with toggle script */
            }
            
            .mobile-toggle {
                display: block;
            }

            .grid-2, .contact-layout {
                grid-template-columns: 1fr;
            }

            .grid-4 {
                grid-template-columns: 1fr;
            }

            .hero h1 {
                font-size: 2.25rem;
            }

            .hero p {
                font-size: 1.05rem;
            }

            .contact-form {
                padding: 24px;
            }
        }




        /* Ajuste para que la tarjeta de contacto se vea bien */
#contacto .cardActividad {
    /* Mantenemos el estilo de tarjeta, pero quitamos el hover de movimiento si querés una base más estable */
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#contacto .cardActividad:hover {
    transform: none; /* Quitamos el salto hacia arriba porque es una tarjeta grande */
    box-shadow: none; /* Mantenemos la sombra sutil fija */
}

/* Aseguramos que el contenido dentro no se desborde */
.contacto-grid {
    margin: 0; /* Quitamos márgenes extra para aprovechar el padding de la tarjeta */
}