/* Hikarú · propuesta web
   Paleta: noche (tinta cálida) + marfil, con un solo acento: la luz champagne de las guirnaldas del salón.
   Fuentes: Gambetta (títulos) y General Sans (texto), alojadas en /fonts. */

@font-face { font-family: "Gambetta"; src: url("fonts/gambetta-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("fonts/gambetta-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gambetta"; src: url("fonts/gambetta-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --noche: #15130f;
  --noche-2: #1e1b16;
  --musgo: #1d2a22;
  --marfil: #f4eee3;
  --marfil-2: #ebe3d3;
  --luz: #e3c58e;            /* champagne: solo sobre fondos oscuros */
  --luz-oscura: #7a5818;     /* el mismo acento, oscurecido para fondos claros */
  --tinta: #2a261f;
  --tinta-suave: #5a5346;
  --g: clamp(1.25rem, 4vw, 4rem);
  --vertical: clamp(5.5rem, 11vw, 10rem);
  --fuente-titulo: "Gambetta", Georgia, "Times New Roman", serif;
  --fuente-texto: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --salir: cubic-bezier(.25, 1, .5, 1);
  --cruzar: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--marfil);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, dl, dd, figure, address { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
button { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }
[data-tema="claro"] :focus-visible { outline-color: var(--luz-oscura); }

.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 300; background: var(--luz); color: var(--noche); padding: .7rem 1.1rem; transition: top .2s; }
.saltar:focus { top: 1rem; }

/* ---------- Secciones y tema ---------- */
[data-tema="claro"] { background: var(--marfil); color: var(--tinta); }
[data-tema="oscuro"] { background: var(--noche); color: var(--marfil); }
section { position: relative; }

/* ---------- Tipografía ---------- */
.etiqueta {
  font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--luz); margin-bottom: 1.4rem;
}
.etiqueta--oscura { color: var(--luz-oscura); }
.titulo {
  font-family: var(--fuente-titulo); font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1.06; letter-spacing: -.012em;
}
.titulo--enorme { font-size: clamp(2.7rem, 6.6vw, 6.4rem); line-height: 1.02; }
.titulo em, .hero__titulo em { font-style: italic; color: var(--luz-oscura); }
[data-tema="oscuro"] .titulo em, .hero__titulo em { color: var(--luz); }
/* máscaras de SplitText con aire, para que no corten la "¿", la "ú" ni las cursivas */
.palabra-t-mask, .letra-t-mask { padding: .12em .08em .2em; margin: -.12em -.08em -.2em; }
.linea-t-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* ---------- Botones ---------- */
.boton {
  --relleno: var(--marfil);
  --texto-hover: var(--noche);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: .8rem 1.75rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--fuente-texto); font-size: .95rem; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; text-align: center;
  transition: color .45s var(--salir), border-color .45s var(--salir), transform .2s ease;
}
.boton::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--relleno);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--cruzar);
}
.boton:focus-visible { color: var(--texto-hover); }
.boton:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) {
  .boton:hover { color: var(--texto-hover); }
  .boton:hover::before { transform: scaleY(1); }
}
.boton:active { transform: scale(.98); }
.boton .rodar { line-height: 1.35; }
.boton--luz { background: var(--luz); color: var(--noche); border-width: 0; padding: calc(.8rem + 1px) calc(1.75rem + 1px); }
.boton--vidrio { color: var(--marfil); border-color: rgba(244, 238, 227, .55); background: rgba(21, 19, 15, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.boton--oscuro { --relleno: var(--luz); background: var(--noche); color: var(--marfil); border-width: 0; padding: calc(.8rem + 1px) calc(1.75rem + 1px); }
.boton--linea-oscura { --relleno: var(--noche); --texto-hover: var(--marfil); color: var(--tinta); border-color: rgba(42, 38, 31, .45); }
.boton--cabecera { background: var(--luz); color: var(--noche); border-width: 0; min-height: 2.6rem; padding: calc(.55rem + 1px) calc(1.2rem + 1px); font-size: .88rem; }

/* texto que rueda al pasar el cursor */
.rodar { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; }
.rodar__in { display: inline-block; transition: transform .55s var(--salir); }
.rodar__in::after { content: attr(data-texto); position: absolute; left: 0; top: 100%; }
a:focus-visible .rodar__in { transform: translateY(-100%); }
@media (hover: hover) { a:hover .rodar__in { transform: translateY(-100%); } }

/* ---------- Entrada: las puertas del salón ---------- */
.puertas { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.puertas__hoja {
  position: absolute; top: 0; bottom: 0; width: 50.2%;
  background: repeating-linear-gradient(90deg, #15130f 0 46px, #1a1712 46px 48px);
}
.puertas__hoja--izq { left: 0; animation: abrir-izq 1.3s cubic-bezier(.6, 0, 0, 1) 3.7s forwards; }
.puertas__hoja--der { right: 0; animation: abrir-der 1.3s cubic-bezier(.6, 0, 0, 1) 3.7s forwards; }
.puertas__hoja::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(227, 197, 142, .7) 30%, rgba(227, 197, 142, .7) 70%, transparent); }
.puertas__hoja--izq::after { right: 0; }
.puertas__hoja--der::after { left: 0; }
.puertas__marca {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--marfil); padding: 0 1.5rem;
  animation: marca-fuera .6s ease 3.2s forwards;
}
.puertas__luces { display: flex; gap: clamp(.8rem, 2.4vw, 1.4rem); margin-bottom: 2rem; }
.puertas__luces span {
  width: 9px; height: 9px; border-radius: 50%; background: var(--luz);
  box-shadow: 0 0 14px 4px rgba(227, 197, 142, .6), 0 0 40px 12px rgba(227, 197, 142, .2);
}
.puertas__nombre { font-family: var(--fuente-titulo); font-size: clamp(3.6rem, 11vw, 8.5rem); line-height: 1; letter-spacing: -.01em; }
.puertas__lugar { margin-top: 1.4rem; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--luz); }
@keyframes abrir-izq { to { transform: translateX(-101%); } }
@keyframes abrir-der { to { transform: translateX(101%); } }
@keyframes marca-fuera { to { opacity: 0; } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.2rem var(--g); color: var(--marfil);
  transition: transform .55s var(--salir), background-color .4s ease, color .3s ease, padding .4s ease;
}
.cabecera--solida { background: rgba(21, 19, 15, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: .85rem; }
.cabecera--clara { color: var(--tinta); }
.cabecera--clara.cabecera--solida { background: rgba(244, 238, 227, .94); }
.cabecera--clara .boton--cabecera { background: var(--noche); color: var(--marfil); --relleno: var(--luz); }
.cabecera--clara .boton--cabecera:hover, .cabecera--clara .boton--cabecera:focus-visible { color: var(--noche); }
.cabecera--oculta { transform: translateY(-110%); }

.marca { display: inline-flex; align-items: center; gap: .65rem; }
.marca__nombre { font-family: var(--fuente-titulo); font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; }
.marca__luz { width: 9px; height: 9px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 10px 3px rgba(227, 197, 142, .55); }
.cabecera--clara .marca__luz { background: var(--luz-oscura); box-shadow: 0 0 10px 3px rgba(122, 88, 24, .3); }

.nav { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); font-size: .95rem; }
.cabecera__acciones { display: flex; align-items: center; gap: 1rem; }

.menu-boton { display: none; align-items: center; gap: .7rem; background: none; border: 0; color: inherit; cursor: pointer; padding: .6rem 0 .6rem .3rem; }
.menu-boton__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-boton__lineas { position: relative; width: 24px; height: 10px; }
.menu-boton__lineas::before, .menu-boton__lineas::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s var(--salir), top .4s var(--salir); }
.menu-boton__lineas::before { top: 0; }
.menu-boton__lineas::after { top: 9px; }
.menu-boton[aria-expanded="true"] .menu-boton__lineas::before { top: 4px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__lineas::after { top: 4px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--noche); color: var(--marfil);
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: 6rem var(--g) 3rem;
}
.menu nav { display: flex; flex-direction: column; gap: .4rem; }
.menu__link { font-family: var(--fuente-titulo); font-size: clamp(2.4rem, 11vw, 3.4rem); line-height: 1.15; }
.menu .boton { align-self: flex-start; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; background: var(--noche); color: var(--marfil); }
.hero__fondo { position: absolute; inset: 0; will-change: transform; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(21, 19, 15, .55) 0%, rgba(21, 19, 15, 0) 24%),
    linear-gradient(90deg, rgba(21, 19, 15, .5) 0%, rgba(21, 19, 15, .12) 50%, rgba(21, 19, 15, 0) 68%),
    linear-gradient(0deg, rgba(21, 19, 15, .8) 0%, rgba(21, 19, 15, .34) 38%, rgba(21, 19, 15, 0) 62%);
}
.hero .etiqueta { color: var(--marfil); text-shadow: 0 1px 14px rgba(21, 19, 15, .6); }
.hero__contenido { position: relative; padding: 9rem var(--g) clamp(3.5rem, 7vh, 5.5rem); max-width: 62rem; }
.hero__titulo { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(3rem, 7.6vw, 7.4rem); line-height: 1; letter-spacing: -.018em; }
.hero__texto { margin-top: 1.8rem; max-width: 34rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: rgba(244, 238, 227, .92); }
.hero__botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero__pie { position: absolute; right: var(--g); bottom: clamp(3.5rem, 7vh, 5.5rem); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 238, 227, .78); writing-mode: vertical-rl; }

/* ---------- Intro ---------- */
.intro { padding: var(--vertical) var(--g); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.intro__parrafo { margin-top: 2rem; max-width: 33rem; color: var(--tinta-suave); font-size: 1.12rem; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 3rem; max-width: 36rem; }
.datos li { padding: 1.15rem 0; border-top: 1px solid rgba(42, 38, 31, .18); display: grid; gap: .25rem; }
.datos strong { font-weight: 500; font-size: 1rem; }
.datos span { color: var(--tinta-suave); font-size: .95rem; line-height: 1.5; }

.intro__fotos { position: relative; aspect-ratio: 1 / 1.12; }
.foto { position: absolute; overflow: hidden; background: var(--marfil-2); }
.foto img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.foto--a { left: 0; top: 0; width: 58%; aspect-ratio: 4 / 5; }
.foto--b { right: 0; top: 22%; width: 46%; aspect-ratio: 4 / 5; }
.foto--c { left: 12%; bottom: 0; width: 38%; aspect-ratio: 4 / 5; z-index: 2; }

/* ---------- Escenarios ---------- */
.escenarios { padding: var(--vertical) var(--g); background: var(--noche); }
.escenarios__encabezado { display: grid; gap: 0; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.escenarios__ayuda { margin-top: 1.4rem; color: rgba(244, 238, 227, .8); }
.escenarios__lista { display: flex; gap: .6rem; height: min(78svh, 780px); min-height: 520px; }
.panel { position: relative; overflow: hidden; flex: 1 1 0; background: var(--noche-2); transition: flex-grow .95s var(--cruzar); }
.panel.is-activo { flex-grow: 3.4; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.4s var(--cruzar); }
.panel.is-activo img { transform: scale(1); }
.panel:nth-child(2) img { object-position: 50% 68%; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(21, 19, 15, .5); transition: opacity .7s ease; }
.panel.is-activo::before { opacity: 0; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(21, 19, 15, .85), rgba(21, 19, 15, 0) 55%); opacity: 0; transition: opacity .7s ease; }
.panel.is-activo::after { opacity: 1; }
.panel__tab { position: absolute; inset: 0; z-index: 2; width: 100%; background: none; border: 0; color: var(--marfil); cursor: pointer; text-align: left; padding: 1.6rem 1.4rem; display: flex; flex-direction: column; justify-content: space-between; }
.panel__n { font-size: .8rem; letter-spacing: .2em; color: var(--luz); }
.panel__nombre { font-family: var(--fuente-titulo); font-size: 1.9rem; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; transition: opacity .4s ease; white-space: nowrap; }
.panel.is-activo .panel__nombre { opacity: 0; }
.panel__info { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 0 clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.6rem); width: min(100%, 34rem); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.panel.is-activo .panel__info { opacity: 1; transform: none; transition: opacity .8s ease .5s, transform .8s var(--salir) .5s; pointer-events: auto; }
.panel__info h3 { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.05; }
.panel__info p { margin-top: .9rem; color: rgba(244, 238, 227, .92); max-width: 28rem; }
.panel__enlace { display: inline-block; margin-top: 1.3rem; padding-bottom: .25rem; border-bottom: 1px solid var(--luz); color: var(--luz); font-weight: 500; font-size: .95rem; }

/* ---------- Las luces se encienden ---------- */
.luces { background: var(--noche); }
.luces__escena { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.luces__foto { position: absolute; inset: 0; }
.luces__fondo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.luces__marco { display: none; }
@media (min-width: 960px) {
  /* En compu la foto va en un marco vertical a su tamaño real (es de 1080 px: a pantalla completa se pixelaba)
     sobre una copia borrosa de sí misma. */
  .luces__fondo { filter: blur(28px) brightness(.72) saturate(1.1); transform: scale(1.15); }
  .luces__marco { display: block; position: absolute; right: var(--g); top: 50%; height: min(74svh, 740px); margin-top: calc(min(74svh, 740px) / -2 + 34px); aspect-ratio: 4 / 5; overflow: hidden; }
  .luces__marco img { width: 100%; height: 100%; object-fit: cover; }
  .luces__escena .luces__texto { max-width: 36rem; }
}
.luces__velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(21, 19, 15, .9), rgba(21, 19, 15, .35) 55%, rgba(21, 19, 15, .6)); opacity: .5; }
.luces__cable { position: absolute; left: 0; right: 0; top: 0; height: min(22vh, 190px); z-index: 2; }
.luces__cable svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.luces__cable path { fill: none; stroke: rgba(227, 197, 142, .55); stroke-width: 1; }
.bombilla {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--x) * (1 - var(--x)) * 200%);
  width: 14px; height: 14px; margin: -2px 0 0 -7px; border-radius: 50%; background: #5d5546;
}
.bombilla i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff6df, var(--luz) 70%); box-shadow: 0 0 18px 6px rgba(227, 197, 142, .6), 0 0 70px 22px rgba(227, 197, 142, .22); }
.luces__texto { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: clamp(3.5rem, 9vh, 6rem); max-width: 46rem; }
.luces__parrafo { margin-top: 1.5rem; max-width: 31rem; color: rgba(244, 238, 227, .92); font-size: 1.12rem; }

/* ---------- Celebraciones ---------- */
.celebra { padding: var(--vertical) var(--g); }
.celebra__encabezado { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.celebra__lista { border-bottom: 1px solid rgba(42, 38, 31, .2); }
.fila { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-top: 1px solid rgba(42, 38, 31, .2); transition: opacity .4s ease; }
.fila__n { font-size: .82rem; letter-spacing: .2em; color: var(--luz-oscura); align-self: start; padding-top: .9rem; }
.fila__nombre { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.05; letter-spacing: -.012em; transition: transform .6s var(--salir); }
.fila__texto { margin-top: .8rem; max-width: 36rem; color: var(--tinta-suave); }
.fila__mini { display: none; }
.fila__enlace { justify-self: end; padding-bottom: .25rem; border-bottom: 1px solid var(--tinta); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.vista { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .celebra__lista:has(.fila:hover) .fila:not(:hover) { opacity: .38; }
  .fila:hover .fila__nombre { transform: translateX(1rem); }
  .vista { display: block; position: fixed; left: 0; top: 0; width: 270px; aspect-ratio: 4 / 5; z-index: 40; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-200px, -200px); }
  .vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
  .vista img.is-activa { opacity: 1; }
}

/* ---------- Galería ---------- */
.galeria { padding: var(--vertical) 0; overflow: hidden; }
.galeria__encabezado { padding: 0 var(--g); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cinta { overflow: hidden; padding: .5rem 0; }
.cinta__fila { display: flex; gap: clamp(.6rem, 1.4vw, 1.1rem); width: max-content; padding: 0 var(--g); will-change: transform; }
.cinta__fila img { height: clamp(250px, 44vh, 430px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--noche-2); }
.galeria__nota { padding: 1.8rem var(--g) 0; font-size: .85rem; color: rgba(244, 238, 227, .72); }

/* ---------- Formatos ---------- */
.formatos { padding: var(--vertical) var(--g); background: var(--musgo); }
.formatos__encabezado { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.formatos__aviso { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.6rem; font-size: .92rem; letter-spacing: .04em; color: var(--luz); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--luz); box-shadow: 0 0 10px 3px rgba(227, 197, 142, .55); }
.formatos__tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.tarjeta { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.8rem, 3.4vw, 3rem); border: 1px solid rgba(227, 197, 142, .35); }
.tarjeta--clara { background: var(--marfil); color: var(--tinta); border-color: var(--marfil); }
.tarjeta__nombre { font-family: var(--fuente-titulo); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; }
.tarjeta__texto { margin-top: .8rem; max-width: 24rem; opacity: .88; }
.tarjeta__datos { display: flex; gap: 2.6rem; margin-top: 2.2rem; }
.tarjeta__datos dt { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--luz); }
.tarjeta--clara .tarjeta__datos dt { color: var(--luz-oscura); }
.tarjeta__datos dd { font-family: var(--fuente-titulo); font-size: 2.8rem; line-height: 1.1; }
.tarjeta__datos small { font-family: var(--fuente-texto); font-size: .95rem; margin-left: .15rem; opacity: .85; }
.tarjeta__precio { font-family: var(--fuente-titulo); font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1.05; margin: 1.8rem 0 1.4rem; }
.tarjeta__precio sup { font-size: .45em; vertical-align: top; position: relative; top: .1em; margin-left: .1em; }
.tarjeta__rotulo { margin: 0 0 .7rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--luz); }
.tarjeta--clara .tarjeta__rotulo { color: var(--luz-oscura); }
.tarjeta__incluye { margin-bottom: 1.8rem; display: grid; gap: .45rem; font-size: .98rem; }
.tarjeta__incluye li { padding-left: 1.3rem; position: relative; }
.tarjeta__incluye li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 1px; background: var(--luz-oscura); }
.tarjeta:not(.tarjeta--clara) .tarjeta__incluye li::before { background: var(--luz); }
.tarjeta .boton { margin-top: auto; }
.tarjeta__incluye + .boton { margin-top: auto; }
.formatos__nota { margin-top: 2.2rem; max-width: 52rem; font-size: .88rem; color: rgba(244, 238, 227, .8); }

/* ---------- Visita ---------- */
.visita { padding: var(--vertical) var(--g); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.visita__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 86svh; width: 100%; justify-self: stretch; background: var(--marfil-2); }
.visita__foto img { width: 100%; height: 100%; object-fit: cover; }
.visita__texto { margin-top: 1.8rem; max-width: 32rem; color: var(--tinta-suave); font-size: 1.12rem; }
.visita__botones { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.visita__contacto { margin-top: 3rem; display: grid; gap: 0; max-width: 34rem; }
.visita__contacto p { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .95rem 0; border-top: 1px solid rgba(42, 38, 31, .18); }
.visita__contacto span { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--luz-oscura); padding-top: .25rem; }
.visita__contacto a { overflow-wrap: anywhere; border-bottom: 1px solid transparent; transition: border-color .3s ease; }
@media (hover: hover) { .visita__contacto a:hover { border-color: var(--tinta); } }

/* ---------- Pie ---------- */
.pie { padding: clamp(4rem, 8vw, 7rem) var(--g) 2rem; background: var(--noche); overflow: hidden; }
.pie__marca { font-family: var(--fuente-titulo); font-size: clamp(5.5rem, 28.5vw, 28rem); line-height: .86; letter-spacing: -.03em; color: var(--luz); opacity: .9; margin-bottom: clamp(2rem, 5vw, 4rem); white-space: nowrap; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 0; border-top: 1px solid rgba(244, 238, 227, .2); font-size: .95rem; }
.pie__redes { display: flex; gap: 1.8rem; }
.pie__fila--chica { font-size: .8rem; color: rgba(244, 238, 227, .72); }
.pie__credito { letter-spacing: .06em; color: rgba(244, 238, 227, .66); }

/* ---------- Celular ---------- */
@media (max-width: 959px) {
  .nav { display: none; }
  .menu-boton { display: inline-flex; }
  .cabecera .boton--cabecera { min-height: 2.4rem; padding: .45rem 1rem; font-size: .84rem; }
  .marca__nombre { font-size: 1.55rem; }
  .hero__contenido { padding-bottom: 4.5rem; }
  .hero__velo { background: linear-gradient(180deg, rgba(21, 19, 15, .5) 0%, rgba(21, 19, 15, 0) 22%), linear-gradient(0deg, rgba(21, 19, 15, .92) 0%, rgba(21, 19, 15, .7) 42%, rgba(21, 19, 15, 0) 78%); }
  .hero__pie { display: none; }
  .hero__botones .boton { flex: 1 1 auto; }

  .intro { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .intro__fotos { aspect-ratio: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
  .foto { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .foto--a { grid-column: 1 / 5; width: auto; }
  .foto--b { grid-column: 3 / 7; width: auto; margin-top: -3rem; }
  .foto--c { grid-column: 1 / 4; width: auto; margin-top: -2rem; }

  .escenarios__lista { display: grid; height: auto; min-height: 0; gap: 1rem; }
  .panel { height: min(70svh, 560px); min-height: 440px; }
  .panel::before { display: none; }
  .panel::after { opacity: 1; }
  .panel img { transform: none; }
  .panel__nombre { display: none; }
  .panel__tab { pointer-events: none; }
  .panel__info { opacity: 1; transform: none; pointer-events: auto; }
  .panel__n { color: var(--luz); }

  .luces__escena { min-height: 520px; }
  .luces__cable { height: min(14vh, 110px); }
  .bombilla { width: 11px; height: 11px; margin-left: -5.5px; }

  .fila { grid-template-columns: 2.5rem minmax(0, 1fr) 84px; grid-template-areas: "n cuerpo mini" ". enlace enlace"; gap: .9rem 1rem; align-items: start; }
  .fila__n { grid-area: n; }
  .fila__cuerpo { grid-area: cuerpo; }
  .fila__mini { display: block; grid-area: mini; width: 84px; height: 105px; object-fit: cover; }
  .fila__enlace { grid-area: enlace; justify-self: start; }
  .fila__nombre { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  .cinta__fila img { height: clamp(210px, 34vh, 300px); }

  .formatos__tarjetas { grid-template-columns: 1fr; }
  .tarjeta__datos { gap: 2rem; }

  .visita { grid-template-columns: 1fr; }
  .visita__foto { aspect-ratio: 4 / 4.6; max-height: 70svh; }
  .visita__botones .boton { flex: 1 1 100%; }
  .visita__contacto p { grid-template-columns: 1fr; gap: .1rem; }

  .pie__fila { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .panel { height: min(68svh, 620px); }
  .fila { grid-template-columns: 3rem minmax(0, 1fr) 110px; }
  .fila__mini { width: 110px; height: 138px; }
}

/* ---------- Si la persona pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .puertas { display: none; }
  .boton, .boton::before, .rodar__in, .cabecera, .panel, .panel img, .panel__info, .fila__nombre { transition: none; }
  .boton:active { transform: none; }
  .cinta { overflow-x: auto; }
}