/* Personal layout settings. Loaded after styles.css, so these take priority. */

/* HEADER: name size and circular portrait. */
.brand{font-size:1.3rem;gap:15px;line-height:1.25}
.brand-photo{width:52px;height:52px;object-fit:cover;border-radius:50%;flex-shrink:0}
.header-inner{min-height:94px}

/* HOME: square portrait and labelled social icons under the CV. */
.portrait{height:auto;aspect-ratio:1;object-fit:cover}
.profile-section{margin-top:24px;padding-top:24px}
.profile-section h3{line-height:1.5}
.social-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px}
.social-icons a{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;text-decoration:none;border-radius:5px;padding:5px 2px}
.social-icons a:hover{background:#eef4f3}
.social-icons img{width:32px;height:32px;object-fit:contain}
.social-icons span{font-size:.8rem;line-height:1.4}
.biography>.eyebrow{margin-top:22px;margin-bottom:15px}

/* BACKGROUNDS: vertical percentages select the focal point of cropped photos. */
.hero-image-index{object-position:center 35%}
.hero-image-research{object-position:center 50%}
.hero-image-cv{object-position:center 52%}
.hero-image-contact{object-position:center 49%}

/* TEACHING: contain shows the entire source image, with no cover crop.
   The background colour fills any spare space on narrow screens. */
.hero-teaching{aspect-ratio:1156/424;min-height:280px;background:#5c5d5a}
.hero-image-teaching{object-fit:cover;object-position:75% 34%}
.hero-teaching .hero-content{padding-block:28px}

@media(max-width:1000px){
  .brand{font-size:1.1rem}
  .brand-photo{width:46px;height:46px}
  nav{gap:17px}
}
@media(max-width:720px){
  .brand{font-size:1.2rem}
  .brand-photo{width:44px;height:44px}
  .header-inner{min-height:0}
  .profile>.portrait{width:115px;height:115px;grid-row:1/3}
  .profile>.profile-section{grid-column:1/-1;margin-top:24px;width:100%}
  .social-icons{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 8px}
  .hero-teaching{aspect-ratio:auto;min-height:280px}
}
@media(max-width:380px){
  .brand{font-size:1.05rem}
  .social-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* LIGHT THEME: UV blue RGB(0, 44, 82) is the text colour. */
:root{--navy:#002c52;--ink:#002c52;--muted:#52697e;--accent:#002c52;--line:#dce3e6}
body,.site-header,footer{background:#fff;color:var(--ink)}
.footer-top p,.footer-bottom,.profile-caption p,.paper-meta,.paper-note,.course-meta,address{color:var(--muted)}
.hero{background-color:#002c52}
.button{border:1px solid #a7c8e1;background:#103e65;color:#fff}
.button:hover{background:#fff;color:#002c52}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.profile .profile-actions .button{width:auto;padding:7px 11px;gap:0;font-size:.85rem}
.social-icons a:hover{background:transparent;text-decoration:underline}
.social-icons img{background:transparent;border-radius:0;padding:0;width:36px;height:36px}
.research-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:750px}
.research-tags span{font-size:.8rem;line-height:1.5;padding:4px 10px;border:1px solid #b0cada;border-radius:4px;background:#002c52;color:white}
.paper-meta a{color:var(--accent)}
.tag{color:#002c52;border-color:#8ca7bb}
.contact-emails{display:flex;flex-direction:column;gap:12px}
.contact-socials{margin-top:45px;padding-top:30px;border-top:1px solid var(--line)}
.contact-socials .social-icons{grid-template-columns:repeat(7,minmax(0,1fr));max-width:850px}
.skip{color:#002c52}
@media(max-width:720px){
  .profile-actions{grid-column:2;align-self:start;margin-top:0}
  .profile .profile-actions .button{font-size:.78rem;padding:6px 9px}
  .contact-socials .social-icons{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media print{body,.site-header,footer{background:white;color:black}:root{--ink:#000;--muted:#333;--accent:#174d65;--line:#ccc}.paper-meta,.paper-note,address{color:#333}}

/* Welcome fits on one line on desktop; on narrow phones it wraps accessibly. */
.biography h2{max-width:none;font-size:clamp(1.65rem,2.35vw,2.1rem);letter-spacing:-.045em}
.biography{min-width:0}
@media(min-width:1100px){.biography h2{white-space:nowrap}}
/* Research returns to a full-width photographic banner with overlaid text.
   The 450px source-height band spans the head, torso and top of the IMT lectern. */
.hero-research{aspect-ratio:961/450;min-height:310px}
@media(max-width:1000px){.about-layout{gap:32px}}
@media(max-width:720px){.biography h2{font-size:clamp(1.35rem,4.6vw,1.8rem)}}

/* Navigation integrated into the photograph. header.js handles the scroll state. */
:root{--header-height:94px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.site-header{position:absolute;inset:0 0 auto;z-index:20;background:transparent;color:white;border:0;isolation:isolate;transition:background-color .2s,color .2s,box-shadow .2s}
.header-enhanced .site-header{position:fixed}
.site-header::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,25,48,.8),rgba(0,25,48,.4) 65%,transparent);transition:opacity .2s}
.site-header a:hover,.site-header nav a[aria-current]{color:white}
.site-header nav a[aria-current]{border-color:white}
.site-header .brand-photo{box-shadow:0 0 0 2px rgba(255,255,255,.65)}
.hero{padding-top:var(--header-height)}
.site-header.over-content{background:rgba(255,255,255,.97);color:#002c52;box-shadow:0 1px 12px rgba(0,44,82,.12)}
.site-header.over-content::before{opacity:0}
.site-header.over-content a:hover,.site-header.over-content nav a[aria-current]{color:#002c52}
.site-header.over-content nav a[aria-current]{border-color:#002c52}
@media(max-width:720px){:root{--header-height:120px}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header::before{transition:none}}
@media print{.hero{padding-top:0}}

/* Equal, compact header height on every page: navigation + Home's three rows.
   Responsive sizes are shared by all routes, including Research and Teaching. */
:root{--hero-content-height:180px}
.hero,.hero-home,.hero-research,.hero-teaching{
  aspect-ratio:auto;
  height:calc(var(--header-height) + var(--hero-content-height));
  min-height:0;
  padding-top:var(--header-height);
}
.hero .hero-content,.hero-teaching .hero-content{padding-block:18px}
.hero h1{font-size:clamp(2rem,3.5vw,3rem);line-height:1.12;max-width:none}
.hero .hero-subtitle{font-size:1.05rem;line-height:1.5;margin-top:10px}
.hero .eyebrow{margin-bottom:10px}
.hero .research-tags{margin-top:12px;max-width:none;gap:8px}
.hero .research-tags span{padding:3px 9px}
.research-field-rows{display:grid;gap:10px;margin-top:14px}
.research-field-row{display:flex;align-items:center;gap:18px}
.research-field-row strong{font-size:.95rem;font-weight:600;flex:0 0 310px}
.hero .research-field-row .research-tags{margin-top:0}
@media(max-width:900px){
  .research-field-row{align-items:flex-start;gap:8px;flex-direction:column}
  .research-field-row strong{flex-basis:auto;font-size:.85rem}
  .hero .research-field-row .research-tags{gap:5px}
  .hero .research-field-row .research-tags span{font-size:.7rem;padding:2px 6px}
}
@media(min-width:901px){
  .hero-home .hero-subtitle{white-space:nowrap}
}
.hero-home h1{white-space:normal}
.surname{display:inline-block;white-space:nowrap}
@media(min-width:721px) and (max-width:900px){:root{--hero-content-height:210px}}
@media(max-width:720px){
  :root{--hero-content-height:250px}
  .hero h1{font-size:clamp(1.8rem,5.6vw,2.2rem)}
  .hero .hero-subtitle{font-size:.95rem}
  .hero .research-tags{gap:6px}
  .hero .research-tags span{font-size:.75rem}
}
@media(max-width:380px){:root{--hero-content-height:290px}}
@media print{.hero,.hero-home,.hero-research,.hero-teaching{height:auto;padding-top:0}}

/* Full-width headers; Teaching uses the chalkboard colour in the side margins. */
.hero{width:100%}
.hero-teaching{isolation:isolate;background:#3b3d3d}
.hero-teaching::before{content:none}
.hero-image-cv{object-fit:cover;object-position:center 52%}
.course .course-role{margin:4px 0 10px;font-size:.95rem;font-weight:600;color:var(--muted)}
/* Show a slightly lower part of the photo by moving the image upwards. */
.hero-image-research{object-position:55% 47%;transform:translateX(-1%) scale(1.04)}

/* Fill the Teaching header; favour the hand when narrower screens crop the sides. */
.hero-image-teaching{
  left:0;right:0;width:100%;max-width:none;height:100%;
  transform:none;
  mask-image:none;
  -webkit-mask-image:none;
}
@media screen and (max-width:900px){
  .hero-image-teaching{
    /* Size by width, not header height, so the panorama can genuinely zoom out.
       The matching board backdrop fills the remaining vertical space. */
    width:max(150%,620px);height:auto;
    left:70%;right:auto;top:50%;bottom:auto;
    object-fit:contain;
    transform:translate(-75%,-40%);
    mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  }
}

/* Contact: email then address on the left, uncropped UA photo on the right. */
.contact-grid{align-items:center}
.contact-information{min-width:0}
.contact-information h3{min-height:0;margin-block:12px}
.contact-information address{margin-bottom:0}
.contact-photo{margin:0;min-width:0}
.contact-photo img{display:block;width:100%;height:auto}
@media(min-width:721px){
  .contact-grid{align-items:stretch}
  .contact-photo{position:relative;align-self:stretch}
  .contact-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% center}
}

/* Automatic system theme. CSS responds immediately to OS/browser changes,
   without a toggle, cookies, or stored preferences. Photographs stay unchanged. */
:root{color-scheme:light dark}
@media screen and (prefers-color-scheme:dark){:root:not([data-theme]){
    --ink:#edf3fa;
    --muted:#b5c4d4;
    --accent:#9acbff;
    --line:#34485e;
  }:root:not([data-theme]) body,:root:not([data-theme]) footer{background:#101b29;color:var(--ink)}:root:not([data-theme]) .site-header.over-content{
    background:rgba(16,27,41,.98);color:var(--ink);
    box-shadow:0 1px 12px rgba(0,0,0,.25);
  }:root:not([data-theme]) .site-header.over-content a:hover,:root:not([data-theme]) .site-header.over-content nav a[aria-current]{color:var(--accent)}:root:not([data-theme]) .site-header.over-content nav a[aria-current]{border-color:var(--accent)}:root:not([data-theme]) .button{background:#143d65;color:#f4f8fc;border-color:#718eac}:root:not([data-theme]) .button:hover{background:#b9dcff;color:#002c52}:root:not([data-theme]) .tag{color:#b9dcff;border-color:#6687a8}:root:not([data-theme]) .profiles a{border-bottom-color:#68829d}:root:not([data-theme]) .skip{background:#edf3fa;color:#002c52}:root:not([data-theme]) .cv-preview{background:#1b2a3d}:root:not([data-theme]) .social-icons img[src$="/x.svg"]{filter:invert(1)}
}
@media screen{:root[data-theme="dark"]{
    --ink:#edf3fa;
    --muted:#b5c4d4;
    --accent:#9acbff;
    --line:#34485e;
  }:root[data-theme="dark"] body,:root[data-theme="dark"] footer{background:#101b29;color:var(--ink)}:root[data-theme="dark"] .site-header.over-content{
    background:rgba(16,27,41,.98);color:var(--ink);
    box-shadow:0 1px 12px rgba(0,0,0,.25);
  }:root[data-theme="dark"] .site-header.over-content a:hover,:root[data-theme="dark"] .site-header.over-content nav a[aria-current]{color:var(--accent)}:root[data-theme="dark"] .site-header.over-content nav a[aria-current]{border-color:var(--accent)}:root[data-theme="dark"] .button{background:#143d65;color:#f4f8fc;border-color:#718eac}:root[data-theme="dark"] .button:hover{background:#b9dcff;color:#002c52}:root[data-theme="dark"] .tag{color:#b9dcff;border-color:#6687a8}:root[data-theme="dark"] .profiles a{border-bottom-color:#68829d}:root[data-theme="dark"] .skip{background:#edf3fa;color:#002c52}:root[data-theme="dark"] .cv-preview{background:#1b2a3d}:root[data-theme="dark"] .social-icons img[src$="/x.svg"]{filter:invert(1)}
}
@media print{:root{color-scheme:light}}

/* Compact manual selector: cycles Auto → Light → Dark → Auto. */
.theme-toggle{font:inherit;font-size:1.2rem;line-height:1;color:inherit;background:transparent;border:0;border-radius:50%;padding:0;cursor:pointer;width:32px;height:32px;flex-shrink:0;display:inline-grid;place-items:center}
.theme-toggle:hover{background:rgba(128,128,128,.15)}
.theme-toggle:focus-visible{outline:3px solid #d69639;outline-offset:4px}
.theme-toggle[hidden]{display:none}
@media(max-width:720px){.theme-toggle{font-size:1.15rem}}
@media print{html{color-scheme:light!important}.theme-toggle{display:none}}

/* Social rows: three personal networks, then four academic/code profiles. */
.social-icons,.contact-socials .social-icons{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 6px}
.social-icons a{grid-column:span 3}
.social-icons a:nth-child(-n+3){grid-column:span 4}
.profile .social-icons span{font-size:.75rem;letter-spacing:-.02em}
.footer-top{grid-template-columns:minmax(240px,1fr) minmax(0,1.65fr);gap:32px}
.footer-top .footer-label{font-size:.9rem;letter-spacing:0;text-transform:none}
footer .profiles{flex-wrap:nowrap;gap:16px;align-items:center}
footer .profiles a{white-space:nowrap;font-size:.82rem}
@media(max-width:1050px){.footer-top{grid-template-columns:1fr;gap:24px}}
@media(max-width:600px){footer .profiles{flex-wrap:wrap;gap:12px 18px}}

/* Fill the transparent Scholar letter in white, inside its circular silhouette.
   The corners stay transparent, including in dark mode. */
.social-icons img[src$="/scholar.png"]{
  background:radial-gradient(circle closest-side,#fff 98%,transparent 100%);
}

/* Contact: a single social row and side-by-side email addresses. */
.home-news{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);overflow-x:auto}
.biography .home-news h2{font-size:1.65rem;font-weight:700;white-space:normal;margin-bottom:14px}
.news-empty{font-size:.95rem;color:var(--muted)}
.news-list{list-style:none;padding:0;margin:0}
.news-list li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.news-label{font-size:.85rem;font-weight:600}
.news-list .news-title{font-size:.9rem;margin:0}
.news-date{font-size:.8rem;color:var(--muted);padding-top:4px}
.news-list h3{font-size:1rem;margin:0 0 5px}
.news-list p{font-size:.95rem;margin:0}
@media(max-width:480px){.news-list li{grid-template-columns:105px minmax(0,1fr);gap:10px}.news-label,.news-list .news-title{font-size:.82rem}}
.contact-socials .social-icons{grid-template-columns:repeat(7,minmax(90px,1fr));max-width:none;overflow-x:auto}
.contact-socials .social-icons a,.contact-socials .social-icons a:nth-child(-n+3){grid-column:auto}
.contact-emails{flex-direction:row;gap:12px 24px;flex-wrap:wrap}
.contact-emails .email{white-space:nowrap;font-size:.9rem}
@media(min-width:901px){.contact-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px}}

/* Contact: email and address share a row on wide screens. */
.contact-grid{align-items:start}
/* ENCUADRE CONTACT: menor porcentaje = mostrar una zona mas alta (mas cielo).
   Mayor porcentaje = mostrar una zona mas baja de la foto. */
.hero-image-contact{object-position:center 35%;transform:translateY(0px) scale(1)}
.hero-image-index{object-position:center 49%}
@media(max-width:720px){.contact-emails .email{white-space:normal}}

/* Slightly wider CV framing; retain the shared header dimensions. */
/* ENCUADRE CV: translate(horizontal, vertical) mueve la foto dentro del marco.
   Horizontal negativo = izquierda; positivo = derecha.
   Vertical positivo = abajo; negativo = arriba. scale controla el zoom.
   Cambiar tambien la regla movil inferior para aplicar el mismo ajuste. */
.hero-image-cv{transform:translate(3%,0px) scale(1.06);transform-origin:70% 32%;object-position:70% 44%;mask-image:none;width:100%;height:100%;top:0;object-fit:cover}
@media(max-width:720px){
  .hero-image-cv{transform:translate(0%,10px) scale(1.2);transform-origin:70% 12%;object-position:70% 40%}
}

/* Compact phone layout; desktop profile layout stays unchanged. */
.mobile-profiles{display:none}
@media(max-width:720px){
  :root{--hero-content-height:215px}
  .hero-home .hero-content{width:calc(100% - 24px)}
  .hero-home .hero-subtitle{font-size:clamp(.78rem,3.55vw,1.05rem);white-space:nowrap;letter-spacing:-.035em}
  .profile{grid-template-columns:90px minmax(0,1fr);column-gap:14px}
  .profile>.portrait{width:90px;height:90px}
  .profile-actions{grid-column:2;flex-wrap:nowrap;margin-top:4px;gap:6px}
  .profile-caption p{margin-bottom:4px}
  .profile .profile-actions .button{font-size:.7rem;padding:6px 5px}
  .profile .profile-actions .button{flex:1;justify-content:center}
  .profile>.profile-section{display:none}
  .mobile-profiles{display:block;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .biography .mobile-profiles h2{font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:0;margin-bottom:18px}
}
@media(max-width:380px){:root{--hero-content-height:235px}}
@media(min-width:721px){
  .profile-caption p{margin-bottom:4px}
  .profile-actions{margin-top:2px;gap:12px;flex-wrap:nowrap}
  .profile .profile-actions .button{flex:1;justify-content:center;padding-inline:10px}
}