/* ============================================================
   LA INVITACIÓN
   ------------------------------------------------------------
   Réplica de la que hicieron en Canva. La paleta y las formas se
   sacaron de ahí: azul marino del fondo de la foto, azul acero
   para los datos, dorado para los adornos, y papel crema.

   Lo que en Canva son capas de imagen aquí se arma con CSS donde
   se puede —filetes, placas, círculos— y con los PNG/SVG propios
   de la invitación donde el dibujo importa.
   ============================================================ */
:root {
  --marino: #2E3F55;          /* el azul del fondo del estudio */
  --marino-hondo: #22304180;
  --acero: #4A6B8A;           /* los horarios y "17:00 PM" */
  --papel-inv: #FBFAF7;
  --panel: #EDEFF2;           /* la placa del dress code */
  --panel-2: #F6F4EF;         /* la placa del itinerario */
  --oro-inv: #C4A14E;
  --tinta-inv: #14181D;
}

.inv { background: var(--papel-inv); color: var(--tinta-inv); }

/* Todo el contenido vive en una columna angosta: la invitación se
   diseñó para el teléfono y en pantalla grande se ve mejor
   centrada que estirada. */
.inv-hoja { max-width: 460px; margin: 0 auto; padding: 0 var(--e-4); }

/* ---------- títulos ---------- */
.inv-script {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.1rem);
  line-height: 1.2; margin: 0; font-weight: 400;
}
.inv-titulo {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  letter-spacing: .14em; margin: 0;
}
/* Las versalitas muy abiertas son el gesto que más identifica esta
   invitación. El text-indent compensa el espacio que letter-spacing
   agrega después de la última letra y descentra el bloque. */
.inv-caps {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .26em; text-indent: .26em;
  font-size: .7rem; line-height: 1.9; margin: 0;
}
.inv-caps-g { font-size: .82rem; letter-spacing: .3em; text-indent: .3em; }

/* ============================================================
   PORTADA
   ============================================================ */
.inv-portada { position: relative; }
.inv-portada img { display: block; width: 100%; height: auto; }

/* El nombre va SOBRE la foto, como en la invitación. El degradado
   es lo que mantiene el texto legible pase lo que pase con la
   parte de la foto que queda debajo. */
.inv-portada-nombres {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-8) var(--e-4) var(--e-5);
  background: linear-gradient(to top, rgba(29, 40, 55, .72), rgba(29, 40, 55, 0));
  text-align: center; color: #fff;
}
.inv-portada-nombres .n {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem);
  letter-spacing: .2em; text-indent: .2em; margin: 0; line-height: 1.5;
}
.inv-portada-nombres .amp {
  font-family: var(--display); font-size: 1.9rem; line-height: 1;
  display: block; margin: .1rem 0;
}

/* ============================================================
   REPRODUCTOR
   ------------------------------------------------------------
   Si no hay canción configurada, la sección entera no se pinta.
   Un reproductor que no suena es peor que no tenerlo.
   ============================================================ */
.inv-musica { text-align: center; padding: var(--e-6) 0 var(--e-5); }
.inv-controles { display: flex; align-items: center; justify-content: center; gap: var(--e-4); }
.inv-boton-play {
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: var(--acero); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.inv-boton-play svg { width: 22px; height: 22px; fill: currentColor; }
.inv-barra { height: 3px; background: #D5DCE4; margin: var(--e-4) auto 0; max-width: 300px; }
.inv-barra span { display: block; height: 100%; width: 0; background: var(--acero); }

/* ============================================================
   LA TARJETA DE INVITACIÓN
   ============================================================ */
.inv-marino {
  background: var(--marino); color: #fff;
  padding: var(--e-7) var(--e-5) var(--e-8);
  text-align: center; position: relative; overflow: hidden;
}
.inv-emblema { width: 92px; height: auto; margin: 0 auto var(--e-5); display: block; }

/* La placa clara encima del marino, con los nombres de los padres
   y la fecha. */
.inv-placa {
  background: #DCE3EC; color: var(--tinta-inv);
  padding: var(--e-6) var(--e-4);
  max-width: 300px; margin: 0 auto;
}
.inv-placa .nombres {
  font-family: var(--serif); font-size: 1.35rem;
  letter-spacing: .2em; text-indent: .2em; margin: var(--e-4) 0 var(--e-2);
}
.inv-fecha {
  font-family: var(--serif); font-size: 1.15rem; color: var(--acero);
  letter-spacing: .14em; margin: var(--e-3) 0 0;
}

.inv-cita {
  font-family: var(--serif); font-style: italic; text-align: center;
  font-size: .82rem; letter-spacing: .1em; line-height: 2;
  text-transform: uppercase; margin: var(--e-7) auto; max-width: 34ch;
}

/* El divisor del corazón, tal cual el de la invitación. */
.inv-divisor { display: block; width: 190px; margin: var(--e-6) auto; opacity: .85; }

/* ============================================================
   ITINERARIO
   ------------------------------------------------------------
   Placa de papel con un punto dorado en cada esquina. Los puntos
   van con ::before/::after y un hijo, para no meter cuatro divs
   que no significan nada.
   ============================================================ */
.inv-itinerario {
  position: relative; background: var(--panel-2);
  padding: var(--e-6) var(--e-4); margin: var(--e-6) 0;
}
.inv-punto {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--oro-inv);
}
.inv-punto.a { top: 12px; left: 12px; }
.inv-punto.b { top: 12px; right: 12px; }
.inv-punto.c { bottom: 12px; left: 12px; }
.inv-punto.d { bottom: 12px; right: 12px; }

.inv-pasos { list-style: none; margin: var(--e-5) 0 0; padding: 0; }
.inv-paso {
  display: grid; grid-template-columns: 56px 1px 1fr;
  gap: var(--e-4); align-items: center;
  padding: var(--e-3) 0;
}
.inv-paso img { width: 46px; height: 46px; object-fit: contain; }
/* La línea vertical que une los pasos: es el mismo filete, repetido
   en cada renglón, así crece sola si se agrega un paso. */
.inv-paso .linea { background: #C9CDD3; align-self: stretch; }
.inv-paso .hora {
  font-family: var(--serif); color: var(--acero);
  font-size: .82rem; letter-spacing: .1em; display: block;
}
.inv-paso .que {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .14em; font-size: .76rem; line-height: 1.4;
}

/* ============================================================
   DRESS CODE
   ============================================================ */
.inv-dress { position: relative; margin: var(--e-8) 0 var(--e-6); }

/* El óvalo marino que se encima a la placa, como en la invitación. */
.inv-sello {
  position: absolute; top: -34px; right: 6px; z-index: 2;
  width: 108px; height: 132px; border-radius: 50%;
  background: var(--marino); color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .18em; font-size: .82rem; line-height: 1.5;
}

.inv-formal {
  background: var(--panel); padding: var(--e-6) var(--e-5);
  position: relative; overflow: hidden;
}
.inv-formal h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.15rem; letter-spacing: .1em; margin: 0 0 var(--e-2);
  border-bottom: 1px solid #B9C2CD; display: inline-block; padding-bottom: 3px;
}
.inv-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-top: var(--e-5); }
.inv-dos strong {
  display: block; font-family: var(--serif); font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
}
.inv-dos span {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .1em; font-size: .64rem; color: #4A5058;
}

.inv-paleta { display: flex; justify-content: center; gap: 6px; margin: var(--e-5) 0 var(--e-4); }
.inv-paleta i { width: 26px; height: 26px; border-radius: 50%; display: block; }

.inv-pastilla {
  display: block; width: fit-content; margin: 0 auto;
  border: 1px solid #A9B3BF; border-radius: 999px;
  padding: 5px 16px;
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .18em; font-size: .6rem;
}

/* Los ramos de la orilla. Decorativos: se esconden del lector de
   pantalla y se recortan si no caben. */
.inv-ramo { position: absolute; width: 74px; opacity: .95; pointer-events: none; }
.inv-ramo.izq { left: -14px; bottom: 10px; }
.inv-ramo.der { right: -10px; top: 8px; transform: scaleX(-1); }

.inv-novios-linea { display: block; width: 180px; margin: var(--e-6) auto var(--e-4); }

/* ============================================================
   CEREMONIA
   ============================================================ */
.inv-lugar { position: relative; margin: var(--e-5) 0; }
.inv-lugar img { display: block; width: 100%; height: auto; }
.inv-lugar .boton-mapa {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--acero); color: #fff; text-decoration: none;
  padding: 11px 26px; min-height: 44px;
  display: inline-flex; align-items: center;
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .16em; font-size: .68rem;
}
.inv-lugar .boton-mapa:hover { background: var(--marino); }

/* El nombre del salón en versalitas muy abiertas y grandes: es el
   gesto tipográfico más fuerte de toda la invitación. */
.inv-salon {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3rem);
  letter-spacing: .1em; text-indent: .1em;
  text-align: center; line-height: 1.1; margin: var(--e-5) 0 var(--e-4);
}
.inv-hora {
  font-family: var(--serif); color: var(--acero);
  font-size: 1.5rem; letter-spacing: .1em; text-align: center; margin: var(--e-4) 0;
}

/* ============================================================
   CUENTA REGRESIVA
   ============================================================ */
.inv-cuenta { display: flex; justify-content: center; gap: var(--e-5); margin: var(--e-5) 0; }
.inv-cuenta div { text-align: center; }
.inv-cuenta b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 2rem; color: var(--acero); line-height: 1;
  /* Los números cambian cada segundo; sin tabulares, el bloque
     brinca cada vez que un 1 se vuelve un 8. */
  font-variant-numeric: tabular-nums;
}
.inv-cuenta small {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .18em; font-size: .58rem; color: #6A7280;
}

/* ============================================================
   GALERÍA DE LA INVITACIÓN
   ============================================================ */
.inv-tira { display: grid; gap: var(--e-3); margin: var(--e-6) 0; }
.inv-tira img { width: 100%; height: auto; display: block; }

/* ============================================================
   BOTONES
   ============================================================ */
.inv-boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: var(--e-3) var(--e-6);
  background: var(--marino); color: #fff; text-decoration: none;
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: .18em; text-indent: .18em; font-size: .7rem;
  border: 0; cursor: pointer;
}
.inv-boton:hover { background: var(--acero); }
.inv-boton.claro { background: none; color: var(--marino); border: 1px solid var(--marino); }
.inv-boton.claro:hover { background: var(--marino); color: #fff; }

.inv-seccion { padding: var(--e-7) 0; }
.inv-centro { text-align: center; }