/* ==========================================================================
   SITIO · base, cabecera con menú, y bloques de la portada
   Colores, tipografía y medidas: theme.css (variables). Aquí solo estructura.
   Componentes con su propio CSS: gallery.css (ImageGallery), video.css
   (VideoPlayer) y pages.css (páginas interiores).
   Orden: base, cabecera/menú, hero, highlights, nube de texto, pie.
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.5}
a{color:inherit;text-decoration:none}
/* Enlaces: sin subrayado en reposo; al pasar el cursor o enfocar con teclado se subrayan en --link-hover. El texto no cambia de color.
   Se excluyen las tarjetas (.tile, que giran), los botones (.btn) y el nombre del sitio (.nav__brand, que cambia de transparencia). */
a:not(.tile):not(.btn):not(.nav__brand):hover,a:not(.tile):not(.btn):not(.nav__brand):focus-visible{text-decoration:underline;text-decoration-color:var(--link-hover);text-decoration-thickness:2px;text-underline-offset:.25em}

/* ---------- Cabecera y menú ---------- */
/* Cabecera alineada con los bloques de página (ancho --hero-w): nombre del sitio arriba, y debajo el menú a la
   izquierda con el selector de idioma (.nav__lang) a la derecha. */
.site-head{width:var(--hero-w);margin:0 auto;padding:22px 0 0}
.nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px}
.nav__brand{margin-right:auto}
.nav__brand{font-size:var(--fs-brand);font-weight:var(--fw-brand);letter-spacing:.04em;text-decoration:none;color:var(--brand-color);transition:color .2s}
.nav__brand:hover,.nav__brand:focus-visible{color:var(--brand-hover)}
.nav__list{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.2vw,32px);margin:0;padding:0;list-style:none}
.nav__list a{display:block;padding:6px 0;font-size:var(--fs-menu);text-decoration:none;color:var(--ink);
             border-bottom:2px solid transparent}
.nav__list a[aria-current="page"]{color:var(--nav-active)}      /* página actual: color --nav-active (theme.css) */
.nav__list a:focus-visible,.nav__toggle:focus-visible,.nav__brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Botón hamburguesa: oculto en escritorio. Las tres barras se dibujan con un <span> y sus pseudo-elementos. */
.nav__toggle{display:none;appearance:none;border:0;background:none;padding:10px;cursor:pointer;color:var(--ink)}
.nav__bars,.nav__bars::before,.nav__bars::after{display:block;width:26px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav__bars{position:relative}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0}
.nav__bars::before{top:-8px}.nav__bars::after{top:8px}
.nav.is-open .nav__bars{background:transparent}
.nav.is-open .nav__bars::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__bars::after{top:0;transform:rotate(-45deg)}

/* Punto de corte móvil (760 px; ver --bp-mobile en theme.css). Todas las reglas móviles del sitio usan este valor. */
@media (max-width:760px){
  .site-head{width:100%;padding:22px var(--pad) 0}
  .nav__toggle{display:block}
  /* Menú desplegable bajo la barra, a todo el ancho */
  .nav__list{position:absolute;top:100%;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));z-index:20;display:none;
             flex-direction:column;gap:0;padding:8px var(--pad) 14px;background:var(--bg);border-bottom:1px solid var(--rule)}
  .nav.is-open .nav__list{display:flex}
  .nav__lang{margin-left:0;padding:12px 0}
  .nav__list a{padding:12px 0;font-size:var(--fs-menu-m);border-bottom:0}
}

/* ---------- Bloques centrales de la portada (anchura = --hero-w) ---------- */
.hero{width:var(--hero-w);margin:clamp(24px,4vw,48px) auto 0}      /* galería o vídeo elegido en hero.js */
.highlights{width:var(--hero-w);margin:clamp(32px,5vw,64px) auto 0}
.cloud{width:var(--hero-w);min-height:260px;margin:clamp(24px,4vw,48px) auto 0;display:flex;align-items:center;justify-content:center;
       border:1px dashed var(--dashed);color:var(--muted);font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase}
.site-foot{width:var(--hero-w);margin:clamp(40px,6vw,80px) auto 40px;color:var(--muted);font-size:var(--fs-small)}

/* Highlights (antes «aside») */
.highlights h2{margin:0 0 .6em;font-size:var(--fs-h2);font-weight:600;letter-spacing:var(--ls-h2);text-transform:uppercase;color:var(--muted)}
.highlights ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px clamp(18px,3vw,40px)}
.highlights a{display:inline-block;padding:4px 0;font-size:var(--fs-link-hl);text-decoration:none;border-bottom:1px solid var(--accent)}

/* En móvil los bloques ocupan todo el ancho; el margen lateral lo pone <main> (y el pie por su cuenta). */
@media (max-width:760px){
  .hero,.highlights,.cloud,.site-foot{width:100%}
  main{padding:0 var(--pad)}
  .site-foot{padding:0 var(--pad)}
}

/* Selector de idioma (último elemento del menú) */
.nav__lang{display:flex;align-items:center;gap:.45em;margin-left:auto;font-size:.9rem}   /* a la derecha de la fila del menú */
.nav__lang a{color:inherit;text-decoration:none;letter-spacing:.04em}
.nav__lang a[aria-current]{font-weight:700;color:var(--nav-active)}
@media (max-width:760px){ .nav__lang{margin-left:0;padding:12px 0} }   /* en el menú móvil, bajo los enlaces y a la izquierda */