:root {
    --tierra-colorada: #A54938;
    --bordeaux: #6B1A1A;
    --verde-monte: #1b4332;
    --verde-claro: #40916c;
    --crudo: #f2eee3;
    --blanco: #ffffff;
    --gris-fondo: #e9e4d6;
    --gris-texto: #4a4a4a;
    --texto-oscuro: #2c2a26;
    --shadow: 0 0.4vh 1.5vh rgba(0,0,0,0.08);
}

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

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--texto-oscuro);
    line-height: 1.6;
    background-color: var(--crudo);
    scroll-behavior: smooth;
    font-size: 13px;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
}

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

ul { 
    list-style: none; 
}

img, video {
    max-width: 100%;
    height: auto;
}

/* --- CLASES DE UTILIDAD --- */
.container {
    max-width: 85vw;
    margin: 0 auto;
    padding: 0 2vw;
}

.bg-light { 
    background-color: var(--gris-fondo); 
}

/* --- NAVEGACIÓN --- */
header {
    background-color: var(--crudo);
    box-shadow: 0 0.2vh 1vh rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 0.1vh solid rgba(0,0,0,0.08);
}

header .container {
    max-width: 95vw; 
    padding: 0 3vw;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
}

.logo-img {
    height: 8vh;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 2vw;
    align-items: center;
}

.nav-links a {
    font-size: 13px;
    position: relative;
}

.nav-links a:hover {
    color: var(--verde-claro);
}

.nav-links a.active {
    color: var(--verde-monte);
    font-weight: 600;
}

/* --- BOTÓN DE CONTACTO --- */
.btn-contacto {
    background-color: var(--verde-claro);
    color: var(--crudo) !important;
    padding: 1vh 1.5vw;
    border-radius: 0.5vh;
    font-weight: 600;
    font-size: 12px;
    box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.1);
}

.btn-contacto:hover {
    background-color: var(--verde-monte);
    transform: translateY(-0.2vh);
}

/* --- HERO SECTION (HOMEPAGE) --- */
.hero {
    height: 85vh;
    background: url('IMG_1312.JPG');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--crudo);
    padding-top: 5vh;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 2vh;
    text-shadow: 0.2vw 0.2vw 1vw rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 0.2vw;
    animation: fadeInDown 1.2s ease-out;
}

.hero p {
    font-size: 17px;
    max-width: 60vw;
    margin: 0 auto;
}

@keyframes fadeInDown {
    from { 
        opacity: 0; 
        transform: translateY(-3vh); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- HERO INTERNO (PÁGINAS INTERNAS) --- */
.hero-interno {
    height: 45vh;
    background: linear-gradient(rgba(27, 67, 50, 0.85), rgba(27, 67, 50, 0.85)), 
                url('IMG_1312.JPG');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--crudo);
    padding-top: 10vh;
}

.hero-interno h1 {
    font-size: 48px;
    margin-bottom: 1.5vh;
    text-transform: uppercase;
    letter-spacing: 0.15vw;
}

.hero-interno p {
    font-size: 16px;
    opacity: 0.95;
}

/* --- SECCIONES --- */
section { 
    padding: 12vh 0; 
}

.section-title {
    text-align: center;
    margin-bottom: 8vh;
}

.section-title h2 {
    font-size: 40px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

.section-title .line {
    width: 5vw;
    height: 0.5vh;
    background-color: var(--tierra-colorada);
    margin: 0 auto;
}

/* --- TEXTOS DESTACADOS --- */
.destacado {
    font-size: 17px;
    color: var(--verde-monte);
    font-weight: 600;
    line-height: 1.75;
    margin-bottom: 3vh;
    letter-spacing: 0.2px;
}

.intro-texto,
.contenido-texto,
.intro-trayectoria,
.intro-contacto,
.intro-objetivos {
    max-width: 75vw;
    margin: 0 auto;
    font-size: 14px;
}

/* --- LAYOUTS DE DOS COLUMNAS --- */
.contenido-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    align-items: center;
}

.columna-texto p {
    margin-bottom: 2vh;
    font-size: 14px;
    text-align: justify;
}

.columna-imagen img,
.columna-imagen video {
    width: 100%;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    object-fit: cover; /* Ayuda a que el video mantenga buenas proporciones */
}

/* --- ENFOQUE GRID (HOMEPAGE) --- */
.enfoque-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
}

.enfoque-card {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(0.5vh);
    padding: 4vh 2vw;
    border-radius: 1vh;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.enfoque-card:hover {
    transform: translateY(-1vh);
}

.enfoque-icono {
    font-size: 48px;
    margin-bottom: 2vh;
}

.enfoque-card h3 {
    font-size: 20px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
}

.enfoque-card p {
    font-size: 14px;
    color: var(--gris-texto);
}

/* --- UBICACIÓN (HOMEPAGE) --- */
.ubicacion-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
}

.ubicacion-card {
    background: rgba(255,255,255,0.4);
    padding: 4vh 3vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.ubicacion-card h3 {
    font-size: 23px;
    color: var(--tierra-colorada);
    margin-bottom: 2.5vh;
}

.ubicacion-card p {
    font-size: 14px;
    margin-bottom: 1vh;
}

/* --- BENEFICIOS GRID --- */
.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5vw;
}

.beneficio-card {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(0.5vh);
    padding: 3vh 2vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.beneficio-card:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 0.8vh 2vh rgba(0,0,0,0.12);
}

.beneficio-card h3 {
    font-size: 17px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
}

.beneficio-card p {
    font-size: 13px;
    color: var(--gris-texto);
}

/* --- CARACTERÍSTICAS FÍSICAS --- */
.caracteristicas-fisicas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
}

.caracteristica-item {
    background: rgba(255,255,255,0.5);
    padding: 3vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.caracteristica-item h4 {
    font-size: 19px;
    color: var(--tierra-colorada);
    margin-bottom: 1.5vh;
}

.caracteristica-item p {
    font-size: 14px;
    color: var(--gris-texto);
}

/* --- LISTA DE BENEFICIOS --- */
.lista-beneficios {
    list-style: none;
    padding-left: 0;
    margin: 2vh 0;
}

.lista-beneficios li {
    margin-bottom: 1.5vh;
    font-size: 14px;
    padding-left: 2vw;
    position: relative;
}

.lista-beneficios li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--verde-claro);
    font-weight: bold;
    font-size: 16px;
}

/* --- REPRODUCTORES --- */
.reproductores-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
}

.reproductor-card {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(0.5vh);
    padding: 4vh 3vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.reproductor-card h2 {
    font-size: 29px;
    color: var(--tierra-colorada);
    margin-bottom: 3vh;
    text-align: center;
    border-bottom: 0.2vh solid var(--verde-claro);
    padding-bottom: 2vh;
}

.caracteristicas-detalladas h3 {
    font-size: 17px;
    color: var(--verde-monte);
    margin-top: 2.5vh;
    margin-bottom: 1.5vh;
}

.lista-caracteristicas {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2.5vh;
}

.lista-caracteristicas li {
    margin-bottom: 1vh;
    font-size: 13px;
    padding-left: 1.8vw;
    position: relative;
    color: var(--gris-texto);
}

.lista-caracteristicas li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--verde-claro);
    font-weight: bold;
    font-size: 14px;
}

/* --- VENTAJAS GRID --- */
.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
}

.ventaja-item {
    background: rgba(255,255,255,0.4);
    padding: 3vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    position: relative;
    padding-left: 5vw;
}

.ventaja-numero {
    position: absolute;
    top: 3vh;
    left: 2vw;
    font-size: 36px;
    font-weight: 700;
    color: var(--tierra-colorada);
    opacity: 0.3;
    font-family: 'Playfair Display', serif;
}

.ventaja-item h4 {
    font-size: 19px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
}

.ventaja-item p {
    font-size: 14px;
    color: var(--gris-texto);
}

/* --- EVALUACIÓN GRID --- */
.evaluacion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
    margin-top: 4vh;
}

.evaluacion-card {
    background: rgba(255,255,255,0.5);
    padding: 3vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.evaluacion-card h4 {
    font-size: 17px;
    color: var(--tierra-colorada);
    margin-bottom: 1.5vh;
}

.evaluacion-card p {
    font-size: 13px;
    color: var(--gris-texto);
}

/* --- OBJETIVOS PRINCIPALES --- */
.objetivos-principales-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5vw;
}

.objetivo-principal-card {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(0.5vh);
    padding: 4vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.objetivo-principal-card:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 1vh 2.5vh rgba(0,0,0,0.12);
}

.objetivo-icono-grande {
    font-size: 43px;
    text-align: center;
    margin-bottom: 2vh;
}

.objetivo-principal-card h3 {
    font-size: 20px;
    color: var(--verde-monte);
    margin-bottom: 2vh;
    text-align: center;
}

.objetivo-principal-card > p {
    font-size: 14px;
    color: var(--gris-texto);
    margin-bottom: 2vh;
    text-align: justify;
}

.lista-detalles {
    list-style: none;
    padding-left: 0;
    margin-top: 2vh;
    border-top: 0.1vh solid rgba(0,0,0,0.1);
    padding-top: 2vh;
}

.lista-detalles li {
    margin-bottom: 1vh;
    font-size: 12px;
    padding-left: 1.5vw;
    position: relative;
    color: var(--gris-texto);
}

.lista-detalles li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--tierra-colorada);
    font-weight: bold;
}

/* --- COMPROMISO --- */
.compromiso-texto {
    max-width: 75vw;
    margin: 0 auto;
}

.compromiso-texto p {
    margin-bottom: 2.5vh;
    font-size: 14px;
    text-align: justify;
}

/* --- TABLA DE PREMIOS --- */
.tabla-premios {
    margin-top: 3vh;
    overflow-x: auto;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.6);
}

th {
    background-color: var(--verde-monte);
    color: var(--crudo);
    padding: 2vh 1.5vw;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
}

td { 
    padding: 2.5vh 1.5vw; 
    border-bottom: 0.1vh solid rgba(0,0,0,0.05); 
    font-size: 13px;
    vertical-align: top;
}

td small {
    font-size: 11px;
    color: var(--gris-texto);
    display: block;
    margin-top: 0.5vh;
}

tr:hover {
    background-color: rgba(64, 145, 108, 0.08);
}

/* --- VALOR PREMIOS --- */
.valor-premios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
}

.valor-card {
    background: rgba(255,255,255,0.4);
    padding: 3vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.valor-card h3 {
    font-size: 19px;
    color: var(--tierra-colorada);
    margin-bottom: 1.5vh;
}

.valor-card p {
    font-size: 14px;
    color: var(--gris-texto);
    text-align: justify;
}

/* --- EXPOSICIONES --- */
.exposiciones-info {
    max-width: 80vw;
    margin: 0 auto;
}

.exposicion-item {
    background: rgba(255,255,255,0.4);
    padding: 3vh 3vw;
    border-radius: 1vh;
    margin-bottom: 2.5vh;
    box-shadow: var(--shadow);
}

.exposicion-item h4 {
    font-size: 19px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
}

.exposicion-item p {
    font-size: 14px;
    color: var(--gris-texto);
    text-align: justify;
}

/* --- TESTIMONIO --- */
.testimonio-box {
    max-width: 70vw;
    margin: 0 auto;
    padding: 4vh 4vw;
    background: rgba(64, 145, 108, 0.08);
    border-left: 0.5vh solid var(--verde-claro);
    border-radius: 1vh;
}

.testimonio-box blockquote {
    font-size: 16px;
    font-style: italic;
    color: var(--verde-monte);
    margin-bottom: 2vh;
    line-height: 1.8;
}

.autor-testimonio {
    font-size: 14px;
    color: var(--gris-texto);
    font-weight: 600;
    text-align: right;
}

/* --- CONTACTO --- */
.contactos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
    max-width: 900px;
    margin: 0 auto;
}

.contacto-card {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(0.5vh);
    padding: 3.5vh 2.5vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.contacto-card:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 1vh 2.5vh rgba(0,0,0,0.15);
}

.contacto-header {
    text-align: center;
    margin-bottom: 2.5vh;
    padding-bottom: 2vh;
    border-bottom: 0.2vh solid rgba(0,0,0,0.1);
}

.contacto-icono {
    font-size: 43px;
    margin-bottom: 1.5vh;
}

.contacto-header h3 {
    font-size: 22px;
    color: var(--verde-monte);
}

.contacto-nombre {
    font-size: 17px;
    font-weight: 600;
    color: var(--texto-oscuro);
    margin-bottom: 0.5vh;
}

.contacto-cargo {
    font-size: 12px;
    color: var(--gris-texto);
    margin-bottom: 2vh;
    font-style: italic;
}

.contacto-datos {
    margin: 2vh 0;
    padding: 2vh 0;
    border-top: 0.1vh solid rgba(0,0,0,0.08);
    border-bottom: 0.1vh solid rgba(0,0,0,0.08);
}

.contacto-datos p {
    font-size: 13px;
    margin-bottom: 1vh;
}

.contacto-datos a {
    color: var(--verde-claro);
    font-weight: 600;
}

.contacto-datos a:hover {
    color: var(--verde-monte);
    text-decoration: underline;
}

.contacto-descripcion {
    font-size: 12px;
    color: var(--gris-texto);
    line-height: 1.6;
}

/* --- SEDES --- */
.sedes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4vw;
}

.sede-card {
    background: rgba(255,255,255,0.4);
    padding: 4vh 3vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
}

.sede-card h3 {
    font-size: 23px;
    color: var(--tierra-colorada);
    margin-bottom: 2.5vh;
}

.sede-direccion {
    font-size: 14px;
    margin-bottom: 2vh;
    line-height: 1.8;
}

.sede-descripcion {
    font-size: 13px;
    color: var(--gris-texto);
    line-height: 1.6;
}

/* --- FAQs --- */
.faqs-container {
    max-width: 80vw;
    margin: 0 auto;
}

.faq-item {
    background: rgba(255,255,255,0.5);
    padding: 3vh 3vw;
    border-radius: 1vh;
    margin-bottom: 2vh;
    box-shadow: var(--shadow);
}

.faq-item h4 {
    font-size: 17px;
    color: var(--verde-monte);
    margin-bottom: 1.5vh;
}

.faq-item p {
    font-size: 14px;
    color: var(--gris-texto);
    line-height: 1.7;
}

/* --- CTA SECTION --- */
.cta-section {
    text-align: center;
    padding: 10vh 0;
}

.cta-section h2 {
    font-size: 36px;
    color: var(--verde-monte);
    margin-bottom: 2vh;
}

.cta-section p {
    font-size: 16px;
    color: var(--gris-texto);
    margin-bottom: 4vh;
}

.cta-buttons {
    display: flex;
    gap: 2vw;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 1.5vh 3vw;
    border-radius: 0.5vh;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 0.3vh 1vh rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--verde-claro);
    color: var(--crudo);
}

.btn-primary:hover {
    background-color: var(--verde-monte);
    transform: translateY(-0.3vh);
    box-shadow: 0 0.5vh 1.5vh rgba(0,0,0,0.15);
}

.btn-secondary {
    background-color: transparent;
    color: var(--verde-monte);
    border: 0.2vh solid var(--verde-monte);
}

.btn-secondary:hover {
    background-color: var(--verde-monte);
    color: var(--crudo);
    transform: translateY(-0.3vh);
}

/* --- FOOTER --- */
footer {
    background-color: var(--verde-claro);
    color: var(--crudo);
    padding: 8vh 0 3vh;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
    gap: 3vw;
    margin-bottom: 5vh;
}

.white-logo {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 2vh;
    color: var(--crudo);
    text-transform: uppercase;
}

.footer-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    margin-bottom: 2.5vh;
    display: block;
}

/* --- ¿POR QUÉ ELEGIR DOÑA MAGDA? --- */
.tagline {
    font-size: 18px;
    font-style: italic;
    color: var(--bordeaux, #6B1A1A);
    margin-top: 0.5vh;
    margin-bottom: 1vh;
    font-weight: 500;
}

.por-que-intro {
    max-width: 900px;
    margin: 0 auto 5vh;
    text-align: center;
}

.por-que-intro p {
    margin-bottom: 2vh;
}

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
    margin-top: 3vh;
}

.pilar-card {
    text-align: center;
    padding: 2vh 1vw;
}

.pilar-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--bordeaux, #6B1A1A);
    margin-bottom: 1.5vh;
    font-weight: 700;
}

.pilar-linea {
    width: 60px;
    height: 2px;
    background: var(--bordeaux, #6B1A1A);
    margin: 0 auto 2vh;
}

.pilar-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto, #333);
}

.ubicacion-direccion {
    font-size: 14px;
    font-style: italic;
    color: var(--bordeaux, #6B1A1A);
    margin-bottom: 1.5vh;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pilares-grid {
        grid-template-columns: 1fr;
        gap: 4vh;
    }
    .pilar-card h3 { font-size: 32px; }
    .pilar-card p { font-size: 22px; }
    .tagline { font-size: 22px; }
    .footer-logo { max-width: 60vw; }
    .ubicacion-direccion { font-size: 22px; }
}

.footer-col h4 {
    font-size: 16px;
    margin-bottom: 2.5vh;
    position: relative;
}

.footer-col h4::after {
    content: '';
    width: 2vw;
    height: 0.3vh;
    background: var(--verde-monte);
    position: absolute;
    bottom: -1vh;
    left: 0;
}

.footer-col p, 
.footer-col a {
    font-size: 12px;
    margin-bottom: 1.5vh;
}

.copyright {
    text-align: center;
    padding-top: 3vh;
    border-top: 0.1vh solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    body { 
        font-size: 48px; 
    }
    
    nav { 
        height: 8vh; 
    }
    
    .nav-links { 
        display: none; 
    }
    
    .hero h1 { 
        font-size: 48px; 
    }
    
    .hero p { 
        font-size: 48px; 
        max-width: 80vw; 
    }

    .hero-interno h1 {
        font-size: 48px;
    }

    .hero-interno p {
        font-size: 48px;
    }
    
    .section-title h2 { 
        font-size: 48px; 
    }

    .destacado {
        font-size: 48px;
    }

    .intro-texto,
    .contenido-texto,
    .intro-trayectoria,
    .intro-contacto,
    .intro-objetivos,
    .compromiso-texto {
        max-width: 95vw;
        font-size: 48px;
    }

    .contenido-dos-columnas {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .columna-texto p {
        font-size: 48px;
    }

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

    .enfoque-icono {
        font-size: 48px;
    }

    .enfoque-card h3 {
        font-size: 48px;
    }

    .enfoque-card p {
        font-size: 48px;
    }

    .ubicacion-info {
        grid-template-columns: 1fr;
    }

    .ubicacion-card h3 {
        font-size: 48px;
    }

    .ubicacion-card p {
        font-size: 48px;
    }

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

    .beneficio-card h3 {
        font-size: 48px;
    }

    .beneficio-card p {
        font-size: 48px;
    }

    .caracteristicas-fisicas {
        grid-template-columns: 1fr;
    }

    .caracteristica-item h4 {
        font-size: 48px;
    }

    .caracteristica-item p {
        font-size: 48px;
    }

    .lista-beneficios li {
        font-size: 48px;
        padding-left: 6vw;
    }

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

    .reproductor-card h2 {
        font-size: 48px;
    }

    .caracteristicas-detalladas h3 {
        font-size: 48px;
    }

    .lista-caracteristicas li {
        font-size: 48px;
        padding-left: 6vw;
    }

    .ventajas-grid,
    .evaluacion-grid {
        grid-template-columns: 1fr;
    }

    .ventaja-item {
        padding-left: 15vw;
    }

    .ventaja-numero {
        font-size: 48px;
        left: 4vw;
    }

    .ventaja-item h4,
    .evaluacion-card h4 {
        font-size: 48px;
    }

    .ventaja-item p,
    .evaluacion-card p {
        font-size: 48px;
    }

    .objetivos-principales-grid {
        grid-template-columns: 1fr;
    }

    .objetivo-icono-grande {
        font-size: 48px;
    }

    .objetivo-principal-card h3 {
        font-size: 48px;
    }

    .objetivo-principal-card > p {
        font-size: 48px;
    }

    .lista-detalles li {
        font-size: 43px;
        padding-left: 5vw;
    }

    th, td {
        font-size: 43px;
        padding: 2vh 3vw;
    }

    td small {
        font-size: 36px;
    }

    .valor-premios-grid {
        grid-template-columns: 1fr;
    }

    .valor-card h3 {
        font-size: 48px;
    }

    .valor-card p {
        font-size: 48px;
    }

    .exposicion-item h4 {
        font-size: 48px;
    }

    .exposicion-item p {
        font-size: 48px;
    }

    .testimonio-box {
        max-width: 95vw;
        padding: 3vh 5vw;
    }

    .testimonio-box blockquote {
        font-size: 48px;
    }

    .autor-testimonio {
        font-size: 48px;
    }

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

    .contacto-icono {
        font-size: 48px;
    }

    .contacto-header h3 {
        font-size: 48px;
    }

    .contacto-nombre {
        font-size: 48px;
    }

    .contacto-cargo {
        font-size: 43px;
    }

    .contacto-datos p {
        font-size: 48px;
    }

    .contacto-descripcion {
        font-size: 46px;
    }

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

    .sede-card h3 {
        font-size: 48px;
    }

    .sede-direccion {
        font-size: 48px;
    }

    .sede-descripcion {
        font-size: 46px;
    }

    .faq-item h4 {
        font-size: 48px;
    }

    .faq-item p {
        font-size: 48px;
    }

    .cta-section h2 {
        font-size: 48px;
    }

    .cta-section p {
        font-size: 48px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 48px;
        padding: 2vh 6vw;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 2vh;
        align-items: center;
    }
    
    .footer-content { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }
    
    .footer-col h4::after { 
        left: 50%; 
        transform: translateX(-50%); 
    }
    
    .white-logo { 
        font-size: 48px; 
    }
    
    .copyright { 
        font-size: 43px; 
    }

    /* Catálogo responsive */
    .filtros-box {
        flex-direction: column;
        gap: 2vh;
    }

    .filtro-btn {
        width: 100%;
        font-size: 48px;
    }

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

    .reproductor-nombre {
        font-size: 48px;
    }

    .reproductor-descripcion {
        font-size: 48px;
    }

    .detalle-label,
    .detalle-valor {
        font-size: 43px;
    }

    .reproductor-categoria {
        font-size: 43px;
    }

    .tag {
        font-size: 40px;
    }

    .btn-consultar {
        font-size: 48px;
    }

    .info-compra-box h2 {
        font-size: 48px;
    }

    .info-compra-box p {
        font-size: 48px;
    }

    .contactos-rapidos {
        flex-direction: column;
    }

    .contacto-rapido {
        font-size: 48px;
    }
}

/* ===============================================
   ESTILOS PARA CATÁLOGO DE REPRODUCTORES
   =============================================== */

/* --- SECCIÓN DE FILTROS --- */
.filtros-section {
    padding: 6vh 0;
    background-color: var(--gris-fondo);
}

.filtros-box {
    display: flex;
    justify-content: center;
    gap: 2vw;
    flex-wrap: wrap;
}

.filtro-btn {
    padding: 1.2vh 2.5vw;
    background-color: rgba(255,255,255,0.8);
    border: 0.2vh solid var(--verde-monte);
    border-radius: 0.5vh;
    color: var(--verde-monte);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filtro-btn:hover {
    background-color: var(--verde-claro);
    color: var(--crudo);
    border-color: var(--verde-claro);
    transform: translateY(-0.2vh);
}

.filtro-btn.active {
    background-color: var(--verde-monte);
    color: var(--crudo);
    border-color: var(--verde-monte);
}

/* --- GRID DE CATÁLOGO --- */
.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
    gap: 3vw;
}

/* --- CARD DE REPRODUCTOR --- */
.reproductor-item {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(0.5vh);
    border-radius: 1vh;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    display: block;
}

.reproductor-item:hover {
    transform: translateY(-1vh);
    box-shadow: 0 1vh 3vh rgba(0,0,0,0.15);
}

/* --- IMAGEN DEL REPRODUCTOR --- */
.reproductor-imagen {
    position: relative;
    width: 100%;
    height: 25vh;
    overflow: hidden;
}

.reproductor-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.reproductor-item:hover .reproductor-imagen img {
    transform: scale(1.05);
}

/* --- BADGE DESTACADO --- */
.reproductor-badge {
    position: absolute;
    top: 1.5vh;
    right: 1.5vw;
    background-color: var(--tierra-colorada);
    color: var(--crudo);
    padding: 0.8vh 1.5vw;
    border-radius: 0.5vh;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.2);
}

.badge-destacado {
    background-color: var(--verde-claro);
}

/* --- INFO DEL REPRODUCTOR --- */
.reproductor-info {
    padding: 3vh 2vw;
}

.reproductor-categoria {
    display: inline-block;
    background-color: var(--verde-monte);
    color: var(--crudo);
    padding: 0.5vh 1.2vw;
    border-radius: 0.3vh;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1.5vh;
}

.categoria-hembra {
    background-color: var(--tierra-colorada);
}

.reproductor-nombre {
    font-size: 23px;
    color: var(--verde-monte);
    margin-bottom: 2vh;
    font-family: 'Playfair Display', serif;
}

/* --- DETALLES TÉCNICOS --- */
.reproductor-detalles {
    background-color: rgba(0,0,0,0.03);
    padding: 1.5vh 1.5vw;
    border-radius: 0.5vh;
    margin-bottom: 2vh;
}

.detalle-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8vh;
}

.detalle-item:last-child {
    margin-bottom: 0;
}

.detalle-label {
    font-weight: 600;
    color: var(--gris-texto);
    font-size: 12px;
}

.detalle-valor {
    color: var(--texto-oscuro);
    font-size: 12px;
}

/* --- DESCRIPCIÓN --- */
.reproductor-descripcion {
    font-size: 13px;
    color: var(--gris-texto);
    line-height: 1.6;
    margin-bottom: 2vh;
    text-align: justify;
}

/* --- CARACTERÍSTICAS (TAGS) --- */
.reproductor-caracteristicas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8vw;
    margin-bottom: 2.5vh;
}

.tag {
    display: inline-block;
    background-color: rgba(64, 145, 108, 0.15);
    color: var(--verde-monte);
    padding: 0.5vh 1vw;
    border-radius: 0.3vh;
    font-size: 11px;
    font-weight: 500;
}

/* --- BOTÓN CONSULTAR --- */
.btn-consultar {
    width: 100%;
    padding: 1.5vh 2vw;
    background-color: var(--verde-claro);
    color: var(--crudo);
    border: none;
    border-radius: 0.5vh;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.1);
}

.btn-consultar:hover {
    background-color: var(--verde-monte);
    transform: translateY(-0.2vh);
    box-shadow: 0 0.4vh 1.2vh rgba(0,0,0,0.15);
}

/* --- BOTÓN DOCUMENTO --- */
.btn-documento {
    display: block;
    width: 100%;
    padding: 1.2vh 2vw;
    background-color: var(--tierra-colorada);
    color: var(--crudo);
    border: none;
    border-radius: 0.5vh;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.1);
    text-align: center;
    margin-bottom: 1.5vh;
}

.btn-documento:hover {
    background-color: #8b3a2e;
    transform: translateY(-0.2vh);
    box-shadow: 0 0.4vh 1.2vh rgba(0,0,0,0.15);
}

/* --- INFO DE COMPRA --- */
.info-compra-box {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(0.5vh);
    padding: 5vh 4vw;
    border-radius: 1vh;
    box-shadow: var(--shadow);
    text-align: center;
    max-width: 75vw;
    margin: 0 auto;
}

.info-compra-box h2 {
    font-size: 28px;
    color: var(--verde-monte);
    margin-bottom: 2.5vh;
}

.info-compra-box p {
    font-size: 16px;
    color: var(--gris-texto);
    line-height: 1.7;
    margin-bottom: 4vh;
}

/* --- CONTACTOS RÁPIDOS --- */
.contactos-rapidos {
    display: flex;
    justify-content: center;
    gap: 3vw;
    flex-wrap: wrap;
}

.contacto-rapido {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    background-color: rgba(64, 145, 108, 0.1);
    padding: 2vh 3vw;
    border-radius: 0.8vh;
    transition: all 0.3s ease;
    color: var(--texto-oscuro);
}

.contacto-rapido:hover {
    background-color: var(--verde-claro);
    color: var(--crudo);
    transform: translateY(-0.3vh);
    box-shadow: 0 0.5vh 1.5vh rgba(0,0,0,0.12);
}

.contacto-rapido .icono {
    font-size: 30px;
}

.contacto-rapido span {
    font-size: 16px;
    line-height: 1.4;
}

.contacto-rapido small {
    font-size: 14px;
    font-weight: 600;
}

/* --- BOTÓN FLOTANTE DE AGREGAR (+) --- */
.btn-floating {
    position: fixed;
    bottom: 4vh;
    right: 4vw;
    background-color: var(--tierra-colorada);
    color: var(--crudo);
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vh;
    box-shadow: 0 0.5vh 2vh rgba(0,0,0,0.3);
    cursor: pointer;
    border: none;
    z-index: 2000;
    transition: transform 0.3s ease;
}

.btn-floating:hover {
    transform: scale(1.1) rotate(90deg);
    background-color: var(--verde-monte);
}

/* --- MODAL (FORMULARIO) --- */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--crudo);
    padding: 4vh 3vw;
    border-radius: 1vh;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow);
}

.modal-header h2 {
    color: var(--verde-monte);
    margin-bottom: 2vh;
    border-bottom: 2px solid var(--tierra-colorada);
}

.form-group {
    margin-bottom: 2vh;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5vh;
    font-size: 13px;
    color: var(--gris-texto);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 1vh;
    border: 1px solid #ccc;
    border-radius: 0.5vh;
    font-family: 'Montserrat', sans-serif;
}

.btn-cerrar-modal {
    position: absolute;
    top: 1vh;
    right: 1vh;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--tierra-colorada);
}

/* Ajustes Responsive para el Modal */
@media (max-width: 768px) {
    .btn-floating {
        width: 12vw;
        height: 12vw;
        font-size: 48px;
    }
    .form-group label {
        font-size: 48px;
    }
    .modal-content {
        width: 95%;
    }
}
.btn-eliminar {
    position: absolute;
    top: 1vh;
    right: 1vw;
    background-color: rgba(165, 73, 56, 0.9);
    color: var(--crudo);
    border: none;
    border-radius: 50%;
    width: 4vh;
    height: 4vh;
    font-size: 2.5vh;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    z-index: 10;
    line-height: 1;
}

.btn-eliminar:hover {
    background-color: var(--tierra-colorada);
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 0.4vh 1.2vh rgba(0,0,0,0.4);
}

.btn-eliminar:active {
    transform: scale(1.05) rotate(90deg);
}

/* Ajuste para que el badge destacado no se superponga */
.reproductor-badge {
    top: 1.5vh;
    right: 6vw; /* Moverlo a la izquierda para dar espacio al botón eliminar */
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .btn-eliminar {
        width: 6vh;
        height: 6vh;
        font-size: 4vh;
        top: 1.5vh;
        right: 2vw;
    }

    .reproductor-badge {
        top: 1.5vh;
        right: 10vw;
        font-size: 36px;
    }
}
/* ===============================================
   SISTEMA DE AUTENTICACIÓN - ESTILOS ADICIONALES
   =============================================== */

/* --- BOTÓN ADMIN EN FOOTER --- */
.btn-admin {
    position: absolute;
    right: 2vw;
    bottom: 50%;
    transform: translateY(50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--crudo);
    padding: 0.8vh 1.5vw;
    border-radius: 0.5vh;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.btn-admin:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(50%) scale(1.05);
}

.copyright {
    position: relative;
}

/* --- INDICADOR DE MODO ADMIN --- */
.indicador-admin {
    position: fixed;
    top: 12vh;
    right: 2vw;
    background: var(--tierra-colorada);
    color: var(--crudo);
    padding: 1vh 2vw;
    border-radius: 0.5vh;
    font-size: 12px;
    font-weight: 600;
    z-index: 999;
    box-shadow: 0 0.3vh 1vh rgba(0,0,0,0.2);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- MODAL DE LOGIN --- */
.modal-login {
    max-width: 400px !important;
}

.modal-login .modal-header h2 {
    text-align: center;
    margin-bottom: 1vh;
}

.modal-login .modal-header p {
    text-align: center;
    color: var(--gris-texto);
}

/* --- INFO DE PUBLICACIÓN --- */
.info-publicacion {
    font-size: 11px;
    color: var(--tierra-colorada);
    font-style: italic;
    margin-top: 1vh;
    padding-top: 1vh;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* --- CAMPO DE CONFIRMACIÓN DE CONTRASEÑA --- */
.auth-confirm {
    background: rgba(165, 73, 56, 0.08);
    border: 2px solid var(--tierra-colorada);
    border-radius: 0.5vh;
    padding: 2vh 1.5vw !important;
    margin-top: 3vh !important;
}

.auth-confirm label {
    color: var(--tierra-colorada) !important;
    font-weight: 700 !important;
    margin-bottom: 1vh !important;
}

.auth-confirm input {
    border: 2px solid var(--tierra-colorada) !important;
    font-weight: 600;
}

.auth-confirm input:focus {
    outline: none;
    border-color: var(--verde-monte) !important;
    box-shadow: 0 0 0 0.3vh rgba(27, 67, 50, 0.2);
}

/* --- RESPONSIVE PARA AUTENTICACIÓN --- */
@media (max-width: 768px) {
    .btn-admin {
        font-size: 48px;
        padding: 1vh 3vw;
        right: 3vw;
    }

    .indicador-admin {
        font-size: 43px;
        top: 10vh;
        right: 3vw;
        padding: 1vh 3vw;
    }

    .info-publicacion {
        font-size: 40px;
    }

    .modal-login {
        width: 90% !important;
    }

    .auth-confirm {
        padding: 2vh 4vw !important;
    }

    .auth-confirm label {
        font-size: 48px !important;
    }

    .auth-confirm input {
        font-size: 48px;
    }
}

/* --- AJUSTES AL BOTÓN FLOTANTE PARA MODO ADMIN --- */
.btn-floating {
    /* Ya no se muestra por defecto, solo en modo admin */
    display: none;
}

/* ===============================================
   HAMBURGER MENU + RESPONSIVE TABLET/MOBILE
   =============================================== */

/* Por defecto el toggle está oculto (desktop) */
.nav-toggle,
.nav-toggle-label {
    display: none;
}

/* --- TABLET (≤1024px): hamburger + ajustes de tipografía --- */
@media (max-width: 1024px) {
    /* Tipografía base legible (vw es ilegible bajo desktop) */
    body { font-size: 16px; }

    .container { max-width: 100%; padding: 0 4vw; }
    header .container { max-width: 100%; padding: 0 4vw; }

    nav { height: 70px; position: relative; }
    .logo-img { height: 50px; }

    /* Botón hamburger */
    .nav-toggle-label {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        width: 32px;
        height: 24px;
        z-index: 1100;
    }
    .nav-toggle-label span {
        display: block;
        height: 3px;
        width: 100%;
        background: var(--verde-monte);
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center;
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* Menú desplegable lateral */
    .nav-links {
        display: flex !important;
        position: fixed;
        top: 70px;
        right: 0;
        flex-direction: column;
        background: var(--crudo);
        width: 75%;
        max-width: 320px;
        height: calc(100vh - 70px);
        padding: 2rem 1.5rem;
        gap: 0;
        box-shadow: -5px 0 20px rgba(0,0,0,0.15);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        align-items: stretch;
        overflow-y: auto;
    }
    .nav-toggle:checked ~ .nav-links {
        transform: translateX(0);
    }
    .nav-links li {
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .nav-links a {
        display: block;
        font-size: 16px;
        padding: 16px 4px;
    }
    .btn-contacto {
        font-size: 16px;
        padding: 12px 18px;
        margin-top: 1rem;
        text-align: center;
    }

    /* Tipografías hero y secciones con clamp */
    .hero { height: 70vh; }
    .hero h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: 1px; }
    .hero p { font-size: clamp(15px, 2vw, 20px); max-width: 90%; }

    .hero-interno { height: auto; min-height: 38vh; padding: 90px 0 40px; }
    .hero-interno h1 { font-size: clamp(28px, 5vw, 44px); }
    .hero-interno p { font-size: clamp(14px, 1.8vw, 18px); }

    section { padding: 60px 0; }
    .section-title { margin-bottom: 40px; }
    .section-title h2 { font-size: clamp(24px, 4vw, 36px); }
    .section-title .line { width: 60px; height: 3px; }

    /* Texto general */
    .destacado { font-size: 17px; }
    .intro-texto, .contenido-texto, .intro-trayectoria,
    .intro-contacto, .intro-objetivos, .compromiso-texto {
        max-width: 100%;
        font-size: 15px;
    }
    .columna-texto p, .compromiso-texto p { font-size: 15px; }

    /* Grids: bajar columnas */
    .enfoque-grid,
    .beneficios-grid,
    .contactos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .catalogo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Tipografía cards */
    .enfoque-card h3, .beneficio-card h3, .ventaja-item h4,
    .objetivo-principal-card h3, .reproductor-card h2,
    .ubicacion-card h3, .sede-card h3, .contacto-header h3,
    .valor-card h3, .exposicion-item h4, .evaluacion-card h4,
    .caracteristica-item h4, .faq-item h4 { font-size: 18px; }

    .enfoque-card p, .beneficio-card p, .ventaja-item p,
    .objetivo-principal-card > p, .ubicacion-card p, .sede-descripcion,
    .contacto-datos p, .contacto-descripcion, .valor-card p,
    .exposicion-item p, .evaluacion-card p, .caracteristica-item p,
    .faq-item p, .lista-beneficios li, .lista-caracteristicas li,
    .lista-detalles li { font-size: 14px; }

    .enfoque-icono, .objetivo-icono-grande, .contacto-icono { font-size: 42px; }

    /* Catálogo cards */
    .reproductor-imagen { height: 220px; }
    .reproductor-nombre { font-size: 20px; }
    .reproductor-descripcion { font-size: 14px; }
    .detalle-label, .detalle-valor { font-size: 13px; }
    .reproductor-categoria, .reproductor-badge, .tag { font-size: 11px; }
    .btn-consultar, .btn-documento { font-size: 14px; padding: 12px; }

    /* Filtros */
    .filtro-btn { font-size: 14px; padding: 10px 18px; }

    /* CTAs y botones */
    .btn-primary, .btn-secondary { font-size: 15px; padding: 14px 28px; }
    .cta-section h2 { font-size: clamp(22px, 4vw, 32px); }
    .cta-section p { font-size: 16px; }

    /* Footer */
    .footer-content { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .white-logo { font-size: 22px; }
    .footer-col h4 { font-size: 16px; }
    .footer-col p, .footer-col a { font-size: 14px; }
    .copyright { font-size: 12px; }

    /* Tablas en tablet: scroll horizontal */
    .tabla-premios { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    th, td { font-size: 13px; padding: 12px 14px; white-space: nowrap; }
    td small { font-size: 11px; white-space: normal; }

    /* Modales */
    .modal-content {
        padding: 24px 20px;
        width: 92%;
        max-width: 480px;
        max-height: 90vh;
    }
    .modal-header h2 { font-size: 22px; }
    .form-group label { font-size: 14px; }
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* iOS: evita zoom al focus */
        padding: 12px;
        border-radius: 6px;
    }

    /* Btn admin en footer: que no flote roto */
    .btn-admin {
        position: relative !important;
        right: auto;
        bottom: auto;
        transform: none;
        display: inline-block;
        margin: 16px auto 0;
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Indicador admin */
    .indicador-admin {
        top: 80px;
        right: 12px;
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Btn flotante (+) */
    .btn-floating {
        width: 56px;
        height: 56px;
        font-size: 32px;
        bottom: 20px;
        right: 20px;
    }

    /* Btn eliminar en cards */
    .btn-eliminar {
        width: 32px;
        height: 32px;
        font-size: 22px;
    }

    /* Ubicación / sedes / contactos */
    .ubicacion-info, .sedes-grid, .reproductores-grid,
    .ventajas-grid, .evaluacion-grid, .caracteristicas-fisicas,
    .objetivos-principales-grid, .valor-premios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contacto-rapido { font-size: 14px; padding: 14px 20px; }
    .contacto-rapido .icono { font-size: 24px; }
}

/* --- MOBILE (≤640px) --- */
@media (max-width: 640px) {
    body { font-size: 16px; line-height: 1.6; }

    .container, header .container { padding: 0 5vw; }

    /* Hero */
    .hero h1 { font-size: 32px; letter-spacing: 1px; }
    .hero p { font-size: 16px; }
    .hero-interno h1 { font-size: 28px; }
    .hero-interno p { font-size: 16px; }
    .section-title h2 { font-size: 26px; }

    /* Grids pesados (con mucho contenido por card): 1 columna */
    .ubicacion-info, .sedes-grid, .reproductores-grid,
    .ventajas-grid, .caracteristicas-fisicas,
    .contactos-grid, .footer-content {
        grid-template-columns: 1fr;
    }

    /* Grids livianos: mantener 2 columnas para que se vea orgánico (como tablet) */
    .enfoque-grid, .beneficios-grid,
    .evaluacion-grid, .valor-premios-grid,
    .objetivos-principales-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .enfoque-card, .beneficio-card,
    .evaluacion-card, .valor-card,
    .objetivo-principal-card {
        padding: 20px 14px;
        min-width: 0;
    }
    .enfoque-card h3, .beneficio-card h3,
    .evaluacion-card h4, .valor-card h3,
    .objetivo-principal-card h3 { font-size: 16px; line-height: 1.3; }
    .enfoque-card p, .beneficio-card p,
    .evaluacion-card p, .valor-card p,
    .objetivo-principal-card > p { font-size: 14px; line-height: 1.5; }
    .objetivo-principal-card .lista-detalles li { font-size: 13px; line-height: 1.5; }
    .enfoque-icono, .objetivo-icono-grande, .contacto-icono { font-size: 36px; margin-bottom: 8px; }

    /* Evitar overflow horizontal con strings largos (emails, URLs) */
    .contacto-datos a, .contacto-datos p,
    .footer-col a, .footer-col p,
    .sede-direccion, .sede-descripcion {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .contacto-card, .footer-col { min-width: 0; }

    /* Contactos en 1 columna (mucho contenido por card) con mejor jerarquía */
    .contacto-card { padding: 22px 18px; }
    .contacto-nombre { font-size: 17px; }
    .contacto-cargo { font-size: 14px; }
    .contacto-datos p { font-size: 15px; }
    .contacto-descripcion { font-size: 15px; line-height: 1.55; }

    /* Catálogo de reproductores: 1 col centrado y más compacto */
    .catalogo-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 22px;
    }
    .reproductor-item { min-width: 0; }
    .reproductor-imagen { height: 220px; }
    .reproductor-info { padding: 22px 18px 20px; }
    .reproductor-nombre { font-size: 22px; margin-bottom: 14px; }
    .reproductor-categoria { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }
    .reproductor-badge { font-size: 11px; padding: 5px 10px; top: 12px; right: 12px; }
    .reproductor-detalles { padding: 12px 14px; }
    .detalle-label, .detalle-valor { font-size: 14px; }
    .reproductor-descripcion { font-size: 15px; line-height: 1.55; }
    .tag { font-size: 12px; padding: 4px 10px; }
    .btn-consultar, .btn-documento { font-size: 15px; padding: 13px; }

    /* Tipografía cards "pesadas" en mobile */
    .ventaja-item h4, .objetivo-principal-card h3,
    .reproductor-card h2, .ubicacion-card h3, .sede-card h3,
    .contacto-header h3, .exposicion-item h4,
    .caracteristica-item h4, .faq-item h4 { font-size: 19px; }

    .ventaja-item p, .objetivo-principal-card > p,
    .ubicacion-card p, .sede-descripcion,
    .contacto-datos p, .contacto-descripcion,
    .exposicion-item p, .caracteristica-item p,
    .faq-item p, .lista-beneficios li, .lista-caracteristicas li,
    .lista-detalles li { font-size: 15px; line-height: 1.55; }

    .destacado { font-size: 17px; }
    .intro-texto, .contenido-texto, .intro-trayectoria,
    .intro-contacto, .intro-objetivos, .compromiso-texto,
    .columna-texto p, .compromiso-texto p { font-size: 16px; line-height: 1.65; }

    /* Footer 1 col centrado */
    .footer-content { text-align: center; gap: 24px; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-col p, .footer-col a { font-size: 15px; }

    /* Filtros stacked */
    .filtros-box { flex-direction: column; gap: 10px; }
    .filtro-btn { width: 100%; font-size: 15px; padding: 12px 18px; }

    /* Contactos rápidos stacked */
    .contactos-rapidos { flex-direction: column; gap: 12px; }
    .contacto-rapido { width: 100%; justify-content: center; font-size: 16px; padding: 16px 20px; }
    .contacto-rapido .icono { font-size: 28px; }
    .contacto-rapido span { font-size: 16px; line-height: 1.4; }
    .contacto-rapido small { font-size: 14px; font-weight: 600; }
    .info-compra-box { padding: 32px 20px; max-width: 100%; }
    .info-compra-box h2 { font-size: 22px; margin-bottom: 14px; }
    .info-compra-box p { font-size: 15px; line-height: 1.55; margin-bottom: 24px; }

    /* CTA buttons stacked */
    .cta-buttons { flex-direction: column; gap: 12px; align-items: stretch; }
    .btn-primary, .btn-secondary { text-align: center; font-size: 16px; padding: 14px 24px; }
    .cta-section h2 { font-size: 26px; }
    .cta-section p { font-size: 16px; }

    /* Modal: ocupa casi toda la pantalla */
    .modal-content {
        width: 95%;
        padding: 20px 16px;
        max-height: 92vh;
        border-radius: 12px;
    }

    /* Hero más compacto */
    .hero { height: 60vh; min-height: 400px; }
    .hero-interno { min-height: 30vh; padding: 80px 0 30px; }

    /* Sections con menos padding */
    section { padding: 48px 0; }

    /* Ventajas: número arriba en lugar de absolute */
    .ventaja-item { padding: 24px 20px; }
    .ventaja-numero {
        position: relative;
        top: auto;
        left: auto;
        font-size: 36px;
        display: block;
        margin-bottom: 8px;
    }

    /* Tabla de logros: que el contenido envuelva para no obligar scroll horizontal */
    .tabla-premios {
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
    }
    .tabla-premios table { table-layout: fixed; width: 100%; }
    th, td {
        font-size: 13px;
        padding: 10px 8px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    td small { font-size: 12px; }

    /* Footer texto largo */
    .footer-col p, .footer-col a { font-size: 14px; word-break: break-word; overflow-wrap: anywhere; }
    .white-logo { font-size: 24px; }
}

/* --- MOBILE muy chico (≤400px): bajar a 1 col los grids livianos también --- */
@media (max-width: 400px) {
    .enfoque-grid, .beneficios-grid,
    .evaluacion-grid, .valor-premios-grid,
    .objetivos-principales-grid {
        grid-template-columns: 1fr;
    }
}

/* --- SAFETY NET: piso de tamaño de fuente legible en mobile ---
   Forzar mínimos para que ninguna regla en `vw` previa deje texto ilegible.
   Se aplica al final con !important para ganar especificidad sin tocar
   selectores existentes. */
@media (max-width: 768px) {
    body { font-size: 16px !important; }

    p, li, a, span, label, button, input, select, textarea,
    td, th, small, strong, em, blockquote {
        font-size: max(14px, 1em);
    }

    /* Headings con mínimo */
    h1 { font-size: max(26px, 1.6em) !important; }
    h2 { font-size: max(22px, 1.4em) !important; }
    h3 { font-size: max(18px, 1.2em) !important; }
    h4 { font-size: max(16px, 1.1em) !important; }

    /* Texto auxiliar: nunca menor a 13px */
    small, .reproductor-categoria, .reproductor-badge,
    .tag, .detalle-label, .detalle-valor,
    .copyright {
        font-size: max(13px, 0.85em) !important;
    }

    /* Contactos rápidos (la card que aparecía ilegible) */
    .contacto-rapido { font-size: 16px !important; }
    .contacto-rapido span { font-size: 16px !important; }
    .contacto-rapido small { font-size: 14px !important; }
    .contacto-rapido .icono { font-size: 28px !important; }

    /* Info-compra box */
    .info-compra-box h2 { font-size: 22px !important; }
    .info-compra-box p { font-size: 15px !important; }
}

/* --- FOOTER MOBILE: tamaños compactos (override safety net) --- */
@media (max-width: 768px) {
    footer { padding: 40px 0 20px; }

    .footer-content {
        gap: 28px;
        margin-bottom: 28px;
    }

    .footer-logo {
        max-width: 140px !important;
        margin: 0 auto 16px;
    }

    .footer-col {
        text-align: center;
    }

    .footer-col h4 {
        font-size: 15px !important;
        margin-bottom: 14px;
        letter-spacing: 0.5px;
    }

    .footer-col p,
    .footer-col a,
    .footer-col strong,
    .footer-col span {
        font-size: 13px !important;
        line-height: 1.55;
        margin-bottom: 6px;
    }

    .copyright {
        font-size: 11px !important;
        padding-top: 18px;
        line-height: 1.5;
    }
}