:root {
  --gold: #ffdb9b;
  --gold-trans: rgba(255, 219, 155, .22);
  --bg: #252422;
  --card-bg: #1d1c1b;
  --white: #f5f5f3;
}

/* ---------------- TIPOGRAFÍA GLOBAL ---------------- */
body {
  font-family: "Lora", serif;
  font-weight: 400;
  line-height: 1.55;
  color: var(--white);
  margin: 0;
  background: var(--bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1,
h2,
h3 {
  font-family: "Cormorant SC", serif;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--white);
  margin: 0;
}

/* ----- Tipografía específica para galerías ----- */
.painting-info,
.painting-info h3,
.painting-info .meta,
.painting-info p,
.track-details,
.track-details h3,
.track-details .composer,
.track-details p {
  font-family: "Montserrat", sans-serif;
}

/* ---------------- HALO DE PUNTERO ---------------- */
#spotlight {
  pointer-events: none;
  position: fixed;
  inset: 0;
  mix-blend-mode: screen;
  z-index: 2;
  transition: background .06s;
}

/* ---------------- CABECERA ---------------- */
header {
  text-align: center;
  padding: 4rem 1rem 2rem;
}

h1 {
  line-height: 1.05;
  letter-spacing: 2px;
}

.dedicatoria.pequeña{
  font-size:.8rem;      /* ⬅️ más pequeña */
  opacity:.9;           /* opcional, sutilmente más tenue */
}
.title-move {
  display: inline-block;
  font-size: clamp(2.5rem, 6vw, 5rem);
  animation: titleFloat 12s ease-in-out infinite;
  transform-origin: center center;
}

h1 .subtitle {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gold);
}

@keyframes titleFloat {
  0% {
    transform: translateY(0) rotate(-2deg);
  }

  25% {
    transform: translateY(-6px) rotate(0);
  }

  50% {
    transform: translateY(0) rotate(2deg);
  }

  75% {
    transform: translateY(6px) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

/* ---------------- GRID DE TARJETAS PRINCIPALES ---------------- */
.grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  max-width: 760px;
  margin: 2rem auto 4rem;
  padding: 0 1.5rem;
}

@media(max-width:640px) {
  .grid {
    grid-template-columns: 1fr;
    max-width: 90%;
  }
}

@keyframes cardFloat {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.03);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.8rem 1rem 2.4rem;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  cursor: pointer;
  overflow: hidden;
  transition:transform .25s, box-shadow .6s, border-color .6s;   /* más rápida, como las canciones */
  animation: cardFloat 6s ease-in-out infinite;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:radial-gradient(circle at 0 0, rgba(255,219,155,.15), transparent 70%);
  opacity: 0;
  transform: scale(1.1);
  transition: opacity .6s, transform .6s;
  pointer-events: none;
}

.card i {
  display: block;
  margin-bottom: .9rem;
  font-size: 1.6rem;
  color: var(--gold);
  transition: transform .4s;
}

.card h2 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  color: var(--gold);
}

.card:hover {
   transform:scale(1.03);
  animation-play-state: paused;
  box-shadow: 0 0 14px var(--gold-trans);
  border-color: var(--gold-trans);
}

.card:hover::after {
  opacity: .9;
  transform: scale(1);
}

.card:hover i {
  transform: translateY(-2px) scale(1.05);
}
.card.hidden{
  opacity:0;
  transform:scale(.94);     /* se encoge un poco al ocultarse */
}
.hidden {
  opacity: 0;
  transform: translateY(50px);
}

section {
  display: none;
  max-width: 760px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  animation: fadeSlide .55s ease forwards;
}

.close-btn {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--gold);
  cursor: pointer;
  font-size: 1.1rem;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-slide{
  animation:fadeSlide .55s ease forwards;
}

/* ---------------- GALERÍA DE PINTURAS ---------------- */
section#pinturas {
  padding: 1.8rem 5vw 2.8rem;
  max-width: 950px;
  margin: 0 auto;
}

section#pinturas h2 {
  text-align: center;
  font-size: 2.3rem;
  letter-spacing: 2px;
  margin: 0 0 1.6rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 1fr));
  gap: 2.4rem 1.8rem;
  justify-content: center;
}

@media(max-width:800px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.gallery article {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.painting-img {
  width: 100%;
  aspect-ratio: 4/3;
  border: 2.8px solid var(--gold);
  border-radius: .35rem;
  overflow: hidden;
}

.painting-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.painting-info {
  width: 85%;
  background: var(--card-bg);
  padding: .85rem 1rem;
  border-radius: .65rem;
  margin: .7rem auto 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, .45);
}

.painting-info h3 {
  font-size: 1.25rem;
  margin: .12rem 0 .18rem;
  letter-spacing: 1px;
  font-weight: 600;
}

.painting-info .meta {
  font-size: .8rem;
  color: var(--gold);
  margin-bottom: .45rem;
  font-style: italic;
}

.painting-info p {
  font-size: .85rem;
  margin: 0;
  opacity: .9;
}

/* ---- Subrayado dorado en los botones del vestíbulo ---- */
.card h2 {
  position: relative;
  margin-bottom: .6rem;
}

.card h2::after {
  content: "";
  display: block;
  width: 42%;
  height: 1px;
  background: var(--gold);
  margin: .35rem auto 0;
  opacity: .85;
}

/* ---------------- SALA MUSICAL ---------------- */
section#musica{
  padding:1.8rem 5vw 2.8rem;
  max-width:950px;
  margin:0 auto;
}
section#musica h2{
  text-align:center;font-size:2.3rem;letter-spacing:2px;margin:0 0 1.6rem;
}

.music-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:2.2rem 1.6rem;
  justify-content:center;
  margin-top:1.6rem;         /* espacio bajo el reproductor */
}
@media(max-width:800px){.music-gallery{grid-template-columns:1fr;}}

.track-card{
  display:flex;gap:1.4rem;background:var(--card-bg);
  border:1px solid var(--gold-trans);border-radius:.8rem;
  padding:1.6rem 1.8rem;box-shadow:0 0 5px rgba(0,0,0,.45);
  position:relative;cursor:pointer;transition:transform .25s;
}
.track-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 0 0,rgba(255,219,155,.2),transparent 70%);
  opacity:.22;pointer-events:none;
}
.track-card:hover{transform:scale(1.03);}

.play-btn{
  background:none;border:none;color:var(--gold);
  font-size:1.25rem;cursor:pointer;flex-shrink:0;margin-top:.2rem;
  transition:transform .25s;
}
.play-btn:hover{transform:scale(1.12);}

.track-details h3{font-weight:600;font-size:1.25rem;margin:.1rem 0 .18rem;letter-spacing:1px;color:var(--white);}
.track-details .composer{font-size:.85rem;opacity:.75;margin-bottom:.45rem;}
.tag{display:inline-block;font-size:.75rem;padding:.2rem .8rem;border-radius:999px;background:rgba(255,219,155,.15);color:var(--gold);margin-bottom:.55rem;}
.track-details p{font-size:.9rem;margin:0;opacity:.85;}

/* ---------- PLAYER CARD (reproductor personalizado) ---------- */
.player-card{
  width:100%;max-width:950px;margin:0 auto 2.2rem;
  padding:1.4rem 1.8rem 1.8rem;background:var(--card-bg);
  border:1px solid var(--gold-trans);border-radius:.8rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:1.2rem;
}
.player-card.hidden{display:none;}

.player-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.player-btn{background:none;border:none;color:var(--gold);font-size:1.1rem;cursor:pointer;transition:transform .25s;}
.player-btn:hover{transform:scale(1.15);}

.player-meta{text-align:center;flex:1;}
.player-meta h3{font-family:"Cormorant SC",serif;font-size:1.1rem;letter-spacing:1px;margin:0;color:var(--white);}
.player-meta span{font-size:.85rem;color:var(--gold);opacity:.9;}

/* barra de progreso punteada */
.progress{
  height:4px;position:relative;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,219,155,.15) 0 12px,transparent 12px 24px);
  cursor:pointer;
}
.progress-inner{
  position:absolute;top:0;left:0;height:100%;border-radius:inherit;
  background:var(--gold);width:0%;transition:width .1s linear;
}

/* motor de audio oculto */
#audioPlayer.hidden{display:none;}
/* ---------- ILUMINACIÓN EN TARJETAS DE CANCIÓN (hover) ---------- */
/* halo base: invisible */
.track-card::before{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 0 0, rgba(255,219,155,.2), transparent 70%);
  opacity:0;                     /* ← estaba .22, ahora 0 */
  transform:scale(1.1);
  transition:opacity .6s,transform .6s;
  pointer-events:none;
}

/* halo activo y borde iluminado */
.track-card:hover{
  transform:scale(1.03);
  box-shadow:0 0 14px var(--gold-trans);
  border-color:var(--gold-trans);
}
.track-card:hover::before{
  opacity:.9;                    /* sólo visible en hover */
  transform:scale(1);
}

/* borde base muy tenue (igual que otras cards) */
.track-card{
  border:1px solid rgba(255,255,255,.05);   /* reemplaza el var(--gold-trans) anterior */
}

/* ---------- Tarjeta de Reflexión ---------- */
.reflection-gallery{max-width:950px;margin:0 auto;}
.reflection-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:1.2rem;padding:2.2rem;border-radius:.8rem;background:var(--card-bg);
  border:1px solid var(--gold-trans);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
    max-width:700px;          /* antes ocupaba los 950 px del contenedor */
  padding:1.6rem 1.8rem;    /* era 2.2 rem; un poco menos de alto      */
  margin:0 auto 1.8rem;
}

/* icono de comillas */
.quote-icon{font-size:2rem;color:var(--gold);}

section#reflexiones h2{
  text-align:center;          /* centra igual que en otras salas   */
  font-size:2.3rem;           /* mismo tamaño                      */
  letter-spacing:2px;
  margin:0 0 2rem;            /* separa del bloque de reflexión    */
}
/* ---------------- BOTÓN REVELAR (estilo píldora) ---------------- */
.reveal-btn{
  /* forma y tipografía */
  align-self:center !important;   /* fuerza centrado horizontal   */
  margin:0 auto;  
  display:inline-block;
  font-family:"Montserrat",sans-serif;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;

  /* forma de píldora */
  padding:.55rem 2.4rem;
  border-radius:999px;
  border:none;

  /* dorado mate + ligero borde para separar del fondo */
  background:rgba(255,219,155,.25);            /* dorado apagado */
  color:var(--white);
  box-shadow:inset 0 0 0 1px rgba(255,219,155,.22);

  cursor:pointer;
  transition:
      background .25s ease,
      box-shadow .25s ease,
      transform  .25s ease;
}

/* estado hover: dorado brillante, sutil “pop” y halo */
.reveal-btn:hover{
  background:var(--gold);
  color:var(--card-bg);                         /* contraste oscuro */
  box-shadow:0 0 12px var(--gold-trans);
  transform:scale(1.05);
}
.quote-content{
  padding-right:.3rem;        /* antes usaba el padding general de la tarjeta */
}
/* opcional: clic activo (feedback rápido) */
.reveal-btn:active{
  transform:scale(.97);
}


/* contenido de la cita */
.quote-content.hidden{display:none;}
.quote-text{
  font-family:"Cormorant SC",serif;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  letter-spacing:1px;color:var(--white);
  margin:0;
}

.quote-author{
  margin-top:.3rem;           /* antes .6rem */
  font-size:.6rem;            /* era aproximadamente 1rem (*) */
}

.quote-source{
  font-size:.60rem;           /* era .8rem  */
}

/* -------- Tarjeta de la carta personal -------- */
.letter-card{
  max-width:700px;margin:0 auto;padding:2rem 2.2rem;
  border:1px solid var(--gold-trans);border-radius:.8rem;
  background:var(--card-bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  text-align:center;
}

.heart-icon{
  font-size:2.4rem;color:var(--gold);margin-bottom:1.1rem;
}

.letter-card h2{
  font-family:"Cormorant SC",serif;
  font-size:1.6rem;letter-spacing:1.2px;color:var(--white);
  margin:0 0 2rem;
}

.intro-text{
  font-family:"Montserrat",sans-serif;
  font-size:.95rem;color:var(--gold);margin-bottom:2rem;
}

/* botón abrir carta: usa el mismo estilo “píldora” apagado/brillante */
.open-letter-btn{
  background:rgba(255,219,155,.25);
  color:var(--white);
  font-family:"Montserrat",sans-serif;font-size:.9rem;font-weight:600;
  padding:.6rem 2.4rem;border:none;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6rem;
  box-shadow:inset 0 0 0 1px rgba(255,219,155,.22);
  transition:background .25s, transform .25s;
}
.open-letter-btn:hover{
  background:var(--gold);color:var(--card-bg);
  transform:scale(1.05);
}

/* contenido de la carta (estado oculto) */
.letter-content.hidden{display:none;}
.letter-content p{
  font-family:"Lora",serif;font-size:1rem;line-height:1.55;color:var(--white);
  margin:.9rem 0;
}

.compacto .painting-img{ aspect-ratio:3/2; } 
/* relación más baja sólo para las que tengan .compacta */
.compacta .painting-img{
  aspect-ratio:3/2;      /* o 1/1 si la quieres cuadrada */
}
/* Tarjetas marcadas como .vertical: aspecto 3:4 (más altas) */
.vertical .painting-img{
  aspect-ratio:3/4;          /* hace crecer la tarjeta en vertical */
}

/* Opcional: centra la parte importante de la imagen */
.vertical .painting-img img{
  object-position:center top; /* ajusta si corta cabezas; o usa center center */
}