@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

@font-face {
    font-family: "Libre Baskerville";
    src: url('fuentes/Libre_Baskerville/static/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url('fuentes/Libre_Baskerville/static/LibreBaskerville-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Libre Baskerville";
    src: url('fuentes/Libre_Baskerville/static/LibreBaskerville-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Neue Haas Grotesk Display Pro";
    src: url('fuentes/fuentes-neue-haas-display/NeueHaasGrotDisp-35Thin-Trial.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Neue Haas Grotesk Display Pro";
    src: url('fuentes/fuentes-neue-haas-display/NeueHaasGrotDisp-55Roman-Trial.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Neue Haas Grotesk Display Pro";
    src: url('fuentes/fuentes-neue-haas-display/NeueHaasGrotDisp-65Medium-Trial.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Neue Haas Grotesk Display Pro";
    src: url('fuentes/fuentes-neue-haas-display/NeueHaasGrotDisp-75Bold-Trial.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}


@font-face {
    font-family: "Garet";
    src: url('fuentes/garet/Garet-Book.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: "Garet";
    src: url('fuentes/garet/Garet-Heavy.ttf') format('truetype');
    font-weight: 700;
}


/* ==========================================
   VARIABLES GLOBALES (paleta de marca)
   ========================================== */
:root {
    --color-naranja: #f14c27;
    --color-verde: #008a68;
    --color-azul: #007bff;
    --color-azul-oscuro: #4a55a2;
    --color-lima: #ccff00;
    --color-morado: #8a2be2;
    --color-rojo-naranja: #da3b00;
    --color-negro: #050505;
    --color-negro-header: #1d1d1d;
}

/* ==========================================
   RESETEO GLOBAL (Evitar scroll horizontal)
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Esto es vital para que el padding no sume al ancho */
    font-family: Arial, sans-serif;
}

html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ==========================================
   BOTÓN HAMBURGUESA (Oculto en Escritorio)
   ========================================== */
.btn-hamburguesa {
    display: none !important; 
}

/* ==========================================
   RESET BASE Y VARIABLES GLOBALES
   ========================================== */
.hero-container {
    background-image: url('imagenes/espacio-ccd.jpg');
    
    background-size: cover; 
    background-position: top center; 
    background-repeat: no-repeat;
    
    width: 100%;
    margin: 0;
    
    aspect-ratio: 4 / 5; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media (min-width: 769px) {
    .hero-container {
        aspect-ratio: 21 / 10;
    }
}

.hero-container h1 {
    color: white;
    font-size: 3.5rem; 
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); 
}

.hero-container p {
    color: white;
    font-size: 1.2rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

/* ==========================================
   LÍNEA VERDE ANIMADA (Ticker / Marquee)
   ========================================== */
.ticker-banner {
    background-color: #00b374; 
    color: white;
    overflow: hidden; 
    white-space: nowrap; 
    padding: 14px 0;
    font-family: "Garet", Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
}

.ticker-text {
    display: inline-block;
    white-space: nowrap;
    animation: mover-izquierda-derecha 25s linear infinite; 
}

.ticker-text span {
    margin-right: 80px; 
}

.ticker-amarillo .ticker-text span {
    margin-right: 8px;
}

/* Definición de la animación para el bucle infinito */
@keyframes mover-izquierda-derecha {
    0% {
        transform: translateX(-50%); 
    }
    100% {
        transform: translateX(0%); 
    }
}

/* Contenedor principal para evitar que el texto toque los bordes de la pantalla */
.container {
    max-width: 1200px;
    margin: 0 auto; 
    padding: 40px 20px;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #2b2b2b;
}

/* ==========================================
   CABECERA (Header)
   ========================================== */
header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 40px;
    background-color: var(--color-negro-header); 
    color: rgb(255, 255, 255);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

/* Contenedor de los logos en el menú superior */
.logo-header-container {
    display: flex;
    align-items: center;
    gap: 20px; 
}

/* Controla el tamaño de los logos en la barra superior (Escritorio) */
.logo-header {
    max-height: 45px;
    width: auto;
    object-fit: contain;
}

/* ==========================================
   BLOQUE NARANJA GIGANTE
   ========================================== */
.bloque-naranja-full {
    background-color: var(--color-naranja);
    width: 100%; 
    padding: 80px 20px; 
}

.titulo-gigante {
    color: white;
    font-family: "Lora", serif; 
    
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 250;
    line-height: 0.85;
    letter-spacing: -3px;
    margin: 0 auto;
    max-width: 1200px;
}

.titulo-izquierda {
    text-align: left;
    white-space: nowrap;
    margin-left: 0;
    margin-right: auto;
}

/* --- Bloque hero "ciudad creativa digital" (solo Espacios) --- */
.bloque-hero-ciudad {
    background-color: #fd4716;
    padding: 200px 20px 80px;
}

.titulo-hero-ciudad {
    text-transform: lowercase;
    font-size: clamp(4.5rem, 12vw, 10.5rem);
    line-height: 0.78;
    letter-spacing: -4px;
}

@media (max-width: 768px) {
    .bloque-hero-ciudad {
        padding: 100px 20px 40px;
    }
    .titulo-hero-ciudad {
        font-size: clamp(3rem, 11vw, 4.5rem);
        letter-spacing: -2px;
    }
}

/* ==========================================
   SECCIÓN: NUESTROS ESPACIOS
   ========================================== */
.espacios-container {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* --- Menú desplegable: solo se ven los 3 bloques hasta hacer clic --- */
.espacio-menu-header {
    cursor: pointer;
}

.espacio-menu-panel {
    display: none;
}

.espacio-menu-panel.abierto {
    display: block;
}

.tarjetas-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.texto-justificado-centrado, .distrito-preview p {
    font-size: 1.8rem !important; /* Texto más grande */
    line-height: 1.5;
    margin-top: 20px;
}

/* ==========================================
   ESTILOS DE LAS TARJETAS DE ESPACIOS
   ========================================== */
.tarjeta-espacio {
    background-color: white;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: inline-size; /* El texto de abajo escala según este ancho */
    container-name: tarjeta;
}

/* El bloque rojo/naranja superior */
.tarjeta-header {
    background-color: #d42d00; 
    color: white;
    padding: 10px 20px;
}

.tarjeta-header h3 {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 36pt;
    font-weight: 400;
    letter-spacing: -1.5px;
    line-height: 1.05;
}

/* El contenedor principal de la tarjeta */
.tarjeta-body {
    display: flex; 
    flex-direction: row;
    flex: 1;
    align-items: stretch;
    position: relative; /* Referencia para que el texto se posicione según el alto de la imagen */
}

.tarjeta-imagen {
    flex: 0 0 58%;
    flex-shrink: 0; /* La imagen nunca cede ancho, tiene prioridad siempre */
    background-color: #2b2b2b;
    align-self: flex-start; /* Alto = el de la propia foto, no se recorta */
    min-height: 220px;
}

.tarjeta-imagen img {
    display: block;
    width: 100%;
    height: auto; /* Proporción real de cada foto, siempre completa */
}

.tarjeta-contenido {
    /* Posicionado sobre el hueco de la derecha: así su alto queda fijo al
       de la imagen (que es lo único que define el alto de la fila) y no
       puede estirar la tarjeta hacia abajo */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 42%;
    min-width: 0;
    padding: clamp(10px, 4.5cqh, 26px);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1.6cqh, 12px);
    justify-content: space-between;
    overflow: hidden;
    container-type: size; /* Ahora sigue tanto el ancho como el alto disponibles */
    container-name: contenido;
}

.tarjeta-contenido p {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: clamp(0.85rem, min(5.8cqw, 7cqh), 3.4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #1a1a1a;
    text-align: left; 
}

.tarjeta-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(6px, min(5cqw, 2.2cqh), 24px);
}

.tarjeta-etiquetas span {
    border: 1px solid var(--color-rojo-naranja);
    color: var(--color-rojo-naranja);
    padding: 6px 16px;
    border-radius: 16px;
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    letter-spacing: -0.5px;
    font-size: clamp(0.7rem, min(5cqw, 5cqh), 2.8rem); 
}

/* Botón verde lima */
.btn-reservar {
    background-color: var(--color-lima); 
    color: black;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 15px;
    align-self: flex-end; 
    margin-top: clamp(4px, 1.2cqh, 14px);
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    letter-spacing: -0.5px;
    font-size: clamp(0.85rem, min(4.2cqw, 4.2cqh), 2.4rem);
    font-weight: 400;
}

.btn-reservar:hover {
    background-color: #b3e600; 
}

/* --- Modal: foto del espacio (al presionar el botón) --- */
.modal-foto-espacio {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.modal-foto-espacio.abierto {
    display: flex;
}

.modal-foto-contenido {
    position: relative;
    max-width: 800px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
}

.modal-foto-contenido img {
    width: 100%;
    max-height: 70vh;
    object-fit: cover;
    display: block;
}

.modal-foto-contenido p {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 15px 20px;
    margin: 0;
    color: #1a1a1a;
}

.modal-foto-cerrar {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ==========================================
   DISEÑO COMUNIDAD
   ========================================== */

/* --- Hero Comunidad --- */
.comunidad-hero {
    background-image: url('imagenes/titulo-comunidad.png'); /* Reemplaza con el nombre de tu foto */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .comunidad-hero {
        aspect-ratio: 21 / 10;
    }
}

/* --- Ticker Azul --- */
.ticker-azul {
    background-color: var(--color-azul-oscuro) !important;
}

/* --- Sección Registro Estatal --- */
.registro-seccion {
    padding: 60px 20px;
}

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

.registro-blanco {
    background-color: #ffffff !important; /* El !important fuerza el fondo blanco */
    padding: 40px 10px;
    width: 100%;
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    flex-direction: column;  /* Alinea elementos uno debajo de otro */
}
.img-registro-grande {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* Título de texto que reemplaza la ilustración "Registro Estatal de Creativos" */
.titulo-registro-creativos {
    font-family: "Garet", Arial, sans-serif;
    font-weight: 700; /* Garet Heavy */
    text-transform: uppercase;
    color: #1a1a1a;
    text-align: center;
    font-size: clamp(2.2rem, 5.5vw, 6.5rem); /* más grande frente a la descripción, según referencia */
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0 auto 30px;
    max-width: 1200px;
}

.img-registro-pequeno {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.texto-justificado-centrado {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif; /* antes Arial, según referencia de diseño */
    font-size: 0.75rem; /* antes 1.1rem: más chico frente al título, según referencia */
    line-height: 1.6;
    color: #000000;
    text-align: justify;       /* Justifica el texto */
    max-width: 1400px;         /* Limita el ancho para que sea legible */
    margin: 10px auto 0 auto;  /* Centra el bloque de texto y separa de la imagen */
    padding: 0 1px;           /* Evita que toque los bordes en pantallas pequeñas */
}

/* La sección "Nuestros Espacios" necesita ser más ancha que el .container
   normal (1200px) para que el párrafo de arriba pueda llegar a 1400px */
#espacios {
    max-width: 1450px;
}

/* En "Nuestros Espacios" el texto va centrado, no justificado */
#espacios .texto-justificado-centrado {
    text-align: center;
}

/* En teléfono: texto más chico (Registro Estatal / intro Nuestros Espacios) */
@media (max-width: 768px) {
    .texto-justificado-centrado, .distrito-preview p {
        font-size: 1.05rem !important;
        line-height: 1.5;
    }
}

.acordeon {
    border-top: 1px solid #000;
    margin: 40px 0 0 0; /* espacio solo arriba de cada sección (antes 40px 0 20px 0) */
    width: 100%;    /* Forzamos el ancho completo */
}

.texto-acordeon {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 1.5rem !important; /* Texto mucho más grande */
    line-height: 1.8; /* antes 1.6: más interlineado, según referencia de diseño */
    letter-spacing: 0.3px; /* más interletrado, según referencia de diseño */
    margin-bottom: 25px;
    color: #000 !important;
}

.acordeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
}

.header-titulo { display: flex; align-items: center; gap: 15px; }
.icono-control { height: 100px; }

.flecha {
    font-size: 2rem;
    transition: transform 0.3s ease;
    display: inline-block;
    transform: rotate(-90deg); /* Flecha apuntando abajo */
}

/* Estado cuando está abierto */
.acordeon.abierto .flecha {
    transform: rotate(90deg); /* Flecha apuntando arriba */
}

.acordeon-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.acordeon.abierto .acordeon-contenido {
    max-height: 1500px; /* Suficiente para el texto más largo + todas las etiquetas envueltas */
    padding-bottom: 20px;
}

/* Forzamos que todo texto dentro de la sección blanca sea negro */
.registro-blanco, .registro-blanco p, .registro-blanco h3 {
    color: #000000 !important;
}

.container-registro {
    max-width: 1200px; /* O el ancho que prefieras para PC */
    margin: 0 auto;
    width: 100%;
}

/* Etiquetas de categoría: mismo patrón, distinto color por clase */
.tag-verde, .tag-diseno, .tag-azul, .tag-lima {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    padding: 6px 16px; /* etiquetas más grandes (antes 4px 12px) */
    border-radius: 5px;
    font-size: 1.4rem; /* etiquetas más grandes (antes 1.2rem) */
    font-weight: bold;
    border: 1.5px solid var(--tag-color);
    color: var(--tag-color);
}
.tag-verde  { --tag-color: #039C54; } /* verde específico de esta sección, según referencia de diseño */
.tag-diseno { --tag-color: var(--color-naranja); }
.tag-azul   { --tag-color: var(--color-azul); }
.tag-lima   { --tag-color: var(--color-lima); }

.header-titulo h3 {
    font-family: "Libre Baskerville", "Lora", serif !important;
    font-weight: 700; /* Bold: se veía delgado porque heredaba normal */
    font-size: 2.5rem !important;
    line-height: 1; /* evita el espacio extra que desalineaba el título con la flecha */
    color: #039C54 !important;
}

.etiquetas-tags {
    display: flex;
    flex-wrap: wrap; /* Permite que bajen si no caben */
    gap: 15px;
    margin-top: 10px;
}

/* Estrella decorativa al lado del título */
.estrella-morada {
    color: var(--color-morado);
    font-size: 5rem;
    margin-left: 10px;
}

/* Título de cada acordeón: mismo tamaño, distinto color por categoría */
.acordeon-videojuegos .header-titulo h3   { color: #039C54 !important; font-size: 4.5rem !important; }
.acordeon-diseno .header-titulo h3        { color: var(--color-naranja) !important; font-size: 4.5rem !important; }
.acordeon-audiovisuales .header-titulo h3 { color: var(--color-azul) !important; font-size: 4.5rem !important; }
.acordeon-inmersivas .header-titulo h3    { color: var(--color-lima) !important; font-size: 4.5rem !important; }

/* Tipografías según referencia de diseño: título en Libre Baskerville, texto y
   etiquetas en Neue Haas Grotesk Display Pro, iguales en las 4 categorías */
.acordeon-videojuegos .header-titulo h3,
.acordeon-diseno .header-titulo h3,
.acordeon-audiovisuales .header-titulo h3,
.acordeon-inmersivas .header-titulo h3 {
    font-family: "Libre Baskerville", "Lora", serif !important;
}

.acordeon-videojuegos .texto-acordeon,
.acordeon-diseno .texto-acordeon,
.acordeon-audiovisuales .texto-acordeon,
.acordeon-inmersivas .texto-acordeon {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif !important;
}

/* Acordeón en celular y tablet: el título de 4.5rem no cabe en pantallas chicas,
   así que lo reducimos por pasos y evitamos que el ícono/flecha se encimen */
@media (max-width: 768px) {
    .acordeon-header {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .header-titulo {
        gap: 10px;
        flex-wrap: wrap;
        min-width: 0; /* permite que el texto se pueda encoger dentro del flex */
    }
    .header-titulo h3 {
        min-width: 0;
        word-break: break-word;
    }
    .acordeon-videojuegos .header-titulo h3,
    .acordeon-diseno .header-titulo h3,
    .acordeon-audiovisuales .header-titulo h3,
    .acordeon-inmersivas .header-titulo h3 {
        font-size: 2.4rem !important;
    }
    .icono-control {
        height: 50px;
    }
    .estrella-morada {
        font-size: 2.5rem;
    }
    .flecha {
        flex-shrink: 0;
    }
    .texto-acordeon {
        font-size: 1.05rem !important;
        line-height: 1.5;
    }
    .etiquetas-tags {
        gap: 10px;
    }
    .tag-verde, .tag-diseno, .tag-azul, .tag-lima {
        font-size: 1rem; /* antes 0.85rem */
        padding: 7px 16px; /* antes 6px 14px */
    }
}

@media (max-width: 420px) {
    .acordeon-videojuegos .header-titulo h3,
    .acordeon-diseno .header-titulo h3,
    .acordeon-audiovisuales .header-titulo h3,
    .acordeon-inmersivas .header-titulo h3 {
        font-size: 1.9rem !important;
    }
    .icono-control {
        height: 38px;
    }
    .texto-acordeon {
        font-size: 0.95rem !important;
    }
    .tag-verde, .tag-diseno, .tag-azul, .tag-lima {
        font-size: 0.9rem; /* antes 0.78rem */
        padding: 6px 14px; /* antes 5px 12px */
    }
}

.contenedor-cta-registro {
    text-align: center;
    margin: 50px 0;
}

.btn-negro-redondo {
    background-color: #000000;
    color: #ffffff;
    padding: 15px 40px;
    border-radius: 50px; /* Hace los bordes redondeados (cápsula) */
    text-decoration: none;
    font-family: "Libre Baskerville", "Lora", serif;
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-negro-redondo:hover {
    background-color: #333333;
    transform: scale(1.05); /* Pequeño efecto al pasar el mouse */
}

.btn-distrito-creativo-hero {
    font-size: 1.5rem;
    padding: 5px 10px;
    margin: 5px;
}

/* ==========================================
   DISEÑO REGISTRO
   ========================================== */

.formulario-integrado {
    max-width: 1400px;
    margin: 40px auto;
    font-family: "Lora", serif;
}

.frase-hero {
    font-family: "Lora", serif;
    font-size: clamp(2.6rem, 8.5vw, 8rem); /* Título gigante, adaptable */
    line-height: 1.02;
    font-weight: 700;
    margin-bottom: 50px;
}

.frase-hero input {
    font-family: "Lora", serif;
    font-weight: 700;
    color: var(--color-rojo-naranja);
    font-size: clamp(1.9rem, 5.8vw, 5.2rem);
    border: none;
    border-bottom: 1px solid #000;
    width: auto;
    field-sizing: content; /* El campo abraza el texto que se va escribiendo */
    min-width: 3ch;
    max-width: 100%;
    background: transparent;
}

.campos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

.btn-naranja {
    background-color: var(--color-naranja);
    color: white;
    padding: 20px 50px;       
    font-size: 1.6rem !important; 
    border-radius: 50px;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    width: auto;              
    display: inline-block;
}

.campo { display: flex; flex-direction: column; }
.campo label {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 1.5rem !important;
    font-weight: 400;
    color: #1a1a1a;
}
/* El texto que escribe el usuario dentro del input */
.campo input {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 1.5rem !important;
    font-weight: 400;
    color: var(--color-rojo-naranja);
    padding: 8px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999;
    background: transparent;
}
.opciones-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.checkboxes {
    display: flex;
    flex-direction: column; 
    gap: 10px;              
}

.check-item {
    display: flex;
    align-items: flex-start;
    font-size: 1.0rem;
    cursor: pointer;
}

@media (max-width: 700px) {
    .campos-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .frase-hero input {
        max-width: 100%;
    }
    .opciones-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-naranja {
        width: 100%;
        text-align: center;
    }
}

.check-item input {
    margin-right: 10px;    /* Espacio entre el cuadrito y el texto */
    margin-top: 3px;       /* Alineación vertical */
    width: auto !important; /* Evita que el input herede el ancho de los otros campos */
}

.mensaje-exito {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo horizontalmente */
    justify-content: center;
    padding: 50px;
    text-align: center;
}

.mensaje-exito img {
    max-width: 400px; /* Ajusta según el tamaño de tu imagen */
    margin-bottom: 40px;
}

.btn-inicio-grande {
    background-color: var(--color-naranja); /* Naranja corporativo */
    color: white;
    padding: 20px 60px; /* Botón más grande */
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    display: inline-block;
    transition: background-color 0.3s;
}

.btn-inicio-grande:hover {
    background-color: #d13a1a;
}

/* ==========================================
   GALERIA
   ========================================== */

.galeria-hero {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-image: url('imagenes/galeria-fondo.jpg'); /* Asegúrate de tener la imagen */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width: 769px) {
    .galeria-hero {
        aspect-ratio: 21 / 10;
    }
}

.seccion-texto-multicolor {
    background-color: #ffffff; /* Fondo blanco */
    padding: 80px 20px;
    text-align: center;
}

.texto-gigante-galeria {
    font-family: "Lora", serif;
    font-size: clamp(3.25rem, 5vw, 4.5rem);
    line-height: 1.1;
    color: #000000;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0;
    padding: 0 20px; /* Margen pequeño para que no toque los bordes en móvil */
    width: 100%;     /* Asegura que ocupe todo el ancho */
}

/* En pantallas angostas el mínimo de 3.25rem es demasiado grande y hace
   que el texto ocupe muchísimas líneas; lo reducimos por pasos */
@media (max-width: 768px) {
    .texto-gigante-galeria {
        font-size: clamp(2rem, 7vw, 3.25rem);
        letter-spacing: -1px;
    }
    .seccion-texto-multicolor {
        padding: 50px 20px;
    }
}

@media (max-width: 420px) {
    .texto-gigante-galeria {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }
}

/* Clases de colores específicos */
.color-naranja { color: var(--color-naranja); }
.color-azul { color: var(--color-azul); }
.color-verde { color: var(--color-verde); }
.color-morado { color: var(--color-morado); }
.color-rojo-naranja { color: var(--color-rojo-naranja); }

.container-full {
    width: 100%;
    padding: 0 40px; /* Ajusta el espacio lateral que prefieras */
    margin: 0;
}

.seccion-fotos-galeria {
    padding: 0 100px; 
    background-color: #ffffff; /* Aseguramos fondo blanco */
    margin-top: 0;           /* Eliminamos cualquier margen superior extra */
}

.grid-fotos {
    display: grid;
    grid-template-columns: 1fr; /* Una sola columna: una imagen por renglón */
    gap: 50px;                 /* Espacio vertical entre imágenes */
    padding-bottom: 50px;      /* Espacio al final */
}

.seccion-fotos-galeria, .grid-fotos {
    border: none !important;
    background-color: #ffffff !important;
}

.foto-item {
    width: 100%;
}

.foto-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Ajuste para móviles: si prefieres que se apilen en pantallas pequeñas */
@media (max-width: 768px) {
    .seccion-fotos-galeria {
        padding: 0 20px; /* En desktop es 100px; en móvil sobraba casi todo el ancho */
    }
    .grid-fotos {
        grid-template-columns: 1fr 1fr; /* En móvil se ven 2x2 */
        padding: 0; /* El padding ya lo pone .seccion-fotos-galeria, evitamos duplicarlo */
        gap: 15px; /* En desktop es 50px; en pantallas angostas dejaba las imágenes diminutas */
    }
}

@media (max-width: 420px) {
    .grid-fotos {
        grid-template-columns: 1fr; /* Pantallas muy angostas: una imagen grande por fila */
        gap: 20px;
    }
}

/* ==========================================
   INICIO (LANDING) — Hero
   ========================================== */
.hero-landing {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Banda menos ancha/gruesa en móvil (antes 4/5) */
    background-image: url('imagenes/Ciudad.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .hero-landing {
        aspect-ratio: 21 / 9; /* Banda menos ancha/gruesa en escritorio (antes 16/9) */
    }
}

.hero-landing-badge {
    width: 32%;
    min-width: 220px;
    max-width: 380px;
    object-fit: contain;
}

.hero-landing-titulo {
    margin: 0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

/* Base común: todas las imágenes de título comparten esto */
.hero-titulo-ccd,
.hero-titulo-distrito,
.hero-titulo-comunidad,
.hero-titulo-espacios,
.hero-titulo-equipo {
    height: auto;
    display: block;
}

/* Cada imagen tiene su propia clase para poder cambiar su tamaño
   de forma independiente, sin afectar a las demás */
.hero-titulo-ccd {
    width: min(90%, 480px);
}

.hero-titulo-distrito {
    width: min(90%, 620px);
}

.hero-titulo-comunidad {
    width: min(90%, 820px);
}

.hero-titulo-espacios {
    width: min(90%, 480px);
}

.hero-titulo-equipo {
    width: min(100%, 780px);
}

@media (max-width: 768px) {
    .hero-titulo-ccd {
        width: min(80%, 480px);
    }
    .hero-titulo-distrito {
        width: min(80%, 620px);
    }
    .hero-titulo-comunidad {
        width: min(80%, 820px);
    }
    .hero-titulo-equipo {
        width: min(90%, 780px);
    }
    .hero-titulo-espacios {
        width: min(80%, 480px);
    }
}

/* --- Bloque naranja: intro a Distrito Creativo --- */
.distrito-preview {
    max-width: 1350px;
    margin: 0 auto;
    text-align: center;
}

.distrito-preview .img-somos-distrito {
    width: 100%;
    max-width: 1350px;
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
}

@media (max-width: 768px) {
    .distrito-preview .img-somos-distrito {
        margin: 0 auto 25px auto;
    }

    .parrafo-naranja {
        margin: 20px auto 35px auto;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    /* Celular en horizontal: poca altura, así que basamos el tamaño
       del título en la altura de pantalla (vh) para que nunca se salga
       del ancho disponible. Si no cabe en una línea, se parte en dos
       gracias a white-space: normal */
    .distrito-preview .img-somos-distrito {
        margin: 0 auto 15px auto;
    }

    .parrafo-naranja {
        margin: 15px auto 20px auto;
    }
}

@media (max-width: 420px) {
    .distrito-preview .img-somos-distrito {
        margin: 0 auto 25px auto;
    }
}

.distrito-preview img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Nuestros Espacios: SVG con ojos que siguen el cursor --- */
.nuestros-espacios-wrap {
    position: relative;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding-top: 100px;
}

.nuestros-espacios-svg {
    display: block;
    width: 100%;
    height: auto;
}

.ojo-googly {
    position: absolute;
    width: 9%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: url('imagenes/ojo.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    transition: transform 0.06s linear;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    z-index: 2;
}

.tags-mini {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.tags-mini span {
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.parrafo-naranja {
    color: #ffffff;
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 1200px;
    margin: 75px auto 75px auto;
}

/* --- Imagen grande de industrias + íconos superpuestos --- */
.seccion-industrias {
    background-color: #ffffff;
    padding: 80px 20px;
}

.industrias-wrap {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.industrias-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Contenedor que ubica cada ícono en su hueco y lo centra */
.icono-industria-pos {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.icono-industria {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.icono-industria.tiembla {
    animation: temblar-icono 0.35s ease-in-out infinite;
}

.icono-industria.agita {
    animation: agitar-icono 0.5s ease-in-out;
}

@keyframes temblar-icono {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-1px, 1px) rotate(-3deg); }
    50% { transform: translate(1px, -1px) rotate(3deg); }
    75% { transform: translate(-1px, -1px) rotate(-2deg); }
}

@keyframes agitar-icono {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-4px, 2px) rotate(-8deg); }
    20% { transform: translate(4px, -2px) rotate(8deg); }
    30% { transform: translate(-4px, 2px) rotate(-8deg); }
    40% { transform: translate(4px, -2px) rotate(8deg); }
    50% { transform: translate(-3px, 1px) rotate(-5deg); }
    60% { transform: translate(3px, -1px) rotate(5deg); }
    70% { transform: translate(-2px, 1px) rotate(-3deg); }
    80% { transform: translate(2px, -1px) rotate(3deg); }
    90% { transform: translate(-1px, 0) rotate(-1deg); }
}

/* --- Vista previa: Nuestros Espacios (home) --- */
.espacios-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding-top: 40px;
}

/* Cápsula amarilla de cada espacio */
.espacio-preview-col {
    background-color: #F7F084;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.espacio-preview-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.espacio-preview-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.espacio-preview-titulo {
    font-family: "Lora", serif;
    font-size: 1.9rem;
    font-weight: 700;
    font-style: normal;
    font-synthesis: none; /* evita que el navegador invente una itálica falsa */
    letter-spacing: 0.3px; /* un poco más de kerning */
    color: #000000;
    margin-bottom: 12px;
}

.espacio-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.tag-espacio-preview {
    display: inline-block;
    border: 1.5px solid #000000;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    font-synthesis: none;
    letter-spacing: 0.2px;
    color: #000000;
}

.espacio-preview-col p {
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-weight: 400;
    font-style: normal; /* fuerza texto regular */
    font-synthesis: none; /* evita que el navegador invente una itálica falsa si falta la variante */
    letter-spacing: 0.25px; /* un poco más de kerning para mejorar la lectura */
    font-size: 18px;
    line-height: 18px;
    color: #1a1a1a;
}

/* En teléfono: textos más chicos en "Nuestros Espacios" */
@media (max-width: 768px) {
    .espacio-preview-titulo {
        font-size: 1.3rem;
    }
    .tag-espacio-preview {
        font-size: 0.5rem;
        padding: 3px 10px;
    }
    .espacio-preview-col p {
        font-size: 0.85rem;
    }
}

/* --- Ticker blanco (Agenda Creativa) --- */
.ticker-blanco {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.ticker-blanco .ticker-text span {
    color: #000000;
}

/* --- Agenda Creativa: tarjetas de eventos --- */
.seccion-agenda {
    background-color: #ffffff;
    padding: 0;
}

.agenda-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background-color: #000000;
    padding: 30px 60px;
    width: 100%;
}

.agenda-columna {
    display: flex;
    flex-direction: column;
}

.agenda-foto {
    width: 100%;
    line-height: 0;
}

.agenda-foto img {
    width: 100%;
    height: auto;
    display: block;
}

.card-agenda {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--card-bg);
    color: var(--card-fg);
}

.card-agenda-top {
    display: flex;
    flex-direction: column;
}

.card-agenda .card-agenda-badge {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.card-agenda h3 {
    font-family: "Lora", serif;
    font-size: 3.25rem;
    line-height: 1.05;
    margin: 0;
    color: var(--card-fg);
}

.card-agenda-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.card-agenda-icono {
    height: 34px;
    width: auto;
    margin-bottom: 4px;
    filter: brightness(0) saturate(100%) invert(1) !important;
}

.card-agenda-icono-etiqueta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.card-agenda-icono-etiqueta .card-agenda-icono {
    margin-bottom: 0;
}

.card-agenda-icono-etiqueta span {
    font-size: 0.75rem;
    font-weight: bold;
}

.card-agenda-bottom .card-tags {
    margin-bottom: 0;
}

.card-agenda .fecha-evento {
    font-family: "Lora", serif;
    font-size: 2rem;
    font-weight: bold;
    align-self: flex-end;
    margin-top: 4px;
}

/* Colores específicos de las tarjetas de Agenda Creativa */
.bg-agenda-naranja  { --card-bg: #ff4a17; --card-fg: #ffffff; }
.bg-agenda-amarillo { --card-bg: #d7e04a; --card-fg: #ffffff; }
.bg-agenda-morado   { --card-bg: #a548ff; --card-fg: #ffffff; }
.bg-agenda-azul     { --card-bg: #2952ff; --card-fg: #ffffff; }
.bg-agenda-verde    { --card-bg: #00c389; --card-fg: #ffffff; }
.bg-agenda-navy     { --card-bg: #1c3faa; --card-fg: #ffffff; }
.bg-agenda-celeste  { --card-bg: #2f8fff; --card-fg: #ffffff; }

@media (max-width: 1024px) {
    .agenda-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 30px;
    }
}

@media (max-width: 600px) {
    .agenda-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .distrito-preview img {
        max-width: 90%; /* Un poco más de margen en móviles */
    }
}

/* --- ¿Dónde nos encontramos? (mapa) --- */
.mapa-seccion {
    background-color: #dff255;
    padding: 80px 40px;
}

.mapa-contenedor-final {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.mapa-imagen-completa {
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* Posicionados con las coordenadas exactas de los botones dibujados en el SVG
   (viewBox 1920.59 x 1328.63), convertidas a porcentaje para que escalen igual que la imagen */
.mapa-botones-overlay {
    position: absolute;
    inset: 0;
}

.btn-mapa {
    position: absolute;
    left: 61.57%;
    display: block;
    padding: 0;
    border: none;
    border-radius: 20px;
    text-transform: lowercase;
    text-decoration: none;
    color: transparent;
    font-weight: bold;
    background: transparent;
}

.btn-mapa-google {
    top: 43.31%;
    width: 7.05%;
    height: 2.41%;
}

.btn-mapa-apple {
    top: 46.27%;
    width: 5.99%;
    height: 2.41%;
}

/* En celular, el padding grande dejaba el mapa muy chico: lo reducimos
   para que la imagen aproveche casi todo el ancho de la pantalla */
@media (max-width: 768px) {
    .mapa-seccion {
        padding: 40px 12px;
    }

    .mapa-contenedor-final {
        padding: 0;
    }
}

/* ==========================================
   SECCIÓN: CALENDARIO
   ========================================== */

/* --- Hero --- */
.calendario-hero {
    background-image: url('imagenes/galeria-fondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .calendario-hero {
        aspect-ratio: 21 / 10;
    }
}

.hero-calendario-titulo {
    font-family: "Lora", serif;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--color-naranja);
    -webkit-text-stroke: 2px #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/* --- Intro --- */
.calendario-intro {
    background-color: #ffffff;
    padding: 70px 20px;
    text-align: left;
}

.titulo-calendario-intro {
    font-family: "Lora", serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -1px;
    max-width: 1200px;
    margin: 0 auto;
    color: #000000;
}

/* --- Bloque azul "Convocatorias" --- */
.bloque-azul-full {
    background-color: var(--color-azul);
    width: 100%;
    padding: 70px 20px;
    text-align: center;
}

/* --- Lista de convocatorias --- */
.seccion-convocatorias {
    background-color: #ffffff;
    padding: 60px 50px 20px;
}

.convocatorias-lista {
    max-width: none;
    margin: 0;
}

.convocatoria-item {
    border-bottom: 1px solid #000000;
    padding: 20px 0;
}

.convocatoria-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    cursor: pointer;
}

.convocatoria-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.convocatoria-titulo {
    font-family: "Lora", serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1.05;
    color: #000000;
}

.flecha-convocatoria {
    font-size: 3rem;
    margin-left: 8px;
    align-self: center;
    display: inline-block;
    transform: scaleX(1.6);
    transition: transform 0.3s ease;
}

.convocatoria-item.abierto .flecha-convocatoria {
    transform: scaleX(1.6) rotate(180deg);
}

.resaltado-verde  { color: var(--color-verde); }
.resaltado-naranja{ color: var(--color-naranja); }
.resaltado-morado { color: var(--color-morado); }

.convocatoria-imagen {
    flex-shrink: 0;
    width: 220px;
    object-fit: contain;
}

.convocatoria-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.convocatoria-item.abierto .convocatoria-contenido {
    max-height: 600px;
    margin-top: 10px;
}

.convocatoria-descripcion {
    font-size: 2.2rem;
    line-height: 1.5;
    max-width: 1300px;
    color: #000000;
    margin-bottom: 20px;
}

.btn-conoce-mas {
    display: inline-block;
    background-color: var(--color-naranja);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 22px;
    border-radius: 20px;
    font-size: 1.8rem;
    font-weight: bold;
}

.btn-conoce-mas:hover {
    background-color: var(--color-rojo-naranja);
}

@media (max-width: 600px) {
    .convocatoria-header {
        flex-direction: column;
    }
    .convocatoria-imagen {
        width: 90px;
    }
}

/* ==========================================
   PIE DE PÁGINA (Footer Oscuro)
   ========================================== */
.footer-oscuro {
    background-color: var(--color-negro);
    color: white;
    padding: 80px 15px 40px;
}

.footer-oscuro .container {
    max-width: 1600px;
    padding-left: 0;
    padding-right: 0;
}

.footer-oscuro p, .footer-oscuro a {
    font-size: 1.2rem;
    color: white;
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
}

/* --- Título Central y Llamado a la acción --- */
.footer-cta {
    text-align: center;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 10;
}

.link-proyecto {
    font-size: 1.5rem !important;
    text-decoration: underline;
}

.separador-diagonales {
    font-size: 1.5rem;
    letter-spacing: 3px;
    font-weight: bold;
}

/* Contenedor del logotipo "Contáctanos" (ahora es una imagen SVG) */
.texto-contactanos {
    margin: 0;
    line-height: 1;
    display: flex;
    justify-content: center;
}

.texto-contactanos-img {
    width: clamp(220px, 55vw, 850px);
    height: auto;
    display: block;
}

/* --- Columnas de Información --- */
.footer-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 40px;
}

.info-izquierda {
    flex: 0 0 72%;
    min-width: 300px;
}

.info-derecha {
    flex: 0 0 23%;
    min-width: 220px;
}

.etiqueta-dato {
    color: #cccccc !important;
    margin-bottom: 2px;
}

.info-izquierda p, .info-derecha p {
    overflow-wrap: break-word;
    word-break: break-word;
}

.mt-20 {
    margin-top: 8px;
}

.links-navegacion {
    margin-top: 35px;
    line-height: 1.8;
}

.links-navegacion a {
    position: relative;
    z-index: 50; 
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.links-navegacion a, .footer-legales a {
    text-decoration: none;
}

/* Efecto hover interactivo */
.links-navegacion a:hover, .footer-legales a:hover, .link-proyecto:hover {
    color: var(--color-lima) !important;
}

/* --- Línea Divisoria Lima --- */
.linea-lima {
    border: none;
    border-top: 1px solid var(--color-lima);
    margin-bottom: 30px;
}

/* --- Enlaces de Transparencia --- */
.footer-legales {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 20px;
}

/* --- Logos y Copyright --- */
.footer-logos {
    display: flex;
    justify-content: space-between;
    align-items: center; /* antes: flex-end */
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

/* Controla el tamaño general de los logos del footer en escritorio */
.logo-footer {
    max-height: 55px; 
    width: auto; 
    object-fit: contain;
}

.logos-der .logo-footer {
    max-height: 90px; 
}

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

.footer-copyright p {
    color: var(--color-lima) !important;
    font-size: 0.9rem;
}

/* ==========================================
   BLOQUE LIMA (indie100)
   ========================================== */
.bloque-indie-full {
    background-color: var(--color-lima); 
    width: 100%;
    padding: 200px 20px 80px;
}

.titulo-gigante-negro {
    color: black;
    font-family: "Lora", serif; 
    font-size: clamp(4.5rem, 12vw, 10.5rem);
    font-weight: 700;
    line-height: 0.78;
    letter-spacing: -4px;
    margin: 0;
    max-width: 1200px;
}

/* ==========================================
   VARIANTES DE COLOR PARA TARJETAS (indie 100)
   ========================================== */
/* Cambia el fondo de la cabecera a verde oliva */
.header-oliva {
    background-color: #8c9933 !important; 
}

.etiquetas-oliva span {
    border-color: #8c9933 !important;
    color: #8c9933 !important;
}

/* ==========================================
   BLOQUE AZUL (más espacios)
   ========================================== */
.bloque-azul-full {
    background-color: #3b82f6; 
    width: 100%;
    padding: 130px 20px 30px;
}

.bloque-azul-espacios {
    text-align: left;
    padding: 200px 20px 80px;
}

.titulo-mas-espacios {
    font-size: clamp(4.5rem, 12vw, 10.5rem);
    line-height: 0.78;
    letter-spacing: -4px;
}

/* ==========================================
   VARIANTES DE COLOR PARA TARJETAS (más espacios)
   ========================================== */
/* Fondo azul más oscuro para la barra del título */
.header-azul {
    background-color: #0066cc !important; 
}

/* Borde y texto azul claro para las "píldoras" técnicas */
.etiquetas-azul span {
    border-color: #4b88cf !important;
    color: #4b88cf !important;
}

/* ==========================================
   PÁGINA DE CONTACTO
   ========================================== */
.fondo-oscuro {
    background-color: var(--color-negro); 
    color: white;
}

.contacto-main {
    position: relative;
    padding: 140px 20px 100px;
    overflow-x: hidden;
}

@media (max-width: 900px) and (max-height: 500px) {
    /* Móvil en horizontal: la pantalla es muy baja, reducimos el padding
       para que el formulario completo se vea sin recortes */
    .contacto-main {
        padding: 90px 20px 40px;
    }
}

/* Efecto de texto gigante de fondo */
.contacto-fondo-texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
}

.contenedor-formulario {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.titulo-contacto {
    font-family: "Lora", serif;
    font-size: clamp(3rem, 6vw, 5rem);
    color: var(--color-lima); /* Verde lima */
    margin-bottom: 50px;
    text-align: left;
}

/* --- Estructura del Formulario --- */
.formulario-ccd {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.campo-form {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
}

.campo-completo {
    flex: 100%;
}

.campo-form label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #cccccc;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Estilos de las cajas de texto --- */
.campo-form input,
.campo-form textarea {
    position: relative; 
    z-index: 99;
    pointer-events: auto; 
    
    background: transparent;
    border: none;
    border-bottom: 2px solid #555;
    color: white;
    font-size: 1rem;
    padding: 10px 0;
    font-family: Arial, sans-serif;
    transition: border-color 0.3s;
    resize: none; 
}

/* Efecto al seleccionar un campo */
.campo-form input:focus,
.campo-form textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--color-lima); /* La línea se vuelve lima al escribir */
}

/* Botón de enviar */
.btn-enviar {
    position: relative !important; 
    z-index: 99999 !important;     
    pointer-events: auto !important; 

    background-color: var(--color-lima);
    color: black;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-enviar:hover {
    background-color: #b3e600;
}

/* ==========================================
   BARRA ANIMADA DE CONTACTO (Verde Lima)
   ========================================== */
.ticker-contacto {
    background-color: var(--color-lima); /* El verde lima característico */
    color: black;
    overflow: hidden; 
    white-space: nowrap; 
    padding: 12px 0;
    font-size: 1.25rem;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.ticker-text-contacto {
    display: inline-block;
    white-space: nowrap;
    /* Reutilizamos la misma animación que ya creaste para el index */
    animation: mover-izquierda-derecha 20s linear infinite; 
}

/* Espacio entre cada palabra "CONTÁCTANOS" */
.ticker-text-contacto span {
    margin-right: 60px; 
}


/* ==========================================
   PÁGINA: DISTRITO CREATIVO
   ========================================== */

/* --- Cabecera Hero --- */
.distrito-hero {

    background-image: url('imagenes/distrito.png'); 
    
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .distrito-hero {
        aspect-ratio: 21 / 10;
    }
}

.ticker-naranja {
    background-color: var(--color-rojo-naranja) !important; 
}

/* Ticker verde oliva (usado en Espacios) */
.ticker-oliva {
    background-color: #59964e !important;
}

/* Ticker amarillo (usado debajo del resumen de Torres) */
.ticker-amarillo {
    background-color: #cfff05 !important;
    color: #050505 !important;
}

/* --- Tira de fotos del Distrito (debajo del ticker amarillo) --- */
.tira-fotos-distrito {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ahora solo 2 fotos: Mento y Pablo Lemus */
    width: 100%;
    background-color: #ffffff;
}

.foto-distrito-item {
    width: 100%;
    min-width: 0; /* evita que la imagen fuerce el ancho de la celda del grid y se desborde */
    aspect-ratio: 16 / 9; /* antes 3/4 (vertical): con solo 2 columnas anchas se veía enorme de alto */
    max-height: 70vh; /* tope de seguridad en pantallas muy anchas */
    overflow: hidden;
}

.foto-distrito-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .tira-fotos-distrito {
        grid-template-columns: repeat(2, 1fr);
    }
}


.titulo-distrito {
    font-family: "Lora", serif;
    font-size: clamp(4rem, 8vw, 7rem);
    color: white;
    line-height: 1;
    margin-bottom: 20px;
}

.subtitulo-distrito {
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: white;
    max-width: 800px;
    line-height: 1.4;
    font-family: "Lora", serif;
}

/* ==========================================
   SECCIÓN: DIRECTORIO (NUEVO DISEÑO)
   ========================================== */

/* Fondo negro general */
.seccion-directorio {
    background-color: var(--color-negro); 
    padding: 60px 4px 100px;
    color: white;
}

/* El texto que va sobre las tarjetas */
.texto-directorio-intro {
    font-family: "Lora", serif;
    font-size: clamp(2rem, 5vw, 4rem);
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.imagen-directorio-intro {
    display: block;
    max-width: 1400px;
    width: 100%;
    height: auto;
    margin: 0 auto 60px;
}

.texto-naranja { 
    color: var(--color-rojo-naranja); 
}

.seccion-directorio .container {
    max-width: none; 
    width: 100%;
    padding: 0 30px;
}

/* --- El Grid Estilo Masonry --- */
.grid-marcas {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; 
    margin-bottom: 80px;
}

/* --- Las Tarjetas --- */
.card-directorio {
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 210px; 
}

/* Modificador para tarjetas dobles (como Amber) */
.card-ancha {
    grid-column: span 2; 
    flex-direction: row; 
}

/* Las imágenes dentro de las tarjetas */
.img-card {
    display: block; 
    width: calc(100% - 32px);
    height: 255px; 
    object-fit: cover;
    margin: 16px auto 0 auto;
    border-radius: 12px;
}

/* Si la tarjeta es ancha, la imagen se pone de lado */
.card-ancha .img-card {
    width: calc(50% - 24px); 
    height: calc(100% - 32px); 
    margin: 16px;
}

/* --- Contenido Interno (Textos y Botones) --- */
.card-info {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1; 
}

.card-info h3 {
    font-family: "Lora", serif;
    font-size: 1.3rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Títulos más grandes y gruesos, a partir de la tarjeta "Agencia de Conectividad y Acceso a Internet" */
.bg-mauve h3,
.bg-azul h3,
.bg-naranja-vibrante h3,
.bg-beige h3,
.bg-gris-azulado h3,
.bg-rojo-ool h3,
.titulo-fuerte h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

/* El espaciador empuja las etiquetas y el botón juntos hasta abajo de la tarjeta */
.espaciador {
    flex-grow: 1; 
}

/* Las "píldoras" de torre y giro */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.tag-outline {
    border: 1px solid;
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 1.0rem;
}

/* Botón sólido "conoce más" */
.btn-conoce {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
    align-self: flex-start; 
    margin-top: auto;
}

/* Solo el botón de la tarjeta Universidad Tecnológica de Jalisco */
.bg-verde .btn-conoce {
    background-color: #000000;
    color: #ffffff;
}

/* ==========================================
   COLORES DE TARJETAS (Agrega los que necesites)
   Cada .bg-* solo define dos variables (fondo y
   texto/contraste); .card-directorio hereda el patrón
   para el borde de tag-outline y el botón btn-conoce.
   ========================================== */
.card-directorio .tag-outline { border-color: var(--card-fg); color: var(--card-fg); }
.card-directorio .btn-conoce { background-color: var(--card-fg); color: var(--card-bg); }

.bg-blanco          { --card-bg: #ffffff; --card-fg: #000000; }
.bg-morado          { --card-bg: #7b52d9; --card-fg: #ffffff; }
.bg-mauve           { --card-bg: #c387ba; --card-fg: #000000; }
.bg-naranja         { --card-bg: #e45b3a; --card-fg: #ffffff; }
.bg-amarillo        { --card-bg: #f4d054; --card-fg: #000000; }
.bg-azul            { --card-bg: #00a8ff; --card-fg: #000000; }
.bg-rojo            { --card-bg: #ff0000; --card-fg: #ffffff; }
.bg-rojo-ool        { --card-bg: #ff0000; --card-fg: #000000; }
.bg-azul-oscuro     { --card-bg: #4b36cc; --card-fg: #ffffff; }
.bg-vino            { --card-bg: #8c1e48; --card-fg: #ffffff; }
.bg-verde           { --card-bg: var(--color-verde); --card-fg: #ffffff; }
.bg-naranja-vibrante{ --card-bg: #ff6e36; --card-fg: #000000; }
.bg-beige           { --card-bg: #dcb88f; --card-fg: #000000; }
.bg-gris-azulado    { --card-bg: #b0c4cf; --card-fg: #000000; }
.bg-verde-pixel     { --card-bg: #48c730; --card-fg: #ffffff; }
.bg-naranja-equipo  { --card-bg: #fd4717; --card-fg: #ffffff; }
.bg-lima-oliva      { --card-bg: #b1d302; --card-fg: #000000; }
.bg-verde-equipo    { --card-bg: #59974e; --card-fg: #ffffff; }
.bg-carbon          { --card-bg: #242424; --card-fg: #ffffff; }
.bg-coral           { --card-bg: #fd4b59; --card-fg: #ffffff; }

.bg-blanco, .bg-morado, .bg-mauve, .bg-naranja, .bg-amarillo, .bg-azul, .bg-rojo, .bg-rojo-ool,
.bg-azul-oscuro, .bg-vino, .bg-verde, .bg-naranja-vibrante, .bg-beige,
.bg-gris-azulado, .bg-verde-pixel, .bg-naranja-equipo, .bg-lima-oliva,
.bg-verde-equipo, .bg-carbon, .bg-coral {
    background-color: var(--card-bg);
    color: var(--card-fg);
}

/* --- Lista inferior de Edificios --- */
.grid-edificios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    border-top: 1px solid #ddd; 
    padding-top: 40px;
}

.col-edificio h4 {
    font-family: "Lora", serif;
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #000;
}

.col-edificio p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* --- Sección Edificios --- */
.seccion-edificios {
    background-color: #ffffff;
    padding: 0px 80px 70px 80px; 
    border-bottom: 4px solid #eeeeee; 
}

.container-edificios {
    max-width: none;
    margin: 0 auto;
}

.lista-edificios {
    display: flex;
    justify-content: space-between;
    gap: 100px; 
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: "Garet", Arial, sans-serif;
    letter-spacing: -1px;
}

.lista-edificios li {
    flex: 1;
    color: #050505;
    line-height: 18px;
    font-size: 20px;
}

.columna-indie100 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.columna-indie100 p {
    margin: 0;
}

.btn-ciudad-creativa {
    align-self: flex-start;
    font-family: "Libre Baskerville", serif;
    font-size: 0.85rem;
    letter-spacing: -0.5px;
    padding: 6px 18px;
    margin-top: 14px;
}

/* Las etiquetas ahora son elementos en línea para no romper el texto */
.etiqueta-roja, .etiqueta-verde, .etiqueta-naranja, .etiqueta-amarilla, .etiqueta-azul {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 5px;
}

/* Mantenemos los colores (valores exactos del PDF de marca) */
.etiqueta-roja { background-color: #fd4716; color: white; }       /* Torre A */
.etiqueta-azul { background-color: #0076e5; color: white; }       /* Torre B */
.etiqueta-verde { background-color: #ffff00; color: black; }      /* Torre C */
.etiqueta-naranja { background-color: #cfff06; color: black; }    /* Casa Baeza */
.etiqueta-amarilla { background-color: #ff0013; color: white; }   /* Indie 100 */

/* --- Versión invertida de la sección Edificios (solo distrito.html) --- */
body.fondo-oscuro .seccion-edificios {
    background-color: var(--color-negro);
    border-bottom: 4px solid #1d1d1d;
}

body.fondo-oscuro .lista-edificios li {
    color: #ffffff;
}

/* Aseguramos horizontalidad en móviles también */
@media (max-width: 800px) {
    .grid-edificios {
        grid-template-columns: 1fr;
    }
}

/* En pantallas angostas, cada torre ocupa su propio renglón
   en vez de ir en 3 columnas apretadas */
@media (max-width: 800px) {
    .lista-edificios {
        flex-direction: column;
        gap: 0;
    }
    .lista-edificios li {
        padding: 18px 0;
        border-top: 1px solid #eeeeee;
        font-size: 1rem;
    }
    .lista-edificios li:last-child {
        border-bottom: 1px solid #eeeeee;
    }
}

/* ==========================================
   PÁGINA: DIRECTORIO / NUESTRO EQUIPO
   ========================================== */

/* --- Hero --- */
.equipo-hero {
    background-image: url('imagenes/Nuestro\ equipo\ portada.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 769px) {
    .equipo-hero {
        aspect-ratio: 21 / 10;
    }
}

/* --- Intro con palabras de color --- */
.seccion-equipo-intro {
    background-color: #ffffff;
    padding: 60px 20px;
}

.texto-equipo-intro {
    font-family: "Lora", serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.35;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    color: #050505;
}

.imagen-equipo-intro {
    display: block;
    max-width: 1400px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --- Imagen completa del equipo (Agencia + Fideicomiso) --- */
.seccion-equipo-completa {
    width: 100%;
}

.imagen-equipo-completo {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Franjas de organización --- */
.barra-equipo {
    text-align: center;
    color: #ffffff;
    font-family: "Neue Haas Grotesk Display Pro", Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing: -0.5px;
    padding: 8px 20px;
}

.barra-equipo-morada { background-color: #9e45f9; }
.barra-equipo-naranja { background-color: #ff7924; }

/* --- Ajustes móviles: ticker animado y barras de equipo --- */
@media (max-width: 768px) {
    .ticker-banner {
        font-size: 16px;
    }
    .barra-equipo {
        font-size: clamp(1.12rem, 2.4vw, 1.76rem);
    }

    /* Ajustes de las Tarjetas de Espacios: solo se apilan en celular real,
       no en laptop/tablet (antes se apilaban desde 1024px) */
    .tarjeta-body {
        flex-direction: column;
    }

    .tarjeta-imagen {
        flex: 0 0 auto;
        min-height: 160px;
        align-self: stretch;
    }

    .tarjeta-contenido {
        position: static;
        width: auto;
        overflow: visible;
        padding: 20px;
        container-type: inline-size;
    }

    .btn-reservar {
        align-self: center;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .tarjeta-contenido p {
        text-align: left !important;
        line-height: 1.4;
    }
}

/* --- Grid de integrantes --- */
.equipo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #e8e8e8;
}

.equipo-miembro {
    display: flex;
    min-height: 260px;
}

.equipo-foto {
    flex: 1;
    overflow: hidden;
}

.equipo-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipo-datos {
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.equipo-datos h3 {
    font-family: "Lora", serif;
    font-size: 1.75rem;
    font-weight: normal;
    margin-bottom: 8px;
    color: inherit;
}

.equipo-puesto {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.equipo-organizacion {
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.85;
}

.equipo-datos hr {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.4;
    margin: 12px 0;
}

.equipo-correo {
    font-size: 0.8rem;
    font-style: italic;
    color: inherit;
    text-decoration: none;
    word-break: break-word;
}

.equipo-correo:hover {
    text-decoration: underline;
}

/* --- Grid de tarjetas de contacto (imágenes completas) --- */
.equipo-grid-contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    background-color: #e8e8e8;
}

.equipo-tarjeta {
    display: block;
    line-height: 0;
}

.equipo-tarjeta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .equipo-grid-contacto {
        grid-template-columns: 1fr;
    }
}

/* --- Foto grupal --- */
.seccion-equipo-grupal {
    background-color: var(--color-negro);
    padding: 80px 20px 40px;
    text-align: center;
}

.marco-foto-grupal {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #e8e8e8;
    padding: 35px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.marco-foto-grupal img {
    width: 100%;
    display: block;
}

/* --- Agradecimiento --- */
.seccion-equipo-gracias {
    background-color: var(--color-negro);
    padding: 40px 20px 90px;
    text-align: center;
}

.texto-equipo-gracias {
    font-family: "Lora", serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.3;
    color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
}

.imagen-equipo-gracias {
    display: block;
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* --- Responsivo --- */
@media (max-width: 1024px) {
    .equipo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .equipo-miembro {
        flex-direction: column;
        min-height: auto;
    }
    .equipo-foto {
        aspect-ratio: 1 / 1;
    }
    .equipo-foto img {
        height: 100%;
        object-fit: contain;
    }
    .equipo-datos {
        padding: 18px;
    }
    .equipo-datos h3 {
        font-size: 1.15rem;
    }
    .equipo-puesto {
        font-size: 0.9rem;
    }
    .equipo-organizacion,
    .equipo-correo {
        font-size: 0.78rem;
    }
}

@media (max-width: 620px) {
    .equipo-grid {
        grid-template-columns: 1fr;
    }
    .equipo-foto {
        aspect-ratio: auto;
    }
    .equipo-foto img {
        height: auto;
    }
    .equipo-datos h3 {
        font-size: 1.4rem;
    }
    .equipo-puesto {
        font-size: 1rem;
    }
    .equipo-organizacion,
    .equipo-correo {
        font-size: 0.8rem;
    }
}

/* ==========================================
   MODO CELULAR (Diseño Responsivo)
   ========================================== */
@media (max-width: 1024px) {
    
    /* 1. Ajustes de la Cabecera (Menú Lateral) */
    header {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }
    .img-registro-grande {
        max-width: 80% !important; /* Forzamos que en celular no pase del 80% del ancho */
        margin: 0 auto;
        display: block;
    }

    .img-registro-grande, .acordeon, .texto-justificado-centrado {
        max-width: 100%; /* Asegura que no se salgan del contenedor */
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .texto-justificado-centrado {
        text-align: center;    /* En pantallas muy pequeñas, a veces se prefiere centrado simple */
    }
    /* ==========================================
    BOTÓN HAMBURGUESA (General)
    ========================================== */
    .btn-hamburguesa {
        display: flex !important;
        background: none;
        border: none;
        cursor: pointer;
        width: 35px;
        height: 25px;
        flex-direction: column;
        justify-content: space-between;
        position: relative; 
        z-index: 10000; 
    }

    /* Las 3 rayitas (blancas para que contrasten con el fondo oscuro) */
    .btn-hamburguesa span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: white; 
        border-radius: 3px;
        transition: 0.3s;
    }

    /* --- Logos del Header en Celular --- */
    .logo-header-container {
        gap: 10px; 
    }

    .logo-header {
        max-height: 35px !important; 
    }

    #menu-principal {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 70%; 
        max-width: 300px;
        height: 100vh; 
        background-color: var(--color-negro); 
        padding: 80px 30px;
        transition: 0.4s ease-in-out; 
        z-index: 999;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5); 
    }

    #menu-principal.menu-abierto {
        right: 0; 
    }

    nav ul {
        flex-direction: column; 
        align-items: flex-start;
        gap: 30px;
    }

    nav ul li a {
        font-size: 1.2rem;
        color: white;
    }

    /* Quita el punto de la lista sin romper el layout del menú */
nav ul li {
    list-style: none !important;
    list-style-type: none !important;
}

    /* Ajustes de los bloques de color gigantes */
    .bloque-naranja-full,
    .bloque-indie-full,
    .bloque-azul-full {
        padding: 70px 20px 30px; 
    }

    .bloque-indie-full,
    .bloque-azul-espacios {
        padding: 100px 20px 40px;
    }

    /* Ajustes del Pie de Página (Footer) */
    .footer-oscuro {
        padding: 60px 20px 30px;
    }

    .footer-oscuro p, .footer-oscuro a {
        font-size: 1rem;
    }
    
    .footer-cta {
        margin-bottom: 50px;
    }

    .info-izquierda, 
    .info-derecha {
        min-width: 100%; 
    }

    /* --- Ajustes de logos para celular --- */
    
    /* Achicamos los logos generales */
    .logo-footer {
        max-height: 42px !important; 
    }

    /* Achicamos el de Jalisco proporcionalmente */
    .logos-der .logo-footer {
        max-height: 50px !important; 
    }

    /* Acomodamos los dos logos de la izquierda ordenadamente uno sobre otro */
    .logos-izq {
        justify-content: center;
        flex-direction: column;
        gap: 25px; 
    }

    /* 5. Ajuste de textos gigantes para móvil */
    .titulo-gigante,
    .titulo-gigante-negro {
        font-size: clamp(2.5rem, 8vw, 4rem); 
        letter-spacing: -1px; 
    }

    .titulo-gigante-negro,
    .titulo-mas-espacios {
        font-size: clamp(3rem, 11vw, 4.5rem);
        letter-spacing: -2px;
    }

    .link-proyecto {
        font-size: 1.2rem !important;
    }

    .tarjeta-header h3 {
        font-size: 1.5rem;
    }

    /* En celular, las tarjetas anchas se vuelven normales */
    .card-ancha {
        grid-column: span 1;
        flex-direction: column;
    }
    .card-ancha .img-card {
        width: calc(100% - 32px); /* deja espacio para el margen de 16px por lado y evita el desbordamiento */
        height: 200px;
        margin: 16px auto 0 auto;
    }

    .grid-marcas {
        grid-template-columns: repeat(2, 1fr);
    }

    .registro-blanco {
        padding: 40px 10px;
    }
}

@media (max-width: 620px) {
    .grid-marcas {
        grid-template-columns: 1fr;
    }
}