:root {
    --color-primary: #0C4569;
    --color-white: #ffffff;
    --color-text: #333333;
    --font-size-nav: clamp(12px, 3vw, 14px);
    --transition-fast: 0.3s ease;
    --radius-sm: 8px;
    /* FIX CLS: alineado con deferred .image-wrapper */
    --carousel-max-width: 600px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: var(--color-white);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
}

header {
    background-color: var(--color-primary);
    padding-block: 10px;
    padding-inline: 0;
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    gap: 20px;
}

/* FIX LOGO CLS: aspect-ratio reserva espacio antes de cargar el SVG */
.logo-container {
    width: clamp(80px, 20vw, 130px);
    aspect-ratio: 4 / 1;
    flex-shrink: 0;
    overflow: hidden;
}

.logo-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

nav {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

nav a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    padding-block: 10px;
    padding-inline: 15px;
    display: block;
    font-size: var(--font-size-nav);
    transition: all var(--transition-fast);
    will-change: background-color, color, border-radius;
    border-radius: var(--radius-sm);
}

nav a:hover, nav a:focus {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    outline: none;
}

nav a:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

/* lang-switcher (en/about.html) */
.lang-switcher a {
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 0.2s;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: normal;
}

.lang-switcher a.lang-active,
.lang-switcher a:hover {
    opacity: 1;
    background-color: transparent;
    color: inherit;
    border: none !important;
}

@media (max-width: 991px) {
    header { flex-direction: column; padding-block: 10px; padding-inline: 20px; gap: 10px; }
    .logo-container { margin-inline: auto; }
    nav { width: 100%; }
    nav a { font-size: clamp(13px, 3vw, 14px); }
    .lang-switcher { margin-inline-start: 0; }
}
@media (max-width: 768px) {
    nav a { font-size: clamp(12px, 3vw, 14px); padding-block: 8px; padding-inline: 10px; }
}
@media (max-width: 480px) {
    nav a { font-size: clamp(11px, 3vw, 14px); padding-block: 8px; padding-inline: 10px; }
    .logo-container { width: clamp(60px, 15vw, 100px); }
}

main {
    padding-block: 12px;
    position: relative;
    z-index: 1;
    width: 100%;
}

h1, h2 { color: var(--color-primary); margin-block-start: 0; }

.container, .content {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 0;
    contain: layout;
}

/* ─────────────────────────────────────────────────────
   FIX CLS PRINCIPAL (era la mayor causa: 0.510)
   Antes: crítico tenía max-width:300px
          deferred lo sobreescribía a 600px → SHIFT
   Ahora: ambos usan los mismos valores desde el inicio
   ───────────────────────────────────────────────────── */
#image-carousel {
    width: clamp(250px, 85%, var(--carousel-max-width));
    max-width: var(--carousel-max-width);
    aspect-ratio: 0.74;
    margin-inline: auto;
    margin-block-end: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-color: #f0f0f0;
    contain: layout;
    content-visibility: auto;
}

@media (min-width: 1025px) {
    #image-carousel {
        width: clamp(250px, 28vw, 360px);
        max-width: 360px;
    }
}

@media (max-width: 1024px) {
    #image-carousel { width: clamp(250px, 80%, 350px); }
}
@media (max-width: 770px) {
    #image-carousel { width: clamp(200px, 75%, 280px); margin-block: 0 30px; }
}
@media (max-width: 480px) {
    #image-carousel { width: clamp(150px, 70%, 220px); margin-block: 0 30px; }
}

.profile-photo {
    width: 100%; height: 100%;
    position: absolute; inset: 0;
    opacity: 0;
}
.profile-photo picture { width: 100%; height: 100%; display: block; }
.photo-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.profile-photo.active { opacity: 1; }

/* FIX CLS PUZZLE */
.flex-container {
    width: 100%; max-width: 400px;
    aspect-ratio: 1; max-height: 400px;
    margin-inline: auto; margin-block: 30px;
    position: relative; contain: layout;
}
#puzzle-container {
    width: 100%; max-width: 300px;
    aspect-ratio: 1;
    position: relative; margin-inline: auto;
    font-size: 0; line-height: 0;
}
#puzzle-text {
    text-align: center; color: var(--color-primary);
    font-weight: bold; opacity: 0;
    transition: opacity 0.5s ease; margin-block-end: 10px;
}

/* FIX CLS: p solo estaba en deferred, llegaba tarde y movía el artículo */
p {
    text-align: justify;
    margin-block-end: 15px;
    padding-inline: 10px;
}