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

/* EB Garamond (SIL OFL 1.1, ver fonts/eb-garamond/OFL.txt): respaldo libre y
   autoalojado de Adobe Garamond. Si hay kit de Adobe Fonts, tiene prioridad. */
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-500-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-500-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-500-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/eb-garamond/EBGaramond-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sharpe (Måns Grebäck, licencia de uso personal; ver fonts/sharpe/). */
@font-face { font-family: "Sharpe"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/sharpe/SharpeTh_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: italic; font-weight: 100; font-display: swap; src: url("../fonts/sharpe/SharpeThIt_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/sharpe/SharpeLi_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/sharpe/SharpeLiIt_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/sharpe/SharpeMe_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/sharpe/SharpeMeIt_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sharpe/SharpeBo_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/sharpe/SharpeBoIt_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/sharpe/SharpeBl_PERSONAL.ttf") format("truetype"); }
@font-face { font-family: "Sharpe"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/sharpe/SharpeBlIt_PERSONAL.ttf") format("truetype"); }
@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;
}

/* ===== Unidad de diseño =====
   El PDF está hecho en hojas de 1800×1096 (sin nav), no para pantallas. Cada medida
   del PDF se expresa en --u (1/100 del ancho de la hoja) y la hoja se ESCALA PARA
   CABER en la pantalla: limita el ancho o el alto, lo que se acabe primero, y queda
   centrada (--m es el margen lateral cuando la pantalla es más ancha que la hoja). */
:root {
  --nav: 76px;
  --u: min(1vw, calc((100vh - var(--nav)) / 60.9));
  --m: calc((100vw - 100 * var(--u)) / 2);
}
@supports (height: 100svh) {
  :root { --u: min(1vw, calc((100svh - var(--nav)) / 60.9)); }
}
@media (max-width: 820px) {
  :root { --nav: 70px; --u: 1vw; --m: 0px; }
}

: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); }
.nav { transition: background-color .3s; }
.nav-fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nav-flores { position: absolute; right: -2vw; top: -90%; height: 280%; width: auto; opacity: .35; }
.nav .brand, .nav-links, .hamburguesa { position: relative; z-index: 1; }
.nav--crema { background: var(--crema); box-shadow: 0 2px 10px rgba(38,40,28,.12); }
.nav--crema .nav-links a { color: var(--verde); }
.nav--crema .brand img { filter: none; }
.nav--crema .hamburguesa span { background: var(--verde); }
.nav--crema .nav-flores { opacity: .5; }
.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 calc(var(--m) + 4rem) 5.5rem calc(var(--m) + 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, calc(8.4 * var(--u)), 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, calc(9 * var(--u)), 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 calc(var(--m) + 5rem) 2rem calc(var(--m) + 5rem);
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(38,40,28,.32) 0%, rgba(38,40,28,.12) 28%, rgba(38,40,28,0) 45%);
}
/* Bloque centrado sobre sí mismo, como en el PDF (centro en x ≈ 17%). */
.portada-txt { position: relative; z-index: 3; color: #fff; padding-left: .75rem; text-align: center; margin-top: calc(4.6 * var(--u)); }
.portada-txt .os, .portada-txt .liz {
  font-size: clamp(3rem, calc(5.85 * var(--u)), 5.4rem);
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 2px 3px 10px rgba(0,0,0,.4);
}
.portada-txt .amp {
  height: clamp(56px, calc(6.4 * var(--u)), 92px);
  margin: calc(.7 * var(--u)) 0 calc(.6 * var(--u));
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.portada-txt .amp-wrap { display: block; }
.portada-txt .linea-oro { width: calc(8 * var(--u)); min-width: 80px; height: 4px; margin: calc(3.6 * var(--u)) auto calc(5.4 * var(--u)); object-fit: fill; }
.portada-txt .fecha { font-size: clamp(1.7rem, calc(3.05 * var(--u)), 2.75rem); letter-spacing: .11em; line-height: 1; text-shadow: 1px 2px 8px rgba(0,0,0,.4); }
.portada-txt .ciudad { letter-spacing: .05em; font-size: clamp(1rem, calc(2 * var(--u)), 1.8rem); line-height: 1; color: #fff; margin-top: calc(2.4 * var(--u)); text-shadow: 1px 2px 6px rgba(0,0,0,.4); }
.portada .deco { z-index: 2; }
.portada .deco-tl { left: -7vw; top: -7vw; width: 22vw; opacity: .95; transform: rotate(-8deg); }
.portada .deco-bl { left: -15.3vw; bottom: -4.7vw; width: 24vw; opacity: .95; transform: rotate(240deg) scaleX(-1); } /* ángulo ajustado contra el PDF */
@media (min-width: 1024px) {
  /* Proporción de la página del PDF (1800×1113 de contenido). */
  .portada { min-height: calc(61.8 * var(--u)); }
}

/* ============ P3 · Invitación (wreath) ============ */
.invitacion {
  text-align: center;
  padding: 7rem calc(var(--m) + 3rem) 7rem calc(var(--m) + 3rem);
  min-height: 620px;
}
.invitacion .texto { max-width: 740px; margin: 0 auto; font-size: clamp(1.5rem, calc(2.6 * var(--u)), 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 calc(var(--m) + 4.5rem) 6rem calc(var(--m) + 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: left;
  padding: calc(4.6 * var(--u)) calc(var(--m) + 4rem) 3rem calc(var(--m) + calc(21 * var(--u)));
  min-height: 680px;
}
.sobre-nosotros .contenido { max-width: calc(58 * var(--u)); margin: 0; }
.sobre-nosotros .titulo-script {
  display: inline-block;
  font-style: italic;
  font-size: clamp(2.8rem, calc(5.45 * var(--u)), 5.4rem);
  line-height: 1.1;
  color: var(--dorado-2);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 3px 2px rgba(64,68,45,.28));
  margin: 0 0 0 calc(1.4 * var(--u));
  font-weight: 500;
  letter-spacing: .005em;
}
.sobre-nosotros .linea-oro { margin: calc(.2 * var(--u)) 0 calc(3.1 * var(--u)) calc(1.9 * var(--u)); width: calc(44.7 * var(--u)); object-fit: fill; }
.sobre-nosotros .texto { max-width: calc(58 * var(--u)); margin: 0; font-size: clamp(1.1rem, calc(1.8 * var(--u)), 1.75rem); text-align: left; color: #2f3122; line-height: 1.35; }
.sobre-nosotros .texto p { margin: 0 0 1.35em; }
/* Posición/ángulo de las hojas ajustados contra el PDF (tools/hojas_opt.py p05). */
.sobre-nosotros .deco-izq  { left: -16.4vw; top: 25.6vw; right: auto; bottom: auto; width: 36vw; opacity: .9; transform: rotate(0deg); }
.sobre-nosotros .deco-izq2 { left: -26.7vw; top: -9.7vw; right: auto; bottom: auto; width: 40vw; opacity: .9; transform: rotate(-75deg) scaleX(-1); }
.sobre-nosotros .deco-der  { left: 80vw; top: 10.3vw; right: auto; bottom: auto; width: 40vw; opacity: .95; transform: rotate(-15deg) scaleX(-1); }
.sobre-nosotros .deco-der2 { left: 76.7vw; top: -7.5vw; right: auto; bottom: auto; width: 40vw; opacity: .9; transform: rotate(90deg) scaleX(-1); }
.sobre-nosotros .deco-fondo { right: 4vw; bottom: -16vw; width: 44vw; opacity: .55; }
@media (min-width: 1024px) {
  .sobre-nosotros { min-height: calc(60.9 * var(--u)); }
}
@media (max-width: 820px) {
  .sobre-nosotros { padding: 3rem calc(var(--m) + 1.3rem) 3rem calc(var(--m) + 1.3rem); }
  .sobre-nosotros .contenido, .sobre-nosotros .texto { max-width: none; }
  .sobre-nosotros .linea-oro { width: 80%; }
}

/* ============ P6 · Ceremonia y Recepción ============ */
.ceremonia { min-height: 640px; padding: calc(3.1 * var(--u)) calc(var(--m) + 4rem) calc(4 * var(--u)) calc(var(--m) + calc(3.6 * var(--u))); }
.ceremonia .contenido { max-width: none; margin: 0; }
.ceremonia .titulo .l1 { font-size: clamp(3.2rem, calc(8.6 * var(--u)), 8.4rem); font-weight: 400; line-height: 1.08; }
.ceremonia .linea-oro { width: calc(47 * var(--u)); margin: calc(-.9 * var(--u)) 0 0 calc(2.6 * var(--u)); height: 5px; object-fit: fill; }
.ceremonia .titulo .l2 { font-size: clamp(3.2rem, calc(8.8 * var(--u)), 8.6rem); margin: calc(.4 * var(--u)) 0 0 calc(31.9 * var(--u)); line-height: 1.05; font-weight: 400; }
.ceremonia .grid { display: grid; grid-template-columns: calc(38 * var(--u)) calc(45.7 * var(--u)); gap: calc(4.7 * var(--u)); align-items: start; margin-top: calc(-.2 * var(--u)) !important; }
.ceremonia .lugar { font-size: clamp(1.5rem, calc(2.5 * var(--u)), 2.5rem); color: var(--crema); margin: calc(1.6 * var(--u)) 0 calc(2.2 * var(--u)) calc(2.6 * var(--u)); font-style: normal; font-weight: 400; }
.ceremonia .hora {
  display: block; width: calc(27.2 * var(--u)); min-width: 180px; margin-left: calc(5.2 * var(--u)); text-align: center;
  font-size: clamp(1.2rem, calc(2.05 * var(--u)), 2rem); padding: calc(.7 * var(--u)) 1rem;
  background: linear-gradient(180deg, #b39a62, #9a8048); box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
.ceremonia .dir { font-size: clamp(1.2rem, calc(2.67 * var(--u)), 2.6rem); line-height: 1.16; margin: calc(5.3 * var(--u)) 0 0 calc(1.5 * var(--u)); max-width: calc(26 * var(--u)); color: var(--crema); }
.ceremonia .foto { border-radius: calc(3 * var(--u)); 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: calc(-3.2 * var(--u)); transform: translateX(-50%); white-space: nowrap;
  width: calc(27.3 * var(--u)); min-width: 190px; text-align: center; font-size: clamp(1.2rem, calc(2.1 * var(--u)), 2rem); padding: calc(.95 * var(--u)) 1rem;
  background: linear-gradient(180deg, #b39a62, #9a8048); }
.ceremonia .deco-der { right: -6vw; top: -4vw; width: 34vw; opacity: .95; }

/* ============ P7 · Código de vestimenta ============ */
.vestimenta { min-height: 640px; padding: calc(4 * var(--u)) calc(var(--m) + 4.5rem) calc(3 * var(--u)) calc(var(--m) + 4.5rem); }
.vestimenta .titulo .l2 { font-size: clamp(2.6rem, calc(6 * var(--u)), 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: calc(2.4 * var(--u)) calc(var(--m) + 4.5rem) 1rem calc(var(--m) + calc(5.2 * var(--u))); }
.colores .contenido { max-width: none; margin: 0; }
.colores h2 { font-size: clamp(1.8rem, calc(2.95 * var(--u)), 2.9rem); line-height: 1.15; color: #3a3a33; margin: 0 0 calc(1.4 * var(--u)); font-weight: 400; }
.colores h2.evitar { margin: calc(.6 * var(--u)) 0 calc(1.8 * var(--u)); }
.paleta { display: flex; flex-wrap: wrap; gap: calc(.9 * var(--u)) calc(4.75 * var(--u)); max-width: calc(72 * var(--u)); padding-left: calc(1.6 * var(--u)); }
.swatch { text-align: center; width: calc(9.65 * var(--u)); min-width: 84px; }
.paleta + .evitar + .paleta .swatch:last-child { width: calc(12 * var(--u)); margin-left: calc(-1.2 * var(--u)); margin-right: calc(-1.2 * var(--u)); }
.paleta + .evitar + .paleta .swatch:last-child span { max-width: none; }
.swatch .circ { width: calc(9.65 * var(--u)); min-width: 84px; aspect-ratio: 1; height: auto; border-radius: 50%; margin: 0 auto calc(1.1 * var(--u)); box-shadow: 4px 7px 8px rgba(38,40,28,.35); }
.swatch span { font-size: clamp(1rem, calc(2.1 * var(--u)), 2rem); display: block; max-width: calc(8.4 * var(--u)); min-width: 80px; margin: 0 auto; line-height: 1.2; color: #3a3a33; }
.colores .deco { right: -22vw; top: -14vw; width: 84vw; opacity: .8; }
@media (min-width: 1024px) {
  .colores { min-height: calc(60.9 * var(--u)); }
}

/* ============ P9 · Cronograma ============ */
.cronograma { padding: calc(3.2 * var(--u)) calc(var(--m) + 4.5rem) calc(3 * var(--u)) calc(var(--m) + 4.5rem); min-height: 0; }
.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: calc(3.05 * var(--u)) calc(var(--m) + 4rem) 3rem calc(var(--m) + calc(5.8 * var(--u))); }
.save .contenido { max-width: none; width: calc(68.4 * var(--u)); margin: 0; text-align: center; }
.save .titulo-inline { display: flex; align-items: baseline; gap: .12em; margin: 0; line-height: 1.1; text-align: left; }
.save .titulo-inline .l1 {
  display: inline; font-size: clamp(3.4rem, calc(9.2 * var(--u)), 9rem); color: #3a3d29; font-weight: 400;
  text-shadow: 3px 4px 4px rgba(38,40,28,.3);
}
.save .titulo-inline .l2 {
  display: inline; font-size: clamp(3.2rem, calc(8.8 * var(--u)), 8.6rem); font-style: italic; font-weight: 400;
  color: var(--dorado-2);
  background: linear-gradient(100deg, #8f7437, #d9c088, #8f7437);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 3px 2px rgba(64,68,45,.25));
}
.save .linea-oro { width: calc(35 * var(--u)); margin: calc(-.6 * var(--u)) 0 0 calc(18.5 * var(--u)); height: 4px; object-fit: fill; }
.save .fecha { font-size: clamp(1.4rem, calc(4.2 * var(--u)), 4.1rem); color: #3a3d29; margin: calc(2 * var(--u)) 0 calc(4.2 * var(--u)); line-height: 1.1; }
.contador { display: flex; justify-content: center; gap: 0; margin: 0 0 calc(5.8 * var(--u)); }
.contador .u { padding: 0 calc(1.5 * var(--u)); text-align: center; border-right: 2px solid var(--dorado-2); min-width: calc(8.6 * var(--u)); }
.contador .u:last-child { border-right: none; }
.contador .n { font-size: clamp(1.6rem, calc(3.8 * var(--u)), 3.7rem); color: #3a3d29; line-height: 1.1; font-weight: 400; }
.contador .l { font-size: clamp(1.4rem, calc(3.8 * var(--u)), 3.7rem); color: #3a3d29; line-height: 1.1; margin-top: 0; }
.save h3 { font-size: clamp(1.8rem, calc(5.1 * var(--u)), 5rem); color: #3a3d29; margin: 0 0 calc(3.4 * var(--u)); font-weight: 400; line-height: 1.1; }
.save .cal { display: flex; justify-content: center; gap: calc(4.5 * var(--u)); }
.save .cal .pill { font-size: clamp(1.1rem, calc(2.65 * var(--u)), 2.6rem); padding: calc(.55 * var(--u)) 1rem; line-height: 1.3; width: calc(28.5 * var(--u)); min-width: 130px; text-align: center;
  background: linear-gradient(180deg, #b39a62, #9a8048); }
.save .deco { right: -12vw; top: -10vw; height: auto; width: 74vw; opacity: .7; }

/* ============ P11 · Galería (carrusel) ============ */
.galeria { padding: calc(3.1 * var(--u)) calc(var(--m) + 0) 3rem calc(var(--m) + 0); min-height: 640px; }
.galeria .contenido { padding: 0 0 0 calc(6.2 * var(--u)); max-width: none; margin: 0; }
.galeria .titulo { text-align: left; }
.galeria .titulo .l1 {
  font-style: normal;
  color: #3a3d29;
  font-size: clamp(3.4rem, calc(8.6 * var(--u)), 9rem);
  font-weight: 400;
  line-height: 1.12;
  text-shadow: 3px 4px 4px rgba(38,40,28,.35);
}
.galeria .linea-oro { margin: calc(.2 * var(--u)) 0 0 calc(-1.4 * var(--u)); width: calc(26.4 * var(--u)); height: 6px; object-fit: fill; }
.galeria .deco-der { right: -4vw; top: -12vw; width: 64vw; opacity: .5; }
.galeria .deco-izq { left: 24vw; bottom: -22vw; width: 52vw; opacity: .42; transform: rotate(160deg); }
.galeria .carrusel { position: relative; z-index: 2; padding: 0; margin-top: calc(9.9 * var(--u)); overflow: hidden; }
.pista { display: flex; gap: calc(2.7 * var(--u)); transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.slide { flex: 0 0 auto; width: calc(31.5 * var(--u)); }
.slide figure { margin: 0; border-radius: 2px; overflow: hidden; box-shadow: 0 6px 14px rgba(38,40,28,.28); background: var(--crema-2); }
.slide img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.puntos { display: flex; justify-content: center; gap: calc(1.25 * var(--u)); padding: calc(1.6 * var(--u)) 0 .5rem; flex-wrap: wrap; position: relative; z-index: 2; }
.puntos button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a3d29; background: #3a3d29; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.puntos button.activo { background: var(--crema); border-color: #3a3d29; transform: scale(1.05); }
@media (min-width: 1024px) {
  .galeria { min-height: calc(60.9 * var(--u)); }
}

/* ============ P13 · Comparte tus momentos ============ */
.comparte { text-align: center; padding: 5.5rem calc(var(--m) + 4rem) 5.5rem calc(var(--m) + 4rem); min-height: 620px; }
.comparte .titulo .l1 {
  font-size: clamp(2.6rem, calc(5.4 * var(--u)), 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: calc(3.2 * var(--u)) calc(var(--m) + 4.5rem) calc(3 * var(--u)) calc(var(--m) + 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, calc(8.4 * var(--u)), 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, calc(9 * var(--u)), 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: calc(4.4 * var(--u)) calc(var(--m) + 4rem) 3rem calc(var(--m) + calc(3.2 * var(--u))); }
.limite .contenido { max-width: none; margin: 0; }
.limite .titulo .l1 { font-size: clamp(3.2rem, calc(8.5 * var(--u)), 8.4rem); font-weight: 400; line-height: 1; margin-left: calc(1.6 * var(--u)); color: #2f3122; }
.limite .titulo .l2 { font-size: clamp(2.4rem, calc(7.3 * var(--u)), 7.2rem); font-weight: 400; line-height: 1.12; margin-left: calc(.3 * var(--u)); }
.limite .linea-oro { width: calc(74 * var(--u)) !important; margin: 0 0 0 calc(-.2 * var(--u)); height: 4px; object-fit: fill; }
.limite .fila-pill { margin: calc(2.4 * var(--u)) 0 0 calc(23.8 * var(--u)); text-align: left; }
.limite .pill.pill-fecha { font-size: clamp(1rem, calc(2.45 * var(--u)), 2.4rem); padding: calc(.55 * var(--u)) 0; width: calc(27 * var(--u)); min-width: 220px; text-align: center;
  background: linear-gradient(180deg, #b39a62, #9a8048); }
.limite .texto { font-size: clamp(1.05rem, calc(1.82 * var(--u)), 1.8rem); max-width: calc(72 * var(--u)); margin: calc(4.6 * var(--u)) 0 0 calc(1.5 * var(--u)); color: #2f3122; line-height: 1.45; }
.limite .texto p { margin: 0 0 1.9em; }
.limite .deco { right: -14vw; bottom: -33vw; width: 56vw; opacity: .9; transform: scaleX(-1) rotate(-40deg); }
.limite .deco2 { right: 6vw; top: -12vw; width: 62vw; opacity: .55; }

/* ============ P15 · Confirmación (RSVP) ============ */
.confirmacion {
  position: relative;
  background: url("../img/confirmacion.jpg") 100% 47% / 125% auto no-repeat, #3a3d28;
  min-height: 90vh;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: calc(10.6 * var(--u)) calc(var(--m) + calc(4.3 * var(--u))) 3rem calc(var(--m) + 5rem);
}
.confirmacion::before { content:""; position:absolute; inset:0; background: linear-gradient(270deg, rgba(38,40,28,.25), rgba(38,40,28,0) 55%); }
.rsvp {
  position: relative; z-index: 2;
  width: calc(41.7 * var(--u)); max-width: 760px; min-width: 300px;
  border-radius: calc(3.2 * var(--u));
  background: linear-gradient(170deg, rgba(92,80,52,.34), rgba(34,34,24,.26) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: calc(2.6 * var(--u)) calc(3.4 * var(--u)) calc(2.2 * var(--u));
  min-height: calc(35 * var(--u));
  color: #f7f2e6; text-align: left;
  box-shadow: 0 0 18px rgba(233,211,154,.35), 0 20px 50px rgba(0,0,0,.3);
}
/* Borde dorado degradado (máscara para no teñir el fondo translúcido). */
.rsvp::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: linear-gradient(135deg, #f3e2b0, #a1884f 35%, #f3e2b0 62%, #8f7437);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.rsvp h2 { font-size: clamp(2.6rem, calc(5 * var(--u)), 4.6rem); margin: 0 0 calc(2.4 * var(--u)); color: #f7f2e6; font-weight: 400; text-align: center; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.rsvp p { font-size: clamp(1.15rem, calc(2.1 * var(--u)), 2rem); margin: 0 0 calc(3.1 * var(--u)); line-height: 1.22; }
.rsvp input[type=text] {
  display: block; width: 92%; margin: 0 auto;
  text-align: center; font-family: var(--serif); font-size: clamp(1.4rem, calc(3.45 * var(--u)), 3.2rem);
  padding: calc(.85 * var(--u)) 1.2rem; border-radius: 999px; border: 3px solid #d6bd82;
  background: rgba(40,36,24,.22);
  color: #fff; box-shadow: 0 0 12px rgba(233,211,154,.35);
}
.rsvp input::placeholder { color: #f7f2e6; opacity: 1; }
.rsvp input:focus { outline: none; box-shadow: 0 0 0 3px rgba(233,211,154,.5); }
.rsvp .acciones { margin-top: calc(1.3 * var(--u)); text-align: center; }
.rsvp .boton-dorado { font-size: clamp(1rem, calc(1.3 * var(--u)), 1.25rem); padding: .45rem 2.4rem; }
@media (min-width: 1024px) {
  .confirmacion { min-height: calc(60.9 * var(--u)); }
}

/* ============ 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, calc(6 * var(--u)), 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; }
  /* Menú móvil: panel que entra desde la izquierda. */
  .hamburguesa { display: block; order: -1; margin: 0 .4rem 0 -.4rem; z-index: 62; }
  .nav-links {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
    width: min(80vw, 320px); flex: none;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap;
    gap: 1.5rem; padding: 96px 2rem 2rem;
    background: var(--verde); box-shadow: 8px 0 30px rgba(0,0,0,.3);
    transform: translateX(-105%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .nav-links.abierto { transform: translateX(0); visibility: visible; transition: transform .3s ease; }
  .nav-links a { font-size: 1.5rem; }
  .nav--crema .nav-links { background: var(--crema); }
  .nav-velo { position: fixed; inset: 0; z-index: 60; background: rgba(20,22,14,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .nav-velo.abierto { opacity: 1; pointer-events: auto; }
  .hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hamburguesa span { transition: transform .25s, opacity .2s; }
  .seccion { padding: 3rem calc(var(--m) + 1.3rem) 3rem calc(var(--m) + 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 { width: calc(78 * var(--u)); }
  .galeria .carrusel { margin-top: 2.5rem; }
  .galeria .linea-oro { width: 60%; }
  .ceremonia .titulo .l2 { margin-left: 0; }
  .ceremonia .linea-oro { width: 70%; margin: .3rem 0; }
  .ceremonia .grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ceremonia .lugar, .ceremonia .hora, .ceremonia .dir { margin-left: 0; max-width: none; }
  .ceremonia .ver-ubi { bottom: -22px; }
  .save .contenido { width: auto; }
  .save .titulo-inline { flex-wrap: wrap; }
  .save .linea-oro { width: 70%; margin-left: 0; }
  .contador .u { min-width: 0; padding: 0 .9rem; }
  .limite .linea-oro { width: 100% !important; }
  .limite .fila-pill { margin-left: 0; text-align: center; }
  .limite .texto { max-width: none; margin-left: 0; }
  .confirmacion { justify-content: center; align-items: center; padding: 2rem calc(var(--m) + 1.2rem) 2rem calc(var(--m) + 1.2rem); background-size: cover; background-position: 30% center; }
  .rsvp { width: 100%; min-width: 0; padding: 2rem 1.4rem; border-radius: 28px; }
  /* Borde dorado degradado (máscara para no teñir el fondo translúcido). */
.rsvp::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: linear-gradient(135deg, #f3e2b0, #a1884f 35%, #f3e2b0 62%, #8f7437);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.rsvp h2 { margin-bottom: 1rem; }
  .rsvp p { margin-bottom: 1.4rem; }
  .rsvp .acciones { margin-top: 1rem; }
  .wreath { width: 60%; opacity: .5; }
}

/* Escritorio: cada página del PDF mide 1800×1096 de contenido, así que cada
   sección conserva ese alto proporcional (las reglas de arriba fijan mínimos
   para pantallas chicas). */
@media (min-width: 1024px) {
  .seccion { min-height: calc(60.9 * var(--u)) !important; }
}

/* ===== Fuentes del PDF (medidas contra BODA.pdf) =====
   Títulos: Sharpe Light (300), recta e itálica · OSCAR/LIZET: Savinder ·
   textos: EB Garamond. */
.titulo .l1, .titulo .l2, .sobre-nosotros .titulo-script,
.save .titulo-inline .l1, .save .titulo-inline .l2, .save h3,
.cava .titulo-cava .l1, .cava .titulo-cava .l2,
.colores h2, .rsvp h2, .comparte .titulo .l1 {
  font-family: "Sharpe", var(--serif);
  font-weight: 300;
}
.portada-txt .os, .portada-txt .liz { font-family: "Savinder", var(--serif); font-weight: 400; }
.historia .texto, .ceremonia .lugar { font-weight: 500; }
/* Tamaños para que cada título mida lo mismo que en el PDF (a 1440 px). */
.portada-txt .os, .portada-txt .liz { font-size: clamp(2.4rem, calc(4.28 * var(--u)), 68px); }
.historia .titulo .l1 { font-size: clamp(3.6rem, calc(11.2 * var(--u)), 179px); }
.historia .titulo .l2 { font-size: clamp(3.6rem, calc(11.3 * var(--u)), 181px); }
.sobre-nosotros .titulo-script { font-size: clamp(2.4rem, calc(5.18 * var(--u)), 83px); }
.ceremonia .titulo .l1 { font-size: clamp(2.8rem, calc(8.04 * var(--u)), 129px); }
.ceremonia .titulo .l2 { font-size: clamp(2.8rem, calc(8.19 * var(--u)), 131px); }
.vestimenta .titulo .l1 { font-size: clamp(2.8rem, calc(7.4 * var(--u)), 118px); }
.vestimenta .titulo .l2 { font-size: clamp(2.2rem, calc(4.6 * var(--u)), 74px); }
.colores h2 { font-size: clamp(1.5rem, calc(2.77 * var(--u)), 44px); }
.cronograma .titulo .l1 { font-size: clamp(2.8rem, calc(8.82 * var(--u)), 141px); }
.save .titulo-inline .l1 { font-size: clamp(3rem, calc(8.15 * var(--u)), 130px); }
.save .titulo-inline .l2 { font-size: clamp(3rem, calc(8.29 * var(--u)), 133px); }
.save h3 { font-size: clamp(1.8rem, calc(4.83 * var(--u)), 77px); }
.galeria .titulo .l1 { font-size: clamp(3rem, calc(7.92 * var(--u)), 127px); }
.comparte .titulo .l1 { font-size: clamp(2.2rem, calc(4.17 * var(--u)), 67px); }
.cava .titulo-cava .l1 { font-size: clamp(2.8rem, calc(6.85 * var(--u)), 110px); }
.cava .titulo-cava .l2 { font-size: clamp(3rem, calc(7.72 * var(--u)), 124px); }
.limite .titulo .l1 { font-size: clamp(3rem, calc(8.03 * var(--u)), 128px); }
.limite .titulo .l2 { font-size: clamp(2.2rem, calc(6.76 * var(--u)), 108px); }
.rsvp h2 { font-size: clamp(2.4rem, calc(4.83 * var(--u)), 77px); }
/* Nuestra Historia: posiciones del PDF (p. 4). "Historia" va desplazada a la derecha. */
.historia { padding: calc(4.7 * var(--u)) calc(var(--m) + 4rem) 3rem calc(var(--m) + calc(3.9 * var(--u))); }
.historia .contenido { max-width: none; margin: 0; }
.historia .titulo .l2 { margin-left: calc(12 * var(--u)); }
.historia .linea-oro { width: calc(43.75 * var(--u)); margin: calc(-1 * var(--u)) 0 0 calc(9.7 * var(--u)); height: 5px; object-fit: fill; }
.historia .texto { font-size: clamp(1.25rem, calc(3.07 * var(--u)), 3.05rem); line-height: 1.18; max-width: calc(62 * var(--u)); margin: calc(2.6 * var(--u)) 0 0 calc(.6 * var(--u)); }
@media (max-width: 820px) {
  .historia .titulo .l2 { margin-left: 2.5rem; }
  .historia .linea-oro { width: 80%; margin-left: 1.5rem; }
  .historia .texto { max-width: none; }
  .br-pdf { display: none; }
}


/* Las líneas doradas conservan su proporción (antes se estiraban o aplastaban). */
.linea-oro { height: auto !important; object-fit: contain !important; }

/* Móvil: la portada es vertical y "cover" recortaba a la pareja (está a la derecha
   de la foto). Se encuadra sobre ellos. */
@media (max-width: 820px) {
  .portada { background-position: 80% center; }
  .confirmacion { background-position: 50% center; }
}

/* ===== Nav web (no la franja de 184 px del PDF) ===== */
.nav-links a { font-family: "Sharpe", var(--serif); font-weight: 300; }
@media (min-width: 821px) {
  .nav { height: var(--nav); padding: 0 calc(var(--m) + 2rem); }
  .nav .brand img { height: 54px; }
  .nav-links { justify-content: space-around; }
  .nav-links a { font-size: clamp(1.05rem, 1.35vw, 1.4rem); }
}
.seccion, .portada, .confirmacion { scroll-margin-top: var(--nav); }
@media (min-width: 1024px) {
  .portada { min-height: calc(100vh - var(--nav)); }
}

/* Cronograma escalonado: los eventos de la derecha suben media fila, así la línea
   de tiempo ocupa la mitad de alto sin perder el zigzag del PDF. */
@media (min-width: 821px) {
  .timeline { max-width: calc(70 * var(--u)); }
  .evento { min-height: calc(6.6 * var(--u)); margin-bottom: 0; }
  .evento + .evento { margin-top: calc(-2.6 * var(--u)); }
  .evento .caja h4 { font-size: clamp(1.2rem, calc(2.6 * var(--u)), 2.4rem); }
  .evento .caja .hora { font-size: clamp(1rem, calc(1.7 * var(--u)), 1.6rem); }
  .cronograma .mam { margin: calc(1 * var(--u)) 0 calc(2.2 * var(--u)); }
}

/* Móvil: márgenes laterales cómodos en todas las secciones y columnas apiladas
   (va al final para ganar sobre las medidas de escritorio). */
@media (max-width: 820px) {
  .seccion, .portada, .confirmacion { padding-left: 1.3rem !important; padding-right: 1.3rem !important; }
  .seccion { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .ceremonia .grid, .vestimenta .grid, .cava .grid { grid-template-columns: 1fr !important; }
  .cava .foto { height: auto; }
  .evento { margin-bottom: 1.1rem; }
  .evento .caja h4 { font-size: 1.45rem; }
}

/* "Historia": dorado metálico con un reflejo de luz que la recorre. */
.historia .titulo .l2 {
  background: linear-gradient(100deg,
      #7d6531 0%, #b89b63 22%, #e9d7a6 38%, #fff8e1 47%, #f3e2b0 52%,
      #c6a96c 64%, #8f7437 82%, #b89b63 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  filter: drop-shadow(2px 3px 2px rgba(64,68,45,.28)) drop-shadow(0 0 6px rgba(233,215,166,.35));
  animation: brillo-oro 5.5s ease-in-out infinite;
}
@keyframes brillo-oro {
  0%, 15%  { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .historia .titulo .l2 { animation: none; background-position: 50% 0; }
}

/* ===== Menú móvil según el PDF (páginas 19–23 y 26, medido a 390 px) =====
   Cerrado: sin barra; ☰ a la izquierda y monograma al centro, crema sobre foto o
   verde y verdes sobre crema. Abierto: panel de 54 % del ancho, alto completo,
   esquinas derechas de ~43 px; verde sólido sobre crema y vidrio sobre foto/verde. */
@media (max-width: 820px) {
  .nav {
    position: fixed; top: 0; left: 0; right: 0; height: 112px;
    background: transparent !important; box-shadow: none !important; border-radius: 0;
    padding: 0; pointer-events: none;
  }
  body { padding-top: 0; }
  .nav-fondo { display: none; }
  .nav .brand { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); pointer-events: auto; }
  .nav .brand img { height: 84px; width: auto; transition: filter .3s; }
  .nav .brand { transition: opacity .25s; }
  .nav--bajado .brand { opacity: 0; pointer-events: none; }
  .hamburguesa {
    position: fixed; left: 21px; top: 27px; margin: 0; padding: 0;
    width: 39px; height: 39px; pointer-events: auto; z-index: 62;
    display: flex; flex-direction: column; justify-content: center; gap: 9px;
  }
  .hamburguesa span { width: 37px; height: 3.4px; margin: 0; border-radius: 2px; background: var(--verde);
    box-shadow: 0 3px 6px rgba(38,40,28,.18); }
  .hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(12.4px) rotate(45deg); }
  .hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12.4px) rotate(-45deg); }

  /* Sobre foto o fondo verde: ícono y monograma crema. */
  .nav--crema .hamburguesa span, .hamburguesa[aria-expanded="true"] span { background: var(--crema); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
  .nav--crema .brand img { filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(380%) hue-rotate(4deg) brightness(99%) contrast(92%); }
  .nav:not(.nav--crema) .brand img { filter: none; }

  .nav-links {
    position: fixed; top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 54.1vw; min-width: 200px; max-width: 320px;
    border-radius: 0 43px 43px 0;
    padding: 135px 0 0 0;
    gap: 0; align-items: stretch;
    background: var(--verde); box-shadow: 6px 0 24px rgba(0,0,0,.18);
    transform: translateX(-102%); pointer-events: auto;
  }
  .nav--crema .nav-links {
    background: rgba(243,238,226,.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05);
  }
  .nav-links a, .nav--crema .nav-links a {
    color: var(--crema); font-size: 21px; line-height: 1;
    padding: 0 0 9px 13px; margin: 0 0 33px 0;
    border-bottom: 0; position: relative;
  }
  .nav-links a::after {
    content: ""; position: absolute; left: 25px; width: 164px; max-width: calc(100% - 37px);
    bottom: 0; height: 2.4px; background: var(--crema); border-radius: 2px;
  }
  .nav-links a.activo { border-bottom: 0; }
  .nav-links .mono-menu { display: block; margin: auto auto 29px; height: 98px; width: auto; pointer-events: none;
    filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(380%) hue-rotate(4deg) brightness(99%) contrast(92%); }
  .nav-velo, .nav-velo.abierto { background: transparent; }
}
@media (min-width: 821px) { .nav-links .mono-menu { display: none; } }

/* Ajuste fino de colores del menú móvil contra el PDF (páginas 20–22 y 26). */
@media (max-width: 820px) {
  /* Botón ☰ cerrado: cuadro translúcido verde (≈ #c7c3b9 sobre crema). */
  .hamburguesa {
    left: 21px; top: 29px; width: 39px; height: 36px; border-radius: 8px;
    background: rgba(64,68,45,.1);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    align-items: center; gap: 6px; transition: left .3s, background-color .3s;
  }
  .hamburguesa span { width: 35px; height: 4.2px; }
  .nav--crema .hamburguesa span { background: #fffbe4; }
  /* Abierto: el ícono se queda como ☰ (no X), crema, pegado a la orilla del panel. */
  .hamburguesa[aria-expanded="true"] { left: 9px; top: 25px; width: 39px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 10.6px; }
  .hamburguesa[aria-expanded="true"] span { width: 39px; transform: none !important; opacity: 1 !important; }
  /* Vidrio sobre foto/verde: más opaco y difuso, como #696b56 sobre el verde. */
  .nav--crema .nav-links { background: rgba(243,238,226,.16); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
  .nav-links { padding-top: 141px; }
}

/* ===== Portada móvil según el PDF (página 19, 402×874) =====
   "Oscar" arriba a la izquierda, "&" dorado al centro, "Lizet" a la derecha;
   fecha y ciudad abajo; la foto encuadra a la pareja al centro. */
@media (max-width: 820px) {
  .portada {
    min-height: 100svh; padding: 0 !important; display: block;
    background-size: auto 100%; background-position: 77.9% 0;   /* encuadre medido contra la pág. 19 */
  }
  .portada::before { background: linear-gradient(180deg, rgba(38,40,28,.25) 0%, rgba(38,40,28,0) 30%, rgba(38,40,28,0) 70%, rgba(38,40,28,.35) 100%); }
  .portada-txt { position: absolute; inset: 0; margin: 0 !important; padding: 0; text-align: left; }
  .portada-txt .os, .portada-txt .liz {
    position: absolute; font-size: 9.6vw !important; line-height: 1; letter-spacing: 0; text-transform: none;
  }
  .portada-txt .os  { left: 11.9vw; top: 16.1%; }
  .portada-txt .liz { left: 57.7vw; top: 21.6%; }
  .portada-txt .amp-wrap { position: absolute; left: 41.8vw; top: 20.8%; }
  .portada-txt .amp { height: 11vw; margin: 0; }
  .portada-txt .linea-oro { display: none; }
  .portada-txt .fecha { position: absolute; left: 0; right: 0; top: 90.9%; text-align: center; font-size: 7.1vw !important; letter-spacing: .05em; }
  .portada-txt .ciudad { position: absolute; left: 0; right: 0; top: 94.3%; margin: 0; text-align: center; font-family: "Savinder", var(--serif); font-size: 2.7vw !important; letter-spacing: .1em; }
  .portada .deco-tl { display: none; }
  .portada .deco-bl { left: -9vw; bottom: 9%; width: 30vw; }
}

/* ===== Celular: pantallas generadas desde los frames móviles de Figma =====
   (tools/figma/gen_movil.py). Cada capa va en absoluto con unidades vw sobre
   un lienzo de 402 px; en pantallas ≤ 600 px se muestran en lugar del diseño
   de escritorio. */
.mf { display: none; position: relative; width: 100%; overflow: hidden; }
.mf-form { position: absolute; inset: 0; margin: 0; }
.mf .fx { position: absolute; transform-origin: 0 0; margin: 0; padding: 0; box-sizing: border-box; pointer-events: none; }
.mf .fx-t span { display: block; }
.mf .fx-borde::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--bw); background: var(--borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.mf .fx-liga, .mf .fx-input, .mf .fx-enviar { pointer-events: auto; z-index: 5; }
.mf .fx-liga { border-radius: 999px; }
.mf .fx-input { background: transparent; border: 0; outline: none; text-align: center; color: #f3eee2; text-shadow: 0 1vw 1vw rgba(0,0,0,.25); }
.mf .fx-input::placeholder { color: #f3eee2; opacity: 1; }
.mf .fx-input:focus::placeholder { opacity: .45; }
.mf .fx-enviar { border: 0; border-radius: 999px; background: linear-gradient(180deg, #e6c582, #a1884f); color: #fff; font-family: 'Sharpe', serif; font-weight: 300; box-shadow: 0 1vw 1vw rgba(0,0,0,.25); }
@media (max-width: 600px) {
  .tiene-mf { padding: 0 !important; min-height: 0 !important; background: none !important; display: block !important; }
  .tiene-mf::before, .tiene-mf::after { display: none !important; }
  .tiene-mf > :not(.mf) { display: none !important; }
  .tiene-mf > .mf { display: block; }
  .nav .brand { display: none; }          /* cada pantalla trae su monograma, como en Figma */
}

/* ===== Menú móvil exacto a Figma (frames 163:70 sobre crema; 163:6 y 163:96 sobre foto/verde) ===== */
@media (max-width: 820px) {
  .hamburguesa { left: 20px; top: 24px; width: 39px; height: 36px; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0; gap: 10px; }
  .hamburguesa span, .nav--crema .hamburguesa span { width: 39px; height: 4px; border-radius: 3px; box-shadow: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
  .hamburguesa span { background: #40442d; }
  .nav--crema .hamburguesa span { background: #ffffe0; }
  .hamburguesa[aria-expanded="true"] { left: 18px; top: 24px; gap: 10px; }
  .nav--crema .hamburguesa[aria-expanded="true"] { left: 9px; }
  .hamburguesa[aria-expanded="true"] span { width: 39px; background: #f3eee2 !important; }

  .nav-links { width: 217px !important; min-width: 0; max-width: none; border-radius: 0 52px 52px 0 !important; padding: 0 !important; display: block !important; box-shadow: none; }
  .nav--crema .nav-links { width: 216px !important; background: rgba(243,238,226,.2); box-shadow: 4px 20px 6px rgba(0,0,0,.25); }
  .nav-links a, .nav--crema .nav-links a { position: absolute; left: 13px; height: 30px; line-height: 30px; font-size: 22px; padding: 0 !important; margin: 0 !important; white-space: nowrap; }
  .nav-links a:nth-child(1) { top: 130px; } .nav-links a:nth-child(2) { top: 211px; } .nav-links a:nth-child(3) { top: 292px; }
  .nav-links a:nth-child(4) { top: 373px; } .nav-links a:nth-child(5) { top: 454px; }
  .nav-links a::after { left: 5px; top: 39px; bottom: auto; width: 186px; max-width: none; height: 3px; border-radius: 2px; background: #a38a55; }
  .nav--crema .nav-links a:nth-child(1) { top: 136px; } .nav--crema .nav-links a:nth-child(2) { top: 200px; } .nav--crema .nav-links a:nth-child(3) { top: 264px; }
  .nav--crema .nav-links a:nth-child(4) { top: 328px; } .nav--crema .nav-links a:nth-child(5) { top: 392px; }
  .nav--crema .nav-links a::after { left: 0; top: 33px; width: 190px; background: #f3eee2; }
  .nav-links .mono-menu { position: absolute; margin: 0; left: 64px; bottom: 35px; width: 78px; height: 102px; object-fit: contain; filter: brightness(0) invert(1) sepia(.12); }
  .nav--crema .nav-links .mono-menu { left: 79px; bottom: 21px; width: 99px; height: 128px; filter: brightness(0) invert(1) sepia(.12) drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
}
@media (max-width: 820px) {
  .hamburguesa { top: 26px; }
  .nav:not(.nav--crema) .hamburguesa:not([aria-expanded="true"]) { left: 22px; top: 28px; }
  .nav-links.abierto { left: 0 !important; transform: none !important; }
}

/* Todos los títulos en Sharpe van en Light (300), como en Figma. Antes algunos
   pedían 400 y, como Sharpe no tiene 400, el navegador usaba la Medium (500)
   y se veían en negrita (Galería, Ceremonia y, Recepción, Fecha, Límite…). */
.titulo .l1, .titulo .l2, .titulo-inline .l1, .titulo-inline .l2, .titulo-cava .l1, .titulo-cava .l2,
.sobre-nosotros .titulo-script, .colores h2, .save h3, .rsvp h2, .comparte .titulo .l1 { font-weight: 300 !important; }

/* ===== Página «Sube tus fotos» ===== */
.subir-pagina { text-align: center; min-height: calc(100vh - var(--nav)) !important; padding: 4rem 1.5rem 3rem !important; }
.subir-pagina .contenido { max-width: 680px; margin: 0 auto; }
.subir-pagina .titulo .l1 { font-size: clamp(2.4rem, 5vw, 4.2rem); color: #2f3122; }
.subir-pagina .intro { font-size: 1.3rem; line-height: 1.5; color: #2f3122; margin: 1.2rem auto 2rem; }
.subir-deco-izq { left: -60px; bottom: -40px; width: 340px; opacity: .45; }
.subir-deco-der { right: -60px; bottom: -40px; width: 340px; opacity: .45; transform: scaleX(-1); }
.form-subir { display: grid; gap: 1rem; text-align: left; }
.soltar { display: grid; gap: .35rem; place-items: center; text-align: center; padding: 2rem 1rem; border: 2px dashed #a38a55;
  border-radius: 22px; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s; }
.soltar:hover, .soltar:focus-within { background: rgba(255,255,255,.85); }
.soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.soltar-titulo { font-family: "Sharpe", var(--serif); font-weight: 300; font-size: 1.6rem; color: #40442d; }
.soltar-nota { font-size: .95rem; color: #5a5a4a; }
.soltar-lista { font-size: 1rem; color: #40442d; font-weight: 500; min-height: 1.2em; }
.campo { display: grid; gap: .3rem; font-size: 1.05rem; color: #2f3122; }
.campo small { color: #6b6b5b; }
.campo input { font: inherit; font-size: 16px; padding: .7rem .9rem; border: 1px solid #cdbf9f; border-radius: 12px; background: #fff; }
.campo input:focus-visible, .soltar:focus-within { outline: 3px solid rgba(163,138,85,.55); outline-offset: 2px; }
.progreso { height: 10px; border-radius: 999px; background: #e7dfcb; overflow: hidden; }
.progreso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a38a55, #e6c582); transition: width .2s; }
.aviso { margin: 0; text-align: center; font-size: 1.05rem; color: #40442d; min-height: 1.3em; }
.aviso--ok { color: #2f5327; }
.aviso--error { color: #7a2b22; }
.form-subir .boton-dorado { justify-self: center; margin-top: .4rem; }
.subir-pagina .hashtag-bloque { margin-top: 2.6rem; }
.subir-pagina .hashtag-bloque p { font-size: 1.1rem; color: #2f3122; margin: 0 0 .4rem; }
.subir-pagina .hashtag { font-size: 1.7rem; color: #2f3122; font-weight: 500; }
.volver { margin-top: 2rem; } .volver a { color: #40442d; text-decoration: underline; }

/* ===== Escritorio: secciones generadas desde los frames de 1440 px de Figma =====
   (tools/figma/gen_escritorio.py). Medidas en --u; el lienzo de 1440 queda centrado
   y las hojas pueden salirse hacia los márgenes, como en el diseño. */
.fd { display: none; position: relative; width: 100%; overflow: hidden; --s: max(1vw, var(--u)); }
.fd-lienzo { position: absolute; top: 0; bottom: 0; left: var(--m); width: calc(100 * var(--u)); }
.fd .mf-form, .fd form.mf-form { position: absolute; inset: 0; margin: 0; }
.fd .fx { position: absolute; transform-origin: 0 0; margin: 0; padding: 0; box-sizing: border-box; pointer-events: none; }
.fd .fx-t span { display: block; }
.fd .fx-borde::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--bw); background: var(--borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.fd .fx-liga, .fd .fx-input, .fd .fx-enviar, .fd .fx-cal { pointer-events: auto; z-index: 5; }
.fd .fx-liga { border-radius: 999px; }
.fd .fx-input { background: transparent; border: 0; outline: none; text-align: center; color: #f3eee2; text-shadow: 0 .28vw .28vw rgba(0,0,0,.25); }
.fd .fx-input::placeholder { color: #f3eee2; opacity: 1; }
.fd .fx-input:focus::placeholder { opacity: .45; }
.fd .fx-enviar { border: 0; border-radius: 999px; background: linear-gradient(180deg, #e6c582, #a1884f); color: #fff; font-family: 'Sharpe', serif; font-weight: 300; box-shadow: 0 4px 6px rgba(0,0,0,.25); cursor: pointer; }
.fd .fx-cal { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #f3eee2;
  font-family: 'EB Garamond', serif; background: #a38a55; box-shadow: 0 4px 4px rgba(0,0,0,.25), inset 0 0 0 calc(.28 * var(--u)) #e6c582; }
.fd .fx-cal:hover { background: #8f7745; }
.mf .fx-input:focus-visible, .fd .fx-input:focus-visible { outline: 2px solid #e6c582; outline-offset: 2px; }
@media (min-width: 601px) {
  .tiene-fd { padding: 0 !important; min-height: 0 !important; background: none !important; display: block !important; }
  .tiene-fd::before, .tiene-fd::after { display: none !important; }
  .tiene-fd > :not(.fd):not(.mf) { display: none !important; }
  .tiene-fd > .fd { display: block; }
}

/* Hojas: bordes desvanecidos. Las imágenes de hojas tienen ramas cortadas en la orilla
   del archivo; con la máscara ese corte nunca se ve como una línea recta. */
.fx-hoja, .seccion .deco, .portada .deco, .wreath {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* ===== Escritorio: cada sección trae su franja para el nav (como en Figma) =====
   El nav queda fijo encima de esa franja; así, al llegar a una sección, el nav y el
   cambio de color coinciden con el inicio de la sección, y cada sección mide una pantalla. */
@media (min-width: 601px) {
  .nav { position: fixed; left: 0; right: 0; top: 0; }
  .fd { box-sizing: content-box; padding-top: var(--nav); }
  .fd-lienzo { top: var(--nav); }
  .tiene-fd, .seccion, .portada, .confirmacion { scroll-margin-top: 0 !important; }
  .comparte { padding-top: calc(var(--nav) + 4rem) !important; }
  .subir-pagina { padding-top: calc(var(--nav) + 3rem) !important; }
}
/* Hojas con ramas cortadas en la orilla derecha del archivo: se desvanecen desde el 62 %. */
.fx-hoja-der {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 62%, transparent 97%), linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 99%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 62%, transparent 97%), linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 99%);
}

/* ===== Desplazamiento por secciones: cada gesto lleva a la siguiente sección completa ===== */
@media (max-width: 820px) {
  html { scroll-snap-type: y mandatory; }
  .tiene-fd, .tiene-mf, .comparte { scroll-snap-align: start; scroll-snap-stop: always; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Menú con todas las secciones ===== */
@media (min-width: 821px) {
  .nav-links { justify-content: space-between; gap: 1.2vw; padding-left: 2vw; }
  .nav-links a { font-size: clamp(.98rem, 1.15vw, 1.3rem); white-space: nowrap; }
  .nav-links a.activo { border-bottom: 3px solid #a38a55; }
}
@media (max-width: 820px) {
  .nav-links a:nth-child(n) { top: auto; }
  .nav-links a:nth-child(1) { top: 124px; } .nav-links a:nth-child(2) { top: 190px; } .nav-links a:nth-child(3) { top: 256px; }
  .nav-links a:nth-child(4) { top: 322px; } .nav-links a:nth-child(5) { top: 388px; } .nav-links a:nth-child(6) { top: 454px; }
  .nav-links a:nth-child(7) { top: 520px; } .nav-links a:nth-child(8) { top: 586px; }
  .nav--crema .nav-links a:nth-child(1) { top: 124px; } .nav--crema .nav-links a:nth-child(2) { top: 186px; } .nav--crema .nav-links a:nth-child(3) { top: 248px; }
  .nav--crema .nav-links a:nth-child(4) { top: 310px; } .nav--crema .nav-links a:nth-child(5) { top: 372px; } .nav--crema .nav-links a:nth-child(6) { top: 434px; }
  .nav--crema .nav-links a:nth-child(7) { top: 496px; } .nav--crema .nav-links a:nth-child(8) { top: 558px; }
  .nav-links a::after { top: 37px; }
  .nav--crema .nav-links a::after { top: 33px; }
  .nav-links a:nth-child(7) { font-size: 19px !important; }
  .nav-links .mono-menu, .nav--crema .nav-links .mono-menu { bottom: max(21px, calc(100% - 660px - 128px)); }
  @media (max-height: 760px) { .nav-links .mono-menu { display: none; } }
}
/* Mientras se escribe en un campo no hay ajuste por secciones (ver secciones.js) */
html.escribiendo { scroll-snap-type: none !important; }

/* ===== Celular: cada sección de Figma mide exactamente una pantalla =====
   --k = px reales por px de Figma (lo que quepa: ancho o alto); el lienzo de 402 px
   queda centrado y lo que toca las orillas se pega a la pantalla. */
:root { --alto-pantalla: 100vh; }
@supports (height: 100lvh) { :root { --alto-pantalla: 100lvh; } }
.mf { height: var(--alto-pantalla); }
/* «clip» (no «hidden»): el navegador no puede desplazar el diseño por dentro al enfocar el
   campo de nombre; con «hidden» el contenido se recorría ~100 px y quedaba descuadrado. */
.mf, .fd { overflow: clip; }
.mf-lienzo { position: absolute; left: var(--km); top: calc((var(--alto-pantalla) - 100% * 0) / 2); }
.mf-lienzo { top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .comparte { min-height: var(--alto-pantalla) !important; display: flex !important; flex-direction: column; justify-content: center; }
}
/* Celular: el menú flota (no hay barra), así que las secciones no reservan espacio arriba.
   Antes quedaban 70 px de la sección anterior visibles al deslizar. */
@media (max-width: 820px) {
  .seccion, .portada, .confirmacion, .tiene-mf, .tiene-fd, .comparte { scroll-margin-top: 0 !important; }
}