/* --- 1. CONFIGURACIÓN DE FUENTES --- */
@font-face {
    font-family: 'Sentient';
    src: url('fonts/Sentient-Regular.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: 'Sentient';
    src: url('fonts/Sentient-Italic.otf') format('opentype');
    font-style: italic;
}
@font-face {
    font-family: 'Sentient';
    src: url('fonts/Sentient-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

/* --- 2. DISEÑO GENERAL --- */
* {
    box-sizing: border-box;
}

/* Estilo por defecto para páginas de texto (CV / WORKS) */
body {
    font-family: 'Sentient', serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 60px;
    max-width: 900px;
}

/* ESTILO EXCLUSIVO PARA LA PORTADA (INDEX) */
body.pagina-portada {
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden; 
    max-width: none;  
    position: relative;
    background-color: #fff; 
}

/* --- 3. MENÚ AL ESTILO GUILLERMO ROS (A LA DERECHA) --- */
nav {
    position: absolute;
    top: 60px; 
    right: 60px; 
    z-index: 10; 
}

.nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

nav a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

nav a:hover {
    text-decoration: underline;
}

/* --- 4. PORTADA ENCAJADA ESTILO MIGUEL MARINA --- */
.bg-cover-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    padding: 140px 80px 140px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* El fondo blanco no captura la lupa */
}

.bg-cover-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in; /* Lupa con signo + sobre la foto */
    pointer-events: auto; /* Permite hacer clic en la foto */
    transition: transform 0.2s ease;
}

/* Cuando la imagen se amplía al hacer clic */
.bg-cover-img.en-detalle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    background-color: #fff; 
    z-index: 9999; 
    padding: 20px;
    cursor: zoom-out; /* Lupa con signo - */
}

/* TÍTULO ABAJO A LA IZQUIERDA EN LA PORTADA */
.main-title {
    position: absolute;
    bottom: 60px; 
    left: 60px;   
    margin: 0;
    font-size: 16px; 
    font-weight: normal;
    letter-spacing: 1px;
    color: #000;
    z-index: 10;  
}

/* --- 5. DETALLES DE OTRAS PÁGINAS (CV) --- */
.foto-cv {
    width: 240px;          /* Tamaño pequeño y elegante controlado */
    max-width: 100%;       
    height: auto;          
    display: block;        
    margin-top: 20px;
    margin-bottom: 30px;   
}

h1 { font-size: 1.5em; margin-bottom: 40px; font-weight: normal; }
h2 { font-size: 1.2em; margin-top: 40px; margin-bottom: 20px; font-weight: normal; }
.info { margin-bottom: 40px; color: #000; }

/* REJILLA DE ITEMS DEL CV */
.item { display: flex; margin-bottom: 12px; }
.year { width: 100px; flex-shrink: 0; }
.desc { flex-grow: 1; font-style: italic; }

/* Estilo general de enlaces */
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Ajuste móvil */
@media (max-width: 600px) {
    body { padding: 20px; }
    nav { top: 20px; right: 20px; }
    .main-title { bottom: 20px; left: 20px; font-size: 16px; }
    .bg-cover-container { padding: 100px 20px 100px 20px; }
    .item { flex-direction: column; }
    .year { margin-bottom: 5px; }
}