/* Songs of Emora · estilo de la web. Marca: dorado + Cinzel (títulos), EB Garamond (texto y cursivas). */
@font-face { font-family: 'Cinzel'; src: url('../fonts/Cinzel-Variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-Variable.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-Italic-Variable.ttf') format('truetype'); font-style: italic; font-weight: 400 800; font-display: swap; }

:root {
  --noche: #10161a;      /* el fondo: el azul noche de "The world" (Diego 16/10) */
  --oro: #c9a86a;        /* el dorado de la marca */
  --oro-claro: #e2c992;
  --hueso: #f2ece0;      /* el blanco cálido del "of" */
  --suave: #a9a395;
  --linea: rgba(242, 236, 224, .18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--noche); color: var(--hueso); }
body { font-family: 'EB Garamond', Georgia, serif; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---- Barra de arriba ---- */
.barra { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; }
.marca { text-decoration: none; font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .12em; color: var(--oro); }
.marca i { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', 'EB Garamond', serif; font-style: italic; color: var(--hueso); letter-spacing: 0; text-transform: none; margin: 0 .15em; }
/* En la portada el título grande ya dice el nombre: la marca chica no hace falta */
.portada-completa .marca { opacity: 0; pointer-events: none; }

/* ---- Portada ---- */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.fondo, .fondo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fondo img { object-fit: cover; object-position: 50% 30%; }
.velo { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(16,22,26,.35) 0%, rgba(16,22,26,0) 25%, rgba(16,22,26,.15) 45%, rgba(16,22,26,.82) 78%, var(--noche) 100%); }
.contenido { position: relative; z-index: 2; text-align: center; padding: 0 16px 9vh; max-width: 980px; }

.titulo { font-family: 'Cinzel', serif; font-weight: 400; color: var(--oro); line-height: 1; letter-spacing: .04em;
  font-size: clamp(44px, 8.4vw, 116px); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
/* El 'of' como en el teaser: Palatino cursiva, 70 % del tamaño, apoyado en la MISMA línea que SONGS y EMORA */
.titulo i { font-family: 'Palatino Linotype', Palatino, 'Book Antiqua', 'EB Garamond', serif; font-style: italic; color: var(--hueso); letter-spacing: 0;
  font-size: .7em; margin: 0 .26em; position: static; vertical-align: baseline; }
.frase { margin-top: 26px; font-style: italic; font-size: clamp(20px, 2.4vw, 28px); color: var(--hueso); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.frase-es { margin-top: 4px; font-style: italic; font-size: clamp(16px, 1.8vw, 20px); color: var(--suave); }
.pronto { margin-top: 30px; font-family: 'Cinzel', serif; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .32em; color: var(--oro-claro); text-transform: uppercase; }
.pronto span { opacity: .6; }

/* ---- Botones de redes ---- */
.botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.boton { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--linea); border-radius: 999px;
  text-decoration: none; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; color: var(--hueso);
  background: rgba(16,22,26,.45); backdrop-filter: blur(6px); transition: border-color .2s, color .2s; }
.boton svg { width: 16px; height: 16px; fill: currentColor; }
.boton:hover, .boton:focus-visible { border-color: var(--oro); color: var(--oro-claro); outline: none; }

/* Botón principal dorado (ver el teaser) */
.boton.dorado { border-color: var(--oro); color: var(--oro-claro); padding: 12px 24px; font-size: 14px; }
.boton.dorado em { font-style: normal; opacity: .7; }

/* ---- Bloques de la página (teaser, el mundo, seguir) ---- */
.bloque { max-width: 1100px; margin: 0 auto; padding: 90px 16px 20px; }
.bloque.angosto { max-width: 760px; }
.bloque h2 { font-family: 'Cinzel', serif; font-weight: 400; color: var(--oro); letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 30px); text-align: center; margin-bottom: 30px; }
.bloque h2 small { display: block; font-family: 'EB Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0;
  color: var(--suave); font-size: .62em; margin-top: 4px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: #000; }
.video iframe, .video img, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video .aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(16,22,26,.45); font-family: 'Cinzel', serif; letter-spacing: .28em; text-transform: uppercase; font-size: 14px; color: var(--oro-claro); }
.video .aviso em { font-style: normal; opacity: .65; }
.video .aviso svg { width: 64px; height: 64px; fill: var(--hueso); padding: 18px; border: 1px solid var(--linea); border-radius: 50%; }
.par p { font-size: clamp(19px, 2vw, 23px); line-height: 1.6; text-align: center; }
.par p + p { margin-top: 18px; font-style: italic; color: var(--suave); font-size: clamp(17px, 1.7vw, 20px); }
.centro { text-align: center; }
.centro span { color: var(--suave); font-style: italic; }
#seguir .botones { margin-top: 24px; }

/* ==== TEMA "LAGO" (versión con teaser): la foto y los colores de la maqueta vieja de la web ====
   Fondos azul noche que alternan, verde agua para los acentos, letras color hueso. */
.tema-lago { --noche: #0b0f12; --noche2: #10161a; --panel: #141b20; --linea: #26323a; --hueso: #e8e3d8; --suave: #9aa6aa; --agua: #c9a86a; }   /* acento = el dorado de la marca (Diego 16/10: "no el celeste, me equivoqué") */
.tema-lago .marca { color: var(--oro); font-size: 19px; }   /* el logo chico, con los colores de la marca */
.tema-lago .marca i { color: var(--hueso); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tema-lago .lago-texto .frase { margin-top: 0; font-size: clamp(24px, 2.8vw, 34px); }
.lago { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; background: var(--noche); }
.lago-foto { position: absolute; top: 0; bottom: 0; right: 0; left: 32%; width: 68%; height: 100%; object-fit: cover; object-position: center 28%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.lago-texto { position: relative; z-index: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 120px 32px 80px; text-align: left; }
.tema-lago .titulo { color: var(--oro); font-weight: 600; letter-spacing: .12em; font-size: clamp(32px, 4.4vw, 62px); text-shadow: none; }
.tema-lago .titulo i { font-weight: 400; font-size: .5em; top: 0; margin: 0 .1em; color: var(--hueso); }
.tema-lago .frase { color: var(--agua); margin-top: 16px; text-shadow: none; }
.tema-lago .frase-es { color: var(--suave); }
.tema-lago .botones { justify-content: flex-start; }
/* El teaser en la portada, del lado izquierdo: Thalae, a la derecha, lo está mirando (idea de Diego, 16/10) */
.video.en-portada { width: min(600px, 50vw); margin-top: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.tema-lago .lago { min-height: 100vh; }
.tema-lago .boton.dorado { border-color: var(--agua); color: var(--hueso); background: rgba(201,168,106,.08); }
.tema-lago .boton.dorado:hover { color: var(--agua); }
.tema-lago .bloque { max-width: none; padding: 100px 16px; border-top: 1px solid var(--linea); }
.tema-lago .bloque > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.tema-lago .bloque.angosto > * { max-width: 760px; }
.tema-lago .bloque.alt { background: var(--noche2); }
.tema-lago .bloque h2 { color: var(--hueso); }
.tema-lago .bloque h2 small { color: var(--agua); }
.tema-lago .video { border-color: var(--linea); background: var(--panel); }
.tema-lago .video .aviso { color: var(--agua); }
.tema-lago .pie { background: var(--noche2); }
@media (max-width: 700px) {
  .lago { min-height: auto; display: block; padding: 0 0 56px; }
  .lago-foto { position: relative; left: 0; width: 100%; height: 95vw; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .lago-texto { margin-top: -18vw; padding: 0 16px; }
  .tema-lago .titulo { font-size: 9.5vw; letter-spacing: .06em; }
  .tema-lago .titulo span, .tema-lago .titulo i { display: inline; }
  .video.en-portada { width: 100%; }
  .tema-lago .lago { min-height: auto; }
  .tema-lago .bloque { padding: 64px 16px; }
}

/* ---- Pie ---- */
.pie { text-align: center; padding: 34px 16px 40px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 15px; }
.pie .redes { display: flex; gap: 18px; justify-content: center; margin-bottom: 16px; }
.pie .redes a { color: var(--suave); transition: color .2s; }
.pie .redes a:hover { color: var(--oro); }
.pie .redes svg { width: 20px; height: 20px; fill: currentColor; }
.pie .chico { margin-top: 6px; font-size: 13px; opacity: .7; }

/* ---- 404 ---- */
.perdido { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 120px 16px 60px; }
.perdido h1 { font-family: 'Cinzel', serif; font-weight: 400; color: var(--oro); font-size: clamp(36px, 6vw, 64px); }
.perdido p { color: var(--suave); }

/* ---- Celular ---- */
@media (max-width: 700px) {
  .barra { padding: 16px; }
  .fondo img { object-position: 50% 20%; }
  .contenido { padding-bottom: 7vh; }
  .titulo { letter-spacing: .02em; }
  .titulo span { display: block; }
  .titulo i { display: block; top: 0; margin: .08em 0 .1em; }
  .boton span:not(.siempre) { display: none; }  /* en el celular, sólo los íconos de las redes */
  .bloque { padding-top: 64px; }
  .boton { padding: 12px; }
  .boton svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Selector de idioma (EN | ES), arriba a la derecha ---- */
.idiomas { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; color: var(--suave); }
.idiomas a { text-decoration: none; color: var(--suave); padding: 6px 4px; transition: color .2s; }
.idiomas a:hover, .idiomas a:focus-visible { color: var(--hueso); outline: none; }
.idiomas a.activo { color: var(--oro); }
.idiomas span { opacity: .5; }