/* =============================================================
   PAOLA E IAN · CAPA DE REFINAMIENTO
   1) Alineación y justificación uniforme de toda la información
   2) Optimización para móvil (ritmo, tipografía fluida, toques,
      rendimiento y áreas seguras)
   Se carga DESPUÉS de style.css: sólo ajusta, no reescribe.
   ============================================================= */

/* -------------------------------------------------------------
   0 · Base tipográfica más nítida y sin desbordes
   ------------------------------------------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:clip;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* nada se sale del ancho de la pantalla */
img, svg, video, iframe, canvas{ max-width:100%; }
/* palabras largas (direcciones, URLs) nunca rompen el diseño */
p, li, dd, dt, label, small, b, span, h1, h2, h3, h4{ overflow-wrap:break-word; }

/* -------------------------------------------------------------
   1 · ALINEACIÓN Y JUSTIFICACIÓN UNIFORME
   Medida de lectura constante + saltos de línea inteligentes
   ------------------------------------------------------------- */

/* Títulos: reparto equilibrado de palabras entre líneas */
.sec-title,
.hero__sub,
.poster__names,
.poster__top,
.poster__foot,
.card__big,
.tl-body h3,
.panel__title{
  text-wrap:balance;
}

/* Párrafos: última línea nunca queda huérfana */
.sec-lead,
.poster__lead,
.poster__text,
.card__small,
.tl-body p,
.dress-note,
.cd-note,
.map-card__addr{
  text-wrap:pretty;
}

/* Bloques de texto corrido → JUSTIFICADOS con partición de palabras,
   para que el margen derecho quede parejo sin ríos de espacio */
.sec-lead,
.poster__text,
.tl-body p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:8 4 4;
}
/* centrados los que el diseño exige centrados, pero con medida fija */
.sec-lead{
  text-align:center;
  max-width:60ch;
  margin-inline:auto;
}
@media (min-width:560px){
  .sec-lead{ text-align:justify; text-align-last:center; }
}

/* Medida de lectura constante en todas las secciones */
.poster__lead,
.poster__text{
  max-width:52ch;
  margin-inline:auto;
}
.card__small{ max-width:34ch; margin-inline:auto; }
.tl-body p{ max-width:56ch; }
.map-card__addr{ max-width:44ch; }

/* Tarjetas: todo el contenido alineado en la misma retícula vertical */
.cards{ align-items:stretch; }
.card{
  display:flex; flex-direction:column;
  align-items:center;
  gap:0;
}
.card h3{ margin-bottom:8px; }
/* el texto secundario se estira para que los botones queden a la misma altura */
.card__small{ flex:1 1 auto; }
.card .btn{ margin-top:auto; align-self:stretch; }

/* Programa: hora y descripción alineadas a la misma línea base */
.timeline{ margin-inline:auto; max-width:64ch; }
.tl-item{ padding-bottom:24px; }
.tl-time{ margin-bottom:8px; }

/* Chips y listas centradas con separación uniforme */
.mini-facts{ gap:10px; }
.mini-facts li{ text-align:center; }

/* Cartel WANTED: bloque perfectamente centrado */
.poster{ text-align:center; }
.poster__rule{ width:72%; }

/* Cuenta regresiva: números y etiquetas alineados */
.countdown{ align-items:stretch; }
.cd-cell{ display:flex; flex-direction:column; justify-content:center; }

/* Vestimenta: tarjetas de igual alto y contenido centrado */
.dress-item{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; gap:6px;
}

/* Encabezados de sección con separación consistente */
.sec-head{ margin-bottom:32px; }
.sec-head .sec-lead{ margin-top:16px; }

/* -------------------------------------------------------------
   2 · OPTIMIZACIÓN MÓVIL
   ------------------------------------------------------------- */

/* Áreas seguras (notch e indicador inferior) */
.sheet{ padding-inline:max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }

/* Al saltar con los enlaces internos, el título no queda bajo la
   barra de progreso ni bajo el selector de tema */
.sheet,
#hero-section,
#main-content section{ scroll-margin-top:64px; }

@media (max-width:559px){
  /* Ritmo vertical más compacto: menos scroll para llegar a lo importante */
  .sheet{ padding-block:52px; }
  .sec-head{ margin-bottom:26px; }

  /* Tipografía fluida y legible en pantallas pequeñas */
  .sec-title{ font-size:clamp(1.6rem,7.6vw,2.1rem); }
  .sec-kicker{ font-size:.68rem; letter-spacing:.16em; }
  .sec-lead{ font-size:.98rem; line-height:1.62; }
  .card__small,
  .tl-body p{ font-size:.95rem; line-height:1.6; }
  .mini-facts li{ font-size:.85rem; padding:8px 13px; }

  /* Cuenta regresiva: siempre 4 columnas legibles, incluso a 320 px */
  .countdown{ gap:6px; }
  .cd-cell{ padding:12px 2px 9px; }
  .cd-cell b{ font-size:clamp(1.4rem,8.4vw,2rem); }
  .cd-cell span{ font-size:.54rem; letter-spacing:.08em; }

  /* Botones: área de toque cómoda y ancho completo */
  .btn{ width:100%; min-height:52px; }
  .btn--sm{ width:auto; min-height:46px; }
  .hero__cta .btn,
  .btn-row .btn{ width:100%; }

  /* Tarjetas y bordes con menos relleno lateral */
  .card{ padding:24px 18px 20px; }
  .poster{ padding:28px 18px 24px; }
  .card__icon{ width:54px; height:54px; font-size:1.25rem; margin-bottom:12px; }

  /* Programa: la línea de tiempo aprovecha todo el ancho */
  .timeline{ padding-left:20px; }
  .tl-item::before{ left:-20px; }

  /* Mapa: alto proporcionado en vertical */
  .map-card__frame{ min-height:0; height:56vw; max-height:300px; }
  .map-card__info{ padding:18px 16px 20px; }

  /* Selector de tema más discreto para no tapar el título */
  .theme-toggle{ min-height:38px; padding:0 12px; font-size:.6rem; }

  /* Hero: aire suficiente arriba y abajo */
  .hero{ padding:22px 18px calc(30px + var(--safe-b)); }
  .hero__sub{ font-size:1rem; }
}

/* Pantallas muy estrechas (≤ 360 px) */
@media (max-width:360px){
  .sec-title{ font-size:1.5rem; }
  .cd-cell b{ font-size:1.3rem; }
  .cd-cell span{ font-size:.5rem; }
  .mini-facts li{ font-size:.8rem; }
  .hero__strip{ gap:7px; padding:8px 13px; }
}

/* Toque: sin efectos de hover pegados en móvil */
@media (hover:none){
  .card:hover,
  .dress-item:hover,
  .btn:hover,
  .mini-facts li:hover{ transform:none; box-shadow:var(--sh-2); }
  .btn:active{ transform:scale(.98); }
}

/* Rendimiento en móvil.
   NOTA: no se usa `content-visibility:auto` porque altera la altura
   estimada de las secciones y descuadra el scroll a los anclajes. */
@media (max-width:1023px){
  /* el grano animado consume batería en móvil: se deja fijo */
  .grain{ animation:none !important; }
  /* las capas decorativas no provocan repintados innecesarios */
  .hero__glow,.hero__wash,.grain,.progress{ will-change:auto; }
}

/* Enfoque visible y accesible en todos los controles */
.btn:focus-visible,
.theme-toggle:focus-visible,
.panel__item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* Impresión: la invitación se imprime alineada y sin adornos */
@media print{
  .sec-lead,.poster__text,.tl-body p{ text-align:left; hyphens:manual; }
}