/* ==========================================================================
   Boda Adriana & Edgardo — Castillo Barakah
   Rediseño 2026-09-01: de heráldica medieval sobre pergamino/piedra a bordado
   itsmeño (Tehuantepec) sobre terciopelo negro. La celebración sigue siendo
   medieval (combates a espada); solo cambia la piel visual. Ver bitacora.md.
   Pendiente: textura real de terciopelo negro (por ahora tono liso, ver TODO).
   ========================================================================== */

:root {
  /* Terciopelo negro — base del bordado itsmeño */
  --color-velvet:      #0d0908; /* provisional: tono liso mientras llega la textura real de terciopelo */
  --color-velvet-alt:  #170f0c;
  --color-marfil:      #f5ead9; /* texto claro sobre terciopelo */
  --color-marfil-dim:  #d8c9b0;

  /* Colores de hilo, vívidos, tomados del bordado de referencia */
  --color-crimson: #d81e3c;
  --color-gold:    #e8b800;
  --color-blue:    #1f6fb3;

  /* Se conservan por compatibilidad con reglas viejas aún no retiradas */
  --color-parchment:      #f2e8d0;
  --color-parchment-dark: #ddc9a0;
  --color-stone:          #463c34;
  --color-ink: #2b1d12;

  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font-serif);
  color: var(--color-marfil);
  background-color: var(--color-velvet);
  background-image: url('../img/textura_terciopelo.webp');
  background-repeat: repeat;
  background-size: 480px;
  /* Necesario para el truco de 100vw de .pleca-divisor (rompe el padding de
     .seccion/.container para llenar de lado a lado) — sin esto, el 100vw
     puede quedar más ancho que el viewport real cuando hay scrollbar
     vertical, y aparece un scroll horizontal fantasma. */
  overflow-x: hidden;
}

/* Terciopelo negro real (textura generada 2026-09-01, ya no es el tono liso
   provisional) — misma textura de fondo que body, repetida por sección. */
.bg-terciopelo {
  background-color: var(--color-velvet);
  background-image: url('../img/textura_terciopelo.webp');
  background-repeat: repeat;
  background-size: 480px;
  color: var(--color-marfil);
}

.icono {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.2em;
  fill: currentColor;
}

/* Íconos rehechos en bordado (reemplazan uno a uno los SVG de una tinta —
   ver bitacora.md). Cada pieza se recorta ajustada a su propio contenido;
   como la silueta de cada objeto es muy distinta (la espada sale muy alta y
   angosta, otros van a salir más anchos), se fijan por ALTURA en vez de por
   ancho, igual que se hizo con el monograma. */
.icono-bordado {
  height: 2.1em;
  width: auto;
  vertical-align: -0.55em;
}

.text-crimson { color: var(--color-crimson); }
.text-gold    { color: var(--color-gold); }
.text-blue    { color: var(--color-blue); }
.bg-crimson   { background-color: var(--color-crimson); }
.bg-gold      { background-color: var(--color-gold); }

h1, h2, h3, .monograma-titulo {
  font-family: var(--font-serif);
  font-weight: 700;
}

.seccion {
  padding: 4rem 1rem;
}

.hero {
  position: relative;
  overflow: hidden; /* que el par de esquinas festoneadas no se salga del hero en pantallas angostas */
  min-height: 100svh;
  background-image: linear-gradient(rgba(10, 6, 4, 0.45), rgba(10, 6, 4, 0.6)), url('../img/novios_retocados.webp');
  background-size: cover;
  background-position: top center;
  color: #f7efdc;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  padding: 2rem 1rem 3rem;
}

/* Par de esquinas de "hoja festoneada" arriba del hero — misma pieza,
   espejeada a la derecha (probado y aprobado 2026-09-01: como par de
   esquinas funciona, como marco de 4 esquinas no — ver bitacora.md).
   Versión dorada con canal alfa real (reemplaza la de fondo negro plano
   con mix-blend-mode: screen — ya no hace falta el truco de blending). */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(110px, 26vw, 220px);
  aspect-ratio: 1 / 1;
  background-image: url('../img/bordado/hoja-esquina-dorado.webp');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  pointer-events: none;
}
.hero::before { left: 0; }
.hero::after  { right: 0; transform: scaleX(-1); }

/* Panel/scrim detrás del título — dos rondas de parches (scrim, luego
   ocultar la frase en zapoteco en mobile) no bastaron: en pantallas
   angostas el bloque de texto completo (título + frase + frase zapoteca +
   fecha + cuenta regresiva) seguía tapando la cara de los novios, porque
   la foto es muy alargada y no se va a reemplazar (decisión del usuario,
   2026-09-01). Solución de fondo: el hero ya solo carga el monograma y el
   título — todo lo demás (frase, fecha, cuenta regresiva) se movió a la
   sección `#bienvenida-info`, justo debajo, sobre fondo sólido, sin
   competir nunca con la foto. El texto sigue siendo HTML real (no una
   composición fija en Photoshop) — ver razones en la entrada de
   bitácora de la ronda anterior. */
.hero-contenido {
  position: relative;
  z-index: 2;
  background: linear-gradient(to top, rgba(8,4,2,.85) 0%, rgba(8,4,2,.65) 55%, rgba(8,4,2,.1) 100%);
  padding: 1.5rem 1rem 1.25rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

/* flor-nube ya tiene alfa real (corregido 2026-09-01 — el primer intento
   asumió fondo negro plano igual que las otras 3 flores y usaba
   mix-blend-mode: screen, lo cual dejaba un borde oscuro visible; el
   archivo real sí traía canal alfa, ya no hace falta ningún blend). */

/*
  novios_retocados.webp (reemplazó a novios.jpeg el 2026-09-04) es una foto vertical
  (1080x1920, misma proporción 9:16 que la anterior, solo mayor resolución) usada de
  fondo a pantalla completa. Ya trae integrados el monograma A+E y el escudo/copete
  del castillo directo en la imagen (retoque hecho por la novia en Canva/Photoshop) —
  por eso el hero ya no superpone ningún <img> de monograma ni de corona: se quitaron
  porque ahora duplicarían lo que ya está en la foto.
  En mobile casi no se recorta (proporción parecida). En desktop, el hero es mucho
  más ancho que alto: "cover" agranda la imagen y con "top" solo se ve la parte de
  arriba (el escudo/la pared), los novios quedan fuera de cuadro más abajo.
  Actualizado 2026-09-04: llegó justo esa versión panorámica (novios_retocadosB.png,
  1080x756, ratio ~1.43:1) — el monograma ya viene recompuesto centrado para un
  encuadre horizontal, en vez de ser el mismo recorte vertical estirado. Se usa
  solo en desktop (media query abajo); en mobile se sigue usando la vertical de
  arriba, que ahí sí encaja bien.
  Ajustado otra vez, mismo día (pedido explícito: "ya no recortes la foto para
  desktop, aunque quede algo grande verticalmente"): con min-height/max-height
  fijos, "cover" seguía recortando los lados de la foto en pantallas más anchas
  que 1.43:1 (la mayoría). Se reemplazó por `aspect-ratio: 1080 / 756` — el
  mismo ratio nativo de la foto — así el hero mide exactamente lo que la foto
  necesita para cubrirse sin recortar nada (con "cover" en una caja de ese
  ratio no hay overflow que recortar). Efecto secundario aceptado por el
  usuario: en pantallas muy anchas el hero se vuelve bastante alto (en 1920px
  de ancho, ~1344px de alto).
*/
@media (min-width: 768px) {
  .hero {
    aspect-ratio: 1080 / 756;
    min-height: auto;
    max-height: none;
    background-image: linear-gradient(rgba(10, 6, 4, 0.45), rgba(10, 6, 4, 0.6)), url('../img/novios_retocados_desktop.webp');
    background-position: center center;
    padding-bottom: 28rem;
  }
}

/* .hero .monograma y .monograma-halo (overlay de monograma + resplandor CSS
   placeholder sobre el hero) se eliminaron el 2026-09-04: ya no las usa
   ningún elemento de index.php. El monograma y el escudo/copete del castillo
   ahora vienen integrados directo en la foto (novios_retocados.webp, retoque
   de la novia) — mantener el overlay aparte los hubiera duplicado. El
   resplandor de tehuana real sigue pendiente, pero ya no aplica sobre un
   monograma en el hero (ver bitacora.md). */

.hero h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  letter-spacing: .02em;
}

.hero .subtitulo {
  font-style: italic;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}

.cuenta-regresiva {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.cuenta-regresiva .unidad {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--color-gold);
  border-radius: .5rem;
  padding: .5rem .9rem;
  min-width: 4.2rem;
}

.cuenta-regresiva .numero {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
  color: var(--color-gold);
}

.cuenta-regresiva .etiqueta {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.escudo-familia img {
  max-width: 110px;
  height: auto;
}

/* Rosetón bordado que reemplaza los 4 escudos heráldicos de familia
   (mismo rosetón repetido — no es "un escudo por rama", es un solo
   ornamento, ver bitacora.md 2026-09-01). Tiene alfa real (el primer
   procesado tenía un bug: se convertía a RGB antes de recortar y eso
   revelaba un fondo blanco oculto bajo el canal alfa — corregido). */

/* Tira de banderines de papel picado como divisor decorativo. */
.banderines-divisor {
  display: block;
  width: min(560px, 88%);
  height: auto;
  margin: 0 auto 2rem;
}

.badge-pendiente {
  font-size: .7rem;
  background: var(--color-gold);
  color: var(--color-ink);
  padding: .15rem .5rem;
  border-radius: .3rem;
  vertical-align: middle;
}

.mapa-embed {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (min-width: 768px) {
  .mapa-embed { aspect-ratio: 16 / 7; }
}

/* Acentos florales bordados, sueltos en un par de encabezados como primera
   prueba (ver bitacora.md — el resto de posiciones queda para la siguiente
   ronda, junto con la tira de banderines como divisor entre secciones).
   Único uso restante: flor-azucena.webp en RSVP (las otras se reemplazaron
   por las plecas anchas .pleca-divisor). Ancho subido 84px -> 109px
   (+30%, pedido 2026-09-04). */
.flor-acento {
  display: block;
  width: 109px;
  height: auto;
  margin: 0 auto .75rem;
  mix-blend-mode: screen;
}

/* Jicalpestle bordado (símbolo de Mesa de Regalos, 2026-09-06). A diferencia
   de .flor-acento, el PNG de origen ya trae canal alfa real (verificado:
   extremos 0/255, no un fondo negro disfrazado) — no hace falta
   mix-blend-mode ni el procesado de umbral que usaron las plecas. */
.simbolo-mesa-regalos {
  display: block;
  width: 109px; /* mismo ancho que .flor-acento, a pedido del usuario */
  height: auto;
  margin: 0 auto 1rem;
}

/* Desktop: en vez del ancho fijo de mobile, se fija por ALTURA para que
   quede a la misma altura que las plecas anchas (.pleca-divisor--ancha,
   nativas 1920×315 -> 315px de alto en su punto máximo) — pedido explícito
   del usuario. Como el jicalpestle es cuadrado (600×600), a 315px de alto
   sale ~315px de ancho, bien contenido dentro del .container. */
@media (min-width: 768px), (orientation: landscape) and (min-width: 600px) {
  .simbolo-mesa-regalos {
    width: auto;
    height: 315px;
  }
}

/* Plecas bordadas de encabezado de sección (2026-09-04, usada primero en
   "El Programa del Reino", luego en "Padres y Padrinos" y "Hospedaje
   Cercano"): a diferencia de .flor-acento (chica, centrada, contenida
   dentro del .container), estas piezas son banners anchos (flor central +
   un par de esquinas de hoja, mismo formato 1254×426 — ver Pleca_secion1.png
   / secionPAdrinos.png / secionhospedaje.png en el vault) pensados para
   llenar de lado a lado. Se rompe el padding de .seccion/.container con el
   truco de 100vw + centrado (necesita `overflow-x: hidden` en body, ver
   arriba).
   Los PNG originales NO vienen recortados — son rectángulos opacos con su
   propio fondo "negro" (grano propio, no es negro puro). La primera versión
   usaba mix-blend-mode:screen como con el resto del bordado, pero ese fondo
   no coincide exactamente con --color-velvet y con screen solo se aclaraba,
   dejando un rectángulo visible (reportado por el usuario 2026-09-04, ver
   bitacora.md). Fix: se recortó alfa real en Python a partir del canal de
   valor máximo (fondo <22 de brillo -> transparente, >65 -> opaco, rampa
   suave entre medio — ver bitacora.md para el detalle del threshold),
   igual que ya tienen los demás assets de bordado ("alfa real"). Ya no hace
   falta mix-blend-mode aquí.
   Ajustado 2026-09-04: en desktop (y teléfono horizontal) el breakout a
   100vw se veía demasiado achatado/ancho — ver media query abajo, que lo
   limita a un ancho fijo centrado en vez de a todo el viewport. */
.pleca-divisor {
  display: block;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 1.5rem;
}

/* Desktop o teléfono horizontal: cancela el breakout de 100vw (que ahí se ve
   como una franja gigante, ~650px de alto en un monitor de 1920px) y la deja
   centrada con un ancho fijo — se sigue viendo como pieza ancha y
   protagónica, pero ya no domina toda la pantalla. min-width cubre desktop;
   la combinación con orientation:landscape cubre teléfonos acostados que
   aún no llegan a 768px de ancho (p. ej. iPhone SE en horizontal, 667px). */
@media (min-width: 768px), (orientation: landscape) and (min-width: 600px) {
  .pleca-divisor {
    width: 90%;
    max-width: 800px;
    position: static;
    left: auto;
    transform: none;
    margin: 0 auto 1.5rem;
  }

  /* 2026-09-04: a diferencia de los recortes originales de cada pleca
     (1254×426, se ven chatos si se estiran a todo el ancho — de ahí la caja
     de 800px de arriba), las 3 secciones (Programa, Padrinos, Hospedaje)
     ahora tienen también una versión diseñada aparte específicamente ancha
     (1920×315, ratio ~6:1) para ir a pantalla completa sin achatarse. Cada
     una se sirve vía <picture> en el mismo breakpoint (pleca-programa-desktop.webp,
     pleca-padrinos-desktop.webp, pleca-hospedaje-desktop.webp) y lleva esta
     clase modificadora en vez de la caja de 800px: vuelve al mismo breakout
     a 100vw que ya usa en mobile — el tope en 1920px es solo para no
     sobre-escalarla (y verse borrosa) en monitores ultra-anchos, no para
     acotar el diseño. Compound selector a propósito para pesar más que la
     regla genérica de arriba sin depender del orden. */
  .pleca-divisor.pleca-divisor--ancha {
    width: 100vw;
    max-width: 1920px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 1.5rem;
  }
}

footer {
  background: var(--color-velvet-alt);
  color: var(--color-marfil-dim);
  text-align: center;
  padding: 2rem 1rem;
}

/* El monograma nuevo es alto y angosto (ver .hero .monograma) — se fija
   por altura también aquí en vez de por ancho. */
footer img.monograma-footer {
  width: auto;
  height: 90px;
  margin-bottom: .5rem;
}