/* --- VARIABLES Y CONFIGURACIÓN GLOBAL --- */
:root {
    --color-negro-fondo: #111111; 
    --color-negro-seccion: #1a1a1a; 
    --color-naranja-acento: #ff5500; 
    --color-blanco-texto: #eeeeee;
    --color-gris-texto: #aaaaaa;
    --fuente-principal: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Bloqueo estricto de scroll horizontal a nivel de documento */
    overflow-x: hidden; 
    max-width: 100%;
}

body {
    font-family: var(--fuente-principal);
    line-height: 1.7;
    background-color: var(--color-negro-fondo);
    color: var(--color-blanco-texto);
    /* Bloqueo estricto a nivel de cuerpo */
    overflow-x: hidden;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

h1, h2, h3 {
    font-weight: 900; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2 {
    /* En escritorio queda en 2.5rem (igual que antes); en pantallas chicas
       (móvil/tablet) se reduce de forma fluida hasta un mínimo de 1.85rem. */
    font-size: clamp(1.85rem, 4.5vw, 2.5rem);
    text-align: center;
    margin-bottom: 1rem;
}

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

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

.linea-naranja {
    width: 80px;
    height: 5px;
    background-color: var(--color-naranja-acento);
    margin: 40px auto 50px; 
    border-radius: 0; 
}

.linea-naranja.chica {
    width: 40px;
    height: 3px;
    margin-bottom: 30px;
}

.subtitulo {
    text-align: center;
    color: var(--color-gris-texto);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.btn-naranja {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-naranja-acento);
    color: var(--color-blanco-texto);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--color-naranja-acento);
    transition: all 0.3s;
}

.btn-naranja:hover {
    background-color: transparent;
    color: var(--color-naranja-acento);
}

/* --- HEADER y NAVBAR (SUCCIÓN POR SCROLL REAL) --- */
header#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    height: 100vh; 
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom 0.3s ease;
}

.logo-compuesto {
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    /* El logo es position:absolute con left:50%. Sin un ancho explícito, el
       navegador lo encoge al espacio disponible a la derecha del 50% (la mitad
       de la pantalla). En celulares angostos ese espacio es menor que el logo,
       así que el caballo y el texto se desbordan hacia la derecha y todo queda
       descentrado/cortado. Con max-content el contenedor mide lo que mide su
       contenido y el translate(-50%) lo centra bien en cualquier ancho. */
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    transform: translate(-50%, -50%) scale(3.5);
    transition: none;
}

.logo-icono {
    height: 60px; 
    width: auto;
    transition: none; 
}

.logo-texto {
    height: 65px; 
    width: auto;
    transition: none; 
}

.navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* --- ESTADO FINAL (SCROLLED) --- */
header#main-header.header-scrolled {
    background-color: rgba(17, 17, 17, 0.98); 
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

header#main-header.header-scrolled .navbar {
    opacity: 1;
    pointer-events: auto;
}

header#main-header.header-scrolled .logo-compuesto:hover .logo-icono,
header#main-header.header-scrolled .logo-compuesto:hover .logo-texto {
    filter: brightness(1.1); 
    transition: filter 0.3s ease;
}

/* --- NAVEGACIÓN --- */
.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links li a {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    position: relative;
    color: var(--color-blanco-texto);
}

.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-naranja-acento);
    transition: width 0.3s;
}

.nav-links li a:hover {
    color: var(--color-naranja-acento);
}

.nav-links li a:hover::after {
    width: 100%;
}

/* --- BOTÓN ESPECIAL EN NAVBAR --- */
.nav-links li a.nav-btn {
    background-color: var(--color-naranja-acento);
    padding: 10px 20px;
    border-radius: 2px;
    color: var(--color-blanco-texto) !important;
    border: 2px solid var(--color-naranja-acento);
    transition: all 0.3s ease;
}

.nav-links li a.nav-btn:hover {
    background-color: transparent;
    color: var(--color-naranja-acento) !important;
}

.nav-links li a.nav-btn::after {
    display: none;
}

/* --- MENÚ HAMBURGUESA --- */
.hamburguesa {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    z-index: 1101;
}

.hamburguesa span {
    height: 3px;
    width: 30px;
    background: var(--color-blanco-texto);
    transition: all 0.3s;
}

.hamburguesa.abierto span { background: var(--color-naranja-acento); }
.hamburguesa.abierto span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.hamburguesa.abierto span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* --- ESPACIADOR HERO --- */
.hero-spacer {
    height: 100vh; 
    background-color: var(--color-negro-fondo);
    position: relative; /* Clave para anclar el botón de scroll */
}

/* Contenedor del botón */
.scroll-indicador {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1001; /* Lo pone por encima del header transparente */
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.scroll-indicador:hover {
    opacity: 1;
    transform: translateY(-5px); /* Pequeño saltito al pasar el mouse */
}

/* Texto vertical elegante */
.texto-scroll {
    writing-mode: vertical-rl; /* Gira el texto de arriba a abajo */
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--color-blanco-texto);
    margin-bottom: 15px;
    font-weight: 700;
}

/* Línea de la flecha animada */
.flecha-scroll {
    width: 2px;
    height: 40px;
    background-color: var(--color-naranja-acento);
    position: relative;
    animation: deslizarFlecha 2s infinite ease-in-out;
}

/* Punta de la flecha */
.flecha-scroll::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-naranja-acento);
    border-bottom: 2px solid var(--color-naranja-acento);
}

/* Animación de latido/deslizamiento */
@keyframes deslizarFlecha {
    0% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(12px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.6; }
}

/* --- SECCIÓN MANIFIESTO --- */
.seccion-manifiesto {
    padding: 120px 0;
    background-color: var(--color-negro-fondo);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    position: relative; 
    z-index: 2;
}

.titulo-manifiesto {
    /* En escritorio queda en 3rem (igual que antes); en pantallas chicas
       (móvil/tablet) se reduce de forma fluida hasta un mínimo de 2.1rem. */
    font-size: clamp(2.1rem, 5vw, 3rem);
    color: var(--color-blanco-texto);
    text-align: center;
    margin-bottom: 1rem;
}

.titulo-manifiesto.parte-ii {
    color: var(--color-naranja-acento);
    margin-top: 4rem;
}

.texto-poetico p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.8;
    text-align: center;
}

.texto-poetico.centrado {
    text-align: center;
}

.destacado-naranja {
    color: var(--color-naranja-acento) !important;
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- SOBRE NOSOTROS --- */
.sobre-nosotros {
    padding: 100px 0;
    background-color: var(--color-negro-seccion);
    position: relative;
    z-index: 2;
}

.miembro, .miembro-invertido {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    gap: 50px;
}

.miembro-invertido {
    flex-direction: row-reverse;
}

.nombre-miembro-invertido {
    text-align: right;
}

.imagen-container {
    position: relative;
    width: 250px;
    height: 250px;
    flex-shrink: 0; 
}

.imagen-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--color-naranja-acento); 
    filter: grayscale(100%); 
    transition: all 0.4s ease;
}

.imagen-container:hover img {
    filter: grayscale(0%); 
    transform: translate(-10px, -10px); 
    box-shadow: 10px 10px 0 var(--color-naranja-acento); 
}

.descripcion h3 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: var(--color-naranja-acento);
}

.cargo {
    font-weight: 700;
    color: var(--color-blanco-texto);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.descripcion p {
    color: var(--color-gris-texto);
    text-align: justify;
}

.cita-contenedor {
    text-align: center;
    padding: 50px 30px;
    background-color: var(--color-negro-fondo); 
    margin-top: 60px;
    border-left: 5px solid var(--color-naranja-acento);
    position: relative;
}

.comilla {
    font-size: 5rem;
    color: var(--color-naranja-acento);
    opacity: 0.3;
    line-height: 0;
    font-family: Georgia, serif; 
}
.comilla.izquierda { position: absolute; top: 40px; left: 20px; }
.comilla.derecha { position: absolute; bottom: -10px; right: 20px; }

.texto-cita {
    font-weight: 700;
    letter-spacing: 1px;
    font-style: italic;
    margin: 20px 0;
    color: var(--color-blanco-texto);
    position: relative;
    z-index: 1;
}

.autor-cita {
    font-weight: 700;
    letter-spacing: 1px;
    margin: 20px 0;
    color: var(--color-blanco-texto);
    position: relative;
    z-index: 1;
    font-style: normal;
}

/* --- ÍTEMS DE SERVICIOS / PILARES --- */
.servicios-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 80px; 
}

.item-servicio {
    flex: 1 1 280px; 
    max-width: 350px; 
    background-color: var(--color-negro-fondo); 
    padding: 30px 25px;
    border-bottom: 3px solid var(--color-naranja-acento); 
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-servicio:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.item-servicio h4 {
    color: var(--color-naranja-acento); 
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.item-servicio p {
    color: var(--color-gris-texto);
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: center;
}

/* --- CONTACTO --- */
.contacto-seccion {
    padding: 100px 0;
    background-color: var(--color-negro-fondo);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    position: relative;
    z-index: 2;
}

.contacto-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 60px;
}

.info-contacto {
    flex: 1 1 400px;
}

.info-contacto h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.intro-contacto {
    margin-bottom: 2rem;
    color: var(--color-gris-texto);
}

.item-contacto {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    font-size: 1.1rem;
}

.icono-img {
    width: 28px;
    height: auto;
    flex-shrink: 0;
}

/* --- ENLACES DE CONTACTO ANIMADOS (WHATSAPP/EMAIL) --- */
.link-contacto {
    color: var(--color-blanco-texto);
    position: relative;
    transition: color 0.3s ease;
    display: inline-block;
}

.link-contacto:hover {
    color: var(--color-naranja-acento);
}

/* Efecto de línea que se dibuja de izquierda a derecha al pasar el mouse */
.link-contacto::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px; /* Línea muy sutil */
    bottom: -3px;
    left: 0;
    background-color: var(--color-naranja-acento);
    transition: width 0.3s ease;
}

.link-contacto:hover::after {
    width: 100%;
}


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

.social-link {
    display: inline-block;
}

.social-link img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-link:hover img {
    transform: scale(1.15); 
    filter: drop-shadow(0px 0px 8px rgba(255, 85, 0, 0.6)); 
}

/* FORMULARIO */
.formulario-contacto {
    flex: 1 1 400px;
}

.grupo-input {
    position: relative;
    margin-bottom: 30px;
}

.formulario-contacto input,
.formulario-contacto textarea {
    width: 100%;
    padding: 15px 10px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: var(--color-blanco-texto);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
    resize: none;
}

.formulario-contacto label {
    position: absolute;
    top: 15px;
    left: 10px;
    color: var(--color-gris-texto);
    pointer-events: none;
    transition: all 0.3s ease;
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus,
.formulario-contacto input:valid,
.formulario-contacto textarea:valid {
    border-bottom-color: var(--color-naranja-acento);
}

.formulario-contacto input:focus + label,
.formulario-contacto textarea:focus + label,
.formulario-contacto input:valid + label,
.formulario-contacto textarea:valid + label {
    top: -20px;
    left: 0;
    font-size: 0.8rem;
    color: var(--color-naranja-acento);
    font-weight: 700;
}

.btn-naranja.full-width {
    width: 100%;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
}

/* --- NOTIFICACIÓN TOAST (ÉXITO EN FORMULARIO) --- */
#toast-notificacion {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: rgba(17, 17, 17, 0.98);
    color: var(--color-blanco-texto);
    padding: 15px 25px;
    border-left: 4px solid var(--color-naranja-acento);
    border-radius: 2px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2000;
    font-weight: 700;
    font-size: 0.9rem;
    
    /* Configuración de la animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* JS agrega esta clase para mostrar el cartel */
#toast-notificacion.toast-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.toast-icono {
    color: var(--color-naranja-acento);
    font-size: 1.2rem;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 50px 20px;
    background-color: #000; 
    color: var(--color-gris-texto);
    font-size: 0.9rem;
    border-top: 1px solid #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.footer-logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.footer-icono {
    height: 40px;
}

.footer-texto {
    height: 25px;
}

/* --- NAVBAR RESPONSIVE (tablet + móvil) --- */
/* El menú hamburguesa aparece hasta 1100px. En tablets (iPad en vertical a
   ~820/834px y en horizontal a 1024px) el menú horizontal de escritorio no
   entraba o quedaba pegado al logo; mostrando el hamburguesa hasta 1100px se
   evita el choque y el menú horizontal solo aparece cuando hay lugar de sobra. */
@media screen and (max-width: 1100px) {
    .hamburguesa { display: flex; }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        background-color: var(--color-negro-fondo);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        z-index: 1000;
    }

    .nav-links.activo { transform: translateX(0%); }

    .nav-links li a { font-size: 1.5rem; }

    .nav-links li a.nav-btn {
        margin-top: 10px;
        width: 80%;
        text-align: center;
    }
}

/* --- TIPOGRAFÍA RESPONSIVE (mobile + tablet) --- */
/* En escritorio los cuerpos de texto conservan su tamaño original. Acá (hasta
   1024px) se igualan TODOS al tamaño de los párrafos de las tarjetas de
   servicio (0.95rem). Además los nombres de los integrantes se achican para
   que queden más chicos que los títulos de cada sección. */
@media screen and (max-width: 1024px) {
    .texto-poetico p,
    .destacado-naranja,
    .subtitulo,
    .descripcion p,
    .cargo,
    .texto-cita,
    .autor-cita,
    .item-contacto {
        font-size: 0.95rem;
    }

    .descripcion h3 {
        font-size: 1.4rem;
    }
}

/* --- RESPONSIVE --- */
@media screen and (max-width: 768px) {
    header#main-header {
        padding: 1rem 20px;
    }
    
    header#main-header.header-scrolled {
        padding: 0 20px;
        height: 70px !important;
    }

    header#main-header.header-scrolled .logo-texto {
    height: 45px; /* Aumentado de 35px a 45px */
}

    /* Mantenemos el logo en fila horizontal siempre, pero con un gap más apretado */
    .logo-compuesto {
        flex-direction: row;
        gap: 10px;
    }
    
    header#main-header.header-scrolled .logo-compuesto {
        left: 20px !important;
        gap: 8px;
    }

    .miembro, .miembro-invertido {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .imagen-container:hover img {
        transform: none;
        box-shadow: none;
        filter: grayscale(0%);
    }

    .contacto-container { flex-direction: column; }
    
    .cita-contenedor { padding: 40px 20px; }
    .comilla { font-size: 3rem; }

    .nombre-miembro-invertido,
    .miembro-invertido .descripcion {
        text-align: center;
    }

    .info-contacto h3, 
    .intro-contacto {
        text-align: center;
    }

    .item-contacto { justify-content: center; }

    .redes {
        justify-content: center;
        margin-bottom: 40px; 
    }

    .info-contacto,
    .formulario-contacto,
    .item-servicio {
        max-width: 100%;
        flex-basis: auto;
    }
    
    /* Garantiza que las imágenes o contenedores no desborden */
    img, form, .container, .container-estrecho {
        max-width: 100%;
    }

    .scroll-indicador {
        bottom: 25px;
        right: 15px;
    }

    #toast-notificacion {
        bottom: 20px;
        right: 20px;
        left: 20px;
        justify-content: center;
        text-align: center;
    }
}