/* --- VARIABLES DE DISEÑO --- */
:root {
    --azul-tecnico: #1E90FF;    
    --azul-maestro: #00BFFF;    
    --negro: #000000;
    --blanco: #ffffff;
    --gris: #888888;
    --fuente-texto: 'Lato', sans-serif;
}

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

body.interna-body {
    background-color: var(--negro);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    text-transform: uppercase;
}

/* --- HEADER --- */
.header-interna {
    position: sticky; 
    top: 0; 
    z-index: 1000;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 40px 5%; 
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand a { 
    text-decoration: none; 
    color: var(--blanco); 
    font-family: var(--fuente-texto); 
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 300; 
    letter-spacing: 4px; 
    text-transform: uppercase;
}

.nav-principal { 
    display: flex; 
    align-items: center; 
    gap: 18px; 
}

.nav-principal a {
    font-family: var(--fuente-texto);
    color: var(--blanco); 
    text-decoration: none; 
    font-size: 0.75rem;
    letter-spacing: 1px; 
    transition: 0.3s;
}

.nav-principal a:hover, 
.nav-principal a.active {
    color: var(--azul-maestro) !important;
    text-shadow: 0 0 10px var(--azul-maestro);
}

.lang-btn {
    background: transparent; 
    border: 1px solid var(--azul-maestro); 
    color: var(--azul-maestro);
    padding: 4px 10px; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 0.7rem;
    margin-left: 10px; 
    transition: all 0.3s ease; 
    text-transform: uppercase;
}

/* Reemplaza tu actual .lang-btn:hover por esto: */
@media (hover: hover) and (pointer: fine) {
    .lang-btn:hover {
        background: var(--azul-maestro);
        color: #fff;
        box-shadow: 0 0 15px var(--azul-maestro);
    }
}

/* Para que en el móvil haga un "destello" rápido al tocarlo pero se apague al soltar: */
.lang-btn:active {
    background: var(--azul-maestro);
    color: #fff;
}

/* --- SECCIONES DE SERVICIO --- */
.section-service { 
    display: flex; 
    min-height: 90vh; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    overflow: hidden; 
}

.section-service.invert { flex-direction: row-reverse; }

.service-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    padding: 0 8%; 
    background: #000; 
}

.titulo-servicio {
    font-family: var(--fuente-texto); 
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 300; 
    letter-spacing: 6px; 
    text-transform: uppercase;
    color: var(--azul-maestro); 
    margin-bottom: 15px;
}

.btn-saber-mas {
    font-family: var(--fuente-texto); 
    margin-top: 30px; 
    background: transparent; 
    border: 1px solid var(--azul-maestro); 
    color: var(--azul-maestro); 
    padding: 10px 25px; 
    cursor: pointer; 
    text-transform: uppercase; 
    font-size: 0.7rem; 
    font-weight: 700; 
    letter-spacing: 2px; 
    transition: 0.4s; 
    align-self: flex-start;
}

/* Solo aplica el hover en dispositivos con ratón (PC) */
@media (hover: hover) and (pointer: fine) {
    .btn-saber-mas:hover { 
        background: var(--azul-maestro); 
        color: #fff; 
        box-shadow: 0 0 20px var(--azul-maestro); 
    }
}

/* Efecto visual rápido al tocar en móviles (opcional) */
.btn-saber-mas:active {
    background: var(--azul-maestro);
    color: #fff;
}

/* --- CONTENIDO EXTRA --- */
.extra-info { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.8s ease; 
    scroll-margin-top: 160px; 
}

.extra-info.active { 
    max-height: 4000px; 
    margin-top: 30px; 
    margin-bottom: 50px;
}

.texto-detallado { 
    border-left: 2px solid var(--azul-maestro); 
    padding-left: 20px; 
    background: transparent !important;
}

.texto-detallado p, 
.resena-texto,
.desc-docencia p {
    color: #ddd !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    text-align: justify !important;
    font-style: normal !important;
    text-transform: none !important;
}

/* --- RESEÑAS (LIMPIAS) --- */
.resenas-container {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--azul-maestro);
    background: transparent !important;
}

.titulo-resenas {
    color: var(--azul-maestro);
    font-size: 0.8rem;
    letter-spacing: 4px;
    margin-bottom: 25px;
    font-weight: 700;
}

.resena-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 191, 255, 0.3);
    background: transparent !important;
     
}

.resena-item:last-child {
    border-bottom: none;
}

.resena-autor {
    font-size: 0.75rem !important;
    font-weight: 700;
    color: var(--azul-maestro) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-top: 10px;
}

/* --- VIDEO --- */
.video-container-extra { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    margin: 40px 0; 
    border: 1px solid var(--azul-maestro); 
}

.video-container-extra iframe { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; 
}

/* --- VISUAL & ZOOM --- */
.service-visual { 
    flex: 1.2; background: #000; overflow: hidden; position: relative; 
    display: flex; align-items: center; justify-content: center; 
}
.service-visual img { width: 100%; height: 100%; object-fit: cover; }

.section-service:nth-of-type(1) .service-visual img,
.section-service:nth-of-type(2) .service-visual img,
.section-service:nth-of-type(4) .service-visual img,
.section-service:nth-of-type(5) .service-visual img {
    animation: zoomInfinito 20s infinite alternate ease-in-out !important;
}

@keyframes zoomInfinito { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }

/* --- DISCO --- */
.disco-wrapper { 
    position: relative; width: 75%; padding-bottom: 75%; 
    display: flex; align-items: center; justify-content: center; 
}
.disco-vinilo { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: #111; border-radius: 50%; 
    background: repeating-radial-gradient(#111, #111 2px, #181818 3px, #111 4px); 
    box-shadow: 0 0 60px rgba(0,0,0,1); 
}
.cover-disco { width: 45%; height: 45%; object-fit: contain; z-index: 2; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- COMENTARIOS --- */
.feedback-container { 
    padding: 120px 5%; background: linear-gradient(to bottom, #000, #050505); border-top: 1px solid #111; 
}
.feedback-inner { max-width: 900px; margin: 0 auto; }
.feedback-inner h3 { 
    font-family: var(--fuente-texto); margin-bottom: 40px; letter-spacing: 5px; 
    font-size: 1.1rem; color: var(--azul-maestro); text-align: center; 
}
.input-box { 
    display: flex; flex-direction: column; gap: 20px; margin-bottom: 80px; 
    background: rgba(255,255,255,0.02); padding: 30px; border: 1px solid #111; 
}
.input-box input, .input-box textarea { 
    font-family: var(--fuente-texto); background: transparent; border: none; 
    border-bottom: 1px solid #333; color: #fff; padding: 12px 0; outline: none; font-size: 1rem; 
}
.input-box button { 
    font-family: var(--fuente-texto); align-self: flex-end; background: var(--azul-maestro); 
    color: #fff; border: none; padding: 15px 40px; cursor: pointer; 
    font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; transition: 0.4s; 
}
.input-box button:hover { 
    background: #fff; color: var(--azul-maestro); box-shadow: 0 0 20px var(--azul-maestro);
}
.comment-entry { 
    padding: 35px; background: rgba(10, 10, 10, 0.8); border: 1px solid #151515; 
    margin-bottom: 25px; border-left: 4px solid var(--azul-maestro); 
}
.entry-header { 
    display: flex; justify-content: space-between; align-items: center; 
    font-size: 0.75rem; color: var(--azul-maestro); margin-bottom: 15px; font-weight: 700; 
}
.entry-user { color: #fff; text-transform: uppercase; font-size: 0.9rem; }
.entry-body { font-size: 1.1rem; text-transform: none; line-height: 1.6; color: #ccc; }

/* --- FOOTER --- */
.home-footer { 
    position: fixed; bottom: 20px; left: 5%; z-index: 100; pointer-events: none; 
}
.home-footer p { 
    font-family: var(--fuente-texto); font-size: 0.7rem; color: var(--gris); 
    text-transform: uppercase; letter-spacing: 2px; opacity: 0.6; 
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .header-interna { flex-direction: column; padding: 25px 5%; gap: 15px; }
    .nav-principal { justify-content: center; flex-wrap: wrap; width: 100%; gap: 12px; }
    .section-service, .section-service.invert { flex-direction: column; height: auto; }
    .service-content { padding: 50px 7%; width: 100%; }
    .service-visual { height: 350px; }
    .video-container-extra { width: 100%; margin: 25px 0; padding-bottom: 56.25%; height: 0; }
    .extra-info.active { max-height: none; margin-top: 20px; padding: 0 5px; }
    .texto-detallado { font-size: 0.85rem !important; padding-left: 15px; }
    .home-footer { position: relative; text-align: center; pointer-events: auto; bottom: 20px; left: 0; width: 100%; padding: 30px 0; }
}

/* --- ESTILOS PARA LOS ENLACES DE BOQUILLAS --- */
.links-boquillas {
    display: flex !important;
    flex-direction: column !important; /* Fuerza que vayan uno debajo de otro */
    gap: 15px !important;
    margin-top: 25px !important;
    margin-bottom: 30px !important;
    text-align: left !important; /* Alinea los botones a la izquierda */
}

.links-boquillas .link-externo {
    margin-top: 0 !important; 
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    width: fit-content !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--azul-maestro);
    text-decoration: none;
    transition: 0.3s;
}

.links-boquillas .link-externo i {
    font-size: 1.1rem; /* Iconos un poco más grandes */
}

.links-boquillas .link-externo:hover {
    color: var(--blanco);
    text-shadow: 0 0 10px var(--azul-maestro);
}

/* --- TARJETAS COLABORADORES: EL PUNTO INTERMEDIO --- */
.colaborador-card {
    margin-top: 40px;
    margin-bottom: 60px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.colaborador-header {
    display: flex;
    align-items: flex-start;
    gap: 30px; /* Más espacio entre foto y nombre */
    margin-bottom: 25px;
}

.colaborador-img-pro {
    width: 190px; /* EL PUNTO INTERMEDIO: Ni 80 ni gigante */
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(0, 191, 255, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.colaborador-img-pro:hover {
    transform: scale(1.02); /* Un ligero efecto de presencia al pasar el ratón */
}

.colaborador-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.colaborador-info .resena-autor {
    text-align: left !important;
    margin: 0 !important;
    font-size: 1.2rem !important; /* Nombre un poco más grande */
    letter-spacing: 2px;
}

.colaborador-link {
    font-size: 0.75rem;
    color: var(--azul-maestro);
    text-decoration: none;
    letter-spacing: 1px;
    border: 1px solid rgba(0, 191, 255, 0.4);
    padding: 5px 12px;
    width: fit-content;
    transition: 0.3s;
}

.colaborador-link:hover {
    background: var(--azul-maestro);
    color: #fff;
}

/* Ajuste para que en móviles no se vea mal el diseño de lado */
@media (max-width: 600px) {
    .colaborador-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .colaborador-info .resena-autor {
        text-align: center !important;
    }
    .colaborador-link {
        margin: 0 auto;
    }
}

/* Contenedor del dropdown */
.nav-item {
    position: relative;
}

/* Submenu oculto */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* Enlaces del submenu */
.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #222;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: #f3f3f3;
}

/* Mostrar al pasar el ratón */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (min-width: 901px) {
    /* Solo cuando la info está abierta en PC, forzamos diseño de columna */
    .section-service.info-abierta {
        flex-direction: column !important;
    }

    .section-service.info-abierta .service-content {
        width: 100% !important;
        flex: none;
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .section-service.info-abierta .service-visual {
        width: 100% !important;
        flex: none;
        height: 600px; /* Altura de la foto cuando se va abajo */
        order: 2;
    }

    .section-service.info-abierta .service-visual img {
        animation: none !important; /* Quitamos el zoom para que no distraiga al leer */
        object-fit: cover;
        object-position: center 30%;
    }

    /* Centramos un poco el texto detallado en PC para que no sea infinito a lo ancho */
    .section-service.info-abierta .texto-detallado {
        max-width: 900px;
        margin-left: 0; 
    }
}

/* Ajusta el valor (100px o 120px) según la altura de tu menú móvil */
.section-service {
    scroll-margin-top: 100px; 
}

/* Si usas IDs específicos, también puedes hacerlo así para asegurar: */
#acompanamiento, #docencia, #audio, #charlas, #boquillas {
    scroll-margin-top: 100px;
}