/* ============================================================
   CON CADA LATIDO — La web de boda de los invitados
   ============================================================ */

/* ---------------------------------------------- aviso de demo */
.boda-aviso {
  position: sticky; top: 0; z-index: 50;
  background: var(--malva-700);
  color: var(--malva-50);
  text-align: center;
  padding: .65rem 1rem;
  font-size: var(--t-micro);
  letter-spacing: .04em;
}
.boda-aviso strong { letter-spacing: var(--track-nav); text-transform: uppercase; }
.boda-aviso a {
  margin-left: .6rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ------------------------------------------------------ portada */
.boda-portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(168deg, var(--crema-0), var(--crema-50) 48%, var(--crema-100));
}
.boda-portada__manchas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.boda-portada__interior { display: flex; flex-direction: column; align-items: center; gap: .5rem; }

.boda-portada__nombres {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.6rem, .3rem + 1.4vw, 1.6rem);
  flex-wrap: wrap;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem);
  line-height: 1;
  margin-block: .3rem;
}
.boda-portada__nombres em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: .82em;
  color: var(--malva-500);
}
.boda-portada__fecha { color: var(--madera-600); }
.boda-portada__lugar {
  font-size: var(--t-small);
  color: var(--text-tenue);
  letter-spacing: .04em;
}
.boda-portada__hashtag {
  margin-top: 1.4rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  color: var(--agua-600);
}

/* cuenta atrás */
.cuenta-atras {
  display: flex; gap: clamp(1rem, .5rem + 2vw, 2.6rem);
  justify-content: center;
  margin-block: 2rem;
}
.cuenta-atras div { display: flex; flex-direction: column; align-items: center; }
.cuenta-atras strong {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 300;
  color: var(--madera-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cuenta-atras span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--text-tenue);
  margin-top: .3rem;
}

/* ------------------------------------------------ navegación */
.boda-nav {
  position: sticky;
  top: 0; z-index: 40;
  background: color-mix(in srgb, var(--crema-50) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--border);
}
.boda-aviso ~ .boda-nav { top: 41px; }
.boda-nav__pista {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding: .55rem var(--gutter);
  max-width: var(--ancho-max);
  margin-inline: auto;
  scrollbar-width: none;
}
.boda-nav__pista::-webkit-scrollbar { display: none; }
.boda-nav__pista a {
  flex: 0 0 auto;
  padding: .5em 1em;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-suave);
  border-radius: 999px;
  transition: background var(--dur-rapida), color var(--dur-rapida);
}
.boda-nav__pista a:hover { background: var(--madera-50); color: var(--madera-700); }

/* --------------------------------------- zona de invitados */
.zona-invitados { background: var(--crema-100); }

.accion-invitado {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-media) var(--ease-suave),
              box-shadow var(--dur-media), border-color var(--dur-media);
}
.accion-invitado::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--madera-400), var(--agua-300), var(--malva-300));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-lenta) var(--ease-salida);
}
.accion-invitado:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
  border-color: var(--madera-200);
}
.accion-invitado:hover::before { transform: scaleX(1); }

.accion-invitado__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--madera-200);
  line-height: 1;
}
.accion-invitado h3 { font-size: 1.22rem; font-weight: 400; line-height: 1.2; }
.accion-invitado p {
  font-size: var(--t-small);
  color: var(--text-suave);
  line-height: 1.6;
  flex-grow: 1;
}
.accion-invitado__cta {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: .6rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--acento);
}
.accion-invitado__cta svg { transition: transform var(--dur-media) var(--ease-salida); }
.accion-invitado:hover .accion-invitado__cta svg { transform: translateX(5px); }

/* ---------------------------------------------- cronograma */
.linea-tiempo {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 680px;
  position: relative;
}
.linea-tiempo::before {
  content: '';
  position: absolute;
  left: 86px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(var(--madera-200), var(--agua-200), var(--malva-200));
}
@media (max-width: 560px) { .linea-tiempo::before { left: 62px; } }

.hito {
  display: grid;
  grid-template-columns: 74px 26px 1fr;
  gap: 1rem;
  align-items: start;
  padding-block: .9rem;
}
@media (max-width: 560px) { .hito { grid-template-columns: 50px 24px 1fr; gap: .7rem; } }

.hito__hora {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  letter-spacing: .06em;
  color: var(--madera-700);
  text-align: right;
  padding-top: .18em;
  font-variant-numeric: tabular-nums;
}
.hito__punto {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--surface);
  border: 1px solid var(--border-fuerte);
  border-radius: 50%;
  font-size: .78rem;
  z-index: 1;
}
.hito--destacado .hito__punto {
  border-color: var(--malva-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--malva-200) 55%, transparent);
}
.hito__texto h3 { font-size: 1.24rem; font-weight: 400; }
.hito__texto p { font-size: var(--t-small); color: var(--text-suave); margin-top: .15rem; }

.lugares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
}
.lugar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.lugar h3 { font-size: 1.35rem; font-weight: 400; }
.lugar p { font-size: var(--t-small); color: var(--text-suave); }
.lugar .enlace-flecha { margin-top: .6rem; align-self: flex-start; }

/* --------------------------------------------------- RSVP */
.rsvp {
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: clamp(1.3rem, 1rem + 2vw, 2.6rem);
  box-shadow: var(--sombra-s);
}
.rsvp fieldset { border: 0; padding: 0; margin: 0; }
.rsvp legend {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--text-tenue);
  margin-bottom: .55rem;
  padding: 0;
}
.rsvp__detalle { display: grid; gap: 1.3rem; }

.opciones-si-no { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 520px) { .opciones-si-no { grid-template-columns: 1fr; } }

/* Las tarjetas de opción son <label>, así que heredarían las
   versalitas de `.campo label`. Aquí se corta la herencia. */
.opcion-grande, .menu-opcion, .bus-opcion, .alergeno {
  text-transform: none;
  letter-spacing: normal;
}

.opcion-grande { cursor: pointer; }
.opcion-grande input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-grande span {
  display: flex; flex-direction: column; gap: .1rem;
  padding: 1rem 1.2rem;
  background: var(--crema-50);
  border: 1.5px solid var(--border-fuerte);
  border-radius: var(--r-m);
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.opcion-grande strong { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; }
.opcion-grande em { font-style: normal; font-size: 1.1rem; color: var(--text-tenue); }
.opcion-grande input:checked + span {
  border-color: var(--agua-500);
  background: var(--agua-50);
}
.opcion-grande input:checked + span em { color: var(--agua-600); }
.opcion-grande input:focus-visible + span { outline: 2px solid var(--madera-500); outline-offset: 2px; }

.menus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: .5rem; }
.menu-opcion { cursor: pointer; }
.menu-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.menu-opcion span {
  display: flex; flex-direction: column;
  padding: .75rem .9rem;
  background: var(--crema-50);
  border: 1.5px solid var(--border-fuerte);
  border-radius: var(--r-m);
  height: 100%;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.menu-opcion strong { font-size: .92rem; font-weight: 400; }
.menu-opcion em { font-style: normal; font-size: var(--t-micro); color: var(--text-tenue); line-height: 1.4; }
.menu-opcion input:checked + span { border-color: var(--malva-400); background: var(--malva-50); }
.menu-opcion input:focus-visible + span { outline: 2px solid var(--madera-500); outline-offset: 2px; }

.alergenos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.alergeno { cursor: pointer; }
.alergeno input { position: absolute; opacity: 0; pointer-events: none; }
.alergeno span {
  display: inline-block;
  padding: .45em .95em;
  font-size: var(--t-micro);
  border: 1px solid var(--border-fuerte);
  border-radius: 999px;
  color: var(--text-suave);
  transition: all var(--dur-rapida);
}
.alergeno input:checked + span {
  background: var(--rosa-100);
  border-color: var(--rosa-500);
  color: var(--burdeos-700);
}
.alergeno input:focus-visible + span { outline: 2px solid var(--madera-500); outline-offset: 2px; }
.alergeno-otro {
  width: 100%;
  padding: .8em 1em;
  font-size: var(--t-small);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-m);
  background: var(--crema-50);
}

.buses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: .5rem; }
.bus-opcion { cursor: pointer; }
.bus-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.bus-opcion span {
  display: flex; flex-direction: column;
  padding: .75rem .9rem;
  background: var(--crema-50);
  border: 1.5px solid var(--border-fuerte);
  border-radius: var(--r-m);
  height: 100%;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.bus-opcion strong { font-size: .92rem; font-weight: 400; }
.bus-opcion em { font-style: normal; font-size: var(--t-micro); color: var(--text-tenue); }
.bus-opcion input:checked + span { border-color: var(--agua-500); background: var(--agua-50); }
.bus-opcion input:focus-visible + span { outline: 2px solid var(--madera-500); outline-offset: 2px; }

.aviso-envio--mal { background: var(--rosa-100); border-color: var(--rosa-300); color: var(--burdeos-700); }
.aviso-envio--triste { background: var(--malva-50); border-color: var(--malva-200); color: var(--malva-700); }

/* --------------------------------------------------- muro */
.muro__alta {
  display: grid; gap: .8rem;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 1.4rem;
}
.muro__alta input, .muro__alta select, .muro__alta textarea {
  width: 100%;
  padding: .8em 1em;
  font-size: var(--t-small);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-m);
  background: var(--crema-50);
  font-family: var(--font-sans);
}
.muro__alta textarea { resize: vertical; line-height: 1.6; }

.muro__filtros {
  display: flex; gap: .3rem; justify-content: center;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.muro__filtros button {
  padding: .55em 1.3em;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--border-fuerte);
  border-radius: 999px;
  color: var(--text-suave);
  cursor: pointer;
  transition: all var(--dur-rapida);
}
.muro__filtros button:hover { border-color: var(--madera-300); color: var(--madera-700); }
.muro__filtros button[aria-selected='true'] {
  background: var(--madera-600); border-color: var(--madera-600); color: var(--crema-0);
}
.muro__filtros span { color: var(--coral-500); text-transform: none; letter-spacing: 0; }
.muro__filtros button[aria-selected='true'] span { color: var(--rosa-300); }

.muro {
  columns: 3 280px;
  column-gap: 1.1rem;
  max-width: 1100px;
  margin-inline: auto;
}
.muro__vacio { text-align: center; color: var(--text-tenue); font-size: var(--t-small); }

.nota__etiqueta--abierta { background: var(--rosa-100); color: var(--burdeos-700); }

.nota__responder {
  margin-top: .8rem;
  padding: 0;
  background: none; border: 0;
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--agua-600);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--agua-500) 35%, transparent);
  padding-bottom: .2em;
  transition: color var(--dur-rapida), border-color var(--dur-rapida);
}
.nota__responder:hover { color: var(--agua-800); border-color: var(--agua-600); }

.nota__caja { display: grid; gap: .5rem; margin-top: .8rem; }
.nota__caja textarea {
  width: 100%;
  padding: .7em .9em;
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1.55;
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-s);
  background: var(--crema-50);
  resize: vertical;
}
.nota__caja .boton { justify-self: start; }
.nota {
  break-inside: avoid;
  margin-bottom: 1.1rem;
  padding: 1.2rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-s);
}
.nota header {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.nota header strong { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; }
.nota header time { font-size: var(--t-micro); color: var(--text-tenue); }
.nota__etiqueta {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--agua-100);
  color: var(--agua-800);
  padding: .2em .6em;
  border-radius: 999px;
}
.nota p { font-size: var(--t-small); color: var(--text-suave); line-height: 1.65; }
.nota--duda { border-left: 3px solid var(--agua-400); }
.nota__respuesta {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--agua-50);
  border-radius: var(--r-s);
}
.nota__respuesta strong { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--agua-700); }
.nota__respuesta p { margin-top: .3rem; font-size: var(--t-small); color: var(--agua-800); }

/* -------------------------------------------------- juego */
.juego { display: grid; gap: 1.2rem; }
.pregunta {
  border: 1px solid var(--agua-200);
  background: var(--surface);
  border-radius: var(--r-l);
  padding: 1.3rem 1.4rem;
  margin: 0;
}
.pregunta legend {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  padding: 0 .4rem;
  margin-left: -.4rem;
}
.pregunta__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: .5rem;
  margin-top: .9rem;
}
.pregunta__opcion {
  padding: .8em 1em;
  font-size: var(--t-small);
  text-align: left;
  background: var(--crema-50);
  border: 1.5px solid var(--border-fuerte);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: all var(--dur-rapida);
}
.pregunta__opcion:hover:not(:disabled) { border-color: var(--agua-400); background: var(--agua-50); }
.pregunta__opcion:disabled { cursor: default; opacity: .6; }
.pregunta__opcion--bien {
  border-color: var(--agua-500); background: var(--agua-100);
  color: var(--agua-800); opacity: 1;
}
.pregunta__opcion--mal {
  border-color: var(--rosa-500); background: var(--rosa-100);
  color: var(--burdeos-700); opacity: 1;
}
.pregunta__revelacion {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: var(--malva-50);
  border-left: 3px solid var(--malva-400);
  border-radius: var(--r-s);
  font-size: var(--t-small);
  color: var(--malva-800);
  line-height: 1.6;
}

/* ------------------------------------------------ galería */
.galeria__alta {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.galeria__alta input[type='text'] {
  padding: .8em 1em;
  font-size: var(--t-small);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-m);
  background: var(--surface);
  min-width: 200px;
}
.galeria__boton { cursor: pointer; }
.galeria__estado {
  width: 100%; text-align: center;
  font-size: var(--t-small); color: var(--agua-700);
}
.galeria {
  columns: 4 220px;
  column-gap: .8rem;
}
.galeria__foto {
  position: relative;
  break-inside: avoid;
  margin: 0 0 .8rem;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--sombra-s);
}
.galeria__foto img { width: 100%; display: block; }
.galeria__foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .7rem .5rem;
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--crema-0);
  background: linear-gradient(to top, rgba(30,20,14,.72), transparent);
}
.galeria__foto button {
  position: absolute; top: .4rem; right: .4rem;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(30,20,14,.55);
  color: var(--crema-0);
  cursor: pointer;
  font-size: 1rem; line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-rapida);
}
.galeria__foto:hover button { opacity: 1; }
.galeria__vacia, .galeria__nota {
  text-align: center;
  font-size: var(--t-small);
  color: var(--text-tenue);
  line-height: 1.65;
  max-width: 62ch;
  margin: 1.5rem auto 0;
}
.galeria__nota { font-size: var(--t-micro); }

/* ------------------------------------------------- regalo */
.regalo__cuentas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.regalo__cuenta {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  text-align: center;
}
.regalo__cuenta code {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--madera-700);
  word-break: break-all;
}
.regalo__intro-lista {
  text-align: center;
  font-size: var(--t-small);
  color: var(--text-suave);
  max-width: 56ch;
  margin: 1rem auto 0;
  line-height: 1.65;
}
.regalo__quien { display: flex; justify-content: center; margin-top: 1.1rem; }
.regalo__quien input {
  width: min(100%, 320px);
  padding: .8em 1.1em;
  font-size: var(--t-small);
  text-align: center;
  border: 1px solid var(--border-fuerte);
  border-radius: 999px;
  background: var(--surface);
}

.regalo-experiencia {
  padding: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  display: flex; flex-direction: column; gap: .4rem;
  height: 100%;
  transition: border-color var(--dur-rapida), background var(--dur-rapida);
}
.regalo-experiencia h4 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 400; }
.regalo-experiencia p { font-size: var(--t-small); color: var(--text-suave); flex-grow: 1; }
.regalo-experiencia strong {
  font-family: var(--font-serif);
  font-size: 1.3rem; font-weight: 400;
  color: var(--malva-600);
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.regalo-experiencia .boton { margin-top: .6rem; align-self: flex-start; }

.regalo-experiencia--reservada {
  background: var(--agua-50);
  border-color: var(--agua-200);
}
.regalo-experiencia--reservada h4,
.regalo-experiencia--reservada p { opacity: .68; }
.regalo-experiencia--reservada strong { color: var(--agua-700); }
.regalo-experiencia__reservado {
  margin-top: .6rem;
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--agua-700);
  flex-grow: 0;
  opacity: 1;
}
.regalo-experiencia__reservado button {
  margin-left: .5rem;
  border: 0; background: none;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-tenue);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.regalo-experiencia__reservado button:hover { color: var(--burdeos-500); }
.regalo__nota { text-align: center; font-size: var(--t-small); color: var(--agua-700); margin-top: 1.2rem; min-height: 1.4em; }

/* ---------------------------------------------- alojamiento */
.hotel {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  height: 100%;
  transition: transform var(--dur-media) var(--ease-suave), box-shadow var(--dur-media);
}
.hotel:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.hotel h3 { font-size: 1.35rem; font-weight: 400; }
.hotel__distancia { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--agua-600); }
.hotel__precio { font-family: var(--font-serif); font-size: 1.18rem; color: var(--madera-700); }
.hotel__nota { font-size: var(--t-small); color: var(--text-suave); line-height: 1.6; flex-grow: 1; margin-block: .4rem; }
.hotel__codigo {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  background: var(--crema-100);
  border-radius: var(--r-s);
}
.hotel__codigo code { font-family: var(--font-sans); letter-spacing: .1em; color: var(--madera-800); }
.hotel__descuento { font-size: var(--t-small); color: var(--malva-600); }
.hotel__acciones { display: flex; gap: .4rem; margin-top: .8rem; }
.hotel__acciones .boton { flex: 1; }

/* ------------------------------------- panel de los novios */
.panel-boda__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
}
.panel-boda__cifras div {
  text-align: center;
  padding: 1.4rem 1rem;
  background: rgba(255,246,232,.08);
  border: 1px solid rgba(255,246,232,.16);
  border-radius: var(--r-l);
}
.panel-boda__cifras strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem; font-weight: 300;
  color: var(--crema-0);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.panel-boda__cifras span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--madera-200);
  margin-top: .5rem;
  display: block;
}

.panel-boda__desglose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.4rem;
  margin-top: 1.6rem;
}
.panel-boda__desglose h4 {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--madera-200);
  margin-bottom: .6rem;
}
.panel-boda__desglose ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
.panel-boda__desglose li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--t-small);
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(255,246,232,.14);
  color: var(--crema-100);
}
.panel-boda__desglose b { color: var(--crema-0); font-weight: 400; }
.panel-boda__vacio {
  text-align: center;
  margin-top: 1.4rem;
  color: var(--madera-100);
  font-size: var(--t-small);
  line-height: 1.7;
}
.panel-boda__aviso {
  text-align: center;
  margin-top: 1rem;
  font-size: var(--t-small);
  color: var(--rosa-300);
  min-height: 1.4em;
}

/* ---------------------------------------------------- pie */
.boda-pie {
  text-align: center;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: linear-gradient(0deg, var(--crema-100), var(--crema-50));
  border-top: 1px solid var(--border);
}
.boda-pie .script--xl { color: var(--malva-500); }
.boda-pie__nombres {
  font-size: var(--t-small);
  letter-spacing: .06em;
  color: var(--text-tenue);
  margin-top: .6rem;
}
.boda-pie__marca {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: 1rem;
  opacity: .8;
  transition: opacity var(--dur-rapida);
}
.boda-pie__marca:hover { opacity: 1; }
.boda-pie__marca img { height: 54px; width: auto; }
.boda-pie__marca span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--text-tenue);
}