@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('components/nunito-sans-latin-300.woff2') format('woff2');
}

/* Variables globales */
:root {
    --main-color: #DDDAD5;
    --background-transparent: #181a1b;
    --font-size-base: 18px;
    --line-height-base: 27px;
    --padding-base: 10px 20px;
    --font-weight-light: 200;
    --spacing-double: 40px;
    --content-max: 660px;      /* ancho de columna */
    --t: 1s;                   /* duración de transiciones */
}
html { background-color: var(--background-transparent); }

/* General */
* { box-sizing: border-box; }
body {
    font-family: 'Nunito Sans', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0;
    padding: 0;
    color: var(--main-color);
    background-color: var(--background-transparent);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a:not([data-home]) {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
}
a:not([data-home]):hover,
a:not([data-home]):focus-visible {
    text-shadow:
        0 0 3px rgba(255, 255, 255, .325),
        0 0 10px rgba(255, 255, 255, .19),
        0 0 22px rgba(255, 255, 255, .1);
}

.hidden-seo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header */
#header:empty { display: flex; }
#header:empty::before {
    content: "";
    width: min(538px, calc(100% - 40px));
    aspect-ratio: 964 / 258;
    margin: 70px auto 20px;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-transparent);
    color: var(--main-color);
    padding: var(--padding-base);
    position: relative;
    flex-wrap: wrap;
}

header .logo-container {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 10px;
}

header .logo-container > a {
    color: #FFFFFF;
    display: block;
    width: min(538px, 100%);
    aspect-ratio: 964 / 258;
    margin: 0 auto;
}

header nav {
    flex: 1 1 100%;
    text-align: center;
}

header nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 10px;
}

header nav ul li { margin: 0 10px; }

header nav ul li a {
    color: var(--main-color);
    text-decoration: none;
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
header nav ul li a:hover { color: #FFFFFF; }

/* Opciones de idioma */
.language-options {
    margin-top: 0;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.language-btn {
    color: rgba(255, 255, 255, .4);
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    padding: 8px 0;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
.language-btn:hover {
    color: #FFFFFF;
}

/* Contenido principal */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex: 1;
    padding: 20px;
}
main.posts-page { padding-top: 0; }

/* Artículo (página de post) */
article {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-bottom: var(--spacing-double);
}

.info-page { width: 100%; }
.info-page h1 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 300;
    text-align: center;
    margin: 50px 0 45px;
}
.info-page h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 300;
    text-align: left;
    margin: 30px 0 12px;
}
.info-page p { margin: 0 0 18px; }
.info-page p:first-of-type { margin-top: 0; text-align: left; }
.info-page a {
    color: inherit;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
.info-page a:hover { color: #FFFFFF; }

article h2 {
    font-size: 36px;
    line-height: 45px;
    margin: 0 0 45px;
    padding: 0;
    font-weight: 300;
    color: var(--main-color);
    text-align: center;
}

/* Subtítulos dentro de los posts */
article h3 {
    font-size: 27px;
    line-height: 36px;
    margin: 50px 0 20px;
    padding: 0;
    font-weight: 300;
    color: var(--main-color);
    text-align: left;
}

article .article-author {
    display: block;
    width: 100%;
    font-size: 14px !important;
    line-height: 27px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center !important;
    color: var(--main-color);
    font-weight: 400;
    margin: 45px 0;
    padding: 0;
    text-decoration: underline;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
article .article-author:hover { color: #FFFFFF; }

article p:first-of-type {
    margin-top: 45px;
    margin-bottom: 45px;
    font-size: 1rem;
    color: var(--main-color);
    line-height: var(--line-height-base);
    text-align: justify;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

/* Lista de posts (home) */
article p.translation-link,
main.posts-page p.translation-link {
    max-width: var(--content-max);
    margin: 12px 0 0;
    display: flex;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
}
main.posts-page p.translation-link {
    width: min(var(--content-max), 100%);
    margin-top: 0;
    justify-content: center;
    transform: translateY(-30px);
}
article p.translation-link { transform: translateY(-42px); }
article .translation-link a,
main.posts-page .translation-link a {
    color: rgba(255, 255, 255, .4);
    display: inline-block;
    padding: 8px 0;
    text-decoration: none;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
article .translation-link a:hover,
main.posts-page .translation-link a:hover { color: #FFFFFF; }

article .post-navigation {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 50px;
    font-size: 14px;
}
article .post-navigation a {
    color: inherit;
    padding: 8px 4px;
    text-decoration: none;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
article .post-navigation a:hover { color: #FFFFFF; }
article .post-navigation span { align-self: center; }

#posts-list { width: 100%; padding-top: 12px; }

#posts-list ul {
    padding: 0;
    list-style: none;
    margin: 0;
    text-align: left;
}

#posts-list ul li {
    margin-bottom: 18px;
    text-align: left;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

#posts-list ul li h2 {
    font-size: 36px !important;
    line-height: 45px;
    margin: 90px 0 22.5px;
    padding: 0;
    font-weight: 300;
    color: var(--main-color);
    text-align: left;
}
#posts-list ul li:first-child h2 { margin-top: 0; }

#posts-list ul li h2 a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
#posts-list ul li h2 a:hover { color: #FFFFFF; }

/* Títulos nivel 3 fuera de article (si existieran) */
h3 {
    font-size: 27px;
    line-height: 36.45px;
    margin: 40.5px 0 27px;
    padding: 0;
    font-weight: 300;
    color: var(--main-color);
    text-align: center;
}

/* Imágenes de posts */
.post-image { display: block; margin: 0 auto; }

/* Footer */
footer {
    background-color: var(--background-transparent);
    color: rgba(255, 255, 255, .4);
    padding: var(--padding-base);
    text-align: center;
    font-size: 80%;
    line-height: calc(var(--line-height-base) * 0.8);
}

footer nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px;
}

footer nav ul li { margin: 0; }

footer nav ul li a {
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-weight-light);
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
}
footer nav ul li a:hover { color: #FFFFFF; }

/* Responsividad */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    header .logo-container { position: static; margin-left: 0; margin-bottom: 10px; }
    header nav ul { flex-direction: column; gap: 15px; }
    main { padding: 15px; }
}

@media (max-width: 600px) {
    header { gap: 20px; }
    header nav ul li a { font-size: 16px; line-height: 24px; }
    main { padding: 10px; }
    main.posts-page { padding: 0 30px 10px; }
    body { font-size: 0.9rem; }
    header nav ul li, footer nav ul li { margin: 5px; }
    article { padding: 0 30px; }
}

@media (max-width: 480px) {
    /* ajustes específicos si quisieras */
}

/* Enlaces del H1 */
header .logo-container h1 a {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    transition: color var(--t) ease-in-out, text-shadow var(--t) ease-in-out;
    padding: 0 20px; /* quita el padding vertical */
}
header .logo-container h1 a:hover { color: #FFFFFF; }

/* Página de bienvenida opcional */
body.welcome-page main {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
}
.logo-svg {
  width: 58%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.logo-svg-en {
  width: 100%;
}
.logo-container {
  margin-top: 60px;   /* más espacio arriba */
}

@media (prefers-reduced-motion: no-preference) {
  html.js body {
    opacity: 0;
    transition: opacity .5s ease-in;
  }
  html.js.ready body { opacity: 1; }
  html.js.ready body.is-leaving { opacity: 0; }
}