/* ernestoosuna.com · la barra, el titular del cielo y las secciones bajo las puertas (9 oct 2026, noche).
   Sin ventanas ni tarjetas: los objetos van sueltos sobre el papel; las divisiones son filetes finos. */

:root {
  --azul-hondo: #0F2A57;          /* el azul del titular del cielo y de la barra */
  --azul-hondo-2: #1B3B73;
  --filete: rgba(28, 31, 43, 0.14);
  --barra: 64px;
  --columna: min(1240px, calc(100vw - 2 * var(--margen-ancho)));
  --margen-ancho: clamp(20px, 5vw, 72px);
}
@media (max-width: 760px) { :root { --barra: 56px; } }

/* un idioma cada vez: los textos están en los dos y se enseña el elegido */
[data-idioma="es"] [lang="en"]:not(html):not(.termino), [data-idioma="en"] [lang="es"]:not(html):not(.termino) { display: none !important; }
.obra__traduccion { font-size: 0.62em; letter-spacing: 0; color: var(--tinta-suave); }

/* ---------- la barra ---------- */
#barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--barra);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding: 0 max(var(--margen-ancho), calc((100vw - 1240px) / 2));   /* alineada con la columna de las secciones */
  color: var(--tinta); font-family: var(--fuente-texto);
  transition: color .5s ease, background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
  border-bottom: 1px solid transparent;
}
#barra a { color: inherit; text-decoration: none; }
.barra__marca { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--fuente-titulo); font-size: 19px; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
.barra__marca svg { width: 22px; height: 22px; flex: none; overflow: visible; }
.barra__marca svg line { stroke: currentColor; stroke-width: 1.3; opacity: .55; }
.barra__marca svg circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.barra__marca b { font-weight: 500; }
.barra__marca span { font-weight: 300; opacity: .72; }
.barra__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; }
.barra__nav a { position: relative; padding: 6px 0; opacity: .86; transition: opacity .2s ease; }
.barra__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva); }
.barra__nav a:hover { opacity: 1; }
.barra__nav a:hover::after, .barra__nav a:focus-visible::after { transform: scaleX(1); }
.barra__idioma { display: inline-flex; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; }
.barra__idioma a { opacity: .5; }
.barra__idioma a[aria-current="true"] { opacity: 1; }
.barra__contacto {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px;
  background: var(--azul-hondo); color: #fff !important; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--curva);
}
.barra__contacto:hover { background: var(--azul-hondo-2); transform: translateY(-1px); }
#barra-menu { display: none; }

/* según lo que haya debajo */
#barra[data-sobre="papel-fondo"] { background: rgba(250, 248, 244, 0.94); border-bottom-color: var(--filete); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
#barra[data-sobre="cielo"] { color: var(--azul-hondo); }
#barra[data-sobre="tierra"] { color: rgba(250, 248, 244, 0.94); }
#barra[data-sobre="tierra"] .barra__contacto { background: rgba(250, 248, 244, 0.94); color: var(--humus) !important; }
/* en la portada, el nombre de la barra llega cuando el grande se va */
#barra[data-sobre="papel"] .barra__marca, #barra[data-sobre="papel-fondo"] .barra__marca { opacity: var(--plegado, 0); transition: opacity .2s linear; }
body.portada #cabecera { top: calc(var(--barra) + clamp(4px, 1.4vh, 16px)); opacity: calc(1 - var(--plegado, 0) * 1.7); }
/* en el paisaje el nombre va en la barra; el de la cabecera sobra, y «volver» también */
body.escena #cabecera, body.desplegando #cabecera, body.escena #volver { display: none; }
body.desplegando #barra { color: var(--azul-hondo); }
/* al bajar por la portada, las puertas se pliegan y se van antes, para que el perfil suba sobre papel limpio */
#umbral:not(.plegado) .puerta { opacity: calc(1.15 - var(--pliegue, 0) * 1.95); }
#umbral:not(.plegado) .panel { opacity: calc(1 - var(--pliegue, 0) * 1.6); }

/* pantallas estrechas: el nombre, la lengua y un botón que abre el menú a pantalla entera */
@media (max-width: 860px) {
  .barra__nav, .barra__contacto--ancho { display: none; }
  #barra-menu { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 600 12.5px/1 var(--fuente-texto); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  #barra.abierta { height: 100vh; height: 100dvh; align-items: flex-start; flex-wrap: wrap; align-content: flex-start; padding-top: 10px; background: var(--papel); color: var(--tinta); }
  #barra.abierta .barra__marca { opacity: 1; height: calc(var(--barra) - 20px); }
  #barra.abierta .barra__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; order: 3; margin-top: 8vh; font-family: var(--fuente-titulo); font-size: clamp(30px, 8vw, 44px); font-weight: 400; letter-spacing: -0.01em; }
  #barra.abierta .barra__nav a { opacity: 1; }
  #barra.abierta .barra__contacto--ancho { display: inline-flex; order: 4; margin-top: 4vh; }
}

/* ---------- el titular del cielo ---------- */
#cielo {
  position: fixed; left: 0; top: 0; z-index: 3; width: 100%;
  padding: 0 max(var(--margen-ancho), calc((100vw - 1240px) / 2)); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s;
  will-change: transform;
}
body.escena.cielo-listo #cielo { opacity: 1; visibility: visible; transition: opacity 1.4s ease .2s, visibility 0s; }
#cielo > * { opacity: var(--cielo-o, 1); }   /* se desvanece al subir hacia la barra (perfil.js), sin retraso */
body.escena.cielo-listo.hablando #cielo { opacity: 0; transition: opacity .6s ease; }
.cielo__antetitulo { margin: 0 0 10px; font: 600 12px/1.3 var(--fuente-texto); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(15, 42, 87, 0.78); }
.cielo__titular {
  margin: 0; max-width: 15.5em; font-family: var(--fuente-titulo); font-weight: 420;
  font-size: clamp(28px, 0.75rem + 2.55vw, 56px); line-height: 1.03; letter-spacing: -0.026em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; color: var(--azul-hondo); text-wrap: balance;
}
.cielo__titular em { font-style: italic; font-weight: 360; }
.cielo__entradilla { margin: 12px 0 0; max-width: 40em; font: 500 clamp(14.5px, 1.02vw, 17px)/1.5 var(--fuente-texto); color: var(--azul-hondo); text-wrap: pretty; text-shadow: 0 0 14px rgba(234, 244, 255, 0.55); }
.cielo__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; pointer-events: auto; }
.cielo__enlaces a { font: 600 13.5px/1 var(--fuente-texto); color: var(--azul-hondo); text-decoration: none; border-bottom: 1px solid rgba(15, 42, 87, 0.45); padding-bottom: 4px; }
.cielo__enlaces a:hover { border-bottom-color: var(--azul-hondo); }
.cielo__enlaces a.lleno { border: 0; padding: 12px 18px; border-radius: 999px; background: var(--azul-hondo); color: #fff; }
@media (max-width: 760px) {
  .cielo__titular { font-size: clamp(26px, 7.4vw, 36px); }
  .cielo__entradilla { font-size: 14.5px; }
}
/* en pantallas verticales, el titular vive bajo la hierba: claro sobre la tierra oscura */
#cielo.cielo--tierra .cielo__antetitulo { color: #F2C98A; }
#cielo.cielo--tierra .cielo__titular { color: var(--papel); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
#cielo.cielo--tierra .cielo__entradilla { color: rgba(250, 248, 244, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
/* en la portada vertical, el rótulo de ENASE va encima de su puerta, para no pisar el círculo */
#umbral.vertical .puerta--enase .puerta__rotulo { order: -1; padding: 0 0 10px; }

/* (5 nov) el aviso legal, a un clic desde cualquier punto del paseo: el último de la barra y más discreto */
.barra__nav a.barra__legal { font-size: 12px; font-weight: 400; opacity: .62; }
.barra__nav a.barra__legal:hover { opacity: 1; }