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

body {
  font-family: "Bitcount Grid Single", monospace;
  background-color: #202020;
  color: #FF7B00; /* Naranja principal para el texto base */
  overflow-x: hidden;
  line-height: 1.6;
  text-transform: uppercase;
}

/* ======================================================= */
/* JERARQUÍA TIPOGRÁFICA Y ESCALAS                        */
/* ======================================================= */

/* TÍTULO PRINCIPAL */
h1 {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-family: "Bitcount Grid Single", sans-serif;
  font-weight: 900;
  color: #FF7B00; /* Naranja LED */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 10px rgba(255, 123, 0, 0.7),
    0 0 25px rgba(255, 60, 0, 0.4);
}

/* SECCIONES PRINCIPALES (como “Proyectos”, “Contacto”) */
h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 1.4rem;
  font-family: "Bitcount Grid Single", sans-serif;
  text-transform: uppercase;
  text-align: center;
}

/* SUBTÍTULOS o títulos dentro de secciones */
h3 {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 300;
  margin-bottom: 1rem;
  font-family: "Bitcount Grid Single", sans-serif;
  text-transform: uppercase;
}

/* PÁRRAFOS: Se usa Bitcount */
p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  color: #DAA520; 
  font-weight: 300;
  max-width: 70ch;
  margin-bottom: 1rem;
  font-family: "Bitcount Grid Single", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* LOGO TEXTO */
.logo {
  color: #DAA520; 
  letter-spacing: 0.05em;
}

/* LOGO IMAGEN EN EL TOP BAR */
.logo {
    height: 4rem;
    width: auto;
    margin-left: 2rem;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease; 
}

/* CAMBIO 2: Aplicar el filtro naranja brillante al pasar el ratón sobre el link que envuelve al logo (unificado para CV y Home) */
.top-header a:hover .logo {
    transform: scale(1.05); /* Escala ligeramente menor que las redes sociales para que no sea tan brusco */
    filter: invert(50%) sepia(100%) saturate(2000%) hue-rotate(330deg) brightness(100%) contrast(100%);
}

/* LOGO IMAGEN PRINCIPAL (LUZAMORA) */
.logo-main-image {
    display: block;
    margin: 2rem auto;
    width: clamp(200px, 60vw, 450px);
    height: auto;
}

/* INTRO */
.intro-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #202020;
    transition: opacity 1s ease; 
}

.fade-out {
    opacity: 0;
}

.encendido {
    font-size: 3rem;
    color: #FF7B00; 
    font-weight: 900;
}

/* FADE-IN */
.fade-in {
    animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* HERO */
.hero {
    padding: 1rem;
    text-align: center;
    position: relative;
    margin-top: 2rem;
}

/* Ajuste específico para el logo de Chiskey en el top header */

/* MENU FIJO DEBAJO DEL TITULO */
.menu-debajo {
    position: sticky;
    top: 0;
    background-color: #202020;
    padding: 1rem 0;
    z-index: 100;
    display: flex;
    justify-content: center;
}

.menu-debajo ul {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-debajo a {
    font-family: "Bitcount Grid Single", sans-serif;
    font-style: normal;
    color: #FF7B00; 
    font-size: 1.3rem;
    font-weight: 200;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease;
}

/* Efecto de “encendido” al pasar el cursor */
.menu-debajo a:hover {
    color: #FF7B00; 
    text-shadow:
        0 0 6px rgba(255, 123, 0, 0.8),
        0 0 12px rgba(255, 123, 0, 0.6),
        0 0 24px rgba(255, 60, 0, 0.4);
    transform: scale(1.05);
}

@keyframes flicker-on {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.7;
  }
}

.menu-debajo a:hover {
    animation: flicker-on 1.2s ease-in-out;
}


/* REDES SOCIALES (arriba derecha) */
.redes-sociales {
    position: absolute;
    top: 2rem;
    right: 3.7rem;
    display: flex;
    gap: 1.2rem;
    z-index: 1000;
}

.redes-sociales img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease, filter 0.3s ease; 
}

.redes-sociales a:hover img {
  transform: scale(1.2);
  /* Nuevo filtro para un naranja brillante */
  filter: invert(50%) sepia(100%) saturate(2000%) hue-rotate(330deg) brightness(100%) contrast(100%); 
}


/* TÍTULO PRINCIPAL (h1 ya no se usa para el logo) */
.hero h1 {
    margin-top: 2rem;
    font-size: clamp(2.5rem, 10vw, 6rem);
    font-weight: 900;
}

/* BANNER VIDEO */
.video-separador {
    position: relative;
    width: 100%;
    height: 45vh;
    overflow: hidden;
}

.video-separador video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SECCIONES GENERALES */
section {
    padding: 1rem 5vw;
    width: 100%;
    margin: 0 auto;
}

/* BOTÓN “VER MÁS” */
.btn-ver-mas {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.4rem;
    background-color: #FF7B00; 
    color: #202020;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow:
        0 0 5px rgba(255, 123, 0, 0.4),
        0 0 10px rgba(255, 123, 0, 0.3);
    font-size: 1rem;
    font-family: "Bitcount Grid Single", "sans-serif"; 
    text-transform: uppercase;
}

/* Efecto de “encendido” al pasar */
.btn-ver-mas:hover {
    background-color: #FF7B00; 
    color: #202020;
    transform: translateY(-2px);
    box-shadow:
        0 0 10px rgba(255, 123, 0, 0.8),
        0 0 20px rgba(255, 123, 0, 0.6),
        0 0 40px rgba(255, 60, 0, 0.4);
    animation: glowPulseOrange 1.5s infinite alternate ease-in-out;
}

/* BOTÓN DE DESCARGA DE CV (Ajustes para nueva posición en columna derecha) */
.btn-download-cv {
    /* Overriding to match .btn-ver-mas orange style */
    display: inline-block; 
    padding: 0.6rem 1.4rem;
    background-color: #FF7B00; 
    color: #202020;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(255, 123, 0, 0.4), 0 0 10px rgba(255, 123, 0, 0.3);
    font-size: 1rem;
    font-family: "Bitcount Grid Single", "sans-serif"; 
    text-transform: uppercase;
    margin: 0; /* Reiniciar márgenes */
}

/* ======================================= */
/* CONTACTO LAYOUT (2 COLUMNAS) */
/* ======================================= */

.contact-grid-container {
    display: grid;
    /* Define dos columnas de igual ancho (1fr 1fr) */
    grid-template-columns: 1fr 1fr; 
    gap: 5vw; /* Espacio entre columnas */
    padding: 4rem 5vw;
    max-width: 1400px;
    margin: 0 auto;
}

/* Nuevo estilo para centrar el texto en las columnas de contacto */
.centered-text-columns .contact-column {
    text-align: center;
}
/* Asegura que el párrafo general también se centre si es necesario (el p ya tiene max-width) */
.centered-text-columns .contact-column p {
    margin-left: auto;
    margin-right: auto;
}
.contact-column .contact-logo {
    display: block;
    margin: 0 auto 1.5rem auto; /* Centrar el logo y darle margen inferior */
    height: 3rem; /* Altura de referencia */
}

.contact-column .luzamora-logo {
    width: clamp(120px, 30vw, 250px); /* El logo de Luzamora es más grande y horizontal */
    height: auto; /* Mantener proporción */
    margin-bottom: 2.4rem;
    margin-top: 0.8rem;
}

/* Ajustes para el logo de Chiskey: Control de la altura (más cuadrado) */
.contact-column .chiskey-logo {
    height: 4.5rem; /* Altura fija para la alineación y la no-deformación */
    width: auto; 
    filter: none; 
}


/* Center contact info block content if the column is centered */
.centered-text-columns .contact-info-block h3 {
    text-align: center;
}
.centered-text-columns .contact-info-block p {
    /* Forcing links/text to center */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.contact-column {
    /* Fondo oscuro sutil */
    background-color: #202020; 
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 123, 0, 0.2); /* Sombra LED */
}

.contact-column h2 {
    color: #DAA520;
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.contact-column p {
    font-size: 0.95rem;
    color: #FF7B00;
    line-height: 1.5;
    text-shadow: 0 0 1px rgba(255, 123, 0, 0.2);
    max-width: none;
}

.contact-column a {
    color: #DAA520;
    text-decoration: underline;
    transition: color 0.3s;
}

.contact-column a:hover {
    color: #DAA520;
}

.role-luzamora, .role-chiskey {
    color: #DAA520;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.contact-info-block {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 123, 0, 0.3);
}

.contact-info-block h3 {
    color: #FF7B00;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 3px rgba(255, 123, 0, 0.5);
}

/* ======================================= */
/* LAYOUT IA QUEER (MOCKUP ALARGADO HORIZONTAL) */
/* ======================================= */

@media (min-width: 901px) {
    .ia-queer-layout {
        grid-template-columns: repeat(3, 1fr); 
        /* Cambiamos a 'auto' para que la altura de la fila se ajuste al contenido (el Mockup) */
        grid-auto-rows: auto; 
    }

    /* FILA 1: Text (1/3) y Mockup (2/3 - ALARGADO) */
    
    /* ITEM-TEXT: (1/3) */
    .ia-queer-layout .item-text { 
        grid-area: 1 / 1 / 2 / 2; /* Fila 1, Columna 1 */
        /* Damos una altura mínima para que el texto no se comprima demasiado */
        min-height: 250px; 
    }
    
    /* ITEM 2: MOCKUP PRINCIPAL (2/3 - HORIZONTAL SPAN) */
    .ia-queer-layout .item-2 { 
        grid-area: 1 / 2 / 2 / 4; /* Ocupa 2 columnas */
        /* PROPIEDAD CLAVE: Hace que el contenedor sea muy horizontal (como el de Mòdul) */
        aspect-ratio: 3.5 / 1.32; 
    } 

    /* FILA 2: Video (1/3), Imagen 1 (1/3), Imagen 2 (1/3) */
    /* La segunda fila se inicia justo debajo de la primera, tomando el 1/3 más alto */
    
    /* ITEM 3: VIDEO LOOP (1/3) */
    .ia-queer-layout .item-3 { 
        grid-area: 2 / 1 / 3 / 2; /* Fila 2, Columna 1 */
    } 
    
    /* ITEM 4: IMAGEN 1 (1/3) */
    .ia-queer-layout .item-4 { 
        grid-area: 2 / 2 / 3 / 3; /* Fila 2, Columna 2 */
    } 

    /* ITEM 5: IMAGEN 2 (1/3) */
    .ia-queer-layout .item-5 { 
        grid-area: 2 / 3 / 3 / 4; /* Fila 2, Columna 3 */
    } 
    
    /* Estilos para el contenido visual */
    .ia-queer-layout .grid-image img,
    .ia-queer-layout .grid-video video {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ======================================= */
/* LAYOUT SOCIAL MEDIA MANAGER (3X3 LLENO - AJUSTE DE ALTURA) */
/* ======================================= */

@media (min-width: 901px) {
    .sm-layout {
        grid-template-columns: repeat(3, 1fr); 
        /* Reducimos la altura mínima de las filas a 150px y usamos 3 filas fijas */
        grid-auto-rows: minmax(150px, 1fr); 
    }

    /* FILA 1 (Texto, Img 1, Img 2) */
    
    /* ITEM 1: TEXTO (1x1) */
    .sm-layout .item-text { 
        grid-area: 1 / 1 / 2 / 2; 
        min-height: auto; 
    }
    
    /* ITEM 4: IMAGEN 1 (1x1) */
    .sm-layout .item-4 { 
        grid-area: 1 / 2 / 2 / 3; 
    } 

    /* ITEM 5: IMAGEN 2 (1x1) */
    .sm-layout .item-5 { 
        grid-area: 1 / 3 / 2 / 4; 
    } 

    /* FILA 2 & 3: Video, Mockup (1x2) y Imágenes restantes */

    /* ITEM 2: VIDEO VERTICAL (1x2 Span) - NOTA: Termina en la línea 3, NO en la 4. */
    .sm-layout .item-2 { 
        grid-area: 2 / 1 / 4 / 2; /* Comienza Fila 2, Termina Fila 4 (Ocupa 2 filas) */
    } 

    /* ITEM 3: MOCKUP INSTAGRAM VERTICAL (1x2 Span) */
    .sm-layout .item-3 { 
        grid-area: 2 / 2 / 4 / 3; /* Comienza Fila 2, Termina Fila 4 (Ocupa 2 filas) */
    } 
    
    /* ITEM 6: IMAGEN 3 (1x1) -> Fila 2, Columna 3 */
    .sm-layout .item-6 { 
        grid-area: 2 / 3 / 3 / 4; 
    }

    /* ITEM 7: IMAGEN 4 (1x1) -> Fila 3, Columna 3 */
    .sm-layout .item-7 { 
        grid-area: 3 / 3 / 4 / 4; 
    }
    
    /* El ITEM-8 y otros elementos que no existen en el HTML se eliminan del CSS */
    
    /* Estilos para el contenido visual */
    .sm-layout .grid-image img,
    .sm-layout .grid-video video {
        height: 100%;
        width: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ======================================= */
/* LAYOUT DISEÑO WEB (FINAL - 3 FOTOS + TEXTO) */
/* ======================================= */

@media (min-width: 901px) {
    .diseno-layout {
        grid-template-columns: repeat(3, 1fr); 
        /* Fija 2 filas de igual altura para una apariencia cuadrada y completa */
        grid-auto-rows: minmax(250px, 1fr); 
    }

    /* FILA 1: Img 1 (1/3) y Mockup UPV (2/3 Span) */
    
    /* ITEM 1: IMAGEN 1 (1/3) */
    .diseno-layout .item-1 { 
        grid-area: 1 / 1 / 2 / 3; /* Fila 1, Columna 1 */
    } 

    /* ITEM 5: MOCKUP UPV GRANDE (2/3 - SPANNED HORIZONTAL) */
.diseno-layout .item-5 { 
    grid-area: 1 / 3 / 2 / 4; /* Fila 1, Columna 2. */
}

    /* FILA 2: Humedales (2/3 Span) y Texto (1/3) */

    /* ITEM 3: IMAGEN HUMEDALES GRANDE (2/3 - SPANNED HORIZONTAL) */
    .diseno-layout .item-3 { 
        grid-area: 2 / 1 / 3 / 3; /* Fila 2, Columnas 1 a 3. */
    } 

    /* ITEM-TEXT: (1/3) -> POSICIÓN FINAL SOLICITADA */
    .diseno-layout .item-text { 
        grid-area: 2 / 3 / 3 / 4; /* Fila 2, Columna 3 */
        min-height: auto; 
    }
    
    /* El ITEM 4 (imagen cuadrada) y otros ítems sobrantes deben eliminarse del HTML */
    
    /* Estilos para que el contenido visual cubra todo el espacio */
    .diseno-layout .grid-image img,
    .diseno-layout .grid-video video {
        height: 100%;
        width: 100%;
        object-fit:cover;
        display: block;
    }
}
/* RESPONSIVE PARA CONTACTO (Debajo del media query general, si existe) */

@media (max-width: 900px) {
    .contact-grid-container {
        /* Se apilan en una sola columna en móviles */
        grid-template-columns: 1fr; 
        gap: 2rem;
        padding: 2rem 5vw;
    }
}
/* BOTÓN DE DESCARGA DE CV (Afilado y estilizado) */
/* Animación de brillo suave (pulso cálido analógico) */
@keyframes glowPulseOrange {
  from {
    box-shadow:
      0 0 8px rgba(255, 123, 0, 0.6),
      0 0 16px rgba(255, 60, 0, 0.4);
  }
  to {
    box-shadow:
      0 0 20px rgba(255, 123, 0, 0.9),
      0 0 40px rgba(255, 60, 0, 0.7),
      0 0 60px rgba(255, 60, 0, 0.5);
  }
}


/* CONTACTO */
.contacto a {
    color: #FF7B00; 
    text-decoration: none;
}

/* PROYECTOS DESTACADOS (grid-proyectos) */
.proyectos {
    width: 100%;
    padding: 1rem;
    margin: 0;
    font-size: 1.5rem;

}
.proyectos h2 {
  padding: 1rem 1rem 1rem 0;
  text-align: center;
  margin-bottom: 0;
}

.grid-proyectos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.proyecto {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem 5vw;
    gap: 2rem;
    box-sizing: border-box;
}

.proyecto:nth-child(odd) {
    background-color:#202020;
    flex-direction: row;
}

.proyecto:nth-child(even) {
    background-color: #202020;
    flex-direction: row-reverse;
}

.proyecto-texto {
    flex: 1;
    padding: 0 1rem;
}

.proyecto-texto p {
    font-size: 1rem;
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", system-ui;
    font-style: normal;
    color: #FF7B00; 
    letter-spacing: 0.12em;
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
    opacity: 0.9;
}

/* Contenedor estático para una sola imagen de proyecto */
.proyecto-imagen-preview {
    flex: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* FIX: Aplicar border-radius al contenedor */
    border-radius: 8px; 
    margin: 1rem 0;
    box-shadow: 0 0 10px rgba(255, 123, 0, 0.2); 
}

.proyecto-imagen-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* FIX: Eliminar border-radius de la imagen, el padre con overflow: hidden lo aplica */
    border-radius: 0; 
    transition: transform 0.5s ease;
}

.proyecto-imagen-preview img:hover {
    transform: scale(1.05); 
}


/* ======================================= */
/* CV LAYOUT MODO DIGITAL (CRÉDITOS NARANJA) */
/* ======================================= */

/* Contenedor principal del CV (OCUPA TODO EL ANCHO) */
.cv-grid-container {
    width: 100%;
    max-width: none; 
    margin: 0 auto; 
    padding: 2rem 5vw; 
    border: none; 
    box-shadow: none; 
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: 4rem; 
    border-radius: 0; 
}

/* 3. Columna Izquierda (Información Personal/Skills) */
.cv-left-column {
    color: #FF7B00; 
    padding: 0; 
}
.cv-left-column h2 {
    color: #FF7B00; 
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    text-align: left;
    margin-bottom: 0.5rem;
    font-family: "Bitcount Grid Single", monospace; 
    text-shadow: 0 0 5px rgba(255, 123, 0, 0.5);
}
/* Subtítulo del Nombre: en naranja, para un efecto de brillo constante */
.cv-left-column .cv-puesto {
    color: #FF7B00; 
    font-size: 1rem;
    text-transform: uppercase; 
    font-family: "Bitcount Grid Single", monospace; 
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
}

/* NEW: Contenedor para alinear el botón del CV */
.cv-top-right-header {
    text-align: right; 
    /* Altura calculada para alinear con el nombre/puesto de la columna izquierda */
    height: 6.5rem; 
    padding-top: 1.5rem; 
    box-sizing: border-box;
    margin-bottom: 2rem; /* Separación de la primera caja */
}


/* Foto de Perfil: Mantener la foto monocromática con brillo naranja */
.foto-cv {
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 1.5rem 0;
}

/* NEW: Estilo de caja (Box Style) para todas las secciones del CV */
.box-style {
    background-color: #202020; 
    padding: 1.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(255, 123, 0, 0.2); /* Sombra LED */
    margin-bottom: 1rem; /* Reducida separación entre cajas */
}


/* Títulos y texto de Columna Izquierda: TODO naranja */
.cv-left-column h3 {
    color: #FF7B00; 
    font-size: 1.2rem; 
    font-weight: 700;
    /* CAMBIO: Reducido margen superior */
    margin-top: 1rem; 
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", monospace;
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.5);
}
.cv-left-column p, .cv-left-column li, .cv-left-column a {
    color: #FF7B00; 
    font-size: 0.95rem;
    line-height: 1.3; /* Reducida altura de línea para compactar */
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", monospace;
    letter-spacing: 0.05em;
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
    margin-bottom: 0.1rem; /* Reducido margen entre párrafos de contacto */
}
.cv-left-column a:hover {
    text-shadow: 0 0 8px #FF7B00;
}

/* Listas de Habilidades (puntos en naranja) */
.cv-list-compact {
    list-style-type: none;
    padding-left: 0;
}
.cv-list-compact li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.2em;
}
.cv-list-compact li::before {
    content: '>>'; 
    color: #FF7B00; 
    position: absolute;
    left: 0;
    font-size: 0.7em;
    top: 0.2em;
}


/* 4. Columna Derecha (Contenido Principal) */
.cv-right-column {
    padding: 0;
}

/* Títulos de Sección Derecha: Naranja fuerte */
.cv-right-column h3 {
    color: #FF7B00; 
    font-size: 1.4rem; 
    font-weight: 800;
    /* CAMBIO: Reducido margen superior */
    margin-top: 1rem; 
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem; 
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", monospace;
    text-shadow: 0 0 4px rgba(255, 123, 0, 0.5);
}
/* Texto del Perfil: Naranja brillante */
.cv-right-column .cv-profile p {
    color: #FF7B00; 
    font-size: 0.9rem;
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", monospace;
    letter-spacing: 0.05em;
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
}

/* Experiencia y Educación (Eliminación de la línea vertical) */
.cv-item {
    margin-bottom: 1rem; 
    border-left: none; /* ELIMINA LÍNEA VERTICAL */
    position: relative;
    padding-left: 0;
}

/* Aplicar estilo a items anidados para simular cajas dentro de la sección principal */


.cv-item-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1rem;
    margin-top: -0.2rem;
    font-family: "Bitcount Grid Single", monospace;
}
/* Roles y Fechas: Ambos en naranja para el efecto de créditos */
.cv-role {
    color: #FF7B00; 
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
}
.cv-dates {
    color: #FF7B00; 
    font-weight: 500;
}

/* Punto de la línea de tiempo (eliminado por border-left: none) */
.cv-item::before {
    content: none; /* ELIMINA EL PUNTO */
}

/* Compañía y Descripción: Naranja */
.cv-company, .cv-description {
    font-size: 0.95rem;
    margin-top: 0.1rem; /* Reducido espacio debajo del título */
    color: #FF7B00; 
    text-transform: uppercase;
    font-family: "Bitcount Grid Single", monospace;
    letter-spacing: 0.05em;
    text-shadow: 0 0 1px rgba(255, 123, 0, 0.2);
    line-height: 1.3; /* Compactado */
}
.cv-company {
    color: #DAA520; 
    text-shadow: none;
}

/* Lista de Formación Complementaria */
.cv-additional-education .cv-list-compact li {
    list-style-type: none;
    color: #FF7B00;
    font-family: "Bitcount Grid Single", monospace;
    text-shadow: 0 0 1px rgba(255, 123, 0, 0.2);
    line-height: 1.3;
}
.cv-additional-education .cv-list-compact strong {
    color: #DAA520;
    text-shadow: 0 0 1px #DAA520;
}

/* Herramientas (En columna izquierda ahora) */
.software-icons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.software-icons-grid img {
    width: 50px;
    height: 50px;
    opacity: 1;
    transition: opacity 0.3s, transform 0.3s;
}
.software-icons-grid img:hover {
    transform: scale(1.1);
}

/* ======================================= */
/* FOOTER (PIE DE PÁGINA) ESTILO CRÉDITOS */
/* ======================================= */
.main-footer {
    width: 100%;
    background-color: #202020;
    color: #FF7B00;
    padding: 1.5rem 5vw;
    text-align: center;
    border-top: 1px solid rgba(255, 123, 0, 0.2);
    font-family: "Bitcount Grid Single", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    line-height: 1.6;
}

.main-footer p {
    color: #FF7B00;
    margin: 0.2rem 0;
    font-size: 0.8rem;
    max-width: none;
    text-shadow: 0 0 1px rgba(255, 123, 0, 0.3);
}

.main-footer a {
    color: #DAA520;
    text-decoration: none;
    text-shadow: 0 0 3px rgba(218, 165, 32, 0.5);
    transition: text-shadow 0.3s ease;
}

.main-footer a:hover {
    color: #FF7B00;
    text-shadow: 0 0 8px #FF7B00;
}

/* ARREGLO PARA EL SÍMBOLO DE COPYRIGHT */
.copyright-symbol {
    font-family: Arial, sans-serif;
    margin-right: 0.1em;
    /* Aseguramos que el símbolo mantenga el color naranja */
    color: #FF7B00; 
}
/* RESPONSIVE LAYOUT */
@media (max-width: 768px) {
    /* Contenido eliminado */
}

/* ======================================= */
/* PROPUESTA VISUAL: GRID DE PROYECTOS (Elegante y Visual) */
/* ======================================= */
.project-grid {
    padding: 0 5vw;
    margin: 3rem auto;
}

.digital-cards-grid {
    /* AJUSTE: Mínimo 450px por tarjeta (máximo 2 por fila) para hacerlas más grandes */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    gap: 3rem; /* Aumentamos el espacio entre tarjetas */
    max-width: 1400px; /* Aumentamos el ancho máximo de la cuadrícula */
    margin: 0 auto;
}

.digital-card {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Formato de pantalla ancha */
    text-decoration: none;
    color: #FF7B00;
    background-color: #202020;
    
    /* Bordes Redondeados */
    border-radius: 8px; 
    
    /* SOLUCIÓN: Eliminamos BORDES y SOMBRAS en estado normal */
    border: none; 
    box-shadow: none; 
    
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    cursor: pointer;
}

.digital-card:hover {
    transform: translateY(-5px); /* Se eleva sutilmente */
    /* Mantenemos una sombra sutil para el efecto de elevación */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); 
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Efecto inicial: Semi-oscuro y monocromático (elegante) */
    filter: grayscale(100%) brightness(0.6); 
    transition: filter 0.6s ease;
}

.digital-card:hover .card-image {
    /* Efecto en hover: Color y brillo */
    filter: grayscale(0%) brightness(0.85); 
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Degradado oscuro en la parte inferior para que el texto resalte */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 70%);
}

.card-overlay h3 {
    font-family: "Bitcount Grid Single", monospace;
    font-size: 1.2rem; /* Título más pequeño y discreto */
    margin-bottom: 0.3rem;
    color: #DAA520; /* Color gris claro (discreto) */
    text-shadow: none; /* Elimina sombras del texto */
}

.card-overlay .card-date {
    font-family: "Bitcount Grid Single", monospace;
    font-size: 0.8rem;
    color: #FF7B00; /* La fecha sí mantiene el acento naranja para el toque digital */
    text-shadow: none;
}
/* Responsive Ajuste */
@media (max-width: 900px) {
    .digital-cards-grid {
        grid-template-columns: 1fr; /* Columna única en móvil */
        gap: 1.5rem;
    }
    .project-grid {
        padding: 0 1.5rem;
    }
}

/* -------------------------------------- */
/* NUEVA CUADRÍCULA COMBINADA (OLIV.IA, etc.) - DISEÑO SIMPLE Y ELEGANTE */
/* -------------------------------------- */
.combined-grid {
    padding: 2rem;
    
    display: grid;
    /* Definición del layout principal: 3 columnas de igual tamaño */
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: minmax(200px, auto); /* Filas flexibles, mínimo 200px de altura */
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    
    /* Eliminación de bordes y sombras en el contenedor */
    border: none; 
    box-shadow: none;
    border-radius: 8px; /* Bordes redondeados en el contenedor general */
}
/* SOLUCIÓN: Ajustar el ancho del botón DENTRO de los módulos de texto de la cuadrícula (MÒDUL/OLIVIA) */
/* Nueva clase para botones dentro de módulos de texto: Centrado y ajustado al contenido */
.btn-center-fit {
    /* Forzamos display: block para que margin: auto funcione */
    display: block; 
    /* El ancho se ajusta al contenido del texto, no a toda la columna */
    width: fit-content; 
    /* Centrado horizontal y margen vertical */
    margin: 1rem auto 0 auto; 
}
.grid-item {
    padding: 0;
    overflow: hidden;
    font-family: "Bitcount Grid Single", monospace;
    border-radius: 8px; /* Bordes redondeados en cada módulo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto sutil de elevación en todos los módulos (imagen o texto) */
.grid-item:hover {
    transform: translateY(-3px); 
    /* Añadimos una sombra muy sutil en hover para mantener la elegancia de la elevación */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); 
}

.grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    /* CAMBIO CLAVE: Imágenes siempre en color y con brillo normal */
    filter: none; /* Elimina el filtro grayscale */
    transition: none; /* Elimina la transición (ya no hay efecto hover visual) */
}

/* NUEVA REGLA: Videos en escritorio (necesitan border-radius y object-fit cover por defecto) */
.grid-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; 
}

.grid-image:hover img {
    /* CAMBIO CLAVE: Eliminamos el efecto hover de la imagen, solo queda la elevación de la tarjeta */
    filter: none;
}

/* Estilos de las cajas de texto */
.grid-text {
    padding: 1.5rem;
    /* Borde gris muy sutil */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 8px;
}
.grid-text h3 {
    color: #DAA520; /* Gris claro */
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-shadow: none;
    /* Línea divisoria muy suave */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.grid-text p {
    color: #FF7B00; /* Naranja LED sutil */
    font-size: 0.8rem;
    text-shadow: 0 0 2px rgba(255, 123, 0, 0.3);
    line-height: 1.4;
    max-width: none;
    margin: 0;
}

/* Elemento que debe ocupar más de un espacio */
.large-span {
    grid-column: span 2; /* Ocupa 2 columnas */
    aspect-ratio: 3.5 / 1.2; 
}
.large-span img {
    aspect-ratio: 3.5 / 1.2; 
}


/* Responsive Adjustments for Combined Grid */
@media (max-width: 900px) {
    .combined-grid {
        padding: 1rem;
        /* FIX CLAVE: CAMBIO A FLEXBOX EN COLUMNA PARA FLUJO FLEXIBLE */
        display: flex; 
        flex-direction: column; 
        gap: 1.5rem;
        /* Se anulan las propiedades de Grid */
        grid-template-columns: initial; 
        grid-auto-rows: initial;
    }
    
    .combined-grid .grid-item {
        /* Anular propiedades de Grid de escritorio */
        grid-area: auto !important; 
        grid-column: initial !important; 
        grid-row: initial !important;
        
        /* FIX CLAVE: ANULAR EL ASPECT-RATIO de los items generales (permite que .grid-text se adapte) */
        aspect-ratio: initial;
    }
    
    /* NUEVA REGLA: Aplicar aspect-ratio solo a contenedores visuales */
    .combined-grid .grid-image,
    .combined-grid .grid-video {
     /* Proporción 4:3 para imágenes/videos en móvil */
        width: 100%; 
    }

    /* FIX CRUCIAL PARA TEXTO: Mover texto al principio y permitir altura automática */
    .combined-grid .grid-text {
        order: -1; /* ESTA PROPIEDAD MUEVE EL TEXTO A LA PARTE SUPERIOR */
        height: auto;
        aspect-ratio: auto;
        /* FIX EXTRA: Eliminar cualquier restricción de altura/crecimiento de Flexbox */
        min-height: 0; 
        flex-basis: auto; 
        flex-grow: 0;
    }

    /* FIX LEGIBILIDAD: Aumentar tamaño de texto y eliminar sombra en móvil */
    .combined-grid .grid-text p {
        font-size: 1rem; /* Aumentado para mejor lectura */
        text-shadow: none; /* Se elimina el glow para mayor nitidez */
        line-height: 1.5; /* Ajuste para espacio entre líneas */
    }
    
    /* Asegurar que el contenido grande (large-span) no rompa el layout en Flexbox */
    .large-span {
        grid-column: initial;
        grid-row: initial;
        aspect-ratio: 4 / 3;
    }

    /* Ajuste para que las imágenes/videos se vean completos */
    .combined-grid .grid-image img,
    .combined-grid .grid-video video { 
        object-fit: contain; /* Mostrar el contenido completo sin recortes en móvil */
    }
}

/* ======================================= */
/* LAYOUT ANALÓGICO (7 ÍTEMS - MÓDULOS DE REVISTA) */
/* ======================================= */

/* Nuevos selectores para abarcar más espacio */
.large-span-vertical {
    grid-row: span 2; /* Ocupa 2 filas */
}
.large-span-horizontal {
    grid-column: span 2; /* Ocupa 2 columnas */
}

@media (min-width: 901px) {
    
    /* REGLA ESPECÍFICA para la Galería Analógica: 3 columnas de igual ancho */
    .analogue-photo-grid {
        display: grid; /* Aseguramos que sigue siendo Grid en escritorio */
        grid-template-columns: repeat(3, 1fr); 
        grid-auto-rows: minmax(200px, auto); 
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    /* POSICIONAMIENTO DE LOS ÍTEMS EN GALERÍA ANALÓGICA: */
    /* Item 1: Foto Vertical (Columna 1, Filas 1-2) */
    .analogue-photo-grid .item-1 { grid-area: 1 / 1 / 3 / 2; } 
    
    /* Item 2: Foto Cuadrada (Columna 2, Fila 1) */
    .analogue-photo-grid .item-2 { grid-area: 1 / 2 / 2 / 3; } 

    /* Item 3: Bloque de Texto (Columna 3, Fila 1) */
    .analogue-photo-grid .item-3 { grid-area: 1 / 3 / 2 / 4; } 

    /* Item 4: Foto Horizontal Grande (Ocupa Columnas 2-3, Fila 2) */
    .analogue-photo-grid .item-4 { grid-area: 2 / 2 / 3 / 4; } 

    /* Item 5, 6, 7: Tres imágenes en la Fila 3 */
    .analogue-photo-grid .item-5 { grid-area: 3 / 1 / 4 / 2; } 
    .analogue-photo-grid .item-6 { grid-area: 3 / 2 / 4 / 3; }
    .analogue-photo-grid .item-7 { grid-area: 3 / 3 / 4 / 4; }

    /* Ajuste visual para que las imágenes que ocupan más espacio se vean llenas */
    .analogue-photo-grid .grid-image img {
        height: 100%;
        object-fit: cover;
    }
}
/* =========================== RESPONSIVE GENERAL =========================== */


@media (max-width: 900px) {

    /* CV Responsive */
    .cv-grid-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    .cv-left-column {
        padding: 0;
        text-align: center;
        padding-bottom: 2rem;
    }
    .cv-left-column h2, .cv-left-column h3 {
        text-align: center;
    }
    .cv-left-column h3 {
        margin-top: 1rem;
    }
    /* MEJORA APLICADA: Centrar el texto, listas y enlaces de la columna izquierda del CV en móvil */
    .cv-left-column p, 
    .cv-left-column li, 
    .cv-left-column a {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
    }

    .cv-item-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cv-dates {
        margin-top: 0.2rem;
    }

    /* GENERAL */
    .logo-main-image {
        width: clamp(150px, 50vw, 300px);
    }
    
    .proyecto {
        flex-direction: column;
        padding: 1.5rem 3vw;
        gap: 1.5rem;
    }
    .proyecto:nth-child(odd) {
        flex-direction: column;
    }
    .proyecto:nth-child(even) {
        flex-direction: column;
    }
    .proyecto-texto {
        text-align: center;
        padding: 0 0.5rem;
    }

    .proyecto-imagen-preview {
        aspect-ratio: 4 / 3;
    }

    .video-separador {
        height: 30vh;
    }
      .video-separador video{
        width: 100%;
        height: 70%;
    }

    /* FIX INTEGRADO */
    .logo {
        height: 2.4rem; /* Se reduce la altura del logo Chiskey */
        margin-left: 0.5rem; /* Se reduce el margen izquierdo */
    }
    .redes-sociales {
        top: 0.8rem;
        right: 1.5rem;
        gap: 0.8rem;
    }
    .redes-sociales img {
        width: 24px; /* <--- NUEVO: Se reduce el tamaño de los iconos de RRSS */
        height: 24px;
    }
    /* FIN FIX INTEGRADO */


    section {
        padding: 1rem 1rem;
    }
    .hero {
        margin-top: 3rem;
    }

    /* Contenido eliminado */
}

/* Para móviles pequeños */
@media (max-width: 480px) {

    /* CV Responsive (Ajuste para móviles pequeños) */
    .cv-grid-container {
        width: 100%;
        margin: 0;
        padding: 0.8rem;
        border: none;
        box-shadow: none;
    }
    .cv-item-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cv-dates {
        margin-top: 0.2rem;
    }
    
    /* GENERAL */
    .hero h1 {
        font-size: 2rem;
        margin-top: 1.5rem;
    }
    .encendido {
        font-size: 1.8rem;
    }

    .proyecto-texto p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .menu-debajo ul {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .menu-debajo a {
        font-size: 1rem;
    }

    .video-separador {
        height: 25vh;
    }

    .proyecto-imagen-preview {
        aspect-ratio: 3 / 2;
    }
}

/* Dentro de @media (min-width: 901px) en style.css */
@media (min-width: 901px) {
    
    /* REGLA ESPECÍFICA para el Layout del Zine (Fila 1: 1/3, 1/3, 1/3 / Fila 2: 2/3, 1/3) */
    .zine-layout {
        /* Mantiene el layout de 3 columnas */
        grid-template-columns: repeat(3, 1fr); 
        /* Altura de fila automática */
        grid-auto-rows: auto; 
    }

    /* POSICIONAMIENTO DE LOS ÍTEMS: */
    
    /* Fila 1: 3 elementos de 1/3 cada uno */
    .zine-layout .item-3 { /* Detalle Migrantes */
        grid-area: 1 / 1 / 2 / 2; 
    } 
    
    .zine-layout .item-5 { /* Nueva Imagen/Índice */
        grid-area: 1 / 2 / 2 / 3; 
    } 

    /* Item 4: Texto Principal */
    .zine-layout .item-4 { 
        grid-area: 1 / 3 / 2 / 4; 
    }
    
    /* Fila 2: 2 elementos (2/3 y 1/3) */
    .zine-layout .item-1 { /* Mockup (2/3 ancho - GRANDE) */
        grid-area: 2 / 1 / 3 / 3; 
    } 
    
    /* Item 2: Portada (1/3 ancho - PEQUEÑO) */
    .zine-layout .item-2 { 
        grid-area: 2 / 3 / 3 / 4; 
    } 
    
    /* Asegurar que las imágenes llenen el espacio asignado */
    .zine-layout .grid-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* ======================================= */
/* LAYOUT ARROZ CON COSAS (9 MÓDULOS - 3x3 LLENO) */
/* ======================================= */

@media (min-width: 901px) {
    .arroz-layout {
        /* Mantiene el layout de 3 columnas */
        grid-template-columns: repeat(3, 1fr); 
        /* Fija 3 filas de igual altura para una apariencia cuadrada */
        grid-auto-rows: minmax(180px, 1fr); 
    }

    /* POSICIONAMIENTO MANUAL para el diseño asimétrico (2x2 en el centro-izquierda) */
    
    /* ITEM 6: IMAGEN GRANDE DESTACADA (2x2) -> Ocupa Col 1-2, Fila 2-3 */
    .arroz-layout .item-6 { 
        grid-area: 2 / 1 / 4 / 3; 
    } 

    /* ITEM-TEXT: (1x1) -> Fila 1, Columna 1 */
    .arroz-layout .item-text { 
        grid-area: 1 / 1 / 2 / 2; 
        min-height: auto; 
    }
    
    /* ITEM 1: (1x1) -> Fila 1, Columna 2 */
    .arroz-layout .item-1 { 
        grid-area: 1 / 2 / 2 / 3; 
    } 

    /* ITEM 2: (1x1) -> Fila 1, Columna 3 */
    .arroz-layout .item-2 { 
        grid-area: 1 / 3 / 2 / 4; 
    } 

    /* ITEM 3: (1x1) -> Fila 2, Columna 3 */
    .arroz-layout .item-3 { 
        grid-area: 2 / 3 / 3 / 4; 
    } 
    
    /* ITEM 4: (1x1) -> Fila 3, Columna 3 */
    .arroz-layout .item-4 { 
        grid-area: 3 / 3 / 4 / 4; 
    } 

    /* ITEM 5: (1x1) -> Fila 2, Columna 1. Reemplazado por item-6 (2x2)
       Lo recolocamos para que llene el hueco debajo del texto (Fila 4) */
    .arroz-layout .item-5 { 
        /* Lo colocamos al lado de item-7 */
        grid-area: 4 / 1 / 5 / 2;
        /* Dado que la cuadrícula se expandirá a 4 filas, es necesario añadir los otros dos. */
    } 
       
    /* ITEM 7: (1x1) -> Fila 4, Columna 2 */
    .arroz-layout .item-7 { 
        grid-area: 4 / 2 / 5 / 3; 
    } 

    /* ITEM 8: (1x1) -> Fila 4, Columna 3 */
    .arroz-layout .item-8 { 
        grid-area: 4 / 3 / 5 / 4; 
    }
    
    /* ESTILOS GENERALES DE LA CUADRÍCULA */
    .arroz-layout .grid-image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* Contenedor de navegación en la parte superior */
.project-navigation.top-nav {
    /* Usamos flexbox para alinear los elementos en una fila */
    display: flex;
    /* justify-content: space-between empuja la flecha 'Anterior' a la izquierda 
        y la flecha 'Siguiente' a la derecha, ocupando el ancho completo del contenedor. */
    justify-content: space-between;
    align-items: center; /* Centra verticalmente las flechas */
    width: 100%;
    margin: 10px 0 10px 0; /* Añade espacio arriba y MUCHO espacio abajo para separar del contenido */
    padding: 0; /* Asegura que no haya padding si usas algún contenedor principal */
}

/* Opcional: Cuando solo hay una flecha (como en el primer/último proyecto),
    aseguramos que se alinee correctamente a la derecha. */
/* Esta regla funciona en navegadores modernos: */
.project-navigation.top-nav:has(.next-arrow:only-child) {
    justify-content: flex-end;
}
/* Si necesitas compatibilidad con navegadores antiguos, simplemente no incluyas esta línea. */


/* Estilos base para la flecha (los que ya teníamos) */
.arrow-nav {
    display: inline-block;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.arrow-nav img {
    width: 80px; /* Ajusta este tamaño al que te parezca mejor */
    height: auto;
    filter: brightness(100%);
}

/* Efecto Hover (Iluminación) */
.arrow-nav:hover img {
    filter: brightness(150%); /* Aumenta el brillo */
    transform: scale(1.1); /* Hace que la flecha se agrande ligeramente para más efecto */
}

/* Media Query para dispositivos con un ancho máximo de 600px (típico móvil) */
@media (max-width: 600px) {
    
    /* Reducir el tamaño de las flechas */
    .arrow-nav img {
        width: 30px; /* Reducción de 50px a 30px */
    }

    /* Opcional: Reducir el espacio de margen para ahorrar espacio vertical */
    .project-navigation.top-nav {
        margin: 15px 0 30px 0;
    }
}