/* ─────────────────────────────────────────────
   Agus & Fran — 27.11.26
   Paleta: azul #7D96B9 · crema #FCF2E6 · amarillo #F2DA9C
   Layout: tarjeta centrada (recuadro) sobre fondo neutro
   ───────────────────────────────────────────── */

:root {
  --azul: #7d96b9;
  --crema: #fcf2e6;
  --amarillo: #f2da9c;
  --carbon: #4a4440;
  --serif: 'Cormorant Garamond', 'Cormorant', serif;
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --card-w: 500px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  background: #ece3d4;
  color: var(--azul);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* bloqueado hasta apretar "Ingresá" */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
  height: 100svh;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ───────────── Recuadro (tarjeta centrada) ───────────── */

.card {
  max-width: var(--card-w);
  margin: 0 auto;
  background: var(--crema);
  overflow: hidden;
}

@media (min-width: 540px) {
  body { padding: 28px 0; }
  .card {
    border-radius: 30px;
    box-shadow:
      0 40px 90px -30px rgba(74, 68, 64, 0.45),
      0 0 0 1px rgba(74, 68, 64, 0.06);
  }
}

/* ───────────── Animaciones: reveal al scrollear ───────────── */

[data-reveal],
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1.1s var(--ease-fluid),
    transform 1.1s var(--ease-fluid);
  will-change: opacity, transform;
}

[data-reveal].visible,
[data-reveal-group].visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-group].visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-group].visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-group].visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-reveal-group].visible > *:nth-child(5) { transition-delay: 0.4s; }
[data-reveal-group].visible > *:nth-child(6) { transition-delay: 0.5s; }
[data-reveal-group].visible > *:nth-child(7) { transition-delay: 0.6s; }

/* ───────────── Animaciones: ilustraciones con partes vivas ─────────────
   Cada ilustración se compone de una capa base + capas de partes móviles
   (flores, latas, llamas, bolas de disco…) recortadas de la misma imagen
   y animadas alrededor de su punto de anclaje. */

.fig { position: relative; max-width: 100%; }
.fig > img:first-child { width: 100%; display: block; }

.part {
  position: absolute;
  will-change: transform;
}

/* péndulo / hamaca alrededor del pivote */
.part.swing {
  animation: swing var(--dur, 2.6s) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes swing {
  from { transform: rotate(calc(var(--amp, 3deg) * -1)); }
  to   { transform: rotate(var(--amp, 3deg)); }
}

/* ruedas que giran */
.part.spin {
  animation: spin var(--dur, 1.6s) linear var(--delay, 0s) infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* tela de sombrilla al viento: péndulo + ondulación de brisa */
.part.breeze {
  animation: breeze var(--dur, 3.2s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes breeze {
  0%, 100% { transform: rotate(calc(var(--amp, 2.6deg) * -1)) skewX(0deg); }
  30%      { transform: rotate(calc(var(--amp, 2.6deg) * 0.4)) skewX(1.4deg) scaleY(1.012); }
  55%      { transform: rotate(var(--amp, 2.6deg)) skewX(-0.8deg); }
  78%      { transform: rotate(calc(var(--amp, 2.6deg) * 0.1)) skewX(1deg) scaleY(0.992); }
}

/* ráfagas de viento: trazos que viajan por una curva y terminan en rulo */
.viento-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.viento-svg path {
  fill: none;
  stroke: rgba(252, 242, 230, 0.95);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 52 48;
  stroke-dashoffset: 152;
  opacity: 0;
  animation: viento var(--wd, 4.2s) linear var(--wdel, 0s) infinite;
}

@keyframes viento {
  0%   { stroke-dashoffset: 152; opacity: 0; }
  10%  { opacity: 1; }
  62%  { opacity: 1; }
  88%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* flash de la cámara */
.flash-burst {
  position: absolute;
  left: 80.6%;
  top: 35.4%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 224, 130, 0.95) 35%, rgba(255, 224, 130, 0) 70%);
  box-shadow: 0 0 18px 6px rgba(255, 215, 110, 0.55);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  animation: flash-burst 4.2s ease-out infinite;
}

@keyframes flash-burst {
  0%, 6%    { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  8%        { opacity: 1; transform: translate(-50%, -50%) scale(4.5); }
  11%       { opacity: 0.8; transform: translate(-50%, -50%) scale(6); }
  18%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}

.flash-glow {
  position: absolute;
  inset: -6%;
  background: radial-gradient(circle at 80% 32%, rgba(250, 215, 120, 0.8) 0%, rgba(250, 215, 120, 0) 55%);
  opacity: 0;
  pointer-events: none;
  animation: flash-glow 4.2s ease-out infinite;
}

@keyframes flash-glow {
  0%, 6%    { opacity: 0; }
  8%        { opacity: 1; }
  16%, 100% { opacity: 0; }
}

/* la cámara pega un saltito al disparar */
.fig.camara > img:first-child {
  animation: cam-jolt 4.2s ease-out infinite;
}

@keyframes cam-jolt {
  0%, 6%, 13%, 100% { transform: scale(1); }
  8.5%              { transform: scale(1.035); }
}

/* humo del caño de escape de la combi */
.humo {
  position: absolute;
  left: 9%;
  top: 68%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 150, 185, 0.55) 0%, rgba(125, 150, 185, 0) 70%);
  opacity: 0;
  pointer-events: none;
  animation: humo var(--hd, 2.6s) ease-out infinite;
}

@keyframes humo {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translate(var(--hx, -28px), -34px) scale(2.1); opacity: 0; }
}

/* cascada de copas: el chorro cae y las copas se van llenando en cascada.
   El SVG va detrás del PNG, así el dorado solo asoma por los interiores
   transparentes de las copas. */
.fig.copas > img { position: relative; }

.copas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.copas-svg .chorro {
  fill: none;
  stroke: #f2da9c;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.copas-svg .llenado {
  fill: #f2da9c;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.chorro.ch-1 { animation: copas-ch-1 11s linear infinite; }
.llenado.ll-1 { animation: copas-ll-1 11s linear infinite; }
.chorro.ch-2 { animation: copas-ch-2 11s linear infinite; }
.llenado.ll-2 { animation: copas-ll-2 11s linear infinite; }
.chorro.ch-3 { animation: copas-ch-3 11s linear infinite; }
.llenado.ll-3 { animation: copas-ll-3 11s linear infinite; }

@keyframes copas-ch-1 {
  0%        { opacity: 0; transform: scaleY(0); }
  3%        { opacity: 0.85; }
  8%        { transform: scaleY(1); }
  26%       { opacity: 0.85; }
  32%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes copas-ll-1 {
  0%, 6%   { opacity: 0.7; transform: scaleY(0); }
  28%      { transform: scaleY(1); }
  93%      { opacity: 0.7; transform: scaleY(1); }
  99%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes copas-ch-2 {
  0%, 24%   { opacity: 0; transform: scaleY(0); }
  28%       { opacity: 0.85; }
  34%       { transform: scaleY(1); }
  52%       { opacity: 0.85; }
  58%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes copas-ll-2 {
  0%, 30%  { opacity: 0.7; transform: scaleY(0); }
  54%      { transform: scaleY(1); }
  93%      { opacity: 0.7; transform: scaleY(1); }
  99%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes copas-ch-3 {
  0%, 50%   { opacity: 0; transform: scaleY(0); }
  54%       { opacity: 0.85; }
  60%       { transform: scaleY(1); }
  80%       { opacity: 0.85; }
  86%, 100% { opacity: 0; transform: scaleY(1); }
}

@keyframes copas-ll-3 {
  0%, 56%  { opacity: 0.7; transform: scaleY(0); }
  84%      { transform: scaleY(1); }
  93%      { opacity: 0.7; transform: scaleY(1); }
  99%, 100% { opacity: 0; transform: scaleY(1); }
}

/* bailarines: vaivén desde los pies con rebote al pasar por el centro */
.part.dance {
  animation: dance var(--dur, 2s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes dance {
  0%, 100% { transform: rotate(calc(var(--amp, 3deg) * -1)) translateY(0); }
  25%      { transform: rotate(0deg) translateY(-1.6%); }
  50%      { transform: rotate(var(--amp, 3deg)) translateY(0); }
  75%      { transform: rotate(0deg) translateY(-1.6%); }
}

/* llamas de vela */
.part.flicker {
  animation: flicker var(--dur, 1.1s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes flicker {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(0.94, 1.08) rotate(1.6deg); }
  55% { transform: scale(1.05, 0.9) rotate(-1.2deg); }
  80% { transform: scale(0.97, 1.05) rotate(0.8deg); }
}

/* latido / respiración (sello del sobre, cámara) */
.pulse {
  animation: pulse var(--dur, 2s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

/* flotación vertical (el autito del original) */
.float {
  animation: float var(--fd, 6s) ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

/* vaivén horizontal (la kombi) */
.sway-x {
  animation: sway-x var(--fd, 2.4s) ease-in-out infinite alternate;
}

@keyframes sway-x {
  from { transform: translateX(-5px); }
  to   { transform: translateX(5px); }
}

/* calendario: la hoja del corazón gira por arriba del aro, queda apoyada
   arriba (dorso liso a la vista) y deja ver el 27N */
.cal-page {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: cal-flip 10s ease-in-out infinite;
}

@keyframes cal-flip {
  0%, 32%   { transform: scaleY(1); }
  42%       { transform: scaleY(-1.08); }
  46%, 86%  { transform: scaleY(-0.96); }
  96%, 100% { transform: scaleY(1); }
}

.cal-heart {
  transform-box: fill-box;
  transform-origin: center;
  /* late mientras está a la vista; se oculta cuando la hoja está dada vuelta
     para que se vea el dorso liso de la página */
  animation: pulse 1.8s ease-in-out infinite, cal-heart-hide 10s linear infinite;
}

@keyframes cal-heart-hide {
  0%, 36%   { opacity: 1; }
  38%, 90%  { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > *, [data-load] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .float, .sway-x, .pulse, .part, .cal-page, .cal-heart,
  .humo, .viento-svg path, .flash-burst, .flash-glow, .fig.camara > img:first-child,
  .copas-svg .chorro, .copas-svg .llenado { animation: none !important; }
}

/* ───────────── Hero ───────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #7d96b9;
  color: var(--crema);
  text-align: center;
  overflow: hidden;
  padding-bottom: 10px;
}

@media (min-width: 540px) {
  .hero { min-height: calc(100svh - 56px); }
}

.hero-lights { width: 100%; margin-top: 14px; }

.hero-center { padding: 0 24px; }

.hero-names {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(52px, 13vw, 68px);
  line-height: 1.05;
}

.hero-date {
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: 0.3em;
  margin-top: 14px;
  font-weight: 500;
}

.btn-ingresa { margin-top: 44px; }

.hero-table { width: min(62%, 300px); margin-bottom: 8px; }

/* entrada del hero al cargar */
[data-load] {
  opacity: 0;
  transform: translateY(24px);
  animation: load-in 1.3s var(--ease-fluid) forwards;
}
[data-load="1"] { animation-delay: 0.15s; }
[data-load="2"] { animation-delay: 0.4s; }
[data-load="3"] { animation-delay: 0.7s; }
[data-load="4"] { animation-delay: 1.3s; }
[data-load="5"] { animation-delay: 0.95s; }

@keyframes load-in {
  to { opacity: 1; transform: translateY(0); }
}


/* ───────────── Secciones base ───────────── */

.section { padding: 72px 28px; text-align: center; }

.seccion-crema { background: var(--crema); }

.titulo-caps {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--azul);
  margin-bottom: 18px;
}

.titulo-caps.claro { color: var(--crema); }
.titulo-caps.izq { text-align: left; }
.titulo-caps.sub { font-size: 21px; letter-spacing: 0.3em; margin: -6px 0 8px; }
.titulo-caps.chico { font-size: 17px; letter-spacing: 0.3em; margin: 26px 0 6px; }

.titulo-grande {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 9vw, 46px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--azul);
  margin-bottom: 14px;
}

.titulo-grande.claro { color: var(--crema); }

.titulo-serif {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 8vw, 42px);
  color: var(--azul);
  margin-bottom: 12px;
}

.titulo-serif.claro { color: var(--crema); }

.parrafo {
  font-size: 19px;
  font-weight: 500;
  max-width: 400px;
  margin: 0 auto 26px;
  color: var(--azul);
}

.parrafo.grande { font-size: 22px; margin-bottom: 36px; }
.parrafo.claro { color: var(--crema); }
.parrafo.chico { font-size: 16px; margin-top: 22px; margin-bottom: 0; }
.parrafo a { font-weight: 600; }

.ilustracion { display: flex; justify-content: center; margin-bottom: 26px; }
.ilustracion.ancha { margin: 10px -28px 26px; }
.ilustracion.ancha .fig { width: 100%; max-width: none; }

/* botones pill con borde */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  text-decoration: none;
  color: var(--azul);
  background: transparent;
  border: 1.4px solid var(--azul);
  border-radius: 999px;
  padding: 13px 34px;
  cursor: pointer;
  transition: background 0.45s var(--ease-fluid), color 0.45s var(--ease-fluid), transform 0.45s var(--ease-fluid);
}
.btn:hover { background: var(--azul); color: var(--crema); transform: translateY(-2px); }

.btn-claro { color: var(--crema); border-color: var(--crema); }
.btn-claro:hover { background: var(--crema); color: var(--azul); }

/* ───────────── Nos casamos (tarjeta con borde) ───────────── */

.outline-card {
  border: 1.4px solid var(--azul);
  border-radius: 26px;
  padding: 44px 30px 36px;
  text-align: center;
}

.icono-calendario {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
}

/* ───────────── Countdown ───────────── */

.countdown-wrap { padding-top: 0; }

.countdown-box {
  background: var(--azul);
  color: var(--crema);
  padding: 52px 24px 56px;
  text-align: center;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(4px, 1.6vw, 12px);
  margin: 10px 0 36px;
}

.count-unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(52px, 17vw, 86px); }

.count-num {
  font-family: var(--serif);
  font-size: clamp(38px, 11vw, 58px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.count-label {
  font-size: clamp(9px, 2.4vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 10px;
  opacity: 0.9;
}

.count-sep {
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 42px);
  opacity: 0.65;
  padding-top: 0.12em;
}

/* ───────────── Collage #Franchi ───────────── */

.collage-panel {
  background: var(--azul);
  padding: 10px;
}

.collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.collage .col {
  display: grid;
  gap: 10px;
}

.collage img {
  width: 100%;
  object-fit: cover;
}

.tile-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}

.tile-tag span {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  color: var(--crema);
}

/* ───────────── RSVP ───────────── */

.rsvp {
  background: var(--azul);
  text-align: center;
  padding-bottom: 64px;
}

.rsvp-candles {
  width: 100%;
  padding: 26px 10px 6px;
}

.rsvp-inner { padding: 20px 28px 0; }

#rsvp-form {
  max-width: 360px;
  margin: 14px auto 0;
  text-align: left;
}

.field { margin-bottom: 26px; }

.field-label {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--crema);
  margin-bottom: 10px;
}

.radio-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--crema);
  cursor: pointer;
}

.radio input { position: absolute; opacity: 0; }

.radio-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.6px solid var(--crema);
  position: relative;
  transition: border-color 0.3s ease;
}

.radio input:checked + .radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--crema);
}

.field input[type="text"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  color: #45587a;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  transition: box-shadow 0.3s ease;
  appearance: none;
  resize: vertical;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%237d96b9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px rgba(252, 242, 230, 0.55);
}

.btn-enviar {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--azul);
  background: var(--crema);
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  cursor: pointer;
  margin-top: 6px;
  transition: transform 0.4s var(--ease-fluid), box-shadow 0.4s var(--ease-fluid);
}

.btn-enviar:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(40, 50, 70, 0.5);
}

/* ───────────── Preguntas (borde dibujado a mano) ───────────── */

.preguntas-box {
  padding: 34px 26px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='480'%3E%3Cfilter id='w' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.5'/%3E%3C/filter%3E%3Crect x='8' y='8' width='404' height='464' rx='22' fill='none' stroke='%237D96B9' stroke-width='1.8' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  text-align: left;
}

.preguntas-box .titulo-caps { font-size: 24px; margin-bottom: 10px; }

.accordion details {
  border-bottom: 1px solid rgba(125, 150, 185, 0.45);
}

.accordion details:last-child { border-bottom: none; }

.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 2px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--azul);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.accordion summary::-webkit-details-marker { display: none; }

.acc-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  position: relative;
}
.acc-icon::before, .acc-icon::after {
  content: '';
  position: absolute;
  background: var(--azul);
  border-radius: 1px;
  inset: 0;
  margin: auto;
}
.acc-icon::before { width: 13px; height: 1.6px; }
.acc-icon::after { width: 1.6px; height: 13px; transition: transform 0.5s var(--ease-fluid); }

.accordion details[open] .acc-icon::after { transform: rotate(90deg) scaleY(0); }

.acc-body { padding: 0 2px; }
.acc-body p { padding-bottom: 18px; font-size: 17px; }
.acc-body a { font-weight: 600; }

/* acordeón suelto (Datos bancarios) */
.accordion.solo {
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid rgba(125, 150, 185, 0.45);
}
.accordion.solo details { border-bottom: 1px solid rgba(125, 150, 185, 0.45); }

.banco-datos { padding-bottom: 4px; }

.copiable {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--azul);
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(125, 150, 185, 0.6);
  padding: 0 0 1px;
  cursor: pointer;
}

.copiable.copied::after {
  content: ' ✓ copiado';
  font-size: 12px;
  font-style: italic;
}

.banco-nota {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  opacity: 0.8;
  padding: 6px 0 18px;
}
.banco-datos div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}
.banco-datos dt {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.banco-datos dd { font-size: 17px; }

/* ───────────── Alojamiento + Transporte ───────────── */

.alojamiento-wrap { padding-left: 16px; padding-right: 16px; }

.panel-azul {
  background: var(--azul);
  border-radius: 24px;
  padding: 52px 26px 30px;
  text-align: center;
}

.card-crema {
  background: var(--crema);
  border-radius: 18px;
  padding: 36px 26px 30px;
  margin-top: 40px;
  text-align: center;
}

.card-crema img { margin: 0 auto 14px; }
.card-crema .parrafo { margin-bottom: 0; }

/* ───────────── Playlist ───────────── */

.playlist-wrap { padding-left: 16px; padding-right: 16px; }

.playlist-card {
  position: relative;
  background: var(--azul);
  border-radius: 34px;
  padding: 0 26px 46px;
  text-align: center;
  overflow: hidden;
}

.playlist-balls {
  width: min(52%, 220px);
  margin: 0 auto 20px;
}

/* ───────────── La previa / Footer ───────────── */

.footer {
  background: var(--azul);
  text-align: center;
  padding: 60px 28px 30px;
}

.footer-names {
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 46px);
  font-weight: 500;
  color: var(--crema);
  margin-bottom: 26px;
}

.credits-strip {
  background: var(--crema);
}

.credits-bar {
  background: var(--carbon);
  color: var(--crema);
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  text-align: center;
}

.credits-bar a { text-decoration: none; }
.credits-bar a:hover { text-decoration: underline; }

.credits-icons { display: flex; gap: 12px; }
.credits-icons svg { width: 20px; height: 20px; display: block; }

/* ───────────── Página de alojamiento ───────────── */

.aloja-hero {
  background: var(--azul);
  color: var(--crema);
  text-align: center;
  padding-bottom: 36px;
}

.aloja-hero-text { padding: 26px 28px 8px; }

.aloja-kicker {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.aloja-main { padding-top: 56px; }

.aloja-lista {
  list-style: none;
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

.aloja-lista li {
  padding: 14px 2px;
  border-bottom: 1px solid rgba(125, 150, 185, 0.35);
}

.aloja-lista li:last-child { border-bottom: none; }

.aloja-lista h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--azul);
  margin-bottom: 2px;
}

.aloja-lista span {
  font-size: 16px;
  color: var(--azul);
  opacity: 0.9;
}

.aloja-lista span a {
  color: var(--azul);
  text-decoration: none;
  border-bottom: 1px dashed rgba(125, 150, 185, 0.5);
}

.aloja-volver { margin-top: 44px; }

.aloja-footer { padding: 44px 28px 40px; }
.aloja-footer .footer-names { margin-bottom: 6px; }

/* ───────────── Botón música ───────────── */

#music-toggle {
  position: fixed;
  bottom: 20px;
  right: max(18px, calc(50vw - var(--card-w) / 2 + 18px));
  z-index: 60;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #e4e0d8;
  color: #4d5e7c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(40, 40, 40, 0.5);
  transition: transform 0.4s var(--ease-fluid);
}
#music-toggle:hover { transform: scale(1.08); }
#music-toggle svg { width: 20px; height: 20px; }