/*------------------------------------------------------------------
  Cálido Minimalista — Pamela & Daniel · 21 de Noviembre 2026

  Carga DESPUÉS de elegante-bw.css y lo reemplaza: mismo HTML, misma
  estructura, misma JS, pero el aspecto es el de las referencias que
  mandó Pamela (assets/images/Pamela&Daniel/Ejemplos/).

  De las referencias se toma el LENGUAJE VISUAL:
    · papel crema + bandas de color sólido separando secciones
    · serif tipo Didot en versales muy espaciadas para los títulos
    · caligráfica para nombres y encabezados suaves
    · divisores ornamentales de línea con rombo al centro
    · fotos ovaladas con marco fino para las sedes
    · tarjetas de papel con doble marco y esquinas curvas
    · iconos de línea (iglesia, arco, cena, fiesta, vestimenta)

  De la solicitud #1004 se toma la PALETA: beige, café y blanco.
  Las referencias usan verde olivo en las bandas; aquí ese lugar lo
  ocupa el café. No se usa ningún verde.
------------------------------------------------------------------*/

/* OJO: la API css2 de Google Fonts exige las familias en orden alfabético.
   Si se desordenan responde 400 y se cae la hoja entera, no solo la fuente
   mal puesta: se quedan sin cargar Bodoni, Cormorant y la caligráfica. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Cormorant+Garamond:wght@300;400;500;600&family=Great+Vibes&family=Pinyon+Script&display=swap');

/* ══════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Paleta de la solicitud: beige · café · blanco */
  --pd-crema:       #faf3ea;   /* fondo base, el "papel" de toda la página */
  --pd-papel:       #fdfaf6;   /* tarjetas */
  --pd-banda:       #6b5744;   /* café de las bandas (en la referencia: olivo) */
  --pd-banda-alt:   #5a4838;   /* café más profundo, cierre */
  --pd-tinta:       #3d2f24;   /* café casi negro, títulos */
  --pd-cafe:        #7a6350;   /* café medio, cuerpo de texto */
  --pd-suave:       #a08b74;   /* café claro, labels */
  --pd-beige:       #e9ddcc;
  --pd-arena:       #d5c3aa;
  --pd-blanco:      #ffffff;

  /* Tipografías */
  --pd-serif:  'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --pd-body:   'Cormorant Garamond', 'Bodoni Moda', serif;
  /* Great Vibes: es la que tiene el peso y las capitales con lazo del
     roundhand de las referencias. Se probaron Pinyon Script, Italianno,
     Mrs Saint Delafield y Petit Formal Script; las demás salen
     demasiado delgadas al lado del ejemplo. */
  --pd-script: 'Great Vibes', 'Pinyon Script', cursive;

  /* Remapeo de las variables del tema B&W: todo lo que no se toque
     explícitamente abajo hereda ya la paleta cálida. */
  --bw-black:      #3d2f24;
  --bw-dark:       #5a4838;
  --bw-gray:       #7a6350;
  --bw-light-gray: #a08b74;
  --bw-border:     #e2d5c2;
  --bw-light:      #f3e9db;
  --bw-white:      #fdfaf6;
  --bw-cream:      #faf3ea;
  --font-heading:  'Bodoni Moda', 'Didot', serif;
  --font-body:     'Cormorant Garamond', serif;
  --font-script:   'Great Vibes', 'Pinyon Script', cursive;
}

/* ══════════════════════════════════════════════════════════════
   2. BASE — papel crema y cuerpo serif
   ══════════════════════════════════════════════════════════════ */
body {
  background: var(--pd-crema) !important;
  font-family: var(--pd-body) !important;
  color: var(--pd-cafe);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pd-serif) !important;
  color: var(--pd-tinta);
  font-weight: 400;
}

p { color: var(--pd-cafe); }
a { color: var(--pd-tinta); }
a:hover { color: var(--pd-cafe); }

::-webkit-scrollbar-track { background: var(--pd-beige); }
::-webkit-scrollbar-thumb { background: var(--pd-banda); }

.preloader { background: var(--pd-crema) !important; }
.preloader .middle i { color: var(--pd-banda) !important; }

/* Etiqueta de sección: versales muy espaciadas, como en las referencias */
.bw-section-label {
  font-family: var(--pd-serif) !important;
  font-size: 20px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase;
  color: var(--pd-tinta) !important;
  font-weight: 400 !important;
}

/* ══════════════════════════════════════════════════════════════
   3. DIVISOR ORNAMENTAL — línea fina con rombo al centro
   Reemplaza los divisores de punto del tema B&W.
   ══════════════════════════════════════════════════════════════ */
.bw-venue-rule,
.bw-venue-divider,
.bw-rsvp-divider,
.pd-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 18px auto 26px;
  max-width: 320px;
}

.bw-venue-rule .line,
.bw-venue-divider .line,
.bw-rsvp-divider .line,
.pd-orn .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
      transparent, var(--pd-suave) 25%, var(--pd-suave) 75%, transparent);
}

/* El punto del tema B&W se convierte en rombo alargado */
.bw-venue-rule .dot,
.bw-venue-divider .dot,
.bw-rsvp-divider .dot,
.pd-orn .dot {
  width: 18px !important;
  height: 7px !important;
  margin: 0 8px;
  background: var(--pd-tinta) !important;
  border-radius: 50% !important;
  transform: rotate(0deg);
  position: relative;
}

.bw-venue-rule .dot::before,
.bw-venue-divider .dot::before,
.bw-rsvp-divider .dot::before,
.pd-orn .dot::before,
.bw-venue-rule .dot::after,
.bw-venue-divider .dot::after,
.bw-rsvp-divider .dot::after,
.pd-orn .dot::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--pd-tinta);
  border-radius: 50%;
  transform: translateY(-50%);
}
.bw-venue-rule .dot::before,
.bw-venue-divider .dot::before,
.bw-rsvp-divider .dot::before,
.pd-orn .dot::before { left: -11px; }
.bw-venue-rule .dot::after,
.bw-venue-divider .dot::after,
.bw-rsvp-divider .dot::after,
.pd-orn .dot::after { right: -11px; }

/* ══════════════════════════════════════════════════════════════
   4. TARJETA DE PAPEL CON DOBLE MARCO
   El recurso que más se repite en las referencias.
   ══════════════════════════════════════════════════════════════ */
.pd-card {
  position: relative;
  background: var(--pd-papel);
  padding: 44px 30px;
  box-shadow: 0 10px 30px rgba(61, 47, 36, 0.10);
  max-width: 620px;
  margin: 0 auto;
}

/* Marco interior de línea doble con esquinas suaves */
.pd-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--pd-arena);
  border-radius: 14px;
  pointer-events: none;
}
.pd-card::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(213, 195, 170, 0.55);
  border-radius: 11px;
  pointer-events: none;
}

.pd-card > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   5. BANDAS DE COLOR — lo que en la referencia es olivo, aquí es café
   ══════════════════════════════════════════════════════════════ */
.pd-banda,
.bw-program-section {
  background: var(--pd-banda) !important;
  padding: 60px 0;
}

.bw-closing-section {
  background: var(--pd-banda-alt) !important;
}

.pd-banda .bw-section-label,
.pd-banda h2,
.pd-banda h3 { color: var(--pd-crema) !important; }

.pd-banda p { color: var(--pd-beige); }

/* "Save the date" va sobre el cafe, asi que se aclara. */
.pd-banda .bw-calendar-title { color: var(--pd-crema) !important; }

/* ...pero lo que va DENTRO de una tarjeta de papel o del corazon sigue
   siendo tinta oscura: la banda no debe aclararle el texto. */
.pd-banda .pd-card p,
.pd-banda .pd-card h2,
.pd-banda .pd-card h3,
.pd-banda .pd-card h4,
.pd-banda .pd-heart-date p {
  color: var(--pd-tinta) !important;
}
.pd-banda .pd-card .pd-title-stack .top,
.pd-banda .pd-card .pd-title-stack .bottom,
.pd-banda .pd-card .pd-script {
  color: var(--pd-tinta) !important;
}

.pd-banda .bw-venue-rule .line,
.pd-banda .pd-orn .line {
  background: linear-gradient(to right,
      transparent, rgba(250, 243, 234, 0.6) 25%,
      rgba(250, 243, 234, 0.6) 75%, transparent);
}
.pd-banda .bw-venue-rule .dot,
.pd-banda .pd-orn .dot,
.pd-banda .bw-venue-rule .dot::before,
.pd-banda .bw-venue-rule .dot::after,
.pd-banda .pd-orn .dot::before,
.pd-banda .pd-orn .dot::after {
  background: var(--pd-crema) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. TÍTULOS CALIGRÁFICOS
   ══════════════════════════════════════════════════════════════ */
.pd-script,
.bw-calendar-title,
.bw-script-separator p {
  font-family: var(--pd-script) !important;
  color: var(--pd-tinta) !important;
  font-weight: 400 !important;
  line-height: 1.05;
  letter-spacing: 0 !important;
}

.pd-script-lg { font-size: 62px; }
.pd-script-md { font-size: 46px; }
.pd-script-sm { font-size: 34px; }

.bw-calendar-title      { font-size: 58px !important; }
.bw-script-separator p  { font-size: 66px !important; }

.pd-banda .pd-script { color: var(--pd-crema) !important; }

/* Título de dos pisos: versales arriba, caligráfica abajo
   ("CÓDIGO DE / Vestimenta") */
.pd-title-stack { text-align: center; margin-bottom: 6px; }
.pd-title-stack .top {
  display: block;
  font-family: var(--pd-serif);
  font-size: 21px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--pd-tinta);
}
.pd-title-stack .bottom {
  display: block;
  font-family: var(--pd-script);
  font-size: 52px;
  line-height: 0.95;
  margin-top: -4px;
  color: var(--pd-tinta);
}
.pd-banda .pd-title-stack .top,
.pd-banda .pd-title-stack .bottom { color: var(--pd-crema); }

/* ══════════════════════════════════════════════════════════════
   7. FOTOS — grado cálido, nada de blanco y negro
   ══════════════════════════════════════════════════════════════ */
.bw-hero-photo-wrapper img,
.bw-photo-section img,
.bw-gallery-item img,
.bw-lightbox-img,
.pd-oval img {
  filter: sepia(0.26) saturate(0.95) contrast(1.04) brightness(1.02) !important;
}

/* Las fotos grandes van "montadas" dentro de la banda, con margen,
   igual que en la referencia del itinerario. */
.pd-banda .bw-photo-section,
.pd-photo-inset {
  padding: 0 22px;
}
.pd-photo-inset img {
  width: 100%;
  display: block;
}

/* Foto ovalada con marco fino (sedes) */
.pd-oval {
  width: 210px;
  height: 150px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--pd-papel);
  box-shadow: 0 0 0 1px var(--pd-arena);
}
.pd-oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   8. SOBRE DE APERTURA
   Réplica de la referencia de @mejor_invitacion: papel de algodón
   sobre un muro de yeso. El sobre arranca CERRADO, con la solapa
   tapando la boca y la rosa de cerámica sellando la punta; al tocar,
   la rosa se suelta, la solapa gira hacia atrás sobre su doblez y la
   tarjeta sale del sobre.

   La textura no usa ninguna imagen: es feTurbulence en SVG inline.
   El grano pasa por feDiffuseLighting con luz rasante, que es lo que
   da el relieve del papel; las fibras son ruido estirado en soft-light.

   OJO con la geometría: la "boca" del sobre es el triángulo superior
   que las tres caras dejan vacío, y la solapa es exactamente ese mismo
   triángulo invertido. Si se cambia la altura del sobre hay que mover
   también el recorte de la tarjeta (`clip-path`) y el recorrido de
   `pdCarta`, porque están calculados contra esos 212 px.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Escala del conjunto; las medias queries del final la ajustan */
  --pd-esc: 1.06;

  /* Grano del papel en relieve (luz rasante) */
  --pd-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='0.85'%3E%3CfeDistantLight azimuth='215' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23e)' opacity='0.40'/%3E%3C/svg%3E");
  /* Yeso del muro: nubes suaves con la misma luz */
  --pd-yeso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fffaf2' surfaceScale='1.5'%3E%3CfeDistantLight azimuth='205' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23w)' opacity='0.55'/%3E%3C/svg%3E");
  /* Fibras de algodón: ruido estirado en horizontal */
  --pd-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.55' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)' opacity='0.20'/%3E%3C/svg%3E");
}

/* ── Muro de yeso ── */
.pd-sobre-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  background-color: #d2ccbe;
  background-image:
    /* pétalos desenfocados asomando por arriba, como en la referencia */
    radial-gradient(ellipse 38% 15% at 20% -3%, rgba(255, 253, 248, 0.92), rgba(255, 253, 248, 0) 68%),
    radial-gradient(ellipse 30% 12% at 72% -5%, rgba(255, 253, 248, 0.80), rgba(255, 253, 248, 0) 68%),
    radial-gradient(ellipse 22% 9% at 47% -2%, rgba(255, 253, 248, 0.70), rgba(255, 253, 248, 0) 70%),
    /* luz general */
    radial-gradient(ellipse 90% 60% at 50% 22%, rgba(255, 253, 246, 0.55), rgba(255, 253, 246, 0) 72%),
    /* viñeta */
    radial-gradient(ellipse 120% 90% at 50% 55%, rgba(255, 255, 255, 0) 45%, rgba(96, 88, 70, 0.26) 100%),
    var(--pd-yeso),
    var(--pd-grano);
  background-size: auto, auto, auto, auto, auto, 480px 480px, 140px 140px;
  background-blend-mode: normal, normal, normal, normal, normal, multiply, multiply;

  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.pd-sobre-overlay.opened {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Monograma sobre el muro ── */
.pd-sobre-marca {
  position: absolute;
  top: 7vh;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--pd-serif);
  font-weight: 400;
  line-height: 1;
  color: #2f2721;
  font-size: 62px;   /* le da la escala a .pd-marca */
  opacity: 0.92;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: opacity 0.6s ease, transform 0.8s ease;
}


/* ── Escenario: lo mide el sobre; la tarjeta se sale por arriba ── */
.pd-sobre-stage {
  position: relative;
  width: 300px;
  height: 212px;
  margin-top: 46px;
  transform: scale(var(--pd-esc));
  transform-origin: 50% 100%;
}

/* Papel compartido por sobre y tarjeta */
.pd-cara,
.pd-carta,
.pd-solapa {
  background-image: var(--pd-fibra), var(--pd-grano);
  background-size: 320px 320px, 140px 140px;
  background-blend-mode: soft-light, multiply;
}

/* ══ FORRO — el interior del sobre ══
   Sólo se ve por la boca, pero es lo que hace que al abrir la solapa
   se asome el interior y no directamente la tarjeta. Sin él, la boca
   dejaba ver el texto de la tarjeta partido por las diagonales y la
   escena se leía rota. */
.pd-forro {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px;
  background-color: #ded4c2;
  background-image:
    linear-gradient(to bottom, rgba(118, 99, 76, 0.34), rgba(118, 99, 76, 0) 48%),
    var(--pd-fibra), var(--pd-grano);
  background-size: auto, 320px 320px, 140px 140px;
  background-blend-mode: normal, soft-light, multiply;
}

/* ══ TARJETA — arranca dentro del sobre ══
   Mide más de lo que se ve a propósito: así su borde inferior y el
   final del marco quedan escondidos dentro del sobre al salir. */
.pd-carta {
  position: absolute;
  z-index: 2;
  left: 21px;
  top: 70px;   /* metida hasta abajo de la boca: por la uve sólo asoma papel liso */
  width: 258px;
  height: 350px;
  border-radius: 3px;
  background-color: #f8f3ea;
  clip-path: inset(0px 0px 208px 0px);
}

/* Marco embozado de doble línea */
.pd-carta::before,
.pd-carta::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 11px;
}
.pd-carta::before {
  inset: 15px 15px 120px;
  border: 1px solid rgba(150, 128, 103, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}
.pd-carta::after {
  inset: 19px 19px 124px;
  border: 1px solid rgba(150, 128, 103, 0.24);
  border-radius: 8px;
}

.pd-carta-texto {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0 26px;
}
.pd-carta-texto p { margin: 0; }

.pd-carta-eyebrow {
  font-family: var(--pd-serif);
  font-size: 12px;
  letter-spacing: 3.4px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #3d2f24;
  margin-bottom: 10px !important;
}
.pd-carta-nombre {
  font-family: var(--pd-script);
  font-size: 40px;
  line-height: 0.94;
  color: #1f1a15;
}
.pd-carta-amp {
  font-family: var(--pd-serif);
  font-size: 16px;
  line-height: 1.2;
  color: #1f1a15;
  margin: 3px 0 1px !important;
}
.pd-carta-fecha {
  font-family: var(--pd-serif);
  font-size: 10.5px;
  letter-spacing: 3.4px;
  line-height: 1.4;
  color: #7a6350;
  margin-top: 16px !important;
}

/* ══ CUERPO — cara trasera del sobre, con las tres caras dobladas.
   El triángulo de arriba queda vacío: esa es la boca. ══ */
.pd-cuerpo {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 3px;
  overflow: hidden;
  filter: drop-shadow(0 16px 22px rgba(88, 74, 56, 0.26)) drop-shadow(0 2px 3px rgba(88, 74, 56, 0.16));
}
.pd-cara { position: absolute; inset: 0; }
.pd-cara-izq   { background-color: #f4efe6; clip-path: polygon(0 0, 50% 50%, 0 100%); }
.pd-cara-der   { background-color: #f0eae0; clip-path: polygon(100% 0, 50% 50%, 100% 100%); }
.pd-cara-abajo { background-color: #f7f2e9; clip-path: polygon(0 100%, 50% 50%, 100% 100%); }

/* Dobleces: las diagonales, recortadas a la silueta del papel
   (el rectángulo completo menos el triángulo de la boca). */
.pd-dobleces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), rgba(150, 128, 103, 0.34) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom left, transparent calc(50% - 0.6px), rgba(150, 128, 103, 0.34) 50%, transparent calc(50% + 0.6px));
}

/* ══ SOLAPA — cerrada tapa la boca; al abrir gira sobre su doblez ══
   El perspective va dentro del propio transform para no crear un
   contexto 3D en el escenario: así el z-index sigue mandando y la
   solapa puede pasarse detrás del sobre a mitad del giro. */
.pd-solapa {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background-color: #faf6ef;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: perspective(1200px) rotateX(0deg);
  filter: drop-shadow(0 3px 3px rgba(88, 74, 56, 0.20)) drop-shadow(0 9px 14px rgba(88, 74, 56, 0.14));
}

/* ══ ROSA DE CERÁMICA ══ */
.pd-rosa {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  filter: drop-shadow(0 4px 6px rgba(88, 74, 56, 0.32));
}
.pd-rosa svg { width: 100%; height: 100%; display: block; }

/* ══ PISTA ══ */
.pd-sobre-tap {
  position: absolute;
  bottom: 6vh;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--pd-serif);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(63, 54, 42, 0.6);
  animation: pdLatido 2.6s ease-in-out infinite;
}
@keyframes pdLatido {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.95; }
}

/* ══════════════════════════════════════════════════════════════
   APERTURA — la clase `opening` la pone el script del final del HTML
   ══════════════════════════════════════════════════════════════ */
.pd-sobre-overlay.opening { cursor: default; }

.pd-sobre-overlay.opening .pd-rosa {
  animation: pdSello 620ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
@keyframes pdSello {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  30%  { transform: translateY(-7px) scale(1.07) rotate(-7deg); opacity: 1; }
  100% { transform: translateY(46px) scale(0.7) rotate(-30deg); opacity: 0; }
}

.pd-sobre-overlay.opening .pd-solapa {
  animation: pdSolapa 1150ms cubic-bezier(0.62, 0.02, 0.28, 1) 320ms forwards;
}
@keyframes pdSolapa {
  0%   { transform: perspective(1200px) rotateX(0deg);    z-index: 6; opacity: 1; filter: drop-shadow(0 3px 3px rgba(88, 74, 56, 0.20)) drop-shadow(0 9px 14px rgba(88, 74, 56, 0.14)) brightness(1); }
  49%  {                                                  z-index: 6; opacity: 1; }
  50%  {                                                  z-index: 0; opacity: 1; filter: drop-shadow(0 -3px 3px rgba(88, 74, 56, 0.14)) drop-shadow(0 -9px 14px rgba(88, 74, 56, 0.10)) brightness(0.94); }
  66%  {                                                              opacity: 1; }
  100% { transform: perspective(1200px) rotateX(-164deg); z-index: 0; opacity: 0; filter: drop-shadow(0 -3px 3px rgba(88, 74, 56, 0.12)) drop-shadow(0 -10px 16px rgba(88, 74, 56, 0.10)) brightness(0.94); }
}

.pd-sobre-overlay.opening .pd-carta {
  animation: pdCarta 1400ms cubic-bezier(0.28, 0.68, 0.24, 1) 900ms forwards;
}
@keyframes pdCarta {
  0% {
    transform: translateY(0) scale(1);
    clip-path: inset(0px 0px 208px 0px);
    box-shadow: 0 0 0 rgba(88, 74, 56, 0);
  }
  62% {
    transform: translateY(-306px) scale(1);
    clip-path: inset(-60px -60px -60px -60px);
    box-shadow: 0 24px 34px -10px rgba(88, 74, 56, 0.30);
  }
  100% {
    transform: translateY(-316px) scale(1.05);
    clip-path: inset(-60px -60px -60px -60px);
    box-shadow: 0 30px 42px -10px rgba(88, 74, 56, 0.26);
  }
}

/* El conjunto baja mientras sale la tarjeta, para que la escena siga
   quedando centrada en pantalla.

   Cuánto baja depende de la escala: el escenario crece desde su borde
   inferior (transform-origin 50% 100%), así que a más escala la tarjeta
   se va más arriba. Centrar el conjunto (borde alto de la tarjeta +
   borde bajo del sobre) pide bajar 224·escala − 129 px; se dejan 136
   para que quede un pelo por encima del centro, que se ve mejor. */
.pd-sobre-overlay.opening .pd-sobre-stage {
  animation: pdEscena 1400ms cubic-bezier(0.28, 0.68, 0.24, 1) 900ms forwards;
}
@keyframes pdEscena {
  to { transform: translateY(calc(224px * var(--pd-esc) - 136px)) scale(var(--pd-esc)); }
}

.pd-sobre-overlay.opening .pd-sobre-marca {
  opacity: 0;
  transform: translateY(-14px);
}
.pd-sobre-overlay.opening .pd-sobre-tap {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pd-sobre-overlay.opening .pd-rosa,
  .pd-sobre-overlay.opening .pd-solapa,
  .pd-sobre-overlay.opening .pd-carta,
  .pd-sobre-overlay.opening .pd-sobre-stage { animation-duration: 0.01ms !important; }
  .pd-sobre-tap { animation: none; }
}

/* ── Escala por pantalla ── */
@media (max-width: 360px)  { :root { --pd-esc: 0.92; } }
@media (max-height: 740px) { :root { --pd-esc: 0.90; } }
@media (max-height: 640px) { :root { --pd-esc: 0.78; } }
@media (min-width: 768px) and (min-height: 820px) { :root { --pd-esc: 1.30; } }


/* ══════════════════════════════════════════════════════════════
   8b. MARCA PD — monograma entrelazado
   La P maciza pasa por delante y le abre un hueco al asta de la D,
   que va sólo en contorno. Es la única manera de cruzar estas dos
   letras sin que la panza de una entre en la de la otra.

   Se usa en tres sitios —sobre, hero y cierre— y en cada uno hereda
   el color del contenedor con `currentColor`, por eso sirve igual en
   tinta sobre crema que en crema sobre café.

   El ancho va en `em`, así que los `clamp()` de tamaño que ya existían
   en `.pd-monogram` siguen mandando y no hubo que tocarlos.

   Va como PNG con alfa y no como SVG con `<text>`: antes dependía de que
   cargara Bodoni desde Google, y si no cargaba, la máscara del hueco se
   desalineaba con la P y salía un mordisco en la D. Los PNG se generaron
   capturando ese mismo SVG en el navegador, así que el dibujo es idéntico.
   Para regenerarlos hay que volver a montar el SVG de texto (queda en el
   historial de git) y capturarlo a 1500x960 con fondo transparente.
   ══════════════════════════════════════════════════════════════ */
.pd-marca {
  display: block;
  width: 3.2em;
  height: 2.048em;   /* 3.2 x 160/250, la proporcion del dibujo */
  margin: 0 auto;

  /* elegante-bw.css trae un `body, p, li, span, div { color: ... }` que le
     pega a este span y le mata el color heredado. Al <svg> anterior no le
     pegaba, por eso hasta ahora no hacia falta. */
  color: inherit;

  /* La marca es una imagen, pero entra como MASCARA y el color lo pone
     `currentColor`. Asi un solo archivo sirve en los tres sitios: tinta
     sobre crema en el sobre y el hero, crema sobre cafe en el cierre. */
  background-color: currentColor;
  -webkit-mask-image: url("../images/Pamela&Daniel/monograma-pd.png");
          mask-image: url("../images/Pamela&Daniel/monograma-pd.png");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* El sobre la lleva grande, como en la referencia. En el hero y en el
   cierre tiene que medirse contra sus vecinos -los nombres en Great
   Vibes y el "!Sera un honor!"- asi que va mas chica.
   OJO: las dos reglas tienen la misma especificidad, gana la ultima;
   `.pd-monogram-closing` va despues a proposito. */
.pd-monogram .pd-marca         { width: 2.5em; height: 1.6em; }
.pd-monogram-closing .pd-marca { width: 2.6em; height: 1.664em; }

/* En el cierre va chica y sobre cafe: el contorno de la D necesita mas
   cuerpo o se pierde, y eso no se puede sacar de la misma imagen. */
.pd-monogram-closing .pd-marca {
  -webkit-mask-image: url("../images/Pamela&Daniel/monograma-pd-grueso.png");
          mask-image: url("../images/Pamela&Daniel/monograma-pd-grueso.png");
}

/* ══════════════════════════════════════════════════════════════
   9. HERO — nombres caligráficos y contador "Faltan"
   ══════════════════════════════════════════════════════════════ */
.bw-hero-fused { background: var(--pd-crema); }

.pd-monogram {
  color: var(--pd-tinta);
  line-height: 1;
  margin: 0;
  text-align: center;
  font-size: 76px;   /* no imprime texto: le da la escala a .pd-marca */
}
.pd-monogram-closing {
  color: var(--pd-crema);
  font-size: 44px;
}

.bw-couple-names {
  font-family: var(--pd-script) !important;
  font-size: 74px !important;
  color: var(--pd-tinta) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  margin: 6px 0 10px !important;
  text-transform: none !important;
}

.bw-date-line {
  font-family: var(--pd-serif) !important;
  letter-spacing: 7px !important;
  color: var(--pd-cafe) !important;
  font-size: 15px !important;
}

.bw-hero-countdown-eyebrow {
  font-family: var(--pd-script) !important;
  font-size: 46px !important;
  color: #fff !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 2px 14px rgba(61, 47, 36, 0.45);
}

/* Contador: números finos separados por ":" como en la referencia */
.bw-hero-clock .cd-num,
.bw-hero-clock > div > span:first-child {
  font-family: var(--pd-serif) !important;
}

.bw-hero-fade {
  background: linear-gradient(to bottom, rgba(250, 243, 234, 0), var(--pd-crema) 92%) !important;
}

/* ══════════════════════════════════════════════════════════════
   10. ITINERARIO — tarjeta blanca con iconos de línea
   ══════════════════════════════════════════════════════════════ */
.pd-itinerario {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}

.pd-itinerario .pd-it-item { padding: 4px 2px; }

.pd-itinerario svg {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  display: block;
  color: var(--pd-tinta);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-it-time {
  font-family: var(--pd-body);
  font-size: 17px;
  color: var(--pd-tinta);
  margin: 0;
  line-height: 1.25;
}
.pd-it-label {
  font-family: var(--pd-body);
  font-size: 17px;
  color: var(--pd-tinta);
  margin: 0;
  line-height: 1.25;
}
.pd-it-pendiente { opacity: 0.92; }

@media (max-width: 600px) {
  .pd-itinerario { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
  .pd-itinerario svg { width: 40px; height: 40px; }
  .pd-it-time, .pd-it-label { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   11. CORAZÓN DE ENCAJE CON LA FECHA
   ══════════════════════════════════════════════════════════════ */
.pd-heart-wrap {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
}
.pd-heart-wrap svg { width: 100%; height: auto; display: block; }

.pd-heart-date {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 74%;
}
.pd-heart-month {
  font-family: var(--pd-serif);
  font-size: 20px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--pd-tinta);
  margin: 0;
}
.pd-heart-day {
  font-family: var(--pd-script);
  font-size: 104px;
  line-height: 0.8;
  color: var(--pd-tinta);
  margin: 4px 0 0;
}
.pd-heart-year {
  font-family: var(--pd-serif);
  font-size: 21px;
  letter-spacing: 9px;
  color: var(--pd-tinta);
  margin: 6px 0 0;
}

@media (max-width: 480px) {
  .pd-heart-month { font-size: 15px; letter-spacing: 4px; }
  .pd-heart-day   { font-size: 74px; }
  .pd-heart-year  { font-size: 16px; letter-spacing: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   12. SEDES — nombre caligráfico, dirección y botón de línea
   ══════════════════════════════════════════════════════════════ */
.bw-venues-section { background: var(--pd-crema); }

.bw-venue { text-align: center; }

.bw-venue-tag {
  font-family: var(--pd-serif) !important;
  font-size: 19px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
  color: var(--pd-tinta) !important;
  margin-bottom: 20px !important;
}

.bw-venue-name {
  font-family: var(--pd-script) !important;
  font-size: 46px !important;
  color: var(--pd-tinta) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  margin: 0 0 6px !important;
  text-transform: none !important;
}

.bw-venue-addr {
  font-family: var(--pd-body) !important;
  font-size: 17px !important;
  color: var(--pd-cafe) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Botón de línea: rectángulo fino, texto serif (todas las referencias) */
/* #btnRsvp y #btnCopiarCuenta van por id porque el tema base los pinta
   con selectores de id y si no, ganan ellos. */
.bw-venue-map,
.bw-gift-btn,
.bw-rsvp-submit,
button#btnRsvp,
button#btnCopiarCuenta,
.bw-libro-btn,
.bw-pase-btn,
.pd-btn {
  display: inline-block;
  font-family: var(--pd-body) !important;
  font-size: 17px !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: var(--pd-tinta) !important;
  background: transparent !important;
  border: 1px solid var(--pd-tinta) !important;
  border-radius: 3px !important;
  padding: 11px 34px !important;
  transition: background 0.35s ease, color 0.35s ease;
}

.bw-venue-map:hover,
.bw-gift-btn:hover,
.bw-rsvp-submit:hover,
button#btnRsvp:hover,
button#btnCopiarCuenta:hover,
.bw-libro-btn:hover,
.bw-pase-btn:hover,
.pd-btn:hover {
  background: var(--pd-tinta) !important;
  color: var(--pd-crema) !important;
}

/* ══════════════════════════════════════════════════════════════
   13. VESTIMENTA
   ══════════════════════════════════════════════════════════════ */
.bw-dresscode-section { background: var(--pd-crema); }

.bw-dress-icons svg {
  width: 96px;
  height: 118px;
  color: var(--pd-tinta);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
}
.bw-dress-amp {
  font-family: var(--pd-serif);
  color: var(--pd-suave);
  font-size: 22px;
  margin: 0 6px;
}

.bw-dress-code {
  font-family: var(--pd-serif) !important;
  font-size: 22px !important;
  letter-spacing: 6px !important;
  text-transform: uppercase;
  color: var(--pd-tinta) !important;
  margin-bottom: 8px !important;
}
.bw-dress-note {
  font-family: var(--pd-body) !important;
  font-size: 18px !important;
  color: var(--pd-cafe) !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   14. INVITACIÓN, REGALOS, RSVP, LIBRO
   ══════════════════════════════════════════════════════════════ */
.bw-blessing {
  font-family: var(--pd-body) !important;
  font-size: 20px !important;
  color: var(--pd-tinta) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.bw-names-text {
  font-family: var(--pd-body) !important;
  font-size: 19px !important;
  color: var(--pd-tinta) !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.bw-invite-phrase p {
  font-family: var(--pd-body) !important;
  font-size: 19px !important;
  color: var(--pd-cafe) !important;
  font-style: normal !important;
}
.bw-invite-rule { background: var(--pd-arena) !important; }

.bw-gifts-section,
.rsvp-section,
.bw-libro-section { background: var(--pd-crema); }

.bw-gift-card,
.bw-rsvp-card,
.bw-libro-card {
  background: var(--pd-papel) !important;
  border: 1px solid var(--pd-arena) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(61, 47, 36, 0.07) !important;
}

.bw-gift-name {
  font-family: var(--pd-script) !important;
  font-size: 40px !important;
  color: var(--pd-tinta) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.bw-gift-tag,
.bw-gift-bank {
  font-family: var(--pd-serif) !important;
  letter-spacing: 4px !important;
  text-transform: uppercase;
  color: var(--pd-suave) !important;
  font-size: 12px !important;
}
.bw-gift-number {
  font-family: var(--pd-serif) !important;
  color: var(--pd-tinta) !important;
  letter-spacing: 3px !important;
}
.bw-gift-account { background: var(--pd-crema) !important; border-color: var(--pd-arena) !important; }

.bw-rsvp-eyebrow {
  font-family: var(--pd-serif) !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
  color: var(--pd-suave) !important;
}
.bw-rsvp-title {
  font-family: var(--pd-script) !important;
  font-size: 58px !important;
  color: var(--pd-tinta) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.bw-rsvp-deadline {
  font-family: var(--pd-body) !important;
  font-size: 17px !important;
  color: var(--pd-cafe) !important;
  /* El tema B&W lo ponia en versales espaciadas; aqui es texto corrido. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
}

.bw-field-lbl {
  font-family: var(--pd-serif) !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
  font-size: 11px !important;
  color: var(--pd-suave) !important;
}
.bw-field input,
.bw-field select,
.bw-field textarea {
  font-family: var(--pd-body) !important;
  font-size: 17px !important;
  color: var(--pd-tinta) !important;
  background: var(--pd-crema) !important;
  border-color: var(--pd-arena) !important;
}

.bw-radio-card {
  background: var(--pd-crema) !important;
  border-color: var(--pd-arena) !important;
  font-family: var(--pd-body) !important;
}
.bw-radio-card input:checked ~ .txt,
.bw-radio-card input:checked ~ .ico { color: var(--pd-tinta) !important; }

.bw-guest-banner {
  background: var(--pd-beige) !important;
  border-color: var(--pd-arena) !important;
}
.bw-guest-banner .gname {
  font-family: var(--pd-script) !important;
  font-size: 40px !important;
  color: var(--pd-tinta) !important;
}

.bw-libro-intro,
.bw-gift-intro {
  font-family: var(--pd-body) !important;
  font-size: 18px !important;
  color: var(--pd-cafe) !important;
}

/* ══════════════════════════════════════════════════════════════
   15. CIERRE Y PIE
   ══════════════════════════════════════════════════════════════ */
.bw-closing-text {
  font-family: var(--pd-script) !important;
  font-size: 54px !important;
  color: var(--pd-crema) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* El pie va pegado al cierre y el tema base lo deja oscuro, asi que aqui
   se resuelve en oscuro con texto claro en vez de pelear por aclararlo. */
.gabomx-footer { background: #3f3126 !important; }
.gabomx-footer p,
.gabomx-footer a,
.gabomx-footer .gabomx-link {
  color: var(--pd-arena) !important;
  font-family: var(--pd-body) !important;
  font-size: 15px !important;
}
.gabomx-footer .gabomx-link:hover { color: var(--pd-crema) !important; }

/* ══════════════════════════════════════════════════════════════
   16. PASE QR — el modal también en cálido
   ══════════════════════════════════════════════════════════════ */
.pass-header { background: var(--pd-banda) !important; }
.pass-title {
  font-family: var(--pd-script) !important;
  font-size: 42px !important;
  color: var(--pd-crema) !important;
  letter-spacing: 0 !important;
}
.pass-event,
.pass-date-header { color: var(--pd-beige) !important; font-family: var(--pd-serif) !important; }
.pass-body { background: var(--pd-papel) !important; }
.pass-guest-name { font-family: var(--pd-serif) !important; color: var(--pd-tinta) !important; }
.qr-btn { font-family: var(--pd-body) !important; }

/* ══════════════════════════════════════════════════════════════
   17. FOTOS DE LA SESIÓN
   Las 10 originales viven en assets/images/Pamela&Daniel/fotos/
   (26-30 MB cada una). Lo que sirve la página son las versiones
   optimizadas del nivel de arriba:

     hero.jpg      <- IMG_9531  (la que pidió Pamela como principal)
     foto-1.jpg    <- IMG_9426
     foto-2.jpg    <- IMG_9434
     ceremonia.jpg <- IMG_9416
     recepcion.jpg <- IMG_9534
     galeria-1..5  <- IMG_0260, 9433, 9435, 9436, 9708

   Para regenerarlas:
     ffmpeg -i fotos/IMG_XXXX.JPG -vf scale=ANCHO:-2 -q:v 4 destino.jpg
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   18. ESCALA TIPOGRÁFICA RESPONSIVA
   Va al final a propósito: los tamaños de arriba son los de
   escritorio y aquí se convierten en fluidos, para que ninguna
   caligráfica se corte en un teléfono angosto (360 px).
   ══════════════════════════════════════════════════════════════ */
.pd-monogram                { font-size: clamp(46px, 15vw, 76px) !important; }
.pd-monogram-closing        { font-size: clamp(32px, 10vw, 44px) !important; }
.bw-couple-names            { font-size: clamp(40px, 13vw, 74px) !important; }
.bw-hero-countdown-eyebrow  { font-size: clamp(32px, 11vw, 46px) !important; }
.bw-calendar-title          { font-size: clamp(38px, 12vw, 58px) !important; }
.bw-script-separator p      { font-size: clamp(38px, 12vw, 66px) !important; }
.bw-venue-name              { font-size: clamp(30px, 9vw, 46px) !important; }
.bw-rsvp-title              { font-size: clamp(36px, 11vw, 58px) !important; }
.bw-closing-text            { font-size: clamp(34px, 11vw, 54px) !important; }
.bw-gift-name               { font-size: clamp(30px, 9vw, 40px) !important; }
.bw-guest-banner .gname     { font-size: clamp(28px, 9vw, 40px) !important; }
.pass-title                 { font-size: clamp(30px, 9vw, 42px) !important; }
.pd-title-stack .bottom     { font-size: clamp(34px, 11vw, 52px); }
.pd-title-stack .top        { font-size: clamp(16px, 5vw, 21px); }
.pd-heart-day               { font-size: clamp(64px, 24vw, 104px); }
.pd-heart-month             { font-size: clamp(14px, 4.6vw, 20px); letter-spacing: clamp(3px, 1.4vw, 6px); }
.pd-heart-year              { font-size: clamp(15px, 4.8vw, 21px); letter-spacing: clamp(5px, 2.2vw, 9px); }
.bw-section-label           { font-size: clamp(16px, 5vw, 20px) !important; }
.bw-venue-tag               { font-size: clamp(15px, 4.6vw, 19px) !important; }
.bw-dress-code              { font-size: clamp(17px, 5.4vw, 22px) !important; }