/*
 * ---------------- ESTILOS GLOBALES Y VARIABLES CSS ----------------
 * Este archivo contiene las variables CSS principales del tema,
 * los estilos de reseteo y los estilos generales que aplican a todo el sitio.
 *
 * NOTA: Este CSS ha sido optimizado para contener solo estilos globales.
 * Los estilos de secciones específicas (e.g., portada, single) se cargan condicionalmente
 * en sus respectivos archivos CSS para un rendimiento máximo.
 */

/* Importar fuentes de Google Fonts */
@font-face {font-family:'Franziska';src:url('../fonts/franziska/FranziskaWebPro.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face {font-family:'Franziska';src:url('../fonts/franziska/FranziskaWebPro-Bold.woff') format('woff2');font-weight:bold;font-style:normal;font-display:swap;}
@font-face {font-family:'Roboto';src:url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face {font-family:'Roboto';src:url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face {font-family:'Roboto';src:url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face {font-family:'Roboto';src:url('../fonts/roboto/Roboto-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}
@font-face {font-family:'TabletGothic';src:url('../fonts/tabletgothic/TabletGothic-Regular-2024.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face {font-family:'TabletGothic';src:url('../fonts/tabletgothic/TabletGothic-Bold-2024.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}


:root {
  --body-background:#ffffff;
  --neutral-100: #ffffff;
  --neutral-200: #f0f0f0;
  --neutral-300: #dcdcdc;
  --neutral-400: #b0b0b0;
  --neutral-500: #888888;
  --neutral-600: #555555;
  --neutral-700: #333333;
  --neutral-800: #222222;
  --neutral-900: #000000;
  --accent-100: #a0c4ff;
  --accent-200: #7097d8;
  --accent-300: #4366b0;
  --accent-400: #b91109;
  --focus-ring: rgba(0,0,0,0.3);
  --font-family-base: 'TabletGothic', serif;
  --font-family-title: 'Aleo', serif;
  --font-family-sec: 'Franziska', sans-serif;
  --font-family-ter: 'Brawler', serif;
  --font-family-aux: 'Roboto', sans-serif;
  --step-1: 0.3rem;
  --step-2: 0.5rem;
  --step-2-5: 0.6rem;
  --step-3: 0.8rem;
  --step-3-4: 0.9rem;
  --step-4: 1rem;
  --step-4-5: 1.2rem;
  --step-5: 1.3rem;
  --step-6: 1.5rem;
  --step-7: 1.8rem;
  --step-8: 2rem;
  --step-9: 2.3rem;
  --step-10: 2.5rem;
  --step-11: 2.8rem;
  --step-12: 3.0rem;
  --step-13: 3.3rem;
  --step-14: 3.5rem;
  --step-15: 3.8rem;
  --step-16: 4rem;
  --step-17: 4.3rem;
  --step-18: 4.5rem;
  --step-19: 4.8rem;
  --step-20: 5rem;

  --radius-sm: var(--step-1);
  --radius-md: var(--step-2);
  --radius-lg: var(--step-4);

  --border-width: 1px;
  --border-style: solid;
  --border-color-default: var(--neutral-300);
  --neutral-border-subtle: var(--neutral-300);
  --border-color-absolute: var(--neutral-500);

  --icon-size: var(--step-4);
  --container-max-width: 830px;
  --container-2:700px;
  --container-padding: var(--step-7);
  --line-height-base:var(--step-6);
}

:root[data-theme="dark"] {
  --body-background:#222222;
  --neutral-100: #000000;
  --neutral-200: #121212;
  --neutral-300: #1e1e1e;
  --neutral-400: #444444;
  --neutral-500: #666666;
  --neutral-600: #999999;
  --neutral-700: #bbbbbb;
  --neutral-800: #dddddd;
  --neutral-900: #ffffff;
  --accent-100: #507bcc;
  --accent-200: #436aa8;
  --accent-300: #335b8a;
  --focus-ring: rgba(255,255,255,0.4);
  --border-width: 1px;
  --border-style: solid;
  --border-color-default: var(--neutral-400);
  --neutral-border-subtle: var(--neutral-400);
  --border-color-absolute: var(--neutral-600);
}

/* ---------------------------------- FORMATEO INICIAL ------------------------------------------ */

*, *::before, *::after {box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {margin:0;padding:0;font-family:var(--font-family-base);font-size:var(--step-4);line-height:var(--line-height-base);color:var(--neutral-800);background:var(--body-background);text-rendering:optimizeLegibility;}
h1,h2,h3,h4,h5,h6 {font-family:var(--font-family-base);}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd {margin:0;padding:0;}
ul,ol {list-style:none;}
a {color:inherit;text-decoration:none;}
img,svg,video,canvas,iframe {max-width:100%;display:block;}
button,input,select,textarea {font:inherit;color:inherit;background:none;border:none;padding:0;}
svg.icon, svg[class*="icon-"] {width:var(--step-4);height:var(--step-4);display:inline-block;vertical-align:middle;fill:currentColor;}
svg {width:var(--step-4);height:var(--step-4);}

.video-new iframe, .body-video iframe, .single-content .wp-block-embed__wrapper { position: relative;}
.video-new iframe, .body-video iframe, .single-content iframe, .single-content .wp-block-embed__wrapper iframe {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; margin-bottom: 1em; height: auto }
iframe { border: 0}


.container {margin: var(--step-2) var(--step-4);}
@media (min-width: 900px) {
  .container {max-width:var(--container-max-width);margin:var(--step-2) auto}
  .header-grid {max-width:var(--container-max-width);margin:0 auto;padding:0 var(--step-4);}
}
@media (max-width: 317px) {.menu-button span, .account-button span {display: none;} }

/* -------------------------------- HEADER -------------------------------------------- */
#header-content {position:relative;width:100%;z-index:1000;opacity:1;transition:transform 0.4s ease-in-out 0.3s,opacity 0.4s ease-in-out 0.3s;}
#header-content[sticky="true"] {position:sticky;top:0;}
#header-content[go="out"] {transform:translateY(-100%);transition:transform 0.5s ease-in-out 0.3s,opacity 0.4s ease-in-out 0.5s;}
#header-content[go="in"] {transform:translateY(0);opacity:1;}
.no-transition {transition:none!important;}
#header-content[sticky="true"] .header {height:60px;}
.header {background:var(--neutral-100);padding:var(--step-4) var(--step-4);height:82px;display:grid;place-items:center;transition:height 0.3s ease-in-out 0.3s;border-bottom: solid 1px var(--neutral-300);}
.header-grid {position:static;display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;max-width:var(--container-max-width);margin:0 auto;}
.menu-button,.account-button {display:flex;align-items:center;gap:var(--step-2);font-size:var(--step-3-4);color:var(--neutral-900);cursor:pointer;}
.account-button img {border-radius: 9999px; height: 28px;width: 28px;border: solid 1px var(--border-color-absolute);}
.menu-button {justify-self:start;}
.account-button {justify-self:end;}
.site-logo {justify-self:center;}
.site-logo svg {width:auto;height:var(--step-8);padding:var(--step-2) var(--step-3);border-radius:var(--step-1);background:#1e1e1e;fill:var(--neutral-100);color:#ddd;}
.icon {width:var(--step-4);height:var(--step-4);display:inline-block;vertical-align:middle;fill:currentColor;}

/* -------------------------------- MENUS -------------------------------------------- */
.menu {position:absolute;top:var(--step-20);left:0;width:100%;height:calc(100vh - var(--step-14));overflow-y:auto;background:var(--neutral-100);display:none;flex-direction:column;padding-bottom:var(--step-15);border:var(--border-width) var(--border-style) var(--neutral-300);box-shadow:0 var(--step-2) calc(var(--step-4) / 1.6) rgba(0,0,0,.05);z-index:9999;}
#header-content[sticky="true"] .menu {top:var(--step-14);}
.menu[hidden] {display:none;}
.menu.active {display:flex;height:calc(100vh - var(--step-6));}
#primary-menu .close-button {left:var(--step-4);}
#account-menu .close-button {right:var(--step-4);}
.menu ul {margin:0;width:100%;}
.menu-secciones,.menu-enlaces,#primary-menu .primary-menu-list>li,#account-menu .account-menu-list>li {margin:var(--step-4) var(--step-8);}
.menu-secciones ul {display:grid;gap:var(--step-2);font-weight:bold;grid-template-columns:1fr 1fr;padding-bottom:var(--step-4);border-bottom:var(--border-width) var(--border-style) var(--neutral-300);}
.menu-secciones .subnav-title {display:none;}
.subnav-title {display:block;margin:var(--step-2) auto;font-weight:bold;font-size:var(--step-3);color:var(--neutral-600);text-transform:uppercase;}
.menu-enlaces ul {display:flex;flex-direction:column;gap:var(--step-2);font-size:var(--step-4);padding-bottom:var(--step-4);border-bottom:var(--border-width) var(--border-style) var(--neutral-300);}
@media(min-width:600px) {
  .menu {width:var(--step-13);}
  .header-grid {position:relative;}
  #primary-menu.menu.active {width: 25rem;left:0;top:var(--step-11);right:auto;height:calc(100vh - var(--step-14));}
  #account-menu.menu.active {width: 25rem;right:0;top:var(--step-11);left:auto;height:calc(100vh - var(--step-14));}
}
/* -------------------------------- BUSCADOR -------------------------------------------- */
.search-form {position:relative;margin:var(--step-6) var(--step-6) var(--step-2);}
.search-field {width:100%;padding:var(--step-2) var(--step-8) var(--step-2) var(--step-3);border:var(--border-width) var(--border-style) var(--neutral-300);border-radius:var(--step-1);font-size:var(--step-4);}
.search-submit {position:absolute;right:var(--step-3);top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;color:var(--neutral-700);}
.search-submit svg {width:var(--step-4);height:var(--step-4);fill:currentColor;}
.search-field:focus {outline:0;box-shadow:0 0 0 2px var(--neutral-600);}
.search-field::-webkit-search-decoration,.search-field::-webkit-search-cancel-button,.search-field::-webkit-search-results-button,.search-field::-webkit-search-results-decoration{display:none;}

/* -------------------------------- TOGGLE MODO DARK -------------------------------------------- */
.theme-toggle {margin:auto 0; padding:1.5rem 2rem 1.5rem;background:var(--neutral-200);display:flex;align-items:center;justify-content:space-between;width:100%;font-size:var(--step-4);}
.theme-toggle>span {margin-right:var(--step-4);white-space:nowrap;color:var(--neutral-900);}
.theme-toggle>div {position:relative;background:var(--neutral-300);border-radius:2rem;width:auto;height:var(--step-9);display:flex;align-items:center;justify-content:space-between;padding:0 var(--step-2);padding:0;gap:var(--step-2);}
.theme-toggle>div::before {content:"";position:absolute;inset:.15rem auto .15rem .25rem;margin:auto;width:var(--step-7);height:var(--step-7);border-radius:1rem;transition:left .3s ease, background .3s ease;z-index:1;background:var(--neutral-900);}
.theme-toggle[data-active="light"]>div::before {left:0.3rem;background:var(--neutral-100);}
.theme-toggle[data-active="auto"]>div::before {left: 2.69rem;}
.theme-toggle[data-active="dark"]>div::before {left:5.09rem;background:var(--neutral-400);}
.theme-toggle[data-active="auto"].auto-dark>div::before {background:var(--neutral-400);}
.theme-toggle[data-active="auto"].auto-light>div::before {background:var(--neutral-100);}
.theme-toggle button {background:none;border:none;z-index:2;width:var(--step-8);height:var(--step-8);padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}
.theme-toggle button .icon {color:var(--neutral-900);pointer-events:none;position:relative;top:0;}
.theme-toggle[data-active="light"] .btn-light .icon {color:var(--neutral-900)}.theme-toggle>div .btn-light {margin-left: .2rem;}
.theme-toggle[data-active="dark"] .btn-dark .icon {color:var(--neutral-900); right: .2rem}
.theme-toggle[data-active="auto"].auto-dark .btn-auto .icon {color:var(--neutral-900)} .btn-auto {top: .1rem}
.theme-toggle[data-active="auto"].auto-light .btn-auto .icon {color:var(--neutral-900);right: .019rem;}

/* -------------------------------- MENU CUENTA -------------------------------------------- */
.wellcome {padding: 1rem 2rem; max-width: 22rem;}
.theme-toggle span {font-size: 1.3rem; font-weight: bold}

.session-buttons{display:flex;flex-direction:column;gap:.8rem;align-items:stretch}
.menu-enlaces .boton {width:100%;padding:.8rem 1rem;border:1px solid var(--neutral-400);border-radius:var(--step-1);cursor:pointer;text-align: center;}
.btn-register {background-color: var(--accent-400);color: #fff}

/* -------------------------------- BARRA ALERTA -------------------------------------------- */
.now-wrap {display:flex;align-items:stretch;position:relative;max-width:var(--container-max-width);margin:.5rem auto;background:var(--neutral-200)}
.now {position:relative;display:flex;align-items:center;gap:var(--step-2);font-size:var(--step-3-4);padding-left:var(--step-4);flex:1;overflow:hidden;text-decoration:none}
.now-dot {width:8px;height:8px;border-radius:50%;background-color:var(--accent-400);animation:opacityLoop .5s infinite alternate;flex-shrink:0}
.now-scroll {flex:1;overflow:hidden}
.now-track {display:inline-block;white-space:nowrap;animation:scroll-left 30s linear infinite}
.now-label {color:var(--accent-400);text-transform:uppercase;font-size:var(--step-3)}
.now-close {display:flex;align-items:center;justify-content:center;padding:0 var(--step-4);cursor:pointer;flex-shrink:0}
.now-close svg {width:1rem;height:1rem;fill:var(--neutral-600)}
.single-header .now-label {font-size: var(--step-4-5);text-transform: none;}
@media(min-width:700px){.now-track{animation:none;}}
@keyframes opacityLoop {from{opacity:1}to{opacity:.1}}
@keyframes scroll-left {0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* -------------------------------- ARCHIVE -------------------------------------------- */
.archive-title {font:700 var(--step-7)/1.2 var(--font-family-base);margin:var(--step-3) 0;text-align:left;}
.archive-article a {display:flex;align-items:center;gap:var(--step-3);text-decoration:none;color:inherit;padding:var(--step-3) 0;border-bottom:var(--border-width) var(--border-style) var(--neutral-300);}
.archive-article figure {width:120px;aspect-ratio:16/10;flex-shrink:0;overflow:hidden;border-radius:var(--step-1);}
.archive-article figure img {width:100%;height:100%;object-fit:cover;display:block;}
.archive-content {flex:1;display:flex;flex-direction:column;justify-content:center;}
.archive-meta {font-size:var(--step-3);text-transform:uppercase;color:var(--neutral-600);}
.archive-article h3 {font:600 var(--step-4)/1.2 var(--font-family-base);margin:var(--step-1) 0;}
@media(min-width:600px){.archive-article figure {width:200px;aspect-ratio:16/9;}.archive-content{max-width:350px;}.archive-article h3{font-size:var(--step-5);}}
@media(max-width:420px){.archive-article a{flex-direction:column;align-items:flex-start;}.archive-article figure{width:100%;aspect-ratio:16/9;}.archive-content{width:100%;max-width:none;}}

/* -------------------------------- FOOTER -------------------------------------------- */
.footer {margin:var(--step-6) auto 0;padding:5rem 0;text-align:center;font-size:var(--step-4);color:var(--neutral-600);background:var(--neutral-200);border-top:1px solid var(--neutral-200);}
.footer .footer-top {display:flex;flex-direction:column;align-items:center;gap:var(--step-8);padding: var(--step-4)}
.footer .footer-nav {display:flex;flex-wrap:wrap;justify-content:center;gap:var(--step-3);font-size:var(--step-4);}
#menu-footer {display:flex;flex-wrap:wrap;gap:var(--step-4);margin:0 var(--step-4);justify-content:center;}
.footer .site-logo svg {width:8rem;height:auto;padding:var(--step-3) var(--step-4);}
.footer .footer-social {display:flex;justify-content:center;gap:var(--step-3);}
.footer .social-icon {width:var(--step-8);height:var(--step-8);display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--neutral-300);color:var(--neutral-900);}
.footer .social-icon svg {width:60%;height:60%;fill:currentColor;}
.footer p {margin-top:var(--step-8);opacity:.7;}

/* -------------------------------- SUELTOS -------------------------------------------- */
.load-more {display:block;margin:var(--step-4) auto;padding:var(--step-1) var(--step-16);font-size:var(--step-3);font-weight:500;background:black;color:white;text-transform:uppercase;border-radius:var(--step-1);text-align:center;cursor:pointer;}
.load-more:hover {background:var(--neutral-700);}
.hidden {display:none!important;}

.avatar-with-blob {position: relative; display: inline-block;}
.avatar-with-blob.blob::after {content: ""; background: #ff0000; border-radius: 50%; position: absolute; bottom: 0; right: 3px; width: 6px; height: 6px; z-index: 10;}
.avatar-with-blob.blob:not(.has-unread-notifications)::after {display: none;}
.notification-count-badge {font-size: var(--step-3);color: #fff; padding: .03rem .5rem; border-radius: 3px; background-color: var(--accent-400);}


.loading-circles {position: relative; display: flex; justify-content: center; align-items: center; gap: var(--step-2); margin: var(--step-4) 0; width: 100%;}
.loading-circles::before {content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; pointer-events: none;}
.loading-circles span {position: relative; width: var(--step-2); height: var(--step-2); border-radius: 50%; background: var(--neutral-700); opacity: 0; animation: dots 1.5s infinite;}
.loading-circles span:nth-child(1) {animation-delay: 0s;}
.loading-circles span:nth-child(2) {animation-delay: 0.3s;}
.loading-circles span:nth-child(3) {animation-delay: 0.6s;}
@keyframes dots {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

/* -------------------------------- 404 -------------------------------------------- */

.error-404{display:flex;flex-direction:column;align-items:center;justify-content:center;padding: 1rem;text-align:center;width:100%;box-sizing:border-box;}
#id404{display:block;font-size:clamp(4rem,calc(15vw + 1rem),10rem);color:#555;font-weight:bold;user-select:none;line-height:1;margin:1rem 0;max-width:100%;overflow-wrap:break-word;}
.error-message{display:flex;flex-direction:column;text-align:center;}
.error-message h1,.error-message p{margin:8px 0;max-width: 500px;}
.error-404 .nav__search{padding:2rem;}
.load-more:hover{background-color:#555;}