/* ============================================================
   GRILLI — "Hecho en Giaveno" (v4)
   De día: prado, madera, montaña, luz natural.
   Fondo claro (crema/papel). El verde oscuro solo en bloques puntuales.
   Un único acento cálido: el cobre.
   ============================================================ */

:root {
  --prado:   #5B7A3A;
  --bosque:  #2F4626;
  --nogal:   #7A5232;
  --roble:   #C99A64;
  --crema:   #F4ECDC;
  --papel:   #FBF7EE;
  --piedra:  #8C8A82;
  --cielo:   #D6E4EA;
  --cobre:   #B16A3C;
  --tinta:   #22261C;

  /* variantes para texto pequeño (contraste AA sobre crema/papel) */
  --cobre-hondo:  #8A4F2A;
  --piedra-texto: #5F5D55;

  --f-marca: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --suave: "SOFT" 100, "WONK" 1;
  --radio: 6px;
  --gutter: clamp(16px, 4vw, 64px);
  --ancho: 1240px;
  --lectura: 40rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textura de papel, muy suave */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.15 0 0 0 0 0.11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
body > .gm-mini, body > .gm-capa { position: fixed; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; border-radius: var(--radio); }

a { color: var(--cobre-hondo); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--cobre); }

:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--f-marca);
  font-weight: 450;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--bosque);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { margin: 0 0 1em; }

.gm-saltar {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--bosque);
  color: var(--papel);
  padding: .6em 1em;
  border-radius: var(--radio);
}
.gm-saltar:focus { left: 8px; }

.gm-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- logotipo (igual en todas las páginas) ---------- */
.gm-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--bosque);
  line-height: 1;
}
.gm-logo:hover { color: var(--bosque); }
.gm-logo-g {
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 650;
  font-size: 1.9rem;
  letter-spacing: -.035em;
  line-height: .86;
}
.gm-logo-sub {
  font-family: var(--f-texto);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: .45em;
  padding-left: .12em;
  opacity: .82;
}

/* ---------- selector de idioma ---------- */
.gm-idiomas { display: inline-flex; gap: 2px; }
.gm-idiomas button {
  font: 600 .74rem/1 var(--f-texto);
  letter-spacing: .08em;
  color: inherit;
  background: none;
  border: 0;
  padding: .55em .5em;
  min-width: 34px;
  min-height: 34px;
  cursor: pointer;
  opacity: .9;
  border-radius: var(--radio);
}
.gm-idiomas button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.gm-idiomas button:hover { opacity: 1; }

/* ---------- cabecera (todas menos la portada) ---------- */
.gm-cab {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 14px var(--gutter);
  background: var(--crema);
  color: var(--bosque);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.gm-cab.con-filete { border-bottom-color: rgba(140, 138, 130, .35); }
.gm-cab .gm-logo { margin-right: auto; }
.gm-nav ul { list-style: none; display: flex; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 0; }
.gm-nav a {
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 560;
  font-size: 1.05rem;
  color: var(--bosque);
  text-decoration: none;
  padding: .3em 0;
  border-bottom: 2px solid transparent;
}
.gm-nav a:hover { color: var(--cobre-hondo); }
.gm-nav a[aria-current="page"] { border-bottom-color: var(--cobre); }
.gm-menu-btn {
  display: none;
  font: 600 .95rem/1 var(--f-texto);
  color: var(--bosque);
  background: none;
  border: 1.5px solid var(--bosque);
  border-radius: 999px;
  padding: .6em 1.1em;
  cursor: pointer;
}

/* capa del menú en móvil: crema a pantalla completa con las palabras grandes */
.gm-capa {
  inset: 0;
  z-index: 80;
  background: var(--crema);
  color: var(--bosque);
  padding: 14px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.gm-capa[hidden] { display: none; }
.gm-capa-top { display: flex; align-items: center; justify-content: space-between; }
.gm-capa-cerrar {
  font: 600 .95rem/1 var(--f-texto);
  color: var(--bosque);
  background: none;
  border: 1.5px solid var(--bosque);
  border-radius: 999px;
  padding: .6em 1.1em;
  cursor: pointer;
}
.gm-palabras { list-style: none; margin: auto 0; padding: 32px 0; }
.gm-palabras a {
  display: inline-block;
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 600;
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--bosque);
  text-decoration: none;
}
.gm-palabras a:hover, .gm-palabras a[aria-current="page"] { color: var(--cobre-hondo); }

@media (max-width: 900px) {
  .gm-nav, .gm-cab > .gm-idiomas { display: none; }
  .gm-menu-btn { display: inline-block; }
}

/* ============================================================
   PORTADA — la puerta: una sola imagen-mundo, sin scroll
   ============================================================ */
.pagina-portada { background: var(--crema); }
.pagina-portada main { display: block; }
.gm-puerta {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
}
.gm-puerta-fondo { position: absolute; inset: 0; z-index: -2; }
.gm-puerta-fondo .gm-paisaje,
.gm-puerta-fondo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.gm-hierba { transition: transform .9s var(--ease); will-change: transform; }

/* sombra de tarde detrás del menú y de la línea, para que el crema se lea (AA) */
.gm-puerta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 100% 72%, rgba(34, 38, 28, .5), rgba(34, 38, 28, 0) 72%),
    radial-gradient(ellipse 60% 26% at 0% 100%, rgba(34, 38, 28, .42), rgba(34, 38, 28, 0) 80%);
}

.gm-puerta-logo {
  position: absolute;
  left: var(--gutter);
  top: clamp(18px, 4.5vh, 52px);
}
.gm-puerta-logo .gm-logo-g { font-size: clamp(4rem, 9vw, 9rem); }
.gm-puerta-logo .gm-logo-sub { font-size: clamp(.78rem, 1.05vw, 1rem); margin-top: .7em; padding-left: .3em; }

.gm-puerta > .gm-idiomas {
  position: absolute;
  right: var(--gutter);
  top: clamp(14px, 3.5vh, 40px);
  color: var(--bosque);
}

.gm-puerta-menu {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(104px, 17vh, 190px);
  text-align: right;
}
.gm-puerta-menu ul { list-style: none; margin: 0; padding: 0; }
.gm-puerta-menu a {
  position: relative;
  display: inline-block;
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 620;
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--crema);
  text-decoration: none;
  text-shadow: 0 1px 16px rgba(34, 38, 28, .45), 0 0 2px rgba(34, 38, 28, .25);
  transition: color .3s, transform .4s var(--ease);
}
.gm-puerta-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: 3px;
  border-radius: 2px;
  background: var(--cobre);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.gm-puerta-menu a:hover { color: #F2C9A4; transform: translateX(-4px); }
.gm-puerta-menu a:hover::after,
.gm-puerta-menu a:focus-visible::after { transform: scaleX(1); }

.gm-puerta-idea {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(22px, 4.5vh, 44px);
  max-width: 24em;
  margin: 0;
  font-family: var(--f-marca);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.35;
  color: var(--crema);
  text-shadow: 0 1px 10px rgba(34, 38, 28, .55);
}

.gm-torino {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 4vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font: 600 1rem/1 var(--f-texto);
  color: var(--crema);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(34, 38, 28, .5);
}
.gm-torino-disco {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cobre-hondo);
  color: var(--papel);
  box-shadow: 0 0 0 6px rgba(244, 236, 220, .18);
  transition: transform .4s var(--ease), background .3s;
}
.gm-torino:hover .gm-torino-disco { transform: scale(1.06); background: var(--cobre); }
.gm-torino svg { width: 18px; height: 18px; fill: currentColor; }
.gm-torino .ico-pausa { display: none; }
.gm-torino.sonando .ico-play { display: none; }
.gm-torino.sonando .ico-pausa { display: block; }

/* con foto real: todo en crema */
.gm-puerta.con-foto .gm-puerta-logo,
.gm-puerta.con-foto > .gm-idiomas { color: var(--crema); text-shadow: 0 1px 14px rgba(34, 38, 28, .45); }
.gm-puerta.con-foto::after {
  background:
    linear-gradient(180deg, rgba(34, 38, 28, .35), rgba(34, 38, 28, 0) 30%),
    radial-gradient(ellipse 46% 62% at 100% 72%, rgba(34, 38, 28, .5), rgba(34, 38, 28, 0) 72%),
    radial-gradient(ellipse 60% 26% at 0% 100%, rgba(34, 38, 28, .42), rgba(34, 38, 28, 0) 80%);
}

@media (max-width: 760px) {
  .gm-puerta::after {
    background: linear-gradient(0deg, rgba(34, 38, 28, .55), rgba(34, 38, 28, 0) 30%);
  }
  .gm-puerta-logo {
    left: 50%;
    transform: translateX(-50%);
    top: clamp(48px, 8vh, 72px);
    align-items: center;
  }
  .gm-puerta-logo .gm-logo-g { font-size: clamp(4rem, 21vw, 6rem); }
  .gm-puerta-logo .gm-logo-sub { padding-left: 0; }
  .gm-puerta > .gm-idiomas { left: 50%; right: auto; transform: translateX(-50%); top: 8px; }
  .gm-puerta-menu {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(clamp(48px, 8vh, 72px) + clamp(4rem, 21vw, 6rem) + 2.4rem);
    bottom: auto;
    text-align: center;
  }
  .gm-puerta-menu a {
    font-size: clamp(1.8rem, 8.6vw, 2.5rem);
    line-height: 1.12;
    color: var(--bosque);
    text-shadow: 0 0 18px rgba(251, 247, 238, .7);
  }
  .gm-puerta-menu a:hover { color: var(--cobre-hondo); transform: none; }
  .gm-puerta-menu a::after { transform-origin: center; }
  .gm-puerta.con-foto .gm-puerta-menu a { color: var(--crema); text-shadow: 0 1px 16px rgba(34, 38, 28, .55); }
  .gm-puerta-idea {
    left: var(--gutter);
    right: calc(var(--gutter) + 120px);
    bottom: 22px;
    font-size: 1rem;
  }
  .gm-torino { bottom: 18px; flex-direction: column-reverse; gap: .45em; font-size: .9rem; }
  .gm-torino-disco { width: 54px; height: 54px; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .gm-puerta-logo { top: 40px; }
  .gm-puerta-logo .gm-logo-g { font-size: 3.6rem; }
  .gm-puerta-menu { top: 150px; }
  .gm-puerta-menu a { font-size: 1.8rem; line-height: 1.05; }
}

/* ============================================================
   ESTRUCTURA DE PÁGINA
   ============================================================ */
.gm-envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.gm-seccion { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); }
.gm-seccion + .gm-seccion { padding-top: 0; }

.gm-kicker {
  font: 600 .78rem/1.2 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cobre-hondo);
  margin: 0 0 1.1em;
}

.gm-titular { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(28px, 4vw, 48px); }
.gm-titular h1 { margin: 0; }
.gm-titular .gm-sub {
  font-family: var(--f-marca);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.35;
  color: var(--nogal);
  max-width: 34em;
  margin: .8em 0 0;
}

/* foto ancha de cabecera */
.gm-banda {
  margin: 0 auto;
  max-width: calc(var(--ancho) + 2 * var(--gutter));
  padding: 0 var(--gutter);
}
.gm-banda img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.gm-banda figcaption { font-size: .82rem; color: var(--piedra-texto); margin-top: .6em; }
@media (max-width: 760px) { .gm-banda img { aspect-ratio: 4 / 3; } }

.gm-cuerpo { max-width: var(--lectura); font-size: 1.12rem; }
.gm-cuerpo p { margin-bottom: 1.1em; }

.gm-boton {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font: 600 1rem/1 var(--f-texto);
  text-decoration: none;
  color: var(--papel);
  background: var(--cobre-hondo);
  border: 0;
  border-radius: 999px;
  padding: .95em 1.5em;
  cursor: pointer;
  transition: background .3s;
}
.gm-boton:hover { background: #73411F; color: var(--papel); }
.gm-boton-linea { color: var(--bosque); background: none; box-shadow: inset 0 0 0 1.5px var(--bosque); }
.gm-boton-linea:hover { color: var(--papel); background: var(--bosque); }

.gm-flecha {
  display: inline-block;
  justify-self: start;
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 560;
  font-size: 1.15rem;
  color: var(--bosque);
  text-decoration: none;
  border-bottom: 2px solid var(--cobre);
  padding-bottom: .1em;
}
.gm-flecha:hover { color: var(--cobre-hondo); }

/* bloque de puente (verde oscuro puntual) */
.gm-puente {
  background: var(--bosque);
  color: var(--crema);
  border-radius: var(--radio);
  padding: clamp(32px, 6vw, 72px);
  display: grid;
  gap: 1.2em;
  align-items: center;
  grid-template-columns: 1fr auto;
}
.gm-puente h2 { color: var(--crema); margin: 0; }
.gm-puente .gm-flecha { color: var(--crema); }
.gm-puente .gm-flecha:hover { color: #F2C9A4; }
@media (max-width: 760px) { .gm-puente { grid-template-columns: 1fr; } }

/* ============================================================
   MÚSICA — portfolio de portadas
   ============================================================ */
.gm-obras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 44px);
}
@media (min-width: 900px) { .gm-obras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .gm-obras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gm-obra a {
  display: block;
  color: var(--tinta);
  text-decoration: none;
}
.gm-obra-arte {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--papel);
}
.gm-obra-arte img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s var(--ease); }
.gm-obra a:hover .gm-obra-arte img { transform: scale(1.035); }
.gm-obra-marca {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(251, 247, 238, .92);
  color: var(--bosque);
}
.gm-obra-marca svg { width: 14px; height: 14px; fill: currentColor; }
.gm-obra h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  margin: .8em 0 .15em;
  color: var(--bosque);
}
.gm-obra a:hover h2 { color: var(--cobre-hondo); }
.gm-obra-meta { font-size: .86rem; color: var(--piedra-texto); margin: 0; }

/* ficha de la canción (panel) */
.gm-ficha {
  width: min(980px, calc(100vw - 2 * 16px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  overflow: auto;
}
.gm-ficha::backdrop { background: rgba(34, 38, 28, .55); }
.gm-ficha-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(20px, 4vw, 48px);
}
.gm-ficha-arte img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gm-ficha h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: .2em; }
.gm-ficha-meta { color: var(--piedra-texto); font-size: .95rem; margin-bottom: 1.2em; }
.gm-ficha-nota {
  font-family: var(--f-marca);
  font-style: italic;
  color: var(--nogal);
  font-size: 1.1rem;
}
.gm-ficha-texto { font-size: 1.08rem; }
.gm-ficha-cerrar {
  position: sticky;
  top: 10px;
  float: right;
  margin: 10px 10px -50px 0;
  z-index: 2;
  font: 600 .9rem/1 var(--f-texto);
  color: var(--bosque);
  background: var(--papel);
  border: 1.5px solid var(--bosque);
  border-radius: 999px;
  padding: .6em 1em;
  cursor: pointer;
}
@media (max-width: 760px) {
  .gm-ficha-in { grid-template-columns: 1fr; padding-top: 64px; }
}

.gm-creditos { margin: 1.4em 0; padding: 1em 0 0; border-top: 1px solid rgba(140, 138, 130, .4); display: grid; gap: .35em; }
.gm-creditos div { display: flex; flex-wrap: wrap; gap: .1em .6em; }
.gm-creditos dt { font-weight: 600; color: var(--bosque); }
.gm-creditos dt::after { content: ":"; }
.gm-creditos dd { margin: 0; }

.gm-plataformas { list-style: none; display: flex; flex-wrap: wrap; gap: .6em; margin: 1em 0 0; padding: 0; }
.gm-plataformas a {
  display: inline-block;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bosque);
  box-shadow: inset 0 0 0 1.5px var(--bosque);
  border-radius: 999px;
  padding: .55em 1em;
}
.gm-plataformas a:hover { background: var(--bosque); color: var(--papel); }

/* reproductor */
.gm-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 1.2em 0;
}
.gm-player-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--cobre-hondo);
  color: var(--papel);
  cursor: pointer;
}
.gm-player-btn:hover { background: #73411F; }
.gm-player-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ico-pausa { display: none; }
.sonando > .gm-player-btn .ico-play, .gm-mini.sonando .ico-play { display: none; }
.sonando > .gm-player-btn .ico-pausa, .gm-mini.sonando .ico-pausa { display: block; }
.gm-player-pista { padding: 12px 0; cursor: pointer; }
.gm-player-riel { height: 4px; background: rgba(140, 138, 130, .35); border-radius: 2px; overflow: hidden; }
.gm-player-avance { height: 100%; width: 0; background: var(--prado); }
.gm-player-tiempo { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--piedra-texto); }

/* ============================================================
   MIRAR — vídeos grandes
   ============================================================ */
.gm-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 40px);
}
@media (min-width: 900px) {
  .gm-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-video.es-grande { grid-column: 1 / -1; }
}
.gm-video { margin: 0; scroll-margin-top: 96px; }
.gm-video-marco {
  aspect-ratio: 16 / 9;
  background: var(--tinta);
  border-radius: var(--radio);
  overflow: hidden;
}
.gm-video-marco video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: var(--tinta); }
.gm-video figcaption { margin-top: 1em; }
.gm-video h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 .15em; }
.gm-video.es-grande h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.gm-video-tipo { font-size: .9rem; color: var(--piedra-texto); margin: 0; }
.gm-video .gm-creditos { border-top: 0; padding-top: 0; margin: .6em 0 0; font-size: .95rem; }

/* ============================================================
   EL DISCO — Hecho en Giaveno
   ============================================================ */
.gm-disco-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
.gm-disco-vista {
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
}
.gm-disco-vista .gm-paisaje, .gm-disco-vista img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 860px) { .gm-disco-intro { grid-template-columns: 1fr; } }

.gm-diario { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(32px, 5vw, 56px); }
.gm-entrada a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  color: var(--tinta);
  text-decoration: none;
}
.gm-entrada.sin-foto a { grid-template-columns: 1fr; }
.gm-entrada img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gm-entrada time { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cobre-hondo); }
.gm-entrada h3 { margin: .3em 0 .35em; }
.gm-entrada a:hover h3 { color: var(--cobre-hondo); }
@media (max-width: 700px) { .gm-entrada a { grid-template-columns: 1fr; } }

.gm-lista-disco { list-style: none; counter-reset: pista; margin: 0; padding: 0; max-width: var(--lectura); }
.gm-lista-disco li {
  counter-increment: pista;
  display: flex;
  gap: 1em;
  align-items: baseline;
  padding: .9em 0;
  border-bottom: 1px solid rgba(140, 138, 130, .4);
  font-family: var(--f-marca);
  font-size: 1.3rem;
}
.gm-lista-disco li::before { content: counter(pista, decimal-leading-zero); font: 600 .85rem var(--f-texto); color: var(--piedra-texto); }
.gm-lista-disco span { margin-left: auto; font: .85rem var(--f-texto); color: var(--piedra-texto); }

/* ============================================================
   INVENCIBLE
   ============================================================ */
.gm-invencible { background: var(--papel); }
.gm-libro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.gm-libro-arte img { width: 100%; max-width: 520px; }
.gm-libro-arte.es-cuadrada img { aspect-ratio: 1; object-fit: cover; }
.gm-libro h1 { margin-bottom: .3em; }
.gm-edicion { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(47, 70, 38, .35); margin-bottom: 1.6em; }
.gm-edicion button {
  font: 600 .92rem/1 var(--f-texto);
  border: 0;
  border-radius: 999px;
  padding: .7em 1.2em;
  background: none;
  color: var(--bosque);
  cursor: pointer;
}
.gm-edicion button[aria-pressed="true"] { background: var(--bosque); color: var(--papel); }
.gm-cita {
  margin: 0 0 1.2em;
  font-family: var(--f-marca);
  font-variation-settings: "SOFT" 100;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: var(--nogal);
}
.gm-cita p { margin: 0; }
.gm-para-quien { margin: 2em 0; padding-top: 1.4em; border-top: 1px solid rgba(140, 138, 130, .4); }
.gm-para-quien h2 { font-size: 1.35rem; }
.gm-formato { font-size: .9rem; color: var(--piedra-texto); margin-top: .9em; }
.gm-union {
  text-align: center;
  font-family: var(--f-marca);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  color: var(--bosque);
  max-width: 22em;
  margin: 0 auto;
}
@media (max-width: 800px) { .gm-libro { grid-template-columns: 1fr; } .gm-libro-arte img { max-width: 360px; margin: 0 auto; } }

/* ============================================================
   HISTORIA — escenas con línea de tiempo fina
   ============================================================ */
.gm-linea { list-style: none; margin: 0; padding: 0; position: relative; }
.gm-linea::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--piedra);
}
.gm-escena {
  position: relative;
  padding: 0 0 clamp(48px, 7vw, 88px) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1em 3em;
}
.gm-escena::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--crema);
  box-shadow: inset 0 0 0 2px var(--prado);
}
.gm-escena:last-child::before { background: var(--prado); }
.gm-escena-lugar { font: 600 .8rem/1.4 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cobre-hondo); margin: 0 0 .6em; }
.gm-escena-texto {
  font-family: var(--f-marca);
  font-variation-settings: "SOFT" 80;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.3;
  color: var(--bosque);
  max-width: 28em;
}
.gm-escena-texto p { margin: 0 0 .5em; }
.gm-escena .gm-flecha { margin-top: .6em; display: inline-block; }
.gm-escena.con-foto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.gm-escena-foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gm-escena-foto figcaption { font-size: .82rem; color: var(--piedra-texto); margin-top: .5em; }
@media (max-width: 800px) { .gm-escena.con-foto { grid-template-columns: 1fr; } }
.gm-escena-foto-alta img { aspect-ratio: 4 / 5; max-height: 70vh; object-position: 50% 30%; }

/* Historia · Del archivo: rejilla de fotos viradas (datos en $gm_archivo) */
.gm-archivo { padding-top: 0; }
.gm-archivo h2 { margin: 0 0 1em; }
.gm-archivo-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 26vw, 380px);
  gap: clamp(10px, 1.4vw, 18px);
}
.gm-archivo-rejilla figure { margin: 0; overflow: hidden; border-radius: 6px; }
.gm-archivo-rejilla figure.ancha { grid-column: span 2; }
.gm-archivo-rejilla img { width: 100%; height: 100%; object-fit: cover; object-position: var(--enfoque, 50% 50%); }
@media (max-width: 760px) {
  .gm-archivo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52vw; grid-auto-flow: dense; }
}

/* ============================================================
   CONTACTO
   ============================================================ */
.gm-contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}
.gm-contacto-foto { position: relative; margin: 0; }
.gm-contacto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
.gm-contacto-texto { padding: clamp(40px, 7vw, 104px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.gm-contacto-texto h1 { margin-bottom: .5em; }
.gm-escribir { list-style: none; margin: 0 0 2.4em; padding: 0; }
.gm-escribir a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: .55em 0;
  border-bottom: 1px solid rgba(140, 138, 130, .45);
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 560;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--bosque);
  text-decoration: none;
}
.gm-escribir a::after { content: "→"; font-family: var(--f-texto); font-size: .7em; color: var(--cobre); transition: transform .3s var(--ease); }
.gm-escribir a:hover { color: var(--cobre-hondo); }
.gm-escribir a:hover::after { transform: translateX(6px); }
.gm-redes-grandes { list-style: none; margin: 0 0 2em; padding: 0; display: flex; flex-wrap: wrap; gap: .2em 1.2em; }
.gm-redes-grandes a {
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--nogal);
  text-decoration: none;
}
.gm-redes-grandes a:hover { color: var(--cobre-hondo); text-decoration: underline; }
.gm-nota-pro { font-size: .95rem; color: var(--piedra-texto); }
@media (max-width: 860px) {
  .gm-contacto { grid-template-columns: 1fr; min-height: 0; }
  .gm-contacto-foto { aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; }
}

/* ============================================================
   INDUSTRY / SYNC
   ============================================================ */
.gm-industry .gm-titular h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 14em; }
.gm-filtros { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 2em; padding: 0; list-style: none; }
.gm-filtros button {
  font: 600 .88rem/1 var(--f-texto);
  border: 0;
  border-radius: 999px;
  padding: .6em 1em;
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(47, 70, 38, .4);
  color: var(--bosque);
  cursor: pointer;
}
.gm-filtros button[aria-pressed="true"] { background: var(--bosque); color: var(--papel); }
.gm-pistas { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(140, 138, 130, .45); }
.gm-pista {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 8px 28px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(140, 138, 130, .45);
}
.gm-pista[hidden] { display: none; }
.gm-pista h3 { margin: 0; font-size: 1.3rem; }
.gm-pista-version { font-size: .88rem; color: var(--piedra-texto); margin: .2em 0 0; }
.gm-pista .gm-player { margin: 0; }
.gm-pista-datos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3em 1.4em; margin: 0; font-size: .88rem; }
.gm-pista-datos div { display: flex; gap: .4em; }
.gm-pista-datos dt { color: var(--piedra-texto); }
.gm-pista-datos dd { margin: 0; font-weight: 500; }
@media (max-width: 760px) { .gm-pista { grid-template-columns: 1fr; } }
.gm-clave { max-width: 30rem; }
.gm-clave input[type="password"] {
  font: 1rem var(--f-texto);
  padding: .8em 1em;
  border: 1.5px solid var(--piedra);
  border-radius: var(--radio);
  background: var(--papel);
  width: 100%;
  margin: .4em 0 1em;
}
.gm-clave input[type="submit"] {
  font: 600 1rem/1 var(--f-texto);
  color: var(--papel);
  background: var(--cobre-hondo);
  border: 0;
  border-radius: 999px;
  padding: .95em 1.5em;
  cursor: pointer;
}

/* entrada del diario (single) */
.gm-articulo .gm-cuerpo img { margin: 1.4em 0; }
.gm-articulo .gm-cuerpo h2 { font-size: 1.8rem; margin-top: 1.4em; }

/* ============================================================
   PIE — verde bosque
   ============================================================ */
.gm-pie { background: var(--bosque); color: var(--crema); margin-top: clamp(56px, 8vw, 104px); }
.gm-pie-in { max-width: var(--ancho); margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) 32px; }
.gm-pie-idea {
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  max-width: 18em;
  margin: 0 0 .5em;
}
.gm-pie-lugar { color: #E3C49A; margin: 0 0 2.4em; }
.gm-pie-redes { list-style: none; margin: 0 0 2.4em; padding: 0; display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
.gm-pie a { color: var(--crema); }
.gm-pie a:hover { color: #F2C9A4; }
.gm-pie-redes a { text-decoration: none; font-weight: 500; }
.gm-pie-redes a:hover { text-decoration: underline; }
.gm-pie-fino { display: flex; flex-wrap: wrap; gap: .4em 1.4em; font-size: .85rem; color: rgba(244, 236, 220, .78); margin: 0; padding-top: 1.4em; border-top: 1px solid rgba(244, 236, 220, .18); }
.gm-pie-fino + .gm-pie-fino { border-top: 0; padding-top: .6em; }

/* ============================================================
   MINI REPRODUCTOR
   ============================================================ */
.gm-mini {
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: min(360px, calc(100vw - 32px));
  padding: 10px 12px 10px 10px;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(140, 138, 130, .35), 0 10px 30px rgba(34, 38, 28, .14);
}
.gm-mini[hidden] { display: none; }
.gm-mini-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--cobre-hondo);
  color: var(--papel);
  cursor: pointer;
}
.gm-mini-btn svg { width: 14px; height: 14px; fill: currentColor; }
.gm-mini-titulo { display: block; font-family: var(--f-marca); font-weight: 560; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-mini-riel { height: 3px; margin-top: 5px; background: rgba(140, 138, 130, .35); border-radius: 2px; overflow: hidden; }
.gm-mini-avance { height: 100%; width: 0; background: var(--prado); }
.gm-mini-tiempo { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--piedra-texto); }
.gm-mini-cerrar {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--piedra-texto);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.gm-mini-cerrar:hover { background: var(--crema); color: var(--tinta); }

/* ============================================================
   MOVIMIENTO — aparición suave al hacer scroll
   ============================================================ */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.visto { opacity: 1; transform: none; }
.gm-humo { animation: humo 6s ease-in-out infinite; transform-origin: bottom; }
@keyframes humo { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: .28; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* el logotipo de la portada es el H1 */
h1.gm-puerta-logo { margin: 0; font-size: inherit; }

/* ?captura en la URL: sin animaciones (revisión y pantallazos) */
.captura .rv, .js.captura .rv { opacity: 1; transform: none; transition: none; }

/* ============================================================
   PORTADA 3D — el prado de Giaveno a la hora dorada
   Imagen fija primero; el canvas aparece encima con fundido.
   ============================================================ */
.gm-puerta-3d { background: #3B4630; }
.gm-puerta-3d .gm-escena { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #6F7A63; }
.gm-escena-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; border-radius: 0; }
.gm-puerta-3d .gm-escena canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--ease); }
.gm-puerta-3d .gm-escena.lista canvas { opacity: 1; }
.gm-puerta-3d .gm-escena.lista .gm-escena-poster { visibility: hidden; transition: visibility 0s 1.5s; }

/* degradados oscuros suaves donde va el texto (AA) */
.gm-puerta-3d::after {
  background:
    linear-gradient(180deg, rgba(28, 30, 22, .48), rgba(28, 30, 22, 0) 26%),
    radial-gradient(ellipse 44% 70% at 100% 50%, rgba(28, 30, 22, .52), rgba(28, 30, 22, 0) 74%),
    linear-gradient(0deg, rgba(28, 30, 22, .55), rgba(28, 30, 22, 0) 24%);
}
.gm-puerta-3d .gm-puerta-logo,
.gm-puerta-3d > .gm-idiomas { color: var(--crema); text-shadow: 0 1px 14px rgba(28, 30, 22, .4); }
.gm-logo-firma { height: 2.2em; width: auto; margin-top: .4em; filter: drop-shadow(0 1px 8px rgba(28, 30, 22, .4)); border-radius: 0; }

.gm-puerta-3d .gm-puerta-menu { top: 50%; bottom: auto; transform: translateY(-50%); }
.gm-puerta-3d .gm-puerta-menu a { color: var(--crema); }

.gm-puerta-pie {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(22px, 4.5vh, 44px);
  max-width: 26em;
}
.gm-puerta-3d .gm-puerta-idea { position: static; margin: 0 0 .5em; }
.gm-puerta-creditos {
  font-size: .78rem;
  letter-spacing: .06em;
  color: rgba(244, 236, 220, .82);
  text-decoration: none;
}
.gm-puerta-creditos:hover { color: var(--crema); text-decoration: underline; }

/* etiqueta "Música" sobre el piano */
.gm-escena-etiqueta {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  pointer-events: none;
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bosque);
  background: rgba(251, 247, 238, .94);
  padding: .4em .9em;
  border-radius: 999px;
  opacity: 0;
  margin-top: -10px;
  transition: opacity .35s, margin-top .35s var(--ease);
}
.gm-escena-etiqueta.visible { opacity: 1; margin-top: -16px; }

.gm-giro {
  position: absolute;
  right: calc(var(--gutter) + 72px);
  bottom: clamp(26px, 4.6vh, 48px);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(244, 236, 220, .7);
  background: rgba(28, 30, 22, .25);
  color: var(--crema);
  cursor: pointer;
}
.gm-giro[hidden] { display: none; }
.gm-giro svg { width: 20px; height: 20px; }

.modo-poster .gm-puerta-3d > :not(.gm-escena),
.modo-poster .gm-puerta-3d::after,
.modo-poster .gm-mini { display: none !important; }
.modo-poster .gm-puerta-3d .gm-escena canvas { transition: none; }

@media (max-width: 760px) {
  .gm-puerta-3d {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--crema);
  }
  .gm-puerta-3d::after { display: none; }
  .gm-puerta-3d .gm-escena {
    position: relative;
    inset: auto;
    z-index: 0;
    height: 56vh;
    height: 56svh;
    min-height: 340px;
    flex: none;
  }
  .gm-puerta-3d .gm-escena::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(28, 30, 22, .5), rgba(28, 30, 22, 0) 34%),
      linear-gradient(0deg, rgba(28, 30, 22, .35), rgba(28, 30, 22, 0) 22%);
  }
  .gm-escena-poster img { object-position: 50% 100%; }
  .gm-puerta-3d .gm-puerta-logo { z-index: 3; }
  .gm-puerta-3d > .gm-idiomas { z-index: 3; }
  .gm-puerta-3d .gm-puerta-menu {
    position: static;
    transform: none;
    text-align: center;
    padding: 16px var(--gutter) 4px;
  }
  .gm-puerta-3d .gm-puerta-menu a {
    color: var(--bosque);
    text-shadow: none;
    font-size: clamp(1.8rem, 8.4vw, 2.4rem);
  }
  .gm-puerta-3d .gm-puerta-menu a:hover { color: var(--cobre-hondo); }
  .gm-puerta-pie {
    position: static;
    max-width: none;
    text-align: center;
    padding: 10px var(--gutter) 28px;
    margin-top: auto;
  }
  .gm-puerta-3d .gm-puerta-idea { color: var(--nogal); text-shadow: none; }
  .gm-puerta-creditos { color: var(--piedra-texto); }
  .gm-puerta-3d .gm-torino {
    top: calc(max(56svh, 340px) - 74px);
    bottom: auto;
    flex-direction: row-reverse;
  }
  .gm-giro { top: calc(max(56svh, 340px) - 62px); bottom: auto; right: auto; left: var(--gutter); }
}

/* CRÉDITOS */
.gm-recursos { list-style: none; margin: 0; padding: 0; max-width: 46rem; border-top: 1px solid rgba(140, 138, 130, .45); }
.gm-recursos li { padding: 1.6em 0; border-bottom: 1px solid rgba(140, 138, 130, .45); }
.gm-recursos .gm-kicker { margin-bottom: .5em; }
.gm-recursos h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 .35em; }
.gm-recurso-datos { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin: 0; font-size: .95rem; color: var(--piedra-texto); }
.gm-licencia { font-weight: 600; color: var(--bosque); }
.gm-recurso-nota { font-size: .92rem; color: var(--piedra-texto); margin: .5em 0 0; }

/* ============================================================
   MÚSICA — "La cordillera" (atardecer en el prado)
   ============================================================ */
.pagina-musica { background: #18211A; color: var(--crema); }
.pagina-musica .gm-pie { margin-top: 0; }
.gm-sonar {
  --tono: rgb(120, 140, 90);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 66px);
  min-height: calc(100svh - 66px);
  padding: clamp(24px, 4vw, 48px) 0 0;
  display: flex;
  flex-direction: column;
  background: #18211A;
}
/* el color de la portada tiñe el aire, muy suave */
.gm-sonar::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background: radial-gradient(ellipse 55% 45% at 50% 38%, var(--tono), transparent 70%);
  opacity: .32;
  filter: blur(30px);
  transition: background 1.2s var(--ease);
}
.gm-luciernagas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; border-radius: 0; }
.gm-sonar-cab { text-align: center; padding: 0 var(--gutter); }
.gm-sonar-cab h1 {
  font-size: clamp(.9rem, 1.2vw, 1rem);
  font-family: var(--f-texto);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--roble);
  margin: 0 0 .5em;
}
.gm-sonar-ayuda { font-size: .92rem; color: rgba(244, 236, 220, .72); margin: 0; }

.gm-sonar-escenario {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 3vw, 48px);
  padding: clamp(18px, 3vw, 36px) var(--gutter) 0;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}
.gm-sonar-flecha {
  width: clamp(48px, 5vw, 68px);
  height: clamp(48px, 5vw, 68px);
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--cobre-hondo);
  color: var(--papel);
  cursor: pointer;
  box-shadow: 0 0 0 5px rgba(201, 154, 100, .18);
  transition: transform .3s var(--ease), background .3s;
}
.gm-sonar-flecha:hover { background: var(--cobre); transform: scale(1.06); }
.gm-sonar-flecha svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.gm-obra-sonar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.gm-obra-sonar[hidden] { display: none; }
.gm-obra-sonar.entra .gm-obra-arte-3d { animation: entraArte .7s var(--ease); }
.gm-obra-sonar.entra .gm-obra-datos { animation: entraDatos .7s .08s var(--ease) backwards; }
@keyframes entraArte { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes entraDatos { from { opacity: 0; transform: translateX(14px); } }

.gm-obra-arte-3d {
  justify-self: end;
  width: min(100%, 520px);
  perspective: 900px;
  transition: transform .5s var(--ease);
  transform-style: preserve-3d;
}
.gm-portada-sonora, .gm-portada-camino {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radio);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(244, 236, 220, .08);
}
.gm-portada-sonora img, .gm-portada-camino svg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); display: block; }
.gm-portada-camino { overflow: hidden; }
.gm-portada-sello {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(251, 247, 238, .92);
  color: var(--bosque);
  transition: transform .3s var(--ease);
}
.gm-portada-sonora:hover .gm-portada-sello { transform: scale(1.08); }
.gm-portada-sello svg { width: 18px; height: 18px; fill: currentColor; }
.gm-portada-sonora.sonando .ico-play { display: none; }
.gm-portada-sonora.sonando .ico-pausa { display: block; }
/* ondas de sonido sobre la portada mientras suena */
.gm-portada-onda { position: absolute; left: 18px; bottom: 22px; display: flex; gap: 4px; align-items: flex-end; height: 26px; opacity: 0; transition: opacity .3s; }
.gm-portada-onda i { width: 4px; height: 30%; border-radius: 2px; background: var(--papel); animation: onda 1s ease-in-out infinite; }
.gm-portada-onda i:nth-child(2) { animation-delay: .15s; } .gm-portada-onda i:nth-child(3) { animation-delay: .3s; }
.gm-portada-onda i:nth-child(4) { animation-delay: .45s; } .gm-portada-onda i:nth-child(5) { animation-delay: .6s; }
@keyframes onda { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.gm-portada-sonora.sonando .gm-portada-onda { opacity: 1; }

.gm-obra-datos { max-width: 30rem; }
.gm-obra-tipo { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--roble); margin: 0 0 .7em; }
.gm-obra-datos h2 { color: var(--crema); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 .35em; font-variation-settings: var(--suave); font-weight: 560; }
.gm-obra-nota { color: rgba(244, 236, 220, .78); margin: 0 0 1.2em; }
.gm-obra-acciones { display: flex; flex-wrap: wrap; gap: .6em; margin: 1.2em 0 1em; }
.gm-boton-crema { background: var(--crema); color: var(--bosque); }
.gm-boton-crema:hover { background: var(--papel); color: var(--bosque); }
.gm-boton-linea-crema { background: none; color: var(--crema); box-shadow: inset 0 0 0 1.5px rgba(244, 236, 220, .7); }
.gm-boton-linea-crema:hover { background: rgba(244, 236, 220, .12); color: var(--crema); }
.gm-boton[hidden] { display: none; }
.gm-spotify-hueco { margin: 0 0 1em; }
.gm-spotify-hueco iframe { width: 100%; border: 0; border-radius: 12px; display: block; }
.gm-obra-plataformas { list-style: none; display: flex; flex-wrap: wrap; gap: .3em 1.2em; margin: 0 0 1em; padding: 0; font-size: .9rem; }
.gm-obra-plataformas a { color: rgba(244, 236, 220, .82); text-decoration: none; }
.gm-obra-plataformas a:hover { color: var(--crema); text-decoration: underline; }
.gm-obra-canciones { border-top: 1px solid rgba(244, 236, 220, .16); padding-top: .8em; }
.gm-obra-canciones summary { cursor: pointer; font-weight: 600; color: var(--crema); font-size: .95rem; }
.gm-obra-canciones ol { list-style: none; margin: .6em 0 0; padding: 0; max-height: 15.5rem; overflow-y: auto; counter-reset: c; }
.gm-obra-canciones li { display: flex; justify-content: space-between; align-items: center; gap: 1em; border-bottom: 1px solid rgba(244, 236, 220, .08); }
.gm-obra-canciones li button, .gm-obra-canciones li > span:first-child {
  flex: 1; text-align: left; background: none; border: 0; color: rgba(244, 236, 220, .88);
  font: 400 .95rem/1.3 var(--f-texto); padding: .5em 0; cursor: pointer; display: flex; gap: .7em; align-items: center;
}
.gm-obra-canciones li button:hover, .gm-obra-canciones li button.sonando { color: var(--crema); }
.gm-cancion-ico { font-size: .62rem; color: var(--roble); width: 1em; }
.gm-obra-canciones li button.sonando .gm-cancion-ico { color: var(--cobre); }
.gm-cancion-dur { font-size: .82rem; color: rgba(244, 236, 220, .5); font-variant-numeric: tabular-nums; }

/* LA CORDILLERA */
.gm-cordillera { position: relative; margin-top: clamp(24px, 4vw, 48px); height: clamp(150px, 16vw, 210px); }
.gm-cordillera-perfil { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.gm-cordillera-fondo { fill: #233221; }
.gm-cordillera-frente { fill: #2F4626; stroke: rgba(201, 154, 100, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gm-nieve { fill: rgba(244, 236, 220, .85); }
.gm-nieve.es-camino { fill: none; stroke: rgba(244, 236, 220, .75); stroke-dasharray: 3 3; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gm-cimas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gm-cimas li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.gm-cima { position: relative; display: block; width: 34px; height: 34px; text-decoration: none; color: var(--crema); }
.gm-cima-punto {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--crema); transition: transform .3s var(--ease), background .3s, box-shadow .3s;
}
.gm-cima.es-camino .gm-cima-punto { background: transparent; box-shadow: inset 0 0 0 2px var(--crema); }
.gm-cima:hover .gm-cima-punto { transform: scale(1.5); }
.gm-cima[aria-current="true"] .gm-cima-punto { background: var(--cobre); transform: scale(1.7); box-shadow: 0 0 0 5px rgba(177, 106, 60, .3), 0 0 18px 4px rgba(246, 213, 142, .45); }
.gm-cima-nombre, .gm-cima-anio {
  position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  transition: opacity .3s, color .3s;
}
.gm-cima-nombre { bottom: calc(100% + 2px); font-family: var(--f-marca); font-size: .92rem; font-weight: 560; opacity: 0; color: var(--crema); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.gm-cima-anio { top: calc(100% + 10px); font-size: .74rem; letter-spacing: .06em; color: rgba(244, 236, 220, .62); }
.gm-cima:hover .gm-cima-nombre, .gm-cima:focus-visible .gm-cima-nombre, .gm-cima[aria-current="true"] .gm-cima-nombre { opacity: 1; }
.gm-cima[aria-current="true"] .gm-cima-anio { color: var(--roble); }
.gm-cordillera-leyenda { position: absolute; right: var(--gutter); bottom: 10px; margin: 0; font-size: .74rem; color: rgba(244, 236, 220, .5); }

@media (max-width: 860px) {
  .gm-sonar-escenario { grid-template-columns: 1fr; padding-top: 14px; position: relative; }
  .gm-sonar-flecha { position: absolute; top: calc(14px + min(78vw, 360px) / 2 - 22px); z-index: 2; width: 44px; height: 44px; }
  .gm-sonar-flecha.anterior { left: 6px; }
  .gm-sonar-flecha.siguiente { right: 6px; }
  .gm-obra-sonar { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .gm-obra-arte-3d { justify-self: center; width: min(78vw, 360px); }
  .gm-obra-datos { margin: 0 auto; }
  .gm-obra-acciones, .gm-obra-plataformas { justify-content: center; }
  .gm-obra-canciones { text-align: left; }
  .gm-cima-nombre { display: none; }
  .gm-cima-anio { opacity: 0; font-size: .78rem; top: auto; bottom: calc(100% + 4px); }
  .gm-cima[aria-current="true"] .gm-cima-anio { opacity: 1; }
  .gm-cordillera-leyenda { display: none; }
}

/* vídeo de YouTube dentro de la web */
.gm-video-dialogo {
  width: min(1100px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: #101510;
  color: var(--crema);
}
.gm-video-dialogo::backdrop { background: rgba(16, 21, 16, .82); }
.gm-video-dialogo-cab { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 10px 12px 10px 18px; }
.gm-video-dialogo-cab p { margin: 0; font-family: var(--f-marca); font-size: 1.1rem; }
.gm-video-dialogo .gm-ficha-cerrar { position: static; float: none; margin: 0; }
.gm-video-dialogo-marco { aspect-ratio: 16 / 9; background: #000; }
.gm-video-dialogo-marco iframe { width: 100%; height: 100%; border: 0; display: block; }

/* iconos de redes */
.gm-iconos { gap: .5em; }
.gm-iconos a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px rgba(244, 236, 220, .35); transition: background .3s, box-shadow .3s; }
.gm-iconos a:hover { background: rgba(244, 236, 220, .12); box-shadow: inset 0 0 0 1.2px var(--crema); }
.gm-icono { width: 21px; height: 21px; }

/* ============================================================
   MIRAR — el canal dentro de la web
   ============================================================ */
.gm-mirar-destacado {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radio); overflow: hidden; background: var(--tinta); aspect-ratio: 21 / 9; text-align: left;
}
.gm-mirar-destacado img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: saturate(.9); transition: transform 1s var(--ease), filter .6s; }
.gm-mirar-destacado:hover img { transform: scale(1.03); filter: none; }
.gm-mirar-destacado::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22, 31, 19, .78), rgba(22, 31, 19, 0) 60%); }
.gm-mirar-destacado-texto { position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); right: 30%; z-index: 1; color: var(--crema); }
.gm-mirar-destacado .gm-kicker { color: var(--roble); }
.gm-mirar-destacado-titulo { display: block; font-family: var(--f-marca); font-variation-settings: var(--suave); font-weight: 560; font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.05; }
.gm-mirar-play {
  position: absolute; z-index: 1; display: grid; place-items: center; border-radius: 50%;
  background: rgba(251, 247, 238, .94); color: var(--bosque); transition: transform .35s var(--ease), background .3s;
}
.gm-mirar-destacado .gm-mirar-play { right: clamp(18px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); }
.gm-mirar-play svg { width: 34%; height: 34%; fill: currentColor; margin-left: 6%; }
.gm-mirar-destacado:hover .gm-mirar-play, .gm-mirar-rejilla button:hover .gm-mirar-play { transform: scale(1.08); background: var(--papel); }
@media (max-width: 760px) { .gm-mirar-destacado { aspect-ratio: 4 / 3; } .gm-mirar-destacado-texto { right: 90px; } }

.gm-mirar-solo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.gm-mirar-solo h2 { margin: 0 0 .3em; }
.gm-mirar-solo p { color: var(--piedra-texto); }
@media (max-width: 860px) { .gm-mirar-solo { grid-template-columns: 1fr; } }
/* El disco · vídeo "Componiendo una canción llamada Giaveno" */
.gm-disco-video { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.gm-disco-video h2 { margin: 0 0 .3em; }
@media (max-width: 860px) { .gm-disco-video { grid-template-columns: 1fr; } }

.gm-mirar-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 1.2em; }
.gm-mirar-barra h2 { margin: 0; }
.gm-mirar-filtros { margin: 0; }
.gm-mirar-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 36px) clamp(14px, 2vw, 28px); }
.gm-mirar-rejilla li[hidden] { display: none; }
.gm-mirar-rejilla button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta); }
.gm-mirar-miniatura { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio); background: var(--tinta); }
.gm-mirar-miniatura img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: saturate(.88); transition: transform .8s var(--ease), filter .5s; }
.gm-mirar-rejilla button:hover img { transform: scale(1.04); filter: none; }
.gm-mirar-rejilla .gm-mirar-play { right: 10px; bottom: 10px; width: 40px; height: 40px; }
.gm-mirar-titulo { display: block; font-family: var(--f-marca); font-weight: 500; font-size: 1.12rem; line-height: 1.2; color: var(--bosque); margin: .65em 0 .2em; }
.gm-mirar-rejilla button:hover .gm-mirar-titulo { color: var(--cobre-hondo); }
.gm-mirar-grupo { font-size: .8rem; color: var(--piedra-texto); }

/* ============================================================
   INVENCIBLE — la tienda: autor y libro, uno junto al otro
   ============================================================ */
.gm-tienda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.gm-tienda-retrato { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--bosque); min-height: 100%; }
.gm-tienda-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 0; aspect-ratio: 4 / 5; }
.gm-tienda-retrato figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 20px;
  background: linear-gradient(0deg, rgba(22, 31, 19, .8), rgba(22, 31, 19, 0));
  color: var(--crema); font-family: var(--f-marca); font-size: 1.5rem; font-variation-settings: var(--suave);
}
.gm-tienda-retrato figcaption .gm-kicker { display: block; color: var(--roble); margin-bottom: .2em; }
.gm-tienda-libros {
  border-radius: var(--radio); background: var(--crema); padding: clamp(24px, 4vw, 48px);
  box-shadow: inset 0 0 0 1px rgba(140, 138, 130, .3); display: flex; flex-direction: column;
}
.gm-tienda-libros h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; margin-bottom: .8em; }
.gm-tienda-libros h1 span { color: var(--roble); }
.gm-tienda-portadas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 32px); align-items: end; }
.gm-tienda-libro { text-align: center; }
.gm-tienda-libro img { width: 100%; aspect-ratio: 720 / 1052; object-fit: cover; box-shadow: 0 18px 34px -16px rgba(34, 38, 28, .55); transform: rotate(-1.2deg); transition: transform .5s var(--ease); }
.gm-tienda-libro:nth-child(2) img { transform: rotate(1.4deg); }
.gm-tienda-libro:hover img { transform: rotate(0) translateY(-4px); }
.gm-tienda-ed { margin: 1em 0 .6em; font-weight: 600; color: var(--bosque); }
.gm-tienda-libro .gm-boton { padding: .8em 1.2em; font-size: .92rem; }
.gm-tienda-kindle { display: inline-block; margin-top: .5em; padding: .35em .6em; min-height: 32px; font-size: .9rem; }
.gm-tienda-video { margin-top: auto; padding-top: 1.6em; display: flex; align-items: center; gap: .8em; border: 0; background: none; cursor: pointer; color: var(--bosque); font: 600 1rem var(--f-texto); }
.gm-tienda-video .gm-mirar-play { position: static; width: 44px; height: 44px; background: var(--bosque); color: var(--crema); }
.gm-tienda-video:hover { color: var(--cobre-hondo); }
@media (max-width: 860px) { .gm-tienda { grid-template-columns: 1fr; } .gm-tienda-retrato img { aspect-ratio: 4 / 4.4; } }

.gm-libro-h { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .98; letter-spacing: -.02em; margin-bottom: .3em; }

/* ============================================================
   CONTACTO — "Hablemos."
   ============================================================ */
.pagina-contacto { background: #221A12; }
.pagina-contacto .gm-pie { margin-top: 0; }
.gm-conecta-hero { position: relative; height: min(78vh, 760px); min-height: 420px; overflow: hidden; background: #221A12; }
.gm-conecta-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; border-radius: 0; }
.gm-conecta-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #221A12 2%, rgba(34, 26, 18, 0) 55%); }
.gm-conecta-hero h1 {
  position: absolute; left: 0; right: 0; bottom: clamp(10px, 3vw, 36px); z-index: 1; margin: 0; text-align: center;
  font-variation-settings: var(--suave); font-weight: 640; letter-spacing: -.035em;
  font-size: clamp(3.6rem, 13vw, 11rem); line-height: .9; color: var(--crema);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.gm-conecta { background: #221A12; color: var(--crema); padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); text-align: center; }
.gm-conecta-intro { max-width: 34em; margin: 0 auto 2.2em; font-size: 1.15rem; color: rgba(244, 236, 220, .82); }
.gm-escribir-oscuro { max-width: 40rem; margin: 0 auto 3em; text-align: left; }
.gm-escribir-oscuro a { color: var(--crema); border-bottom-color: rgba(244, 236, 220, .2); }
.gm-escribir-oscuro a:hover { color: #F2C9A4; }
.gm-conecta-datos { margin: 0 auto 2.4em; }
.gm-conecta-datos h2 { color: var(--crema); font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.gm-conecta-datos p { color: rgba(244, 236, 220, .82); margin: 0 0 .7em; }
.gm-conecta-datos a { color: var(--crema); }
.gm-conecta-datos a:hover { color: #F2C9A4; }
.gm-conecta-redes { list-style: none; margin: clamp(24px, 4vw, 48px) 0 0; padding: clamp(20px, 3vw, 32px) var(--gutter) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; border-top: 1px solid rgba(244, 236, 220, .12); }
.gm-conecta-redes a { width: auto; height: auto; flex-direction: column; gap: .5em; padding: 8px; border-radius: 14px; box-shadow: none; color: var(--crema); text-decoration: none; display: flex; align-items: center; }
.gm-conecta-redes .gm-icono { width: 34px; height: 34px; }
.gm-conecta-redes span { font-size: .78rem; color: rgba(244, 236, 220, .7); }
.gm-conecta-redes a:hover { background: rgba(244, 236, 220, .08); box-shadow: none; }
.gm-conecta-redes a:hover span { color: var(--crema); }

/* EL DISCO — cuaderno de campo de la Val Sangone */
.gm-campo h2 { max-width: 16em; }
.gm-campo-lista { list-style: none; margin: 2em 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.gm-campo-lista li { position: relative; padding: 1.4em 0 1.6em 3.2em; border-top: 1px solid rgba(140, 138, 130, .45); }
.gm-campo-num { position: absolute; left: 0; top: 1.6em; font: 600 .8rem var(--f-texto); letter-spacing: .1em; color: var(--cobre-hondo); }
.gm-campo-lista h3 { margin: 0 0 .35em; font-size: 1.4rem; }
.gm-campo-lista p { margin: 0 0 .6em; color: var(--tinta); }
.gm-campo-fuentes { margin-top: 1.6em; font-size: .82rem; color: var(--piedra-texto); }
.gm-campo-fuentes a { color: var(--piedra-texto); }

/* portada: dónde estamos */
.gm-puerta-lugar { margin: 0 0 .5em; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 236, 220, .78); text-shadow: 0 1px 8px rgba(28, 30, 22, .5); }
@media (max-width: 760px) { .gm-puerta-3d .gm-puerta-lugar { color: var(--piedra-texto); text-shadow: none; font-size: .68rem; } }

.gm-obra-texto { font-family: var(--f-marca); font-style: italic; font-variation-settings: "SOFT" 100; font-size: 1.15rem; line-height: 1.4; color: rgba(244, 236, 220, .9); margin: 0 0 1em; }

/* ============================================================
   v5 · EL MODELO — portada-puerta, una imagen por palabra del menú,
   portadillas con título grande, "Escuchar" a Spotify y pie compacto.
   Misma paleta, mismas fuentes, mismo Giaveno. Backup: _backup-giaveno-v5-pre-modelo/
   ============================================================ */

/* ---------- botón "Escuchar" (Spotify) ---------- */
.gm-escuchar {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 600 .92rem/1 var(--f-texto);
  white-space: nowrap;
  text-decoration: none;
  color: var(--papel);
  background: var(--cobre-hondo);
  border-radius: 999px;
  padding: .72em 1.15em .72em .9em;
  transition: background .3s, transform .4s var(--ease);
}
.gm-escuchar:hover { background: #73411F; color: var(--papel); }
.gm-escuchar .gm-icono { width: 19px; height: 19px; flex: none; }
.gm-escuchar-puerta { background: var(--crema); color: var(--bosque); font-size: 1rem; padding: .9em 1.35em .9em 1.05em; }
.gm-escuchar-puerta:hover { background: var(--papel); color: var(--bosque); transform: translateY(-2px); }
.gm-escuchar-capa { align-self: flex-start; margin: 0 0 1.4em; font-size: 1rem; padding: .95em 1.45em .95em 1.1em; }

/* cabecera: con siete palabras, el menú completo solo cuando cabe */
@media (max-width: 1180px) {
  .gm-nav, .gm-cab > .gm-idiomas { display: none; }
  .gm-menu-btn { display: inline-block; }
}
@media (max-width: 420px) {
  .gm-cab { gap: 10px; }
  .gm-escuchar-cab { padding: .62em .85em .62em .7em; font-size: .86rem; }
  .gm-menu-btn { padding: .6em .95em; }
}

/* ---------- PORTADA: una imagen por palabra ---------- */
.gm-capas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gm-capa-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #221A12;
  transition: opacity .8s var(--ease);
}
.gm-capa-img.activa { opacity: 1; }
.gm-capa-img img:not([src]) { visibility: hidden; }
.gm-capa-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.035);
  transition: transform 1.8s var(--ease);
}
.gm-capa-foto.activa img { transform: none; }
/* una obra (libro, portada del single) se muestra entera, sobre madera oscura */
.gm-capa-obra { background: radial-gradient(ellipse 60% 70% at 40% 52%, #4A3826 0%, #221A12 72%); }
.gm-capa-obra img {
  position: absolute;
  left: 40%;
  top: 52%;
  height: min(66vh, 620px);
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: 0 30px 70px rgba(14, 10, 6, .5);
  transform: translate(-50%, calc(-50% + 12px));
  transition: transform 1s var(--ease);
}
.gm-capa-obra.activa img { transform: translate(-50%, -50%); }
.gm-puerta.con-capa .gm-escena-etiqueta { opacity: 0; }

/* menú de la portada: la palabra elegida queda subrayada; el resto se retira un poco */
.gm-puerta-menu ul:hover a:not(:hover),
.gm-puerta-menu.con-toque a:not(.tocado) { opacity: .62; }
.gm-puerta-menu a { transition: color .3s, opacity .4s, transform .4s var(--ease); }
.gm-puerta-menu a.tocado::after { transform: scaleX(1); }
.gm-puerta-toca { display: none; margin: .6em 0 0; font-size: .8rem; letter-spacing: .04em; color: rgba(244, 236, 220, .9); text-shadow: 0 1px 8px rgba(28, 30, 22, .6); }
.gm-puerta-menu.con-toque .gm-puerta-toca { display: block; }

/* abajo a la derecha: escuchar en Spotify + Torino */
.gm-puerta-oir {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 4vh, 40px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
}
.gm-puerta-oir .gm-torino,
.gm-puerta-oir .gm-giro { position: static; }

@media (max-width: 760px) {
  /* como el modelo en el móvil: todo sobre la imagen, sin bloque aparte */
  .gm-puerta-3d {
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #3B4630;
    padding-bottom: 16px;
  }
  .gm-puerta-3d::after {
    display: block;
    background:
      linear-gradient(180deg, rgba(28, 30, 22, .5), rgba(28, 30, 22, 0) 28%),
      linear-gradient(0deg, rgba(28, 30, 22, .8) 0%, rgba(28, 30, 22, .58) 42%, rgba(28, 30, 22, 0) 68%);
  }
  .gm-puerta-3d .gm-escena { position: absolute; inset: 0; height: auto; min-height: 0; z-index: -2; }
  .gm-puerta-3d .gm-escena::after { display: none; }
  .gm-escena-poster img { object-position: 50% 58%; }
  .gm-puerta-3d .gm-puerta-menu { order: 1; position: static; transform: none; text-align: center; padding: 0 var(--gutter) 8px; }
  .gm-puerta-3d .gm-puerta-menu a {
    color: var(--crema);
    text-shadow: 0 1px 14px rgba(28, 30, 22, .6);
    font-size: clamp(1.65rem, 7.4vw, 2.25rem);
    line-height: 1.1;
  }
  .gm-puerta-3d .gm-puerta-menu a:hover { color: #F2C9A4; }
  .gm-puerta-oir { order: 2; position: static; justify-content: center; padding: 8px var(--gutter) 12px; }
  .gm-puerta-3d .gm-puerta-oir .gm-torino { flex-direction: row; gap: .6em; }
  .gm-puerta-3d .gm-torino-disco { width: 50px; height: 50px; }
  .gm-escuchar-puerta { padding: .85em 1.2em .85em .95em; font-size: .95rem; }
  .gm-puerta-pie { order: 3; position: static; max-width: none; text-align: center; padding: 2px var(--gutter) 0; margin: 0; }
  .gm-puerta-3d .gm-puerta-idea { color: var(--crema); text-shadow: 0 1px 10px rgba(28, 30, 22, .6); font-size: .98rem; }
  .gm-puerta-3d .gm-puerta-lugar { color: rgba(244, 236, 220, .8); text-shadow: 0 1px 8px rgba(28, 30, 22, .5); }
  .gm-puerta-3d .gm-puerta-creditos { color: rgba(244, 236, 220, .85); }
  .gm-capa-obra { background: radial-gradient(ellipse 80% 50% at 50% 30%, #4A3826 0%, #221A12 75%); }
  .gm-capa-obra img { left: 50%; top: 31%; height: min(30svh, 300px); max-width: 64vw; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .gm-puerta-3d { min-height: 560px; }
  .gm-puerta-3d .gm-puerta-logo { top: 30px; }
  .gm-puerta-3d .gm-puerta-logo .gm-logo-g { font-size: 3.4rem; }
  .gm-puerta-3d .gm-puerta-menu a { font-size: 1.5rem; line-height: 1.08; }
  .gm-puerta-3d .gm-puerta-lugar { display: none; }
  .gm-capa-obra img { top: 27%; height: 22svh; }
}

/* ---------- PORTADILLA: imagen + título grande (páginas interiores) ---------- */
.gm-portadilla {
  position: relative;
  isolation: isolate;
  height: min(72vh, 720px);
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bosque);
}
.gm-portadilla > img,
.gm-portadilla picture img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.gm-portadilla::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(28, 30, 22, .74) 0%, rgba(28, 30, 22, .28) 42%, rgba(28, 30, 22, 0) 68%);
}
.gm-portadilla-texto { max-width: 60rem; padding: 0 var(--gutter) clamp(28px, 5vw, 64px); text-align: center; color: var(--crema); }
.gm-portadilla h1 {
  margin: 0;
  color: var(--crema);
  font-variation-settings: var(--suave);
  font-weight: 640;
  letter-spacing: -.035em;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: .92;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
}
.gm-portadilla-lugar { margin: 0 0 1em; font: 600 .78rem/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 236, 220, .88); }
.gm-portadilla-sub {
  max-width: 28em;
  margin: .8em auto 0;
  font-family: var(--f-marca);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--crema);
}
.gm-portadilla-disco h1 { font-size: clamp(3rem, 8.5vw, 7.5rem); }
.gm-portadilla-disco img { object-position: 60% 62%; }
.js .gm-portadilla-texto { animation: gm-subir .9s var(--ease) .1s both; }
@keyframes gm-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.captura .gm-portadilla-texto { animation: none; }
@media (max-width: 760px) {
  .gm-portadilla { height: 62svh; min-height: 360px; }
}

/* ---------- PIE: más corto (frase + redes en una línea, legal debajo) ---------- */
.gm-pie { margin-top: clamp(40px, 6vw, 80px); }
.gm-pie-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  align-items: end;
  padding: clamp(36px, 4.5vw, 56px) var(--gutter) 24px;
}
.gm-pie-idea { grid-column: 1; grid-row: 1; font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.gm-pie-lugar { grid-column: 1; grid-row: 2; margin: 0 0 1.6em; }
.gm-pie-redes { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 0 1.6em; }
.gm-pie-fino { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .gm-pie-in { grid-template-columns: 1fr; }
  .gm-pie-redes { grid-column: 1; grid-row: auto; }
}

/* tablet en vertical: el logotipo y el menú a escala de la pantalla, no del ancho */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .gm-puerta-logo .gm-logo-g { font-size: clamp(5rem, 13vw, 8rem); }
  .gm-puerta-logo .gm-logo-sub { font-size: .9rem; }
  .gm-puerta-3d .gm-puerta-menu a { font-size: clamp(2.4rem, 5.6vw, 3.4rem); }
  .gm-puerta-idea { font-size: 1.15rem; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .gm-puerta-3d .gm-puerta-logo { top: 46px; }
}
/* móvil: la obra va en el hueco libre entre el logotipo y el menú */
@media (max-width: 760px) {
  .gm-capa-obra img { top: 32%; height: min(23svh, 210px); }
}
@media (max-width: 760px) and (max-height: 740px) {
  .gm-capa-obra img { top: 29%; height: 19svh; }
}

/* ============================================================
   v6 · EL VALLE — toda la web dentro del mismo valle de Giaveno
   Páginas interiores (body.en-valle): un paisaje fijo detrás, suavizado y oscurecido;
   el contenido va sobre vidrio esmerilado. Sin fondos de color liso.
   Fondos por página: inc/gm-catalogo.php → $gm_valle. Backup: _backup-giaveno-v6-pre-valle/
   ============================================================ */

/* los tokens de texto se invierten: crema sobre el valle oscurecido */
.en-valle {
  --tinta: #F4ECDC;
  --bosque: #F4ECDC;
  --papel: #1C1F17;
  --nogal: #E3C49A;
  --cobre-hondo: #EBC9A0;     /* acento de texto (AA sobre el vidrio) */
  --piedra-texto: #D3CCBC;
  --piedra: rgba(244, 236, 220, .38);
  --vidrio: rgba(24, 28, 19, .52);
  --vidrio-borde: rgba(244, 236, 220, .13);
  --sombra-texto: 0 1px 18px rgba(14, 16, 10, .55);
  background: #23271D; /* solo mientras carga la imagen */
  color: var(--tinta);
}
.en-valle::before { opacity: .05; mix-blend-mode: soft-light; }

/* el paisaje, fijo detrás */
.en-valle .gm-valle { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gm-valle img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: scale(1.04); }
.gm-valle::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 23, 16, .58) 0%, rgba(20, 23, 16, .4) 38%, rgba(20, 23, 16, .62) 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(20, 23, 16, 0), rgba(20, 23, 16, .3));
}

/* ---------- vidrio esmerilado ---------- */
.en-valle .gm-cab,
.en-valle .gm-capa,
.en-valle .gm-titular,
.en-valle .gm-seccion:not(:has(> .gm-puente)),
.en-valle .gm-puente,
.en-valle .gm-conecta,
.en-valle .gm-tienda-libros,
.en-valle .gm-obra-datos,
.en-valle .gm-pie,
.en-valle .gm-mini,
.en-valle .gm-ficha,
.en-valle .gm-video-dialogo {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 0 0 1px var(--vidrio-borde);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .en-valle { --vidrio: rgba(24, 28, 19, .84); }
}

/* los bloques de contenido son paneles: separados del borde y entre sí */
.en-valle .gm-titular,
.en-valle .gm-seccion:not(:has(> .gm-puente)),
.en-valle .gm-conecta {
  width: min(var(--ancho), 100% - 2 * var(--gutter));
  margin: clamp(16px, 2.6vw, 32px) auto;
  padding: clamp(26px, 4.2vw, 60px) clamp(20px, 4.2vw, 60px) !important;
  border-radius: var(--radio);
}
.en-valle .gm-seccion:has(> .gm-puente) { padding: 0 !important; width: min(var(--ancho), 100% - 2 * var(--gutter)); margin: clamp(16px, 2.6vw, 32px) auto; }
.en-valle .gm-puente { border-radius: var(--radio); }
.en-valle .gm-tienda-libros { border-radius: var(--radio); }
.en-valle .gm-obra-datos { padding: clamp(20px, 2.6vw, 34px); border-radius: var(--radio); }
.en-valle main { padding-bottom: 1px; }
.en-valle .gm-titular h1, .en-valle .gm-titular h2 { text-shadow: var(--sombra-texto); }

/* cabecera y menú del móvil, de vidrio */
.en-valle .gm-cab { background: rgba(22, 26, 18, .5); box-shadow: inset 0 -1px 0 var(--vidrio-borde); }
.en-valle .gm-cab.con-filete { border-bottom-color: transparent; }
.en-valle .gm-capa { background: rgba(22, 26, 18, .74); -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); box-shadow: none; }

/* pie de vidrio, sin bloque verde */
.en-valle .gm-pie { margin-top: clamp(24px, 4vw, 48px); border-radius: 0; box-shadow: inset 0 1px 0 var(--vidrio-borde); }

/* enlaces y acentos claros */
.en-valle a { color: var(--cobre-hondo); }
.en-valle a:hover,
.en-valle .gm-nav a:hover,
.en-valle .gm-flecha:hover { color: #F7DDBE; }
.en-valle .gm-kicker { color: var(--cobre-hondo); }

/* botones: el cobre de siempre con texto claro (como "Escuchar") */
.en-valle .gm-boton,
.en-valle .gm-escuchar,
.en-valle .gm-player-btn,
.en-valle .gm-mini-btn,
.en-valle .gm-sonar-flecha,
.en-valle .gm-clave input[type="submit"] { background: #8A4F2A; color: #FBF7EE; }
.en-valle .gm-boton:hover,
.en-valle .gm-escuchar:hover,
.en-valle .gm-player-btn:hover,
.en-valle .gm-sonar-flecha:hover { background: #73411F; color: #FBF7EE; }
/* pastillas claras: texto verde bosque */
.en-valle .gm-boton-crema, .en-valle .gm-boton-crema:hover,
.en-valle .gm-obra-marca, .en-valle .gm-portada-sello,
.en-valle .gm-mirar-play, .en-valle .gm-mini-cerrar:hover { color: #2F4626; }
.en-valle .gm-boton-crema { background: #F4ECDC; }
.en-valle .gm-boton-crema:hover { background: #FBF7EE; }
.en-valle .gm-tienda-video .gm-mirar-play { background: #F4ECDC; color: #2F4626; }
.en-valle .gm-edicion, .en-valle .gm-filtros button { box-shadow: inset 0 0 0 1.5px rgba(244, 236, 220, .4); }

/* marcos de imagen y vídeo: oscuros mientras cargan */
.en-valle .gm-video-marco, .en-valle .gm-video-marco video,
.en-valle .gm-mirar-destacado, .en-valle .gm-mirar-miniatura,
.en-valle .gm-tienda-retrato { background: #14170F; }

/* sin fondos lisos por página */
.en-valle.pagina-musica, .en-valle.pagina-contacto { background: #23271D; }
.en-valle .gm-sonar, .en-valle .gm-conecta-hero,
.en-valle .gm-invencible, .en-valle .gm-portadilla { background: transparent; }
.en-valle .gm-conecta-hero { margin: 0; }
.en-valle .gm-conecta-hero::after { background: linear-gradient(0deg, rgba(20, 23, 16, .7) 0%, rgba(20, 23, 16, 0) 55%); }
.en-valle .gm-conecta { color: var(--crema); }
.en-valle .gm-conecta-redes { border-top-color: rgba(244, 236, 220, .14); }
.en-valle .gm-cordillera-fondo { fill: rgba(35, 50, 33, .62); }
.en-valle .gm-cordillera-frente { fill: rgba(47, 70, 38, .78); }
.en-valle .gm-sonar-cab { text-shadow: var(--sombra-texto); }
.en-valle .gm-ficha::backdrop, .en-valle .gm-video-dialogo::backdrop { background: rgba(14, 16, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.en-valle .gm-video-dialogo-marco { background: #000; }
.en-valle .gm-clave input[type="password"] { background: rgba(14, 16, 10, .35); color: var(--crema); border-color: rgba(244, 236, 220, .4); }

@media (max-width: 760px) {
  .en-valle .gm-titular,
  .en-valle .gm-seccion:not(:has(> .gm-puente)),
  .en-valle .gm-conecta,
  .en-valle .gm-seccion:has(> .gm-puente) { width: calc(100% - 20px); margin: 12px auto; }
  .en-valle .gm-titular,
  .en-valle .gm-seccion:not(:has(> .gm-puente)),
  .en-valle .gm-conecta { padding: 24px 18px !important; }
  .en-valle .gm-cab, .en-valle .gm-titular, .en-valle .gm-seccion, .en-valle .gm-puente,
  .en-valle .gm-conecta, .en-valle .gm-tienda-libros, .en-valle .gm-obra-datos, .en-valle .gm-pie {
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
  }
}

/* contraste AA medido sobre el fondo real (v6) */
.en-valle .gm-cab { background: rgba(22, 26, 18, .72); }
.en-valle .gm-sonar-cab h1 { color: #E3C49A; }
.en-valle .gm-sonar-ayuda { color: var(--crema); }
.en-valle .gm-cordillera-leyenda { color: rgba(244, 236, 220, .9); text-shadow: 0 1px 6px rgba(14, 16, 10, .8); }
.en-valle.pagina-musica .gm-valle::after {
  background:
    linear-gradient(180deg, rgba(20, 23, 16, .66) 0%, rgba(20, 23, 16, .5) 40%, rgba(20, 23, 16, .66) 100%);
}
@media (max-width: 760px) {
  .en-valle { --vidrio: rgba(24, 28, 19, .8); }
}

/* ============================================================
   v7 · PORTADA CON FOTO DE CARLOS (Alpes, baranda de madera)
   ============================================================ */
.gm-puerta-3d.con-foto-carlos { background: #2A2A20; }
.con-foto-carlos .gm-escena { background: #2A2A20; }
.con-foto-carlos .gm-escena-poster img { object-position: var(--enfoque, 58% 62%); }
.gm-puerta-3d.con-foto-carlos::after {
  background:
    linear-gradient(180deg, rgba(24, 24, 18, .62) 0%, rgba(24, 24, 18, .2) 32%, rgba(24, 24, 18, 0) 48%),
    radial-gradient(ellipse 40% 60% at 0% 0%, rgba(24, 24, 18, .45), rgba(24, 24, 18, 0) 70%),
    radial-gradient(ellipse 36% 64% at 100% 50%, rgba(24, 24, 18, .62), rgba(24, 24, 18, 0) 76%),
    linear-gradient(0deg, rgba(24, 24, 18, .7), rgba(24, 24, 18, 0) 30%);
}
@media (max-width: 760px) {
  .con-foto-carlos .gm-escena-poster img { object-position: var(--enfoque-m, 50% 50%); transform: scale(var(--zoom-m, 1)); transform-origin: 50% 100%; }
  .gm-puerta-3d.con-foto-carlos::after {
    background:
      linear-gradient(180deg, rgba(24, 24, 18, .62), rgba(24, 24, 18, 0) 30%),
      linear-gradient(0deg, rgba(24, 24, 18, .86) 0%, rgba(24, 24, 18, .66) 44%, rgba(24, 24, 18, 0) 70%);
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .con-foto-carlos .gm-escena-poster img { transform: scale(var(--zoom-m-baja, var(--zoom-m, 1))); }
}

/* portada con foto: acercamiento muy lento al cargar (24 s, una vez). Sin él con movimiento reducido o en ?captura */
.con-foto-carlos .gm-escena-poster {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 62%;
  animation: gm-acercar 24s cubic-bezier(.25, .1, .25, 1) both;
}
@keyframes gm-acercar { from { transform: scale(1); } to { transform: scale(1.06); } }
.captura .con-foto-carlos .gm-escena-poster { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .con-foto-carlos .gm-escena-poster { animation: none; }
}

/* celular: textos pequeños en crema pleno sobre el vidrio (AA medido sobre el fondo real) */
@media (max-width: 760px) {
  .en-valle .gm-titular .gm-sub,
  .en-valle .gm-kicker,
  .en-valle .gm-conecta-datos p,
  .en-valle .gm-conecta-datos a,
  .en-valle .gm-sonar-cab h1 { color: var(--crema); }
}

/* botón de play de los vídeos: siempre claro y visible (también al pasar el ratón) */
.en-valle .gm-mirar-play {
  background: rgba(251, 247, 238, .96);
  color: #2F4626;
  box-shadow: 0 0 0 5px rgba(251, 247, 238, .22), 0 6px 22px rgba(10, 12, 8, .45);
}
.en-valle .gm-mirar-destacado:hover .gm-mirar-play,
.en-valle .gm-mirar-rejilla button:hover .gm-mirar-play,
.en-valle .gm-tienda-video:hover .gm-mirar-play { background: #FFFFFF; color: #8A4F2A; }

/* ============================================================
   v8 · FONDOS VIVOS (clips sin sonido en loop) y DESDE GIAVENO
   gm_clip() en functions.php · giaveno.js → "FONDOS VIVOS"
   ============================================================ */
.gm-clip { position: absolute; inset: 0; overflow: hidden; background: #1C1F17; }
.gm-clip video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: saturate(.9); }
.gm-con-clip { position: relative; }
.gm-clip-pausa {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 23, 16, .55);
  color: var(--crema);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 220, .25);
}
.gm-clip-pausa:hover { background: rgba(20, 23, 16, .78); }
.gm-clip-pausa svg { width: 14px; height: 14px; fill: currentColor; }
.gm-clip-pausa .ico-pausa { display: block; } /* hay un .ico-pausa { display: none } general */
.gm-clip-pausa .ico-play,
.gm-clip-pausa[aria-pressed="true"] .ico-pausa { display: none; }
.gm-clip-pausa[aria-pressed="true"] .ico-play { display: block; }
.gm-clip-pausa[hidden] { display: none; }

/* portadilla con clip (Historia, Desde Giaveno) */
.gm-portadilla-clip .gm-clip { z-index: -2; }
.gm-portadilla::after { pointer-events: none; }

/* destacado de Videos con clip */
.gm-mirar-destacado.con-clip { text-decoration: none; }
.gm-mirar-destacado .gm-clip { z-index: 0; }
.gm-mirar-destacado::after { z-index: 0; }
.gm-mirar-destacado .gm-mirar-play, .gm-mirar-destacado-texto { z-index: 1; }
.gm-mirar-destacado-nota { display: block; margin-top: .6em; font: 600 .95rem/1.2 var(--f-texto); color: #F2C9A4; }
.gm-con-clip > .gm-clip-pausa { left: 14px; top: 14px; bottom: auto; }
.gm-envoltura.gm-con-clip > .gm-clip-pausa { left: calc(var(--gutter) + 14px); }
@media (max-width: 760px) { .gm-mirar-destacado.con-clip { aspect-ratio: 4 / 3; } }

/* DESDE GIAVENO — el diario */
.gm-momento .gm-kicker { margin-bottom: .8em; }
.gm-momento-n { font-variant-numeric: tabular-nums; }
.gm-momento h2 { margin-bottom: .35em; }
.gm-momento-texto {
  max-width: 30em;
  margin: 0;
  font-family: var(--f-marca);
  font-variation-settings: var(--suave);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1.35;
}
.gm-momento .gm-flecha { margin-top: 1.2em; display: inline-block; }
.gm-momento-clip {
  height: min(64vh, 620px);
  width: min(var(--ancho), 100% - 2 * var(--gutter));
  margin: clamp(16px, 2.6vw, 32px) auto;
  border-radius: var(--radio);
  overflow: hidden;
}
.gm-momento-clip > .gm-clip-pausa { top: auto; bottom: 14px; }
@media (max-width: 760px) {
  .gm-momento-clip { height: 48svh; min-height: 260px; width: calc(100% - 20px); margin: 12px auto; }
}

/* ============================================================
   v9 · PORTADA: zoom continuo muy lento + profundidad leve con el ratón
   (sustituye al acercamiento único "gm-acercar"). Movimiento reducido: nada (regla general).
   ============================================================ */
@keyframes gm-respirar { from { transform: scale(1); } to { transform: scale(1.07); } }
.con-foto-carlos .gm-escena-poster { animation: gm-respirar 46s ease-in-out infinite alternate; }
.captura .con-foto-carlos .gm-escena-poster { animation: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  /* la foto va un poco más lenta y al revés que el ratón; el texto, apenas a favor: profundidad */
  .con-foto-carlos .gm-escena-poster img {
    transform: translate3d(calc(var(--par-x, 0) * -12px), calc(var(--par-y, 0) * -8px), 0) scale(1.04);
    will-change: transform;
  }
  .con-foto-carlos .gm-puerta-logo,
  .con-foto-carlos .gm-puerta-menu,
  .con-foto-carlos .gm-puerta-pie,
  .con-foto-carlos .gm-puerta-oir { translate: calc(var(--par-x, 0) * 5px) calc(var(--par-y, 0) * 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .con-foto-carlos .gm-escena-poster img { transform: none; }
  .con-foto-carlos .gm-puerta-logo, .con-foto-carlos .gm-puerta-menu,
  .con-foto-carlos .gm-puerta-pie, .con-foto-carlos .gm-puerta-oir { translate: none; }
}

/* ============================================================
   APERTURA DE CINE — delante de la portada (front-page.php · giaveno.js "APERTURA DE CINE")
   Nieve de Giaveno a pantalla completa, bandas de cine y el nombre. Se disuelve en la puerta.
   ============================================================ */
/* 2026-10-31: ya no es una capa fija que bloquea la página. Es la primera pantalla (en el flujo) y
   debajo se ve el contenido sin pulsar Entrar. Mientras está, la puerta queda oculta; al pulsar Entrar
   el vídeo se superpone (absolute) y se disuelve sobre la puerta, en el mismo sitio. */
html.cine-activa .gm-puerta { display: none; }
.gm-cine {
  position: relative; z-index: 50;
  height: 100vh; height: 100svh; min-height: 540px; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  background: #0D0F0B; color: var(--crema);
  transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.gm-cine.sale { position: absolute; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.gm-cine .gm-cine-clip { z-index: 0; background: #0D0F0B; }
.gm-cine .gm-cine-clip video { filter: saturate(.7) contrast(1.06) brightness(.78); transform: scale(1.06); animation: cineAcerca 14s linear both; }
.gm-cine::after { /* viñeta: solo oscuridad, para que el nombre se lea sobre la nieve */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(13, 15, 11, .15) 0%, rgba(13, 15, 11, .55) 70%, rgba(13, 15, 11, .85) 100%);
}
.gm-cine-banda { position: absolute; left: 0; right: 0; z-index: 2; height: 0; background: #0D0F0B; animation: cineBanda 1.6s var(--ease) .2s both; }
.gm-cine-banda-a { top: 0; }
.gm-cine-banda-b { bottom: 0; }
.gm-cine-texto { position: relative; z-index: 3; padding: 0 var(--gutter, 16px); text-shadow: 0 0 48px rgba(13, 15, 11, .45); }
.gm-cine-lugar {
  margin: 0 0 1.4em; font: 600 clamp(.72rem, 1vw, .85rem)/1 var(--f-texto);
  letter-spacing: .42em; text-transform: uppercase; color: #E3C49A;
  animation: cineSube 1.4s var(--ease) .9s both;
}
.gm-cine-nombre {
  margin: 0; font-family: var(--f-marca); font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(3.4rem, 13vw, 12.5rem); line-height: .86; letter-spacing: -.025em;
  animation: cineNombre 2.6s var(--ease) 1.5s both;
}
.gm-cine-idea {
  margin: 1.1em auto 0; max-width: 32em; font-family: var(--f-marca); font-style: italic;
  font-size: clamp(1rem, 1.9vw, 1.55rem); line-height: 1.35; color: rgba(244, 236, 220, .9);
  animation: cineSube 1.6s var(--ease) 3.2s both;
}
.gm-cine-entrar {
  position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(10vh + 22px);
  padding: .7em 1.6em; border: 1px solid rgba(244, 236, 220, .55); border-radius: 6px;
  background: transparent; color: var(--crema); cursor: pointer;
  font: 600 .78rem/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase;
  animation: cineSube 1.2s var(--ease) 4s both;
}
.gm-cine-entrar:hover, .gm-cine-entrar:focus-visible { background: rgba(244, 236, 220, .12); }
.gm-cine-bajar {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 44px; height: 10vh; min-height: 44px;
  display: grid; place-items: center; color: rgba(244, 236, 220, .75);
  animation: cineSube 1.2s var(--ease) 4.4s both;
}
.gm-cine-bajar svg { width: 24px; height: 24px; animation: cineBajar 2.4s var(--ease) 5.6s infinite; }
.gm-cine-bajar:hover, .gm-cine-bajar:focus-visible { color: var(--crema); }
@keyframes cineBajar { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
@keyframes cineBanda { from { height: 0; } to { height: 10vh; } }
@keyframes cineSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cineNombre { from { opacity: 0; letter-spacing: .04em; } to { opacity: 1; letter-spacing: -.025em; } }
@keyframes cineAcerca { from { transform: scale(1.06); } to { transform: scale(1.14); } }
@media (max-width: 760px) {
  .gm-cine-banda { animation-name: cineBandaMovil; }
  .gm-cine-entrar { bottom: calc(7vh + 18px); }
  .gm-cine-bajar { height: 7vh; }
  .gm-cine-nombre { font-size: 23vw; line-height: .9; }
}
@keyframes cineBandaMovil { from { height: 0; } to { height: 7vh; } }
@media (prefers-reduced-motion: reduce) {
  .gm-cine, .gm-cine * { animation: none !important; transition: none !important; }
  .gm-cine-banda { height: 10vh; }
}

/* ============================================================
   DEBAJO DE LA PORTADA (front-page.php · .gm-pm, 2026-10-31)
   Frase de marca, tres puertas y la franja de los capítulos gratis de Invencible.
   ============================================================ */
.gm-pm { position: relative; z-index: 1; background: var(--crema); }
.gm-pm-frase { background: var(--bosque); color: var(--crema); text-align: center; padding: clamp(44px, 7vw, 96px) 0; }
.gm-pm-frase p {
  margin: 0 auto; max-width: 24em;
  font-family: var(--f-marca); font-style: italic; font-variation-settings: var(--suave);
  font-size: clamp(1.5rem, 3.6vw, 2.8rem); line-height: 1.2;
}
.gm-pm-tarjetas {
  list-style: none; margin: 0 auto; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(40px, 6vw, 88px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px);
}
.gm-pm-tarjeta { display: flex; flex-direction: column; height: 100%; color: var(--tinta); text-decoration: none; }
.gm-pm-foto { display: block; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 5; background: var(--piedra); }
.gm-pm-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .8s var(--ease); }
.gm-pm-tarjeta:hover .gm-pm-foto img, .gm-pm-tarjeta:focus-visible .gm-pm-foto img { transform: scale(1.03); }
.gm-pm-titulo {
  display: block; margin: .7em 0 .2em; color: var(--bosque);
  font-family: var(--f-marca); font-variation-settings: var(--suave); font-weight: 560;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05;
}
.gm-pm-linea { display: block; color: var(--piedra-texto); font-size: 1rem; line-height: 1.45; max-width: 24em; }
.gm-pm-flecha { margin-top: .6em; color: var(--cobre-hondo); font-size: 1.2rem; transition: transform .3s var(--ease); }
.gm-pm-tarjeta:hover .gm-pm-flecha { transform: translateX(4px); }
.gm-pm-tarjeta:hover .gm-pm-titulo { color: var(--cobre-hondo); }
.gm-pm-libro { background: var(--nogal); color: var(--crema); padding: clamp(22px, 3vw, 34px) 0; }
.gm-pm-libro .gm-envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.gm-pm-libro-t {
  margin: 0; font-family: var(--f-marca); font-variation-settings: var(--suave);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.25;
}
.gm-pm-libro-t span:first-child { font-weight: 600; }
.pagina-portada .gm-pie { margin-top: 0; }
.pagina-portada .gm-pie-idea { display: none; } /* la frase ya está arriba, en la franja */
@media (max-width: 760px) {
  .gm-pm-tarjetas { grid-template-columns: 1fr; gap: 36px; }
  .gm-pm-foto { aspect-ratio: 3 / 2; }
  .gm-pm-libro .gm-envoltura { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-pm-foto img, .gm-pm-flecha { transition: none; }
}

/* ============================================================
   INVENCIBLE · bloques nuevos (page-invencible.php, 2026-10-31)
   Capítulos gratis (#capitulos-gratis), lectores (oculto) y "Esta canción nació de este capítulo".
   Usan los tokens: en el valle se invierten solos.
   ============================================================ */
.gm-gratis {
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--piedra);
  scroll-margin-top: 96px;
}
.gm-gratis h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .3em; }
.gm-gratis-intro { margin: 0 0 1.2em; color: var(--piedra-texto); }
.gm-gratis-form p { margin: 0 0 1em; }
.gm-gratis-form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35em; }
.gm-gratis-form input[type="text"],
.gm-gratis-form input[type="email"] {
  width: 100%; font: 1rem var(--f-texto); padding: .8em 1em; color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--piedra); border-radius: var(--radio);
}
.en-valle .gm-gratis-form input[type="text"],
.en-valle .gm-gratis-form input[type="email"] { background: rgba(14, 16, 10, .35); border-color: rgba(244, 236, 220, .4); }
.gm-gratis-form input:focus-visible { outline: 2px solid var(--cobre-hondo); outline-offset: 2px; }
.gm-gratis-ok { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start; }
.gm-gratis-ok input { width: 20px; height: 20px; margin: .15em 0 0; accent-color: var(--cobre); }
.gm-gratis-ok label { font-weight: 400; font-size: .92rem; line-height: 1.45; color: var(--piedra-texto); margin: 0; }
.gm-gratis-aviso { margin: .9em 0 0; font-size: .95rem; color: var(--cobre-hondo); }
.gm-gratis-aviso:empty { display: none; }

.gm-lectores h2 { margin: 0 0 1em; }
.gm-lectores ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.gm-lectores blockquote { margin: 0; font-family: var(--f-marca); font-style: italic; font-variation-settings: var(--suave); font-size: 1.25rem; line-height: 1.35; }
.gm-lectores blockquote p { margin: 0; }
.gm-lectores-quien { margin: .6em 0 0; font-size: .9rem; color: var(--piedra-texto); }
.gm-lectores.es-borrador { outline: 2px dashed var(--cobre); outline-offset: -2px; }
.gm-borrador-aviso { margin: 0 0 1em; font: 700 .75rem/1 var(--f-texto); letter-spacing: .14em; color: var(--cobre-hondo); }

.gm-cc h2 { margin: 0 0 1em; }
.gm-cc-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.gm-cc-libro { margin: 0; }
.gm-cc-texto { margin: 0; padding-left: clamp(16px, 2vw, 24px); border-left: 2px solid var(--cobre); }
.gm-cc-texto p {
  margin: 0 0 .35em; font-family: var(--f-marca); font-variation-settings: var(--suave);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.45;
}
.gm-cc-texto .gm-cc-salto { color: var(--piedra-texto); font-size: 1rem; }
.gm-cc-libro figcaption { margin-top: 1.2em; }
.gm-cc-libro figcaption .gm-kicker { display: block; margin-bottom: .3em; }
.gm-cc-fuente { font-size: .9rem; color: var(--piedra-texto); font-style: italic; }
.gm-cc-cargar {
  margin: 0; min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px;
  padding: clamp(20px, 3vw, 36px); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--piedra);
}
.gm-cc-cargar:has(button[hidden]) { display: none; }
.gm-cc-artista { font-family: var(--f-marca); font-variation-settings: var(--suave); font-size: 1.4rem; }
.gm-cc-nota { font-size: .85rem; color: var(--piedra-texto); }
@media (max-width: 800px) { .gm-cc-rejilla { grid-template-columns: 1fr; } }