/* ============================================================
   Boda de Oscar & Liz — sitio completo basado en el PDF
   Paleta: verde oliva #40442d · crema #f3eee2 · dorado #a1884f
   ============================================================ */

@font-face {
  font-family: "Always in the Star";
  src: url("../fonts/AlwaysInTheStar.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Savinder";
  src: url("../fonts/Savinder-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --verde: #40442d;
  --verde-osc: #333823;
  --crema: #f3eee2;
  --crema-2: #ece4d4;
  --dorado: #a1884f;
  --dorado-2: #b89b63;
  --negro: #26281c;
  --texto: #40442d;
  --serif: "adobe-garamond-pro", "EB Garamond", "Garamond", Georgia, serif;
  --script: "Always in the Star", "Savinder", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Navegación (sticky) ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--verde);
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
  height: 84px;
  gap: 1.5rem;
}
.nav .brand img {
  height: 52px;
  filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(380%)
          hue-rotate(4deg) brightness(99%) contrast(92%);
}
.nav-links { flex: 1; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; }
.nav-links a {
  color: var(--crema);
  font-size: 1.45rem;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, opacity .2s;
}
.nav-links a:hover { opacity: .82; }
.nav-links a.activo { border-bottom-color: var(--dorado-2); }
.hamburguesa { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; margin-left: auto; }
.hamburguesa span { display: block; width: 30px; height: 3px; margin: 5px 0; background: var(--crema); border-radius: 2px; }

/* ---------- Secciones ---------- */
.seccion {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 4rem;
  min-height: 520px;
  scroll-margin-top: 90px;
}
.seccion--verde { background: var(--verde); color: var(--crema); }
.seccion--crema { background: var(--crema); color: var(--verde); }
.contenido { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }

/* Hojas decorativas */
.deco { position: absolute; z-index: 1; pointer-events: none; opacity: .9; }
.deco.beige { opacity: .5; }

/* ---------- Títulos ---------- */
.titulo { font-weight: 500; line-height: 1.02; margin: 0; letter-spacing: .005em; }
.titulo .l1 {
  display: block;
  font-size: clamp(3.4rem, 8.4vw, 7rem);
  font-weight: 500;
  text-shadow: 2px 2px 0 rgba(161,136,79,.18), 4px 4px 10px rgba(38,40,28,.08);
}
.titulo .l2 {
  display: block;
  font-style: italic;
  color: var(--dorado-2);
  font-size: clamp(3.6rem, 9vw, 7.6rem);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 3px 0 rgba(64,68,45,.10);
  padding-bottom: .05em;
}
.titulo--verde .l1 { color: var(--negro); }
.titulo--crema .l1 { color: var(--crema); }
.linea-oro {
  display: block;
  height: 6px;
  width: min(520px, 60%);
  margin: .4rem 0 1rem;
  object-fit: contain;
}

/* Monograma centrado (bloque) en cualquier sección */
.mono, .resultado .mono, .comparte .mono, .invitacion .mono { display: block; margin-left: auto; margin-right: auto; }

/* Píldora dorada */
.pill {
  display: inline-block;
  background: var(--dorado);
  color: var(--crema);
  padding: .55rem 2.2rem;
  border-radius: 999px;
  font-size: 1.3rem;
  box-shadow: 0 8px 18px rgba(38,40,28,.22);
  border: none;
  cursor: pointer;
}
.pill:hover { background: var(--dorado-2); }
.boton-dorado {
  display: inline-block;
  background: var(--dorado);
  color: var(--crema);
  font-family: var(--serif);
  font-size: 1.7rem;
  padding: .7rem 3.5rem;
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 22px rgba(38,40,28,.25);
  transition: background .2s, transform .15s;
}
.boton-dorado:hover { background: var(--dorado-2); transform: translateY(-2px); }

/* ============ P2 · Portada ============ */
.portada {
  position: relative;
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  background: url("../img/portada.jpg") center/cover no-repeat;
  padding: 2rem 5rem;
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(38,40,28,.78) 0%, rgba(38,40,28,.42) 32%, rgba(38,40,28,.05) 55%, rgba(38,40,28,0) 70%);
}
.portada-txt { position: relative; z-index: 3; color: #fff; padding-left: 1rem; }
.portada-txt .os, .portada-txt .liz {
  font-size: clamp(3.6rem, 8.5vw, 7rem);
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 2px 3px 10px rgba(0,0,0,.4);
}
.portada-txt .amp {
  height: clamp(80px, 10vw, 130px);
  margin: .25rem 0 .35rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.portada-txt .amp-wrap { display: block; margin-left: 1.6rem; }
.portada-txt .linea-oro { width: 200px; height: 4px; margin: 1.5rem 0 1rem; }
.portada-txt .fecha { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: .16em; margin-top: .5rem; text-shadow: 1px 2px 8px rgba(0,0,0,.4); }
.portada-txt .ciudad { letter-spacing: .28em; font-size: 1.25rem; color: #f1ead7; margin-top: .4rem; text-shadow: 1px 2px 6px rgba(0,0,0,.4); }
.portada .deco { z-index: 2; }

/* ============ P3 · Invitación (wreath) ============ */
.invitacion {
  text-align: center;
  padding: 7rem 3rem;
  min-height: 620px;
}
.invitacion .texto { max-width: 740px; margin: 0 auto; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--verde); line-height: 1.55; }
.invitacion .texto p { margin: 1.8rem 0; }
.invitacion .mono { height: 110px; margin-top: 2.5rem; }
.wreath { position: absolute; width: 55%; max-width: 720px; z-index: 1; opacity: 1; }
.wreath.izq {
  top: 10%;
  left: -6%;
  transform: rotate(-18deg);
}
.wreath.der {
  top: 10%;
  right: -6%;
  transform: rotate(18deg) scaleX(-1);
}
.wreath.izq-abajo {
  bottom: -5%;
  left: -6%;
  transform: rotate(180deg) scaleX(-1);
}
.wreath.der-abajo {
  bottom: -5%;
  right: -6%;
  transform: rotate(180deg);
}

/* ============ P4/P5 · Historia ============ */
.historia {
  min-height: 640px;
  padding: 6rem 4.5rem;
}
.historia .texto { max-width: 620px; font-size: 1.4rem; margin-top: 2rem; line-height: 1.5; color: var(--negro); }
.historia .deco-der { right: -80px; top: 20px; width: 620px; opacity: .95; }
.historia .deco-izq { left: -60px; bottom: -40px; width: 320px; opacity: .35; }

.sobre-nosotros {
  text-align: center;
  padding: 5.5rem 4rem;
  min-height: 680px;
}
.sobre-nosotros .titulo-script {
  font-style: italic;
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  color: var(--dorado-2);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 3px 0 rgba(64,68,45,.10);
  margin: 0 auto .3rem;
  font-weight: 500;
  letter-spacing: .005em;
}
.sobre-nosotros .linea-oro { margin: .3rem auto 2.2rem; width: min(540px, 60%); }
.sobre-nosotros .texto { max-width: 820px; margin: 0 auto; font-size: 1.3rem; text-align: left; color: var(--negro); line-height: 1.55; }
.sobre-nosotros .texto p { margin: 0 0 1.1rem; }
.sobre-nosotros .deco-izq { left: -60px; top: 15%; width: 440px; opacity: .95; }
.sobre-nosotros .deco-der { right: -60px; top: 20%; width: 440px; opacity: .95; transform: scaleX(-1); }
.sobre-nosotros .deco-arriba { right: -20px; top: -40px; width: 300px; opacity: .5; }

/* ============ P6 · Ceremonia y Recepción ============ */
.ceremonia { min-height: 640px; padding: 6rem 4.5rem; }
.ceremonia .grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.ceremonia .lugar { font-size: 2.2rem; color: var(--crema); margin: .5rem 0 1rem; font-style: italic; font-weight: 500; }
.ceremonia .dir { font-size: 1.3rem; line-height: 1.8; margin: 1.8rem 0; color: var(--crema-2); }
.ceremonia .foto { border-radius: 20px; box-shadow: 0 20px 46px rgba(0,0,0,.45); width: 100%; display: block; }
.ceremonia .foto-wrap { position: relative; }
.ceremonia .ver-ubi { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; }
.ceremonia .deco-der { right: -60px; top: 10px; width: 480px; opacity: .95; }
.ceremonia .pill { font-size: 1.4rem; padding: .7rem 3.2rem; min-width: 220px; text-align: center; }

/* ============ P7 · Código de vestimenta ============ */
.vestimenta { min-height: 640px; padding: 6rem 4.5rem; }
.vestimenta .titulo .l2 { font-size: clamp(2.6rem, 6vw, 5rem); white-space: nowrap; }
.vestimenta .grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2.5rem; align-items: center; }
.vestimenta .cols { display: flex; gap: 5rem; margin: 2rem 0 2.5rem; }
.vestimenta .cols h3 { font-style: italic; font-size: 2.2rem; color: var(--negro); margin: 0; font-weight: 700; }
.vestimenta .cols p { font-size: 1.3rem; margin: .3rem 0 0; color: var(--negro); }
.vestimenta .figs { display: flex; justify-content: center; gap: 1rem; align-items: flex-end; position: relative; }
.vestimenta .figs img { height: 500px; width: auto; filter: drop-shadow(0 10px 20px rgba(38,40,28,.12)); }
.vestimenta .deco { right: 20%; top: 5%; width: 420px; opacity: .35; }

/* ============ P8 · Gama de colores ============ */
.colores { min-height: 640px; padding: 5rem 4.5rem; }
.colores h2 { font-size: 2.4rem; color: var(--negro); margin: 0 0 1.8rem; font-weight: 500; }
.colores h2.evitar { margin-top: 2.5rem; }
.paleta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; max-width: 880px; }
.swatch { text-align: center; width: 130px; }
.swatch .circ { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto .7rem; box-shadow: 0 10px 20px rgba(38,40,28,.22); }
.swatch span { font-size: 1.25rem; display: block; line-height: 1.2; color: var(--negro); }
.colores .deco { right: -60px; top: 40px; width: 520px; opacity: .45; }

/* ============ P9 · Cronograma ============ */
.cronograma { padding: 5rem 4.5rem; min-height: 820px; }
.cronograma .mam { margin: 1rem 0 2.5rem; display: inline-block; }
.timeline { position: relative; max-width: 900px; margin: 1rem auto 0; padding-top: 1rem; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--dorado-2); transform: translateX(-50%); }
.evento { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; margin-bottom: 2rem; }
.evento .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--crema); justify-self: center; box-shadow: 0 0 0 3px var(--verde); z-index: 2; }
.evento .caja h4 { font-style: italic; font-size: 1.9rem; margin: 0; color: var(--crema); font-weight: 500; }
.evento .caja .hora { font-size: 1.3rem; color: var(--crema-2); margin-top: .25rem; }
.evento.izq .caja { grid-column: 1; text-align: right; padding-right: 1.2rem; }
.evento.izq .dot { grid-column: 2; }
.evento.der .caja { grid-column: 3; text-align: left; padding-left: 1.2rem; }
.evento.der .dot { grid-column: 2; }
.cronograma .deco-tl { top: -20px; left: -40px; width: 460px; opacity: .9; }
.cronograma .deco-tr { top: -20px; right: -40px; width: 460px; transform: scaleX(-1); opacity: .9; }

/* ============ P10 · Save the date ============ */
.save { min-height: 640px; padding: 5rem 4.5rem; }
.save .titulo-inline {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4em;
  margin: 0;
  line-height: 1;
}
.save .titulo-inline .l1 {
  display: inline;
  font-size: clamp(3.6rem, 8.4vw, 7rem);
  color: var(--negro);
  font-weight: 500;
  text-shadow: 2px 2px 0 rgba(161,136,79,.18);
}
.save .titulo-inline .l2 {
  display: inline;
  font-size: clamp(3.8rem, 9vw, 7.4rem);
  font-style: italic;
  color: var(--dorado-2);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 3px 0 rgba(64,68,45,.10);
}
.save .fecha { font-size: 2rem; color: var(--negro); margin: 1rem 0 2rem; }
.contador { display: flex; gap: 0; margin: 1.5rem 0 2.5rem; }
.contador .u { padding: 0 1.8rem; text-align: center; border-right: 2px solid var(--dorado-2); }
.contador .u:last-child { border-right: none; }
.contador .n { font-size: 3.5rem; color: var(--negro); line-height: 1; font-weight: 500; }
.contador .l { font-size: 1.3rem; color: var(--negro); margin-top: .35rem; }
.save h3 { font-size: 2.4rem; color: var(--negro); margin: 1.5rem 0 1.3rem; font-weight: 500; }
.save .cal { display: flex; gap: 1.8rem; }
.save .cal .pill { font-size: 1.4rem; padding: .7rem 2.8rem; min-width: 170px; text-align: center; }
.save .deco { right: 0; top: 0; height: 100%; width: 55%; opacity: .55; }

/* ============ P11 · Galería (carrusel) ============ */
.galeria { padding: 4.5rem 0 3.5rem; min-height: 640px; }
.galeria .contenido { padding: 0 4.5rem; max-width: 1400px; }
.galeria .titulo { text-align: left; }
.galeria .titulo .l1 {
  font-style: italic;
  color: var(--verde);
  font-size: clamp(3.4rem, 7.5vw, 6rem);
  background: linear-gradient(100deg, #40442d, #6b6a3a, #40442d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 3px 3px 0 rgba(161,136,79,.18);
}
.galeria .linea-oro { margin: 0 0 1.5rem; width: min(260px, 50%); }
.galeria .deco-der { right: -40px; top: 20px; width: 480px; opacity: .5; }
.galeria .carrusel { position: relative; z-index: 2; padding: 2rem 0 1rem; overflow: hidden; }
.pista { display: flex; gap: 36px; padding: 0 30px; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.slide { flex: 0 0 auto; width: 540px; max-width: 82vw; }
.slide figure { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 32px rgba(38,40,28,.3); background: var(--crema-2); }
.slide img { display: block; width: 100%; height: 360px; object-fit: cover; }
.slide figcaption { padding: .5rem .8rem; font-size: .9rem; color: var(--verde); background: var(--crema); }
.slide figcaption .quien { font-weight: 600; }
.puntos { display: flex; justify-content: center; gap: 16px; padding: 2rem 0 .5rem; flex-wrap: wrap; }
.puntos button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--verde); background: var(--verde); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.puntos button.activo { background: transparent; transform: scale(1.15); }

/* ============ P13 · Comparte tus momentos ============ */
.comparte { text-align: center; padding: 5.5rem 4rem; min-height: 620px; }
.comparte .titulo .l1 {
  font-size: clamp(2.6rem, 5.4vw, 4.3rem);
  color: var(--negro);
  font-weight: 500;
  text-shadow: 2px 3px 0 rgba(64,68,45,.12);
}
.comparte .intro { font-size: 1.35rem; max-width: 780px; margin: 1.5rem auto 2.5rem; line-height: 1.5; color: var(--negro); }
.comparte .hashtag-bloque { margin-top: 2.5rem; }
.comparte .hashtag-bloque p { font-size: 1.15rem; margin: 0 0 .5rem; color: var(--negro); }
.comparte .hashtag { font-size: 1.8rem; font-weight: 700; color: var(--negro); }
.comparte .mono { height: 110px; margin-top: 2rem; }
.comparte .boton-dorado { font-size: 1.6rem; padding: .9rem 4.5rem; margin: 1rem 0 1.5rem; }

/* ============ P12 · Nuestra Cava ============ */
.cava { min-height: 640px; padding: 5rem 4.5rem; }
.cava .titulo-cava {
  text-align: center;
  margin: 0 0 2rem;
  line-height: 1;
}
.cava .titulo-cava .l1 {
  display: block;
  font-size: clamp(3.4rem, 8.4vw, 6.8rem);
  color: var(--crema);
  font-weight: 500;
  text-shadow: 2px 3px 0 rgba(0,0,0,.18);
}
.cava .titulo-cava .l2 {
  display: block;
  font-size: clamp(3.6rem, 9vw, 7.4rem);
  font-style: italic;
  color: var(--dorado-2);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 3px 0 rgba(0,0,0,.18);
  margin-top: .2rem;
}
.cava .titulo-cava .linea-oro { margin: .3rem auto; width: min(260px, 40%); height: 4px; }
.cava .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.cava .texto { font-size: 1.3rem; line-height: 1.7; color: var(--crema); }
.cava .texto p { margin: 0 0 1rem; }
.cava .foto { border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,.5); width: 100%; display: block; }
.cava .deco { left: -60px; bottom: -60px; width: 380px; opacity: .85; }

/* ============ P14 · Fecha límite ============ */
.limite { min-height: 620px; padding: 5rem 4.5rem; }
.limite .titulo .l2 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.limite .texto { font-size: 1.3rem; max-width: 1000px; margin-top: 2rem; color: var(--negro); line-height: 1.6; }
.limite .texto p { margin: 1rem 0; }
.limite .pill-fecha { font-size: 1.4rem; padding: .75rem 2.8rem; }
.limite .fila-pill { margin: 1.5rem 0; text-align: center; }
.limite .deco { right: -60px; bottom: -60px; width: 580px; opacity: .55; }
.limite .deco2 { right: 20%; top: -30px; width: 420px; opacity: .4; }

/* ============ P15 · Confirmación (RSVP) ============ */
.confirmacion {
  position: relative;
  background: url("../img/confirmacion.jpg") center/cover no-repeat;
  min-height: 90vh;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 3rem 5rem;
}
.confirmacion::before { content:""; position:absolute; inset:0; background: linear-gradient(270deg, rgba(38,40,28,.5), rgba(38,40,28,.1) 60%, transparent); }
.rsvp {
  position: relative; z-index: 2;
  width: min(600px, 100%);
  border: 2px solid var(--dorado-2);
  border-radius: 36px;
  background: rgba(38,40,28,.4);
  backdrop-filter: blur(4px);
  padding: 3rem 2.8rem;
  color: #fff; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.rsvp h2 { font-size: 3.6rem; margin: 0 0 1.2rem; color: #fff; font-weight: 400; letter-spacing: .01em; }
.rsvp p { font-size: 1.3rem; margin: 0 0 1.8rem; line-height: 1.5; }
.rsvp input[type=text] {
  width: 100%; text-align: center; font-family: var(--serif); font-size: 1.4rem;
  padding: 1rem 1.2rem; border-radius: 999px; border: 2px solid var(--dorado-2);
  background: rgba(255,255,255,.08); color: #fff;
}
.rsvp input::placeholder { color: #f2eacd; }
.rsvp .acciones { margin-top: 1.5rem; }
.rsvp .boton-dorado { font-size: 1.4rem; padding: .8rem 3.4rem; }

/* ============ Resultados confirmación (P16/P17) ============ */
.resultado { text-align: center; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.resultado .intro { font-size: 1.4rem; max-width: 760px; margin: 0 auto 2rem; }
.resultado h1 { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--verde); margin: 0 0 1.5rem; }
.resultado .nota { font-weight: 700; margin-top: 2.5rem; color: var(--verde); }
.resultado .nota small { display:block; font-weight: 400; }
.resultado .mono { height: 110px; margin-top: 1.5rem; }
.resultado .deco-l { left: -40px; bottom: -30px; width: 460px; opacity: .5; }
.resultado .deco-r { right: -40px; bottom: -30px; width: 460px; opacity: .5; transform: scaleX(-1); }

/* ---------- Formulario subir ---------- */
.form-subir { max-width: 520px; margin: 2.3rem auto 0; background: rgba(255,255,255,.6); padding: 2rem; border-radius: 16px; box-shadow: 0 10px 26px rgba(38,40,28,.14); text-align: left; }
.form-subir[hidden] { display: none; }
.form-subir label { display: block; margin: 1rem 0 .3rem; color: var(--verde); }
.campo-texto, .campo-archivo { width: 100%; padding: .7rem; border: 1px solid #cdbf9f; border-radius: 8px; font-family: var(--serif); font-size: 1rem; background: #fff; }
.form-subir .acciones { margin-top: 1.5rem; text-align: center; }
.errores { color: #7a2b22; font-size: .9rem; margin: .3rem 0 0; }

/* ---------- Mensajes ---------- */
.mensajes { list-style: none; padding: 0; max-width: 620px; margin: 1rem auto; position: relative; z-index: 60; }
.mensajes li { padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: .6rem; text-align: center; }
.mensajes .success { background: #e4efe0; color: #2f5327; border: 1px solid #bcd6b0; }
.mensajes .error { background: #f6e2e0; color: #7a2b22; border: 1px solid #e2b7b1; }

/* ---------- Pie ---------- */
.pie { background: var(--verde); color: var(--crema); text-align: center; padding: 1.6rem 1rem; font-size: 1.4rem; letter-spacing: .04em; }
.pie small { display: block; font-size: .8rem; opacity: .8; margin-top: .3rem; letter-spacing: .1em; }

/* ---------- Responsivo ---------- */
@media (max-width: 820px) {
  .nav { padding: 0 1.1rem; height: 70px; }
  .nav .brand img { height: 42px; }
  .hamburguesa { display: block; }
  .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--verde); flex-direction: column; gap: 1.1rem; padding: 1.4rem 0; }
  .nav-links.abierto { display: flex; }
  .seccion { padding: 3rem 1.3rem; }
  .ceremonia .grid, .vestimenta .grid, .cava .grid { grid-template-columns: 1fr; }
  .vestimenta .figs img { height: 300px; }
  .timeline::before { left: 18px; }
  .evento { grid-template-columns: 36px 1fr; }
  .evento .dot, .evento.izq .dot, .evento.der .dot { grid-column: 1; }
  .evento .caja, .evento.izq .caja, .evento.der .caja { grid-column: 2; text-align: left; }
  .evento .caja h4, .evento .caja .hora { text-align: left; }
  .slide img { height: 240px; }
  .confirmacion { justify-content: center; padding: 2rem 1.2rem; }
  .wreath { width: 60%; opacity: .5; }
}