/* =========================================================
   Sharely & Jorge — estilos
   Mundo visual: "Atardecer en San Pancho". La paleta sale de sus fotos:
   arena mojada, Pacífico profundo, coral del atardecer y la tinta del mar de noche.
   Motivo: la línea del horizonte. El sol baja sección tras sección: alto en la
   portada, toca el horizonte en "¿Nos acompañas?" (5:30 p.m.) y se pone en el pie.
   ========================================================= */
:root {
  /* Superficies */
  --arena: #f7eee5;          /* fondo de página */
  --arena-2: #efe0d0;        /* banda alterna */
  --espuma: #fffaf4;         /* tarjetas */
  --linea: #e2cdb8;          /* bordes y divisores decorativos */
  --borde-campo: #9a8570;    /* bordes de campos del formulario (≥3:1 sobre blanco) */
  /* Texto */
  --tinta: #1e2d33;          /* texto principal */
  --tinta-2: #4b585c;        /* texto secundario */
  /* Acentos */
  --pacifico: #17565e;       /* etiquetas, iconos, títulos de apoyo */
  --pacifico-hondo: #0f3d44; /* banda de "El gran día" */
  --coral: #e07a5f;          /* sol, líneas decorativas (no para texto pequeño) */
  --coral-hondo: #a8452a;    /* botones y enlaces */
  --sol: #f4b36b;            /* brillo decorativo */
  /* Sobre la banda oscura */
  --sobre-hondo: #f7eee5;
  --sobre-hondo-2: #bcd3d1;

  --f-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --f-texto: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radio: 16px;
  --ancho: 1080px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --sombra-tarjeta: 0 24px 60px -32px rgba(30, 45, 51, .45);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--arena);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  caret-color: var(--coral-hondo);
  accent-color: var(--coral-hondo);
}
::selection { background: color-mix(in srgb, var(--coral) 35%, transparent); color: var(--tinta); }

img { max-width: 100%; display: block; }
a { color: var(--coral-hondo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Motivo: horizonte con el sol ---------- */
.horizonte {
  display: block; width: 100%; height: 48px; overflow: visible;
  --h-linea: color-mix(in srgb, var(--pacifico) 55%, transparent); --h-sol: var(--coral);
}
/* La línea se desvanece en los extremos con un degradado propio (no con mask, que recortaría el sol) */
.horizonte .h-linea { fill: none; stroke: var(--h-linea); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.horizonte .h-stop { stop-color: var(--h-linea); }
.horizonte .sol { fill: var(--h-sol); }
.horizonte .h-reflejo { fill: none; stroke: var(--h-sol); stroke-width: 2; stroke-linecap: round; opacity: .5; }
.horizonte-seccion { margin-top: clamp(56px, 9vw, 88px); }
.horizonte-portada { margin-top: 28px; }
/* Al pasar por cada horizonte, el sol termina de bajar hasta su lugar */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .horizonte .sol {
      animation: ponerse linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes ponerse { from { transform: translateY(-14px); } to { transform: translateY(0); } }

/* ---------- Saltar al contenido (teclado / lector de pantalla) ---------- */
.saltar {
  position: fixed; left: 12px; top: -60px; z-index: 70; padding: 10px 16px; border-radius: 999px;
  background: var(--tinta); color: var(--arena); text-decoration: none; transition: top 160ms var(--ease-out);
}
.saltar:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
#detalles:focus, h1[tabindex="-1"]:focus { outline: none; }
body.visor-abierto { overflow: hidden; }

/* ---------- Aviso de borrador y marcas de pendiente ---------- */
.aviso-borrador { display: none; }
.borrador .aviso-borrador {
  display: block; position: fixed; z-index: 60;
  left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--tinta); color: var(--arena);
  font-size: 12px; line-height: 1; padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(15, 30, 35, .5);
}
@media (max-width: 560px) { .borrador .aviso-borrador span { display: none; } }
.borrador .pendiente { outline: 2px dashed var(--coral-hondo); outline-offset: 8px; border-radius: 6px; position: relative; }
.borrador .pendiente::after {
  content: "Pendiente"; position: absolute; top: -16px; right: 8px;
  background: var(--coral-hondo); color: #fff;
  font: 500 10px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 4px;
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  height: calc(60px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--arena) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.nav-marca {
  font-family: var(--f-titulo); font-weight: 600; font-size: 22px; letter-spacing: .1em;
  text-decoration: none; color: var(--tinta);
}
.nav-marca span { font-family: var(--f-script); font-weight: 400; color: var(--coral-hondo); letter-spacing: 0; }
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  text-decoration: none; font-size: 15px; font-weight: 500;
  color: var(--tinta-2); border-radius: 999px;
}
.nav-links .nav-cta { color: var(--espuma); background: var(--coral-hondo); padding: 0 18px; margin-left: 6px; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--tinta); }
  .nav-links .nav-cta:hover { color: #fff; background: #8d3820; }
}
@media (max-width: 560px) {
  .nav-marca { display: none; }
  .nav { justify-content: center; }
  .nav-links a { font-size: 13px; padding: 0 6px; white-space: nowrap; }
  .nav-links .nav-cta { padding: 0 12px; margin-left: 4px; }
  .portada-cuando .sep { display: none; }
  .portada-cuando span { display: block; }
  .portada-acciones .btn { padding: 12px 20px; }
}

/* En celular, mientras se ve la portada, la barra es transparente sobre la foto */
@media (max-width: 899px) {
  .nav { transition: background-color 250ms ease, border-color 250ms ease; }
  .nav.sobre-foto { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.sobre-foto .nav-links a:not(.nav-cta), .nav.sobre-foto .nav-marca { color: var(--espuma); text-shadow: 0 1px 8px rgba(10, 30, 35, .5); }
  .nav.sobre-foto .nav-marca span { color: var(--sol); }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 26px; border-radius: 999px;
  font: 500 16px/1.2 var(--f-texto); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-solido { background: var(--coral-hondo); color: #fff; }
.btn-linea { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 35%, transparent); }
.btn-claro { background: transparent; color: var(--sobre-hondo); border-color: color-mix(in srgb, var(--sobre-hondo) 50%, transparent); }
.btn-chico { min-height: 44px; padding: 10px 20px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn-solido:hover { background: #8d3820; }
  .btn-linea:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
  .btn-claro:hover { background: var(--sobre-hondo); color: var(--pacifico-hondo); }
}
:focus-visible { outline: 2px solid var(--pacifico); outline-offset: 3px; }
.banda-pacifico :focus-visible { outline-color: var(--sol); }

/* ---------- Portada: foto 8 a pantalla completa, nombres en el cielo ---------- */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 620px);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: calc(76px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center; color: var(--espuma); background: var(--pacifico-hondo);
}
.portada-foto { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: acercar 3.2s cubic-bezier(0.25, 1, 0.3, 1) both; }
/* Velos de atardecer arriba y abajo para que el texto se lea sin tapar a los novios */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 61, 68, .58) 0%, rgba(15, 61, 68, .18) 30%, rgba(15, 61, 68, 0) 44%),
    linear-gradient(0deg, rgba(15, 50, 56, .9) 0%, rgba(15, 50, 56, .62) 24%, rgba(15, 50, 56, 0) 46%);
}
.portada-arriba, .portada-abajo { display: grid; justify-items: center; gap: 4px; max-width: 34rem; }
.portada-anuncio {
  margin: 0; font-family: var(--f-script); font-weight: 400; font-size: clamp(34px, 9vw, 46px); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(10, 30, 35, .35); animation: amanecer 1.5s 450ms var(--ease-out) both;
}
.nombres {
  margin: 0; font-family: var(--f-titulo); font-weight: 500; line-height: .98; letter-spacing: -.01em;
  font-size: clamp(54px, 15.5vw, 104px); text-shadow: 0 2px 22px rgba(10, 30, 35, .4);
  animation: amanecer 1.6s 600ms var(--ease-out) both;
}
.nombres .amp { font-style: italic; color: var(--sol); }
.portada-fecha { margin: 8px 0 0; font-size: 16px; letter-spacing: .06em; text-shadow: 0 1px 10px rgba(10, 30, 35, .5); animation: amanecer 1.4s 820ms var(--ease-out) both; }
.portada-abajo { animation: amanecer 1.4s 1000ms var(--ease-out) both; }
.portada-cuando { margin: 0; font-size: 16px; color: var(--espuma); }
.portada-cuando strong { font-weight: 500; white-space: nowrap; }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.portada .btn-claro { color: var(--espuma); border-color: color-mix(in srgb, var(--espuma) 70%, transparent); }
.cuenta { margin: 12px 0 0; font-size: 14px; color: color-mix(in srgb, var(--espuma) 85%, transparent); font-variant-numeric: tabular-nums lining-nums; }
.cuenta strong { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; color: var(--espuma); }

@keyframes amanecer { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes acercar { from { transform: scale(1.1); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .portada-foto img, .nombres, .portada-anuncio, .portada-fecha, .portada-abajo { animation: none; } }
/* Mientras el sobre está cerrado la portada espera; su entrada empieza al revelarse */
.con-sobre .portada-foto img, .con-sobre .nombres, .con-sobre .portada-anuncio, .con-sobre .portada-fecha, .con-sobre .portada-abajo { animation-play-state: paused; }

/* Computadora: la foto (vertical) ocupa la mitad izquierda a toda altura, los datos a la derecha */
@media (min-width: 900px) {
  .portada {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr;
    padding: 0; color: var(--tinta); min-height: max(100svh, 640px);
    background:
      radial-gradient(70% 55% at 75% 100%, color-mix(in srgb, var(--sol) 30%, transparent) 0%, transparent 70%),
      var(--arena);
  }
  .portada::after { display: none; }
  .portada-foto { position: relative; grid-row: 1 / 3; z-index: 0; }
  .portada-foto img { object-position: 50% 58%; }
  .portada-arriba { grid-column: 2; grid-row: 1; align-self: end; justify-self: center; padding: 80px 48px 0; }
  .portada-abajo { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; padding: 24px 48px 48px; }
  .portada-anuncio { color: var(--pacifico); text-shadow: none; }
  .nombres { text-shadow: none; font-size: clamp(72px, 7.4vw, 112px); }
  .nombres .amp { color: var(--coral-hondo); }
  .portada-fecha, .portada-cuando { color: var(--tinta); text-shadow: none; font-size: 17px; }
  .portada .btn-claro { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 35%, transparent); }
  .cuenta { color: var(--tinta-2); }
  .cuenta strong { color: var(--tinta); }
}

/* Arco con foto (bienvenida): el marco de la portada anterior */
.arco {
  margin: 0 auto 36px; width: min(62vw, 250px); aspect-ratio: 5 / 6;
  border-radius: 999px 999px 14px 14px; overflow: hidden;
  box-shadow: 0 0 0 6px var(--espuma), 0 0 0 7px var(--linea), 0 18px 40px -18px rgba(30, 45, 51, .45);
}
.arco img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 32%; }

/* Franjas y díptico: fotos de la sesión dentro del contenido */
.franja, .diptico figure { margin: 0; overflow: hidden; background: var(--linea); }
.franja { height: clamp(240px, 56vw, 560px); }
.franja img, .diptico img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.diptico { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--arena); }
.diptico figure { aspect-ratio: 3 / 4; width: 100%; }
@media (min-width: 900px) { .diptico figure { aspect-ratio: 1 / 1; } .diptico img { object-position: 50% 30%; } }
/* Al pasar, la foto se asienta suavemente (sin JavaScript) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .franja img, .diptico img { animation: asentar linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes asentar { from { transform: scale(1.12); } to { transform: none; } }

/* ---------- Secciones ---------- */
.banda { padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.banda > .seccion { padding-left: 0; padding-right: 0; }
.seccion {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(64px, 11vw, 112px) var(--gutter);
  text-align: center;
}
.banda-arena { background: var(--arena-2); }
.banda-pacifico { background: var(--pacifico-hondo); color: var(--sobre-hondo); }
.banda-atardecer {
  background:
    linear-gradient(180deg, var(--arena) 0%, color-mix(in srgb, var(--sol) 22%, var(--arena)) 50%, color-mix(in srgb, var(--coral) 26%, var(--arena)) 100%);
}
.titulo {
  margin: 0 0 40px; font-family: var(--f-titulo); font-weight: 500;
  font-size: clamp(40px, 7vw, 60px); line-height: 1.08; letter-spacing: -.01em;
}
.titulo-script {
  margin: 56px 0 28px; font-family: var(--f-script); font-weight: 400;
  font-size: clamp(34px, 6vw, 48px); color: var(--pacifico); line-height: 1.2;
}
.subtitulo { font-family: var(--f-titulo); font-weight: 600; font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.texto-intro {
  max-width: 34ch; margin: 0 auto 40px; font-family: var(--f-titulo); font-style: italic; font-weight: 500;
  font-size: clamp(21px, 3.2vw, 25px); line-height: 1.5; color: var(--tinta-2);
}
.etiqueta {
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pacifico);
  margin: 0 0 10px;
}
.icono {
  width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.icono-chico { width: 20px; height: 20px; stroke-width: 1.6; }

/* Bienvenida / padres */
.bienvenida { padding-bottom: clamp(40px, 6vw, 64px); }
.padres { display: flex; justify-content: center; align-items: stretch; gap: 40px; }
.padres-col p:not(.etiqueta) { margin: 4px 0; font-family: var(--f-titulo); font-weight: 500; font-size: 22px; }
.padres-divisor { width: 1px; background: linear-gradient(transparent, var(--coral), transparent); }
@media (max-width: 640px) {
  .padres { flex-direction: column; gap: 28px; }
  .padres-divisor { width: 80px; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--coral), transparent); }
}

/* ---------- El gran día (banda oscura): un solo bloque ---------- */
.banda-pacifico .titulo { color: var(--sobre-hondo); margin-bottom: 28px; }
/* Escala de "El gran día": la fecha (protagonista) · títulos de bloque · cursivas de apoyo */
.banda-pacifico { --bloque: clamp(28px, 5.4vw, 34px); --apoyo: clamp(21px, 4.2vw, 24px); }
.dia { display: grid; justify-items: center; gap: 4px; }
/* La fecha es la protagonista */
.dia-fecha-grande { margin: -8px 0 0; display: grid; justify-items: center; line-height: 1; }
.dfg-dia { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: var(--apoyo); color: var(--sobre-hondo-2); }
.dfg-num {
  font-family: var(--f-titulo); font-weight: 600; font-size: clamp(104px, 26vw, 168px); line-height: .9;
  color: var(--sol); letter-spacing: -.02em; font-variant-numeric: lining-nums;
}
.dfg-mes { font-family: var(--f-titulo); font-weight: 500; font-size: var(--bloque); color: var(--sobre-hondo); }
.dia-nota { margin: 20px auto 0; color: var(--sobre-hondo-2); max-width: 40ch; }
.dia-lugar { margin-top: 56px; display: grid; justify-items: center; gap: 2px; width: 100%; }
.dia-hotel {
  margin: 0 0 20px; width: min(100%, 600px); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sobre-hondo) 25%, transparent);
}
.dia-hotel img { width: 100%; height: 100%; object-fit: cover; }
.dia-lugar-nombre { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: var(--bloque); line-height: 1.15; color: var(--sobre-hondo); }
.dia-lugar-pueblo { margin: 0 0 14px; color: var(--sobre-hondo-2); }
/* Código de vestimenta */
.vestimenta { margin: 64px auto 0; max-width: 560px; }
.vestimenta .subtitulo { color: var(--sobre-hondo); margin-bottom: 4px; font-size: var(--bloque); }
.vestimenta-tipo { margin: 0 0 18px; font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: var(--apoyo); color: var(--sol); }
.vestimenta-puntos { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 46ch; text-align: left; }
.vestimenta-puntos li { position: relative; padding-left: 22px; color: var(--sobre-hondo-2); text-wrap: pretty; }
.vestimenta-puntos li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
.vestimenta-puntos strong { color: var(--sobre-hondo); font-weight: 500; }
.paleta { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.paleta span { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--pacifico-hondo), 0 0 0 3px color-mix(in srgb, var(--sobre-hondo) 30%, transparent); }
.paleta .paleta-no { position: relative; margin-left: 14px; }
.paleta .paleta-no::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2.5px; border-radius: 2px;
  background: var(--sobre-hondo); rotate: -45deg;
}
.dia-ninos {
  margin: 24px auto 0; max-width: 520px; display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sobre-hondo) 22%, transparent);
  color: var(--sobre-hondo-2);
}
.dia-ninos .icono { color: var(--sol); margin-top: 2px; }
.dia-ninos strong { color: var(--sobre-hondo); font-weight: 500; }
.banda-pacifico .pendiente { outline-color: var(--sol); }
.banda-pacifico .pendiente::after { background: var(--sol); color: var(--tinta); }

/* Itinerario: las horas sobre la línea del horizonte; la ceremonia lleva el sol más grande */
.itinerario { margin: 44px auto 0; max-width: 760px; width: 100%; }
.itinerario .subtitulo { color: var(--sobre-hondo); margin-bottom: 0; }
.linea-tiempo {
  --hora: clamp(24px, 6.4vw, 38px);
  list-style: none; margin: 24px auto 0; padding: 0; position: relative; width: 100%; max-width: 760px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
}
.linea-tiempo::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hora) + 18px); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sobre-hondo) 50%, transparent) 12%, color-mix(in srgb, var(--sobre-hondo) 50%, transparent) 88%, transparent);
}
.linea-tiempo li { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.linea-tiempo li::after {
  content: ""; order: 1; width: 12px; height: 12px; margin: 12px 0 14px; border-radius: 50%;
  background: var(--sobre-hondo-2); box-shadow: 0 0 0 5px var(--pacifico-hondo);
}
.lt-hora {
  order: 0; font-family: var(--f-titulo); font-weight: 600; font-size: var(--hora); line-height: 1;
  color: var(--sobre-hondo); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; letter-spacing: -.01em;
}
.lt-hora small { font-family: var(--f-texto); font-weight: 500; font-size: max(11px, .3em); letter-spacing: .02em; margin-left: 1px; }
.lt-que { order: 2; font-size: clamp(14px, 3.4vw, 17px); line-height: 1.3; color: var(--sobre-hondo-2); }
/* La ceremonia: sol grande con brillo y texto en color sol */
.lt-clave .lt-hora { color: var(--sol); }
.lt-clave .lt-que { color: var(--sol); font-weight: 500; }
.linea-tiempo .lt-clave::after {
  background: var(--sol); scale: 1.7;
  box-shadow: 0 0 0 3px var(--pacifico-hondo), 0 0 16px 4px color-mix(in srgb, var(--sol) 55%, transparent);
}

/* ---------- Viaje ---------- */
.viaje-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; text-align: left; padding: 8px; }
.viaje-item { display: grid; gap: 6px; align-content: start; }
.viaje-item .icono { color: var(--pacifico); }
.viaje-item h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 25px; line-height: 1.2; margin: 0; }
.viaje-item p { margin: 0; color: var(--tinta-2); max-width: 38ch; }

/* ---------- Galería: cada foto en su proporción natural ---------- */
.galeria-grid { columns: 3; column-gap: 12px; }
.foto {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: zoom-in;
  margin: 0 0 12px; break-inside: avoid; border-radius: 12px; overflow: hidden;
  background: var(--linea);
}
.foto[hidden] { display: none; }
.foto img { width: 100%; height: auto; transition: transform 600ms var(--ease-out); }
.foto:focus-visible { outline: 3px solid var(--pacifico); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .foto:hover img { transform: scale(1.03); } }
@media (max-width: 640px) {
  .galeria-grid { columns: 2; column-gap: 8px; }
  .foto { margin-bottom: 8px; border-radius: 10px; }
}

.galeria-todas { margin-top: 20px; }
.galeria-todas[hidden], .galeria-mas[hidden] { display: none; }
.galeria-mas .foto { animation: foto-aparece 500ms var(--ease-out) both; }
.galeria-mas .foto:nth-child(n+3) { animation-delay: 60ms; }
.galeria-mas .foto:nth-child(n+5) { animation-delay: 120ms; }
.galeria-mas .foto:nth-child(n+7) { animation-delay: 180ms; }
@keyframes foto-aparece { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .galeria-mas .foto { animation: none; } }

/* Visor */
.visor {
  border: 0; padding: 0; margin: 0; background: transparent; color: #fff;
  width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden;
}
.visor::backdrop { background: rgba(10, 20, 24, .92); }
.visor-marco {
  margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: 12px;
  padding: 64px 16px 32px; touch-action: pan-y;
}
.visor-img {
  max-width: min(92vw, 1400px); max-height: calc(100dvh - 140px); width: auto; height: auto;
  border-radius: 8px; object-fit: contain; user-select: none; -webkit-user-drag: none;
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}
.visor-img.cambiando { opacity: 0; }
.visor-pie { font-size: 14px; letter-spacing: .06em; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums lining-nums; }
.visor-btn {
  position: fixed; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.visor-btn:active { transform: scale(.94); }
.visor-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visor-cerrar { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.visor-ant { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; translate: 0 -50%; }
.visor-sig { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; }
@media (hover: hover) and (pointer: fine) { .visor-btn:hover { background: rgba(255, 255, 255, .26); } }
@media (max-width: 640px) {
  .visor-ant, .visor-sig { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); translate: none; }
  .visor-pie { margin-bottom: 64px; }
}

/* ---------- Juego del botón "No" (sección propia, después de las fotos) ---------- */
.juego-seccion { max-width: 760px; padding-top: clamp(56px, 9vw, 96px); padding-bottom: clamp(24px, 5vw, 48px); }
/* Estampilla de San Pancho (SVG con borde perforado) */
.estampilla {
  position: absolute; z-index: 2; top: -22px; right: 16px; width: 60px; height: auto; rotate: 7deg;
  filter: drop-shadow(0 3px 4px rgba(30, 45, 51, .22));
}
.est-papel { fill: var(--espuma); }
.est-marco { fill: none; stroke: color-mix(in srgb, var(--pacifico) 55%, transparent); stroke-width: 1; }
.est-cielo { fill: color-mix(in srgb, var(--sol) 30%, var(--espuma)); }
.est-sol { fill: var(--coral); }
.est-linea { stroke: var(--pacifico); stroke-width: 1.4; fill: none; }
.est-reflejo { stroke: var(--coral); stroke-width: 1.4; stroke-linecap: round; opacity: .6; fill: none; }
.est-texto, .est-anio { font-family: var(--f-texto); font-weight: 500; text-anchor: middle; fill: var(--pacifico); }
.est-texto { font-size: 6.8px; letter-spacing: .05em; }
.est-anio { font-size: 8px; letter-spacing: .12em; fill: var(--coral-hondo); }
@media (max-width: 520px) { .estampilla { width: 52px; right: 10px; top: -20px; } }
/* Tarjeta tipo postal (borde sólido doble: no se confunde con "Pendiente") */
.juego {
  position: relative; border: 1.5px solid color-mix(in srgb, var(--coral-hondo) 45%, transparent); border-radius: 22px;
  background: color-mix(in srgb, var(--sol) 14%, var(--arena));
  padding: 28px 18px 22px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sol) 14%, var(--arena)), 0 0 0 7px color-mix(in srgb, var(--coral-hondo) 25%, transparent);
}
.juego-pregunta { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(30px, 6vw, 42px); line-height: 1.1; margin: 0; }
.juego-sub { margin: 6px 0 0; color: var(--tinta-2); font-style: italic; font-family: var(--f-titulo); font-weight: 500; font-size: 20px; }
.juego-zona {
  position: relative; height: 220px; margin: 18px 0 6px; border-radius: 14px;
  background: var(--espuma); overflow: hidden; touch-action: manipulation;
}
.juego-si, .juego-no { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.juego-si:active, .juego-no:active { transform: translate(-50%, -50%) scale(.97); }
.juego-si { left: 30%; }
.juego-no {
  left: 70%; background: var(--espuma);
  transition: left 260ms cubic-bezier(.3, 1.35, .5, 1), top 260ms cubic-bezier(.3, 1.35, .5, 1),
              background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.juego-no.rendido { background: var(--coral-hondo); color: #fff; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .juego-no { transition: none; } }
@media (max-width: 520px) {
  .juego-zona { height: 280px; }
  .juego-si { left: 50%; top: 22%; }
  .juego-no { left: 50%; top: 66%; }
  .juego .btn { padding: 12px 20px; }
}
.juego-mensaje {
  min-height: 1.6em; margin: 6px 0 0; display: grid; justify-items: center; gap: 10px;
  font-family: var(--f-titulo); font-weight: 500; font-size: 21px; line-height: 1.35; font-style: italic; color: var(--coral-hondo);
}
.juego-mensaje p { margin: 0; }
.juego-mensaje .btn { font-family: var(--f-texto); font-style: normal; }
.juego-nota { margin: 8px 0 0; font-size: 15px; color: var(--tinta-2); }
.juego-nota a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.corazon { position: absolute; pointer-events: none; font-size: 22px; animation: subir 1.3s var(--ease-out) forwards; }
@keyframes subir { from { opacity: 1; transform: translateY(0) scale(.9); } to { transform: translateY(-110px) scale(1.3); opacity: 0; } }

/* ---------- Regalos ---------- */
.regalos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 720px) { .regalos-grid { grid-template-columns: 1fr; } }
.regalo-luna { background: color-mix(in srgb, var(--sol) 16%, var(--espuma)); border-color: color-mix(in srgb, var(--coral) 45%, var(--linea)); }
.regalo-gancho { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: 21px !important; color: var(--tinta) !important; line-height: 1.35; }
.cuenta-banco { margin: 12px 0 0; align-self: stretch; display: grid; gap: 4px; padding: 12px 10px; border-block: 1px dashed var(--linea); }
.cuenta-banco p { margin: 0; display: flex; justify-content: space-between; gap: 12px; color: var(--tinta); }
.cuenta-banco .etiqueta { margin: 0; }
.cuenta-banco strong { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .04em; font-weight: 500; overflow-wrap: anywhere; text-align: right; }
.regalo { min-width: 0; }
.regalo {
  background: var(--espuma); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.regalo h3 { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 30px; line-height: 1.2; }
.regalo p { margin: 0; color: var(--tinta-2); font-size: 16px; max-width: 42ch; }
.evento {
  margin: 10px 0 6px; padding: 14px 8px 6px; align-self: stretch;
  border-block: 1px dashed var(--linea); display: grid; justify-items: center; gap: 0;
}
.evento .etiqueta { margin: 0; }
.evento strong { font-family: var(--f-titulo); font-size: 40px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; }
.btn-copiar {
  border: 0; background: none; color: var(--coral-hondo); font: 500 15px var(--f-texto);
  cursor: pointer; padding: 8px 14px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Confirmar: el formulario es el protagonista ---------- */
.confirmar { max-width: 720px; }
.confirmar { padding-top: clamp(40px, 7vw, 72px); }
.confirmar .titulo { margin-bottom: 14px; }
.horizonte-rsvp { height: 120px; margin-bottom: 8px; }
.rsvp-intro {
  max-width: 36ch; margin: 0 auto 14px; font-family: var(--f-titulo); font-style: italic; font-weight: 500;
  font-size: clamp(21px, 3.4vw, 25px); line-height: 1.45; color: var(--tinta);
}
.rsvp-limite { text-align: center; color: var(--tinta-2); margin: 0 auto 32px; max-width: 36ch; }
.rsvp-limite strong { color: var(--tinta); font-weight: 500; }
.rsvp {
  text-align: left; background: var(--espuma); border: 1px solid var(--linea); border-radius: 22px;
  padding: clamp(24px, 5vw, 40px) clamp(18px, 5vw, 40px); box-shadow: var(--sombra-tarjeta);
}
.rsvp .subtitulo { text-align: center; font-size: clamp(28px, 5vw, 34px); margin-bottom: 24px; }
.campo { margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
:where(.campo) label, :where(.campo) legend { display: block; font-weight: 500; margin-bottom: 8px; font-size: 16px; padding: 0; }
.opcional { color: var(--tinta-2); font-weight: 400; font-size: 14px; }
input[type="text"], input[type="tel"], select, textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--borde-campo); background: #fff;
  font: 400 17px var(--f-texto); color: var(--tinta);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
input::placeholder, textarea::placeholder { color: #5f6a6d; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pacifico); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pacifico) 18%, transparent); }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .opciones { grid-template-columns: 1fr; } }
.opcion {
  display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; min-height: 52px;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borde-campo); background: #fff;
  cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease;
}
.opcion:has(input:checked) { border-color: var(--pacifico); background: color-mix(in srgb, var(--pacifico) 8%, #fff); }
.opcion input { width: 18px; height: 18px; accent-color: var(--pacifico); }
.campo-error { margin: 8px 0 0; font-size: 14px; color: #9b2c1c; font-weight: 500; }
.campo-ayuda { margin: -4px 0 8px; font-size: 14px; color: var(--tinta-2); }
.campo.invalido input, .campo.invalido .opcion { border-color: #9b2c1c; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-acciones { display: grid; gap: 10px; justify-items: center; margin-top: 8px; }
.btn-enviar { width: 100%; }
.btn-enviar[disabled] { opacity: .65; cursor: wait; }
.form-estado { text-align: center; min-height: 1.5em; margin: 16px 0 0; }
.form-estado.error { color: #9b2c1c; font-weight: 500; }
.gracias { text-align: center; padding: 8px 0; }
.gracias:focus { outline: none; }
.gracias h4 { font-family: var(--f-titulo); font-weight: 600; font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
.gracias p { margin: 0 0 6px; color: var(--tinta-2); }
.gracias-lista { list-style: none; margin: 18px auto 0; padding: 0; max-width: 420px; display: grid; gap: 8px; text-align: left; }
.gracias-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border: 1px solid var(--linea); border-radius: 12px; background: #fff;
}
.gracias-lista .quien { min-width: 0; overflow-wrap: anywhere; }
.gracias-lista .respuesta { display: block; font-size: 14px; color: var(--tinta-2); }
.gracias-lista button {
  border: 0; background: none; color: var(--coral-hondo); font: 500 15px var(--f-texto); cursor: pointer;
  min-height: 44px; padding: 0 6px; text-decoration: underline; text-underline-offset: 3px; flex: none;
}
.gracias-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---------- Pie (de noche: el sol ya se puso) ---------- */
.pie {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center; padding: clamp(230px, 58vw, 340px) var(--gutter) calc(88px + env(safe-area-inset-bottom, 0px));
  background: var(--tinta); color: var(--arena-2);
}
/* De noche: la foto del atardecer, ya casi a oscuras */
.pie-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* La foto ya trae su propio horizonte y su sol puesto */
.pie .horizonte-pie { display: none; }
.pie::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 45, 51, .15) 0%, rgba(30, 45, 51, .35) 35%, rgba(30, 45, 51, .9) 62%, var(--tinta) 80%); }
.horizonte-pie { max-width: 360px; margin: 0 auto 18px; --h-linea: color-mix(in srgb, var(--arena) 55%, transparent); }
.pie p { margin: 4px 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.pie .pie-nombres { font-family: var(--f-script); font-size: 48px; letter-spacing: 0; text-transform: none; color: var(--arena); line-height: 1.2; }
.pie .pie-nombres .amp { font-family: var(--f-titulo); font-style: italic; font-size: .6em; color: var(--sol); }
.pie .pie-cierre { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--sol); margin-bottom: 2px; }
.horizonte-pie .sol { animation: none !important; }
.pie .pie-hashtag { display: inline-block; margin-top: 12px; color: var(--sol); }

/* ---------- Intro: el sobre (solo la primera visita) ----------
   Es un momento único (se ve una vez), así que se permite más lento y con más detalle que el resto
   de la interfaz. La coreografía vive en script.js (Web Animations API); aquí solo el dibujo. */
.sobre-escena { display: none; }
html.con-sobre, html.con-sobre body { overflow: hidden; }
.con-sobre .sobre-escena, .sobre-escena.revelando {
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --papel: #f3e4d2;
  --papel-2: #ead6bf;
  --papel-3: #e1c8ad;
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(130% 60% at 50% 108%, color-mix(in srgb, var(--sol) 50%, transparent) 0%, transparent 72%),
    radial-gradient(90% 45% at 50% 102%, color-mix(in srgb, var(--coral) 30%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #f8f0e7 0%, var(--arena) 55%, #f4e2d0 100%);
}
/* Luz cálida que respira detrás del sobre */
.sobre-luz {
  position: absolute; left: 50%; top: 46%; width: 140vmin; height: 140vmin; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 232, .9), rgba(255, 246, 232, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) { .sobre-luz { animation: respirar 6s ease-in-out infinite; } }
@keyframes respirar { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

.sobre-para {
  position: relative; margin: 0 0 10px; font-family: var(--f-script); font-weight: 400;
  font-size: clamp(34px, 9vw, 44px); line-height: 1.1; color: var(--pacifico);
}
.sobre {
  position: relative; width: min(86vw, 440px); aspect-ratio: 10 / 7; perspective: 1600px;
  rotate: -1.5deg;
}
.sobre-fondo, .sobre-bolsa, .sobre-solapa { position: absolute; left: 0; right: 0; }
/* Interior del sobre (se ve al abrir) y su sombra sobre la "mesa" */
.sobre-fondo {
  inset: 0; border-radius: 5px;
  background: var(--grano), linear-gradient(180deg, #d9bc9c 0%, #e4cbb0 40%, var(--papel-2) 100%);
  box-shadow: 0 34px 46px -24px rgba(70, 40, 20, .42), 0 10px 16px -8px rgba(70, 40, 20, .22), 0 0 0 .5px rgba(120, 80, 50, .2);
}
/* La tarjeta */
.sobre-tarjeta {
  position: absolute; z-index: 1; left: 6%; right: 6%; top: 6%; height: 88%;
  border-radius: 3px; background: var(--grano), #fffaf3;
  box-shadow: 0 1px 2px rgba(70, 40, 20, .18), inset 0 0 0 7px #fffaf3, inset 0 0 0 7.8px color-mix(in srgb, var(--coral) 45%, transparent);
  transform-origin: 50% 40%;
}
.st-contenido { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 12px; }
.st-sol { width: 64px; height: auto; margin-bottom: 4px; overflow: visible; }
.st-sol path:first-child { fill: var(--coral); }
.st-sol .st-linea { fill: none; stroke: var(--pacifico); stroke-width: 1.2; }
.st-sol .st-reflejo { fill: none; stroke: var(--coral); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.st-anuncio { font-family: var(--f-script); font-size: clamp(20px, 5.4vw, 26px); line-height: 1.1; color: var(--coral-hondo); }
.st-nombres { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(27px, 7.6vw, 36px); line-height: 1.05; color: var(--tinta); white-space: nowrap; }
.st-nombres i { color: var(--coral-hondo); }
.st-fecha { margin-top: 4px; font-size: 12px; letter-spacing: .22em; color: var(--pacifico); }
.st-lugar { font-family: var(--f-titulo); font-style: italic; font-size: 15px; color: var(--tinta-2); }
/* Bolsa delantera: el sobre visto por detrás, con sus dobleces */
.sobre-bolsa {
  z-index: 2; top: 0; bottom: 0; border-radius: 0 0 5px 5px;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(149deg, transparent 49.4%, rgba(110, 70, 40, .13) 49.9%, rgba(255, 255, 255, .35) 50.4%, transparent 51.8%),
    linear-gradient(211deg, transparent 49.4%, rgba(110, 70, 40, .13) 49.9%, rgba(255, 255, 255, .35) 50.4%, transparent 51.8%),
    var(--grano),
    linear-gradient(0deg, var(--papel-2) 0%, var(--papel) 60%, #f7ebdd 100%);
}
/* Solapa: dos caras en 3D */
.sobre-solapa { z-index: 3; top: 0; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; }
.solapa-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.solapa-cara > i { position: absolute; inset: 0; }
.solapa-frente { filter: drop-shadow(0 3px 2.5px rgba(80, 45, 20, .22)); }
.solapa-frente > i {
  clip-path: polygon(0 0, 100% 0, 50.6% 99%, 49.4% 99%);
  background: var(--grano), linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 70%, var(--papel-3) 100%);
}
/* Cara interior (ya abierta queda con la punta hacia arriba): borde de papel y forro de atardecer */
.solapa-forro { transform: rotateX(180deg); }
.solapa-forro::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(0 100%, 100% 100%, 50.6% 1%, 49.4% 1%);
  background: var(--grano), linear-gradient(0deg, #dcc0a2, #e6cfb6);
}
.solapa-forro > i { clip-path: polygon(5% 100%, 95% 100%, 50% 9%); }
.solapa-forro svg { display: block; width: 100%; height: 100%; }
/* La estampilla de San Pancho (copia de la del juego) */
.sobre-estampilla { position: absolute; z-index: 2; right: 6%; bottom: 9%; width: 46px; height: auto; rotate: 6deg; filter: drop-shadow(0 2px 3px rgba(70, 40, 20, .25)); }
/* Sello de cera: es el botón */
.sobre-sello {
  position: absolute; z-index: 4; left: 50%; top: 58%; width: 84px; height: 84px; padding: 0;
  translate: -50% -50%; border: 0; background: none; cursor: pointer; border-radius: 50%;
  filter: drop-shadow(0 5px 5px rgba(70, 25, 10, .35)) drop-shadow(0 1px 1px rgba(70, 25, 10, .3));
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.sobre-sello svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sello-letras { font-family: var(--f-titulo); font-weight: 600; font-size: 25px; text-anchor: middle; fill: #f7d9c8; letter-spacing: .5px; }
.sello-letras tspan { font-style: italic; font-weight: 500; fill: #ffe6d6; }
.sello-letras-sombra, .sello-letras-sombra tspan { fill: #5a1f10; opacity: .55; }
.sobre-sello:active { transform: scale(.95); }
.sobre-sello:focus-visible { outline: 2px solid var(--pacifico); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .sobre-sello { animation: latido 3.2s ease-in-out 2.2s infinite; }
}
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (hover: hover) and (pointer: fine) { .sobre-sello:hover { animation: none; transform: scale(1.04); } }
.sobre-indicacion { position: relative; margin: 18px 0 0; color: var(--tinta-2); font-size: 15px; letter-spacing: .02em; }
.sobre-sin-musica {
  position: relative; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 0 12px;
  color: var(--coral-hondo); font: 500 15px var(--f-texto); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Botón de música ---------- */
.musica-btn {
  position: fixed; z-index: 55; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--espuma) 94%, transparent); color: var(--coral-hondo);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--linea) 80%, transparent), 0 8px 20px -8px rgba(30, 45, 51, .45);
  -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out);
}
.musica-btn:active { transform: scale(.94); }
.musica-btn[hidden], .con-sobre .musica-btn { display: none; }
.mb-nota { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mb-barras { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.mb-barras i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; }
.musica-btn.sonando .mb-nota { display: none; }
.musica-btn.sonando .mb-barras { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .musica-btn.sonando .mb-barras i { animation: barra 900ms ease-in-out infinite; }
  .musica-btn.sonando .mb-barras i:nth-child(2) { animation-delay: -300ms; }
  .musica-btn.sonando .mb-barras i:nth-child(3) { animation-delay: -600ms; }
}
@keyframes barra { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }