/* ==========================================================
   FERNANDO A. MIKIC FONTE
   Personal Academic Website
   Version 1.0
========================================================== */

/* ===========================
   VARIABLES
=========================== */

:root {

    --bg: #fafbfc;
    --surface: #ffffff;

    --text: #24323f;
    --text-light: #66727f;

    --primary: #153b63;
    --primary-dark: #0d2743;

    --border: #e6ebf1;

    --shadow:
        0 10px 30px rgba(20,40,70,.06);

    --radius: 10px;

    --transition: .28s ease;

    --container: 1280px;

}

/* ===========================
   RESET
=========================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{
	
    background:

radial-gradient(circle at top right,
rgba(21,59,99,.035),
transparent 32%),

radial-gradient(circle at bottom left,
rgba(21,59,99,.025),
transparent 28%),

#fafbfc;

    color:var(--text);

    font-family:"Inter",sans-serif;

    font-size:17px;

    line-height:1.8;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

ul{

    list-style:none;

}

/* ===========================
   LAYOUT
=========================== */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:120px 0;

}

h1{

    font-family:"Merriweather",serif;

    font-size:4.1rem;

    font-weight:700;

    line-height:1.08;

    letter-spacing:-1.3px;

    color:var(--primary);

    margin-bottom:18px;

}

h2{

    font-size:2rem;

    font-weight:600;

    margin-bottom:30px;

}

h3{

    font-size:1.2rem;

    margin-bottom:14px;

}

.section-intro{

    max-width:760px;

    color:var(--text-light);

    margin-bottom:60px;

}

/* ===========================
   HEADER
=========================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:rgba(250,251,252,.82);

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(230,235,241,.65);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:82px;

}

.logo{

    font-weight:600;

    color:var(--primary);

    letter-spacing:.2px;

}

nav ul{

    display:flex;

    gap:42px;

}

nav a{

    position:relative;

    color:var(--text-light);

    transition:var(--transition);

}

nav a:hover{

    color:var(--primary);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.25s;

}

nav a:hover::after{

    width:100%;

}

/* ===========================
   HERO
=========================== */

.hero{

    min-height: auto;          /* Quitamos el alto forzado que causa la simetría */
    display: flex;
    align-items: flex-start;   /* Alinea el contenido arriba, ignorando el fondo sobrante */
    padding-top: 200px;        /* Mantiene (o aumenta) el espacio superior con el menú fijo */
    padding-bottom: 120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:60px;

    align-items:center;

}

.university{

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.82rem;

    color:var(--text-light);

    margin-bottom:20px;

}

.hero h2{

    color:var(--text-light);

    font-weight:500;

    margin:24px 0 40px;

}

.hero p{

    max-width:650px;

    margin-bottom:20px;

}

.hero-photo{

    display:flex;
    justify-content:flex-end;
    align-items:center;

}

.hero-photo img{

    width:510px;
    max-width:100%;

    border-radius:14px;

    box-shadow:
        0 30px 60px rgba(20,40,70,.10);

}

/* ===========================
   BUTTONS
=========================== */

.buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.button{

    padding:15px 28px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:500;

}

.primary{

    background:var(--primary);

    color:white;

}

.primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.secondary{

    background:#ffffff;

    border:1px solid #dfe6ee;

    color:var(--primary);

}

.secondary:hover{

    background:#f7f9fb;

    border-color:#c8d4e0;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(20,40,70,.06);

}




/* ==========================================================
   RESEARCH
========================================================== */

.cards{

    display:grid;

    grid-template-columns:repeat(2,minmax(280px,1fr));

    gap:30px;

}

.cards article{

    background:#ffffff;

    border:1px solid #edf1f5;

    border-radius:14px;

    padding:38px;

    transition:.35s;

    box-shadow:
        0 12px 40px rgba(20,40,70,.04);

}

.cards article:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 60px rgba(20,40,70,.10);

}

.cards h3{

    color:var(--primary);

    margin-bottom:16px;

    font-size:1.25rem;

}

.cards p{

    color:var(--text-light);

    margin:0;

}


/* ==========================================================
   TEACHING
========================================================== */

#teaching,
#docencia{

    background:#ffffff;

}

.teaching-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:80px;

    margin-top:50px;

}

.teaching-grid ul{

    display:grid;

    gap:18px;

}

.teaching-grid li{

    padding:18px 22px;

    background:var(--bg);

    border-left:4px solid var(--primary);

    border-radius:8px;

}

.teaching-grid h3{

    margin-bottom:24px;

    color:var(--primary);

}


/* ==========================================================
   CONTACT
========================================================== */

.contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:50px;

}

.contact-grid > div{

    background:white;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:32px;

    transition:var(--transition);

}

.contact-grid > div:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.contact-grid h3{

    color:var(--primary);

    margin-bottom:10px;

}

.contact-grid p{

    color:var(--text-light);

}

.contact-grid a{

    color:var(--primary);

}


/* ==========================================================
   FOOTER
========================================================== */

footer{

    margin-top:80px;

    padding:70px 0;

    border-top:1px solid var(--border);
	

}

.footer-content{

    display:flex;

    flex-direction: column; 

    justify-content:center;

    align-items:center;

}

.footer-content p{

    color:var(--text-light);
	

}

.logos{

    display:flex;
	
	justify-content: center;

    align-items:center;

    gap:180px;

}

.logos img{

    height:80px;

    width:auto;

    opacity:.92;

    transition:var(--transition);
	

}

.logos img:hover{

    opacity:1;

}

.copyright {
    color: var(--text-light);
    margin-top: 70px;
	margin-bottom: 10px;
	font-size: 0.85rem; 
	
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:980px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-photo{

        justify-content:center;

    }

    .hero-photo img{

        width:340px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .teaching-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        flex-direction:column;

        gap:35px;
		

    }

}


@media (max-width:700px){

    header .container{

        height:auto;

        padding:18px 0;

        flex-direction:column;

        gap:18px;

    }

    nav ul{

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    section{

        padding:90px 0;

    }

    h1{

        font-size:2.5rem;

    }

    h2{

        font-size:1.6rem;

    }

    .hero{

        min-height:auto;

        padding-top:170px;

    }

    .button{

        width:100%;

        text-align:center;

    }

    .buttons{

        flex-direction:column;

    }

}



/* ==========================================================
   DETAILS
========================================================== */

/* Línea decorativa bajo los títulos */

h2::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    background:var(--primary);

    margin-top:16px;

    border-radius:20px;

}


/* Selección de texto */

::selection{

    background:#153b63;
    color:white;

}


/* Scrollbar (Chrome, Edge...) */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef2f6;

}

::-webkit-scrollbar-thumb{

    background:#b8c5d1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#153b63;

}


/* Hero */

.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-220px;
    top:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(21,59,99,.06),
    transparent 70%);

    pointer-events:none;
}

.hero::after{

    content:"";

    position:absolute;

    left:-180px;
    bottom:-220px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(21,59,99,.035),
    transparent 70%);

    pointer-events:none;
}


/* Fotografía 


.hero-photo::before{

    content:"";

    position:absolute;

    width:92%;
    height:92%;

    right:-18px;
    bottom:-18px;

    border:1px solid rgba(21,59,99,.12);

    border-radius:12px;

    z-index:-1;

}*/

.hero-photo{

    position:relative;

}

.hero-photo img{

    width:510px;
    max-width:100%;

    border-radius:14px;

    box-shadow:
        0 30px 60px rgba(20,40,70,.10);

    transition:.5s;

}

.hero-photo img:hover{

    transform:translateY(-6px);

}


/* Tarjetas */

.cards article{

    position:relative;
	overflow:hidden;

}

.cards article::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.cards article:hover::before{

    transform:scaleX(1);

}


/* Aparición */

.fade{

    opacity:0;

    transform:translateY(35px);

    transition:.7s;

}

.fade.visible{

    opacity:1;

    transform:none;

}


nav a.active{

    color:var(--primary);

}

nav a.active::after{

    width:100%;

}

@media(max-width:700px){

.language-switch{

    margin-left:12px;

    font-size:.80rem;

}


.hero{

padding-top:150px;

}

.hero-photo{

order:-1;

margin-bottom:30px;

}

.hero-photo img{

width:310px;

}

.hero-grid{

gap:35px;

}

.cards{

gap:22px;

}

section{

padding:75px 0;

}

}


header{

    transition:.35s;

}

header.shrink{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

header.shrink .container{

    height:68px;

}


.hero-content{

    max-width:780px;

}

.hero p{

    text-wrap:pretty;

}

#investigacion{

    padding-top: 70px;


}
#investigacion{
    scroll-margin-top: 90px;
}

#docencia{

    padding-top: 70px;

}
#docencia{
    scroll-margin-top: 90px;
}

#contacto{

    padding-top: 70px;


}
#contacto{
    scroll-margin-top: 90px;
}

.normal-link {
    color: var(--text-light);          /* Mantiene el mismo color sutil del texto */
    text-decoration: underline;        /* Activa el subrayado */
    text-decoration-thickness: 1px;    /* Hace que la línea sea muy fina y elegante */
    text-underline-offset: 3px;        /* Separa un poco la línea del texto para que no agobie */
    transition: color 0.3s ease, text-decoration-color 0.3s ease; /* Transición suave */
}

/* Efecto al pasar el ratón (hover) */
.normal-link:hover {
    color: #153b63;                    /* Color corporativo de la UVigo (puedes usar el que quieras) */
    text-decoration-color: #153b63;    /* El subrayado cambia al mismo color */
    text-decoration-thickness: 2px;    /* El subrayado se vuelve un poco más firme */
}


.language-switch{

    display:flex;

    align-items:center;

    gap:8px;

    margin-left:28px;

    font-size:.92rem;

    font-weight:500;

    white-space:nowrap;

}

.language-switch a{

    color:#6b7280;

    text-decoration:none;

    transition:.25s;

}

.language-switch a:hover{

    color:var(--primary);

}

.language-switch .active{

    color:var(--primary);

    font-weight:700;

}