/* =====================================================================
   İdil & Fran — site styles (the RSVP form has its own file: rsvp.css)

    1. Tokens & fonts         6. Celebration           11. Pop-ups (shared)
    2. Base                   7. Good to know          12. Pop-up contents
    3. Shared components      8. Gifts                 13. Small helpers
    4. Hero                   9. Photos
    5. Invitation            10. End (site map + names)

   Breakpoints: phones < 768px · small phones ≤ 420px · short screens ≤ 700px tall
   ===================================================================== */


/* ---------- 1. Tokens & fonts ---------- */

:root {
  --color-1: #576049;   /* dark olive green: titles, main buttons */
  --color-2: #8F977A;   /* olive sage: labels, icons */
  --color-3: #D9D6C1;   /* light sand: lines, borders */
  --color-4: #FBF6EE;   /* page background */
  --color-5: #F1EADF;   /* soft boxes */
  --color-6: #868686;   /* grey italic text */
  --color-7: #B4664A;   /* terracotta: countdown */
  --color-claro: #FBF6EE;   /* light text: over the photos and on green buttons (warm, not pure white) */

  --fuente-1: 'Parisienne', cursive;     /* script titles */
  --fuente-2: 'Open Sans', sans-serif;    /* everything else */
}

/* Parisienne, self-hosted (SIL Open Font License). The latin-ext file has the Turkish letters (ğ ş İ…) */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/parisienne-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: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/parisienne-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;
}


/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Each .seccion fills the screen and the scroll settles on it */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

/* No elastic bounce / pull-to-refresh at the top or bottom: on iPhone the bounce made the
   section snapping land on the countdown instead of the title */
html,
body {
  overscroll-behavior-y: none;
}

/* Snapping starts with the guest's first touch/scroll (js/site.js), so nothing moves the page while it loads */
html.snap {
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  font-family: var(--fuente-2);
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

h1, h2, h3, h4 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
}

strong {
  font-weight: bolder;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all .5s ease;
}

img,
svg {
  vertical-align: middle;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button,
input,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[hidden] {
  display: none !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-1);
}

.seccion {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

/* Bottom snap point added to each section by js/site.js (lets tall sections scroll to their end) */
.snap-fin {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  scroll-snap-align: end;
  pointer-events: none;
}

/* Centred column used by every section */
.contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

/* Loading screen */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-3);
}

.loader {
  width: 130px;
}

/* Music button + hidden YouTube player (must stay "visible" for iOS) */
.boton-musica {
  position: fixed;
  z-index: 999;
  top: 10px;
  right: 0;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  background: none;
}

#reproductor-musica {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -999;
  opacity: .01;
  pointer-events: none;
}

/* Phones and upright tablets: bottom-right, in thumb reach and clear of the hanging leaves */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px) {
  .boton-musica {
    top: auto;
    bottom: 0;
    width: 80px;
    height: 80px;
  }
}


/* ---------- 3. Shared components ---------- */

/* Line icons: inherit the text colour */
.ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* White circle with a line animation inside, at the top of each section */
.medallon {
  width: 175px;
  height: 175px;
  padding: 45px;
  margin: 0 auto 30px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 15px -1px rgba(0, 0, 0, .4);
}

/* Script title + short line under it */
.inv-titulo {
  font-family: var(--fuente-1);
  font-size: 56px;
  line-height: 1;
  color: var(--color-1);
  margin: 0;
}

.inv-divider {
  width: 40px;
  height: 1px;
  margin: 30px auto;
  background-color: var(--color-2);
}

.inv-titulo + .inv-divider {
  margin: 25px auto 34px;    /* clear of the script's descenders (g, y, ğ in Turkish titles) */
}

/* Small spaced capitals */
.inv-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fuente-2);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-2);
}

/* Main line of information (date, venue…) */
.inv-dato {
  margin: 0;
  font-family: var(--fuente-2);
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-1);
}

/* Grey italic detail line */
.inv-sub {
  margin: 6px 0 0;
  font-family: var(--fuente-2);
  font-size: 14px;
  font-style: italic;
  color: var(--color-6);
}

/* Script message (invitation, gifts) */
.inv-mensaje {
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--fuente-1);
  font-size: 38px;
  line-height: 1.2;
  color: var(--color-1);
}

/* Dark square button; .inv-boton-linea = outlined variant */
.inv-boton {
  display: inline-block;
  padding: 12px 32px;
  border: 1px solid var(--color-1);
  border-radius: 4px;
  background-color: var(--color-1);
  font-family: var(--fuente-2);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-claro);
  transition: background-color .3s ease, color .3s ease;
}

.inv-boton:hover,
.inv-boton:focus {
  background-color: transparent;
  color: var(--color-1);
}

.inv-boton:disabled {
  opacity: .6;
  cursor: default;
}

.inv-boton .ico {
  width: 15px;
  height: 15px;
  margin-left: 6px;
  vertical-align: -2px;
}

.inv-boton-linea {
  background-color: transparent;
  color: var(--color-1);
}

.inv-boton-linea:hover,
.inv-boton-linea:focus {
  background-color: var(--color-1);
  color: var(--color-claro);
}

/* Two info cards side by side (stacked on phones), buttons aligned at the bottom */
.tarjetas {
  display: flex;
  justify-content: center;
}

.tarjeta {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
}

/* Divider before every card that follows a visible one (some cards are hidden per guest) */
.tarjeta:not([hidden]) ~ .tarjeta {
  border-left: 1px solid var(--color-3);
}

.tarjeta > .ico {
  margin-bottom: 12px;
  color: var(--color-2);
}

.tarjeta .inv-sub {
  margin-bottom: 22px;
}

.tarjeta .inv-boton {
  margin-top: auto;
  text-align: center;     /* buttons in a section share one width (js/site.js) */
}

/* Content sections: cream background with the lavender lines behind the medallion. Decoration
   never crosses into the neighbouring sections (no stray leaf tips above or below) */
.seccion-decorada {
  overflow: hidden;
  background: url('/img/decor/lineas.svg?v=2') center 0 no-repeat var(--color-4);
}

/* Leaves: one accent per cream section, on alternating sides down the page
   (Celebration right · Good to know left · Gifts right; the countdown's wreath has its own leaves).
   Gifts is the exception below: its content is short, so it keeps the sprig on every screen.
   Each section carries both versions of its accent and the screen decides which one shows:
   - .hojas            sprig at mid-height beside the content, where the sides have room
   - .hojas-colgantes  leaves hanging from the top corner: phones, upright tablets, and content too
                       wide for the side sprig (see "Good to know" in section 13) */
.hojas {
  position: absolute;
  bottom: 20%;
  width: 16%;
  max-width: 300px;
  pointer-events: none;
}

.hojas-derecha {
  right: 0;
}

.hojas-izquierda {
  left: 0;
  transform: scaleX(-1);
}

.hojas-colgantes {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 12%;
  max-width: 200px;
  pointer-events: none;
}

/* Leaves that grow when their section comes into view (js/site.js): faded out while folded back,
   fading during the fold so nothing (not even the stem's tip) stays on screen */
.hojas,
.hojas-colgantes,
.hojas-portada-arriba,
.hojas-portada-abajo {
  transition: opacity .2s ease-out;
}

.plegada {
  opacity: 0;
  transition: opacity .7s ease-in;
}

.hojas-colgantes-derecha {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

/* Phones and upright tablets: no room beside the content, so the accent hangs from the top corner
   (on these screens the music button is at the bottom, leaving both top corners free) */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px) {
  .seccion-decorada .hojas {
    display: none;
  }

  .seccion-decorada .hojas-colgantes {
    display: block;
    width: 26%;
    max-width: 170px;
  }
}

@media (max-width: 767px) {
  .medallon {
    width: 120px;
    height: 120px;
    padding: 30px;
    margin-bottom: 20px;
  }

  .inv-titulo {
    font-size: 46px;
  }

  .inv-titulo + .inv-divider {
    margin: 20px auto 26px;
  }

  .inv-mensaje {
    padding: 0 10px;
    font-size: 32px;
  }
}

/* Gifts: the sprig (leaves + geometric frame) on every screen. A little smaller beside the content on
   wide screens; on phones and upright tablets it sits in the empty space under the content,
   bottom-left (mirrored), since the music button is bottom-right there */
#regalos .hojas {
  width: 13%;
  max-width: 240px;
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px) {
  #regalos .hojas {
    display: block;
    right: auto;
    left: 0;
    bottom: 24px;
    width: 24%;
    max-width: 190px;
    transform: scaleX(-1);
  }
}

/* Cards on phones and upright tablets: each one is a row (icon | texts | button), so a section
   fits on one screen even with three cards ("Good to know" with the passport & visa card) */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1199px) {
  .tarjetas {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 0 4px;
  }

  .tarjeta,
  .tarjeta:not([hidden]) ~ .tarjeta {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    grid-template-areas:
      "ico label boton"
      "ico dato  boton"
      "ico sub   boton";
    column-gap: 14px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border-left: none;
    text-align: left;
  }

  .tarjeta[hidden] {
    display: none;
  }

  .tarjeta:not([hidden]) ~ .tarjeta {
    border-top: 1px solid var(--color-3);
  }

  .tarjeta > .ico {
    grid-area: ico;
    align-self: start;
    margin: 2px 0 0;
  }

  .tarjeta .inv-label {
    grid-area: label;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 3px;
  }

  .tarjeta .inv-dato {
    grid-area: dato;
    font-size: 15px;
    letter-spacing: 1px;
  }

  .tarjeta .inv-sub {
    grid-area: sub;
    margin: 2px 0 0;
    font-size: 13px;
  }

  .tarjeta .inv-boton {
    grid-area: boton;
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
  }
}

/* Upright tablets: the same rows, a size up */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
  .tarjetas {
    max-width: 480px;
  }

  .tarjeta,
  .tarjeta:not([hidden]) ~ .tarjeta {
    column-gap: 18px;
    padding: 22px 0;
  }

  .tarjeta .inv-label {
    font-size: 12px;
  }

  .tarjeta .inv-dato {
    font-size: 18px;
  }

  .tarjeta .inv-sub {
    font-size: 14px;
  }

  .tarjeta .inv-boton {
    padding: 11px 18px;
    font-size: 12px;
  }
}

/* ---------- 4. Hero (#inicio) ---------- */

.portada {
  isolation: isolate;   /* the photo (z-index -1) stays inside the section, under the veil */
  /* One full screen, measured with the browser's bars minimised (lvh): on iPhone Safari the bars shrink or
     float translucent over the page, and a shorter cover let the countdown peek in below it. When the
     page first opens with the bars shown, the bottom strip (the waves) sits behind Safari's bottom bar */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  color: var(--color-claro);
}

/* Background photo of the hero and the end section, moved by js/site.js (parallax) */
.fondo-parallax {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat;
  will-change: transform;
}

/* End section: the same dark veil as the hero, so the white menu stays readable over the photo */
.final-mapa .fondo-parallax::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(66, 56, 48, .28);
}

/* Veil over the photo: dark where the date and names are, fading out towards the bottom so the city
   and the couple keep their full brightness */
.portada::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(66, 56, 48, .42) 0%,
    rgba(66, 56, 48, .34) 45%,
    rgba(66, 56, 48, .06) 75%,
    rgba(66, 56, 48, 0) 100%);
}

/* The cover photo a little livelier (it was taken on a cloudy day) */
.portada .fondo-parallax {
  filter: brightness(1.08) contrast(1.04) saturate(1.03);   /* saturation kept low: more turns skin red */
}

/* Slim band of waves at the bottom, scaled with the screen width */
.portada::after {
  content: '';
  position: absolute;
  bottom: -1px;
  z-index: 9;
  width: 100%;
  height: clamp(50px, 9vw, 130px);
  background: url('/img/decor/ondas-portada.svg?v=4') no-repeat bottom center / 100% 100%;
}

.hojas-portada-arriba {
  position: absolute;
  top: -30px;
  left: 0;
  width: 15%;
}

/* Bottom-right corner, its stem tucked behind the wave band (the waves are drawn on top), as a diagonal
   partner to the top-left branch */
.hojas-portada-abajo {
  position: absolute;
  bottom: calc(clamp(50px, 9vw, 130px) * .55);
  right: 0;
  width: 20%;
  max-width: 380px;
}

.portada-centro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portada-contenido {
  position: relative;
  z-index: 999;
  width: 70%;
  max-width: 798px;
  margin-bottom: 22vh;      /* above centre, in the sky: the couple in the photo sits below the names */
  text-align: center;
}

/* "05.06.2027" and "Toledo, España" with a short line (about two letters wide) on each side */
.portada-linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  white-space: nowrap;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.portada-linea::before,
.portada-linea::after {
  content: '';
  flex: 0 0 1.4em;
  border-top: 1px solid var(--color-claro);
}

/* Both rows end at the same point: js/site.js sets --ancho-lineas to the wider row (its text plus a
   short line on each side) and the lines beside the shorter text grow to fill it */
.portada-lineas-iguales .portada-linea {
  width: var(--ancho-lineas);
  margin-left: auto;
  margin-right: auto;
}

.portada-lineas-iguales .portada-linea::before,
.portada-lineas-iguales .portada-linea::after {
  flex-grow: 1;
}

.portada-lugar {
  margin-top: 0;
}

/* Margins measured on the letters: the same visible distance from the date's digits down to the dot
   of the İ as from the names (lowest point) down to the capitals of the place */
.portada h1 {
  margin: 32px 0 4px;
  font-family: var(--fuente-1);
  font-size: 86px;
}

/* The "&" between the names: the same script and size, softened. No typed spaces around it in the
   HTML; the margins were measured on the letter shapes so the visible gap is the same on both sides
   (the "l" of İdil has a tail that reaches towards the "&", hence the wider left margin) */
.portada-y {
  display: inline-block;
  position: relative;
  margin: 0 .122em 0 .251em;
  font-size: 1em;
  opacity: .5;
}

/* A fixed gap under "Toledo, España" (a % of the text block shrank on wide, short screens) */
.flecha-continuar {
  display: block;
  position: absolute;
  top: calc(100% + clamp(20px, 5vh, 50px));
  left: 50%;
  width: 50px;
  margin-left: -25px;
}

/* A soft shadow so the white arrow stays visible over the brighter photo (e.g. a white shirt) */
.flecha-continuar svg {
  filter: drop-shadow(0 0 2px rgba(40, 32, 26, .9)) drop-shadow(0 1px 6px rgba(40, 32, 26, .6));
}

/* No box when tapped; keyboard users still get an outline */
.flecha-continuar:focus {
  outline: none;
}

.flecha-continuar:focus-visible {
  outline: 1px solid var(--color-2);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .hojas-portada-arriba {
    width: 33%;
  }

  /* Phones: bottom-left corner (mirrored); it may overlap the couple in the photo a little */
  .hojas-portada-abajo {
    right: auto;
    left: 0;
    bottom: 7%;
    width: 32%;
    transform: scaleX(-1);
  }

  /* Phones: the names above centre, clear of the couple in the photo below them */
  .portada-contenido {
    width: 95%;
    margin-bottom: 150px;
  }

  .portada-linea {
    gap: 12px;
    font-size: clamp(18px, 6vw, 25px);
  }

  .portada h1 {
    margin: 34px 0 9px;
    font-size: 66px;
    line-height: 1;
  }

  /* Names stacked: the "&" on its own line, nudged (measured) to the middle of the gap between
     İdil and Fran and to their common centre line */
  .portada-y {
    display: block;
    top: 0;
    left: .036em;
    margin: -.121em 0 -.938em;   /* the "F" of Fran reserves a tall empty swash area above it */
    line-height: 1;
  }
}


/* ---------- 5. Invitation (#invitacion): countdown + personal message ---------- */

#invitacion {
  background-color: var(--color-4);
}

/* Phones: room at the top, so the wreath clears the status bar / Dynamic Island that iPhone Safari
   draws over the page. Short phones (iPhone SE size) have a thin status bar and little room to spare */
@media (max-width: 767px) {
  #invitacion {
    padding-top: 56px;
  }
}


/* Countdown: white circle inside the lavender/leaves wreath */
.aros {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 470px;
  height: 470px;
  margin: 0 auto;
  background: url('/img/decor/circulo-contador.svg?v=3') center / contain no-repeat;
}

/* Contents centred vertically in the circle */
.circulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 315px;
  height: 315px;
  padding: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 15px -1px rgba(0, 0, 0, .4);
  text-align: center;
}

.falta {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-7);
}

.reloj {
  display: flex;
  margin: 10px 0 25px;
}

.reloj-col {
  flex: 1;
  padding: 0 2px;
  border-right: 1px solid #ccc;
}

.reloj-col:last-child {
  border-right: none;
}

.reloj .number,
.reloj .time {
  display: block;
}

.reloj .number {
  font-size: 38px;
  color: var(--color-1);
}

.reloj .time {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-7);
}

/* Shown on/after the wedding day instead of the numbers */
.fin-cuenta {
  font-family: serif;
  font-size: 30px;
  color: var(--color-3);
}

.corazon-falta {
  width: 18%;
  margin: 0 auto;
}

/* Personal message (only with a personal link) */
.invitacion-personal {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 15px 40px;    /* breathing room under the countdown wreath */
  text-align: center;
}

.lista-invitados {
  margin: 0;
}

.lista-invitados li {
  display: inline;
  font-size: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-1);
}

/* "Ana, Luis y Nora": commas between the names, the word "and" only before the last one */
.lista-invitados li:not(:last-child)::after {
  content: ', ';
}

.lista-invitados li:nth-last-child(2)::after {
  content: ' y ';
}

html[lang="en"] .lista-invitados li:nth-last-child(2)::after {
  content: ' and ';
}

html[lang="tr"] .lista-invitados li:nth-last-child(2)::after {
  content: ' ve ';
}

.invitacion-acompanantes {
  margin-top: 8px;
}

.invitacion-personal .inv-divider {
  margin: 25px auto 30px;
}

/* The guest's personal message: can be two sentences, so smaller than the other script lines */
#invitacion .invitacion-mensaje {
  max-width: 540px;
  margin: 25px auto 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1.35;
}

@media (max-width: 767px) {
  #invitacion .invitacion-mensaje {
    margin: 20px auto 30px;
    font-size: 21px;
  }
}

@media (max-width: 767px) {
  /* Phones: the countdown about 11% smaller (wreath, circle and texts together) */
  .aros {
    width: 320px;
    height: 320px;
  }

  .circulo {
    width: 240px;
    height: 240px;
    padding: 24px 18px;
  }

  .falta {
    font-size: 11px;
  }

  .reloj {
    margin: 8px 0 20px;
  }

  .reloj .number {
    font-size: 23px;
  }

  .reloj .time {
    font-size: 15px;
  }
}

/* Phones as Safari shows them (about 660–820px of height with its bars): a more compact countdown and
   tighter spacing, so even a two-sentence message leaves the RSVP button clear of Safari's bottom bar.
   The arrow on the cover scrolls here without hiding Safari's bars, so this has to fit with them shown */
@media (max-width: 767px) and (max-height: 820px) {
  #invitacion {
    padding-top: 40px;
  }

  .aros {
    width: 290px;
    height: 290px;
  }

  .circulo {
    width: 218px;
    height: 218px;
    padding: 20px 16px;
  }

  .reloj {
    margin: 6px 0 16px;
  }

  .reloj .number {
    font-size: 21px;
  }

  .reloj .time {
    font-size: 13px;
  }

  .invitacion-personal {
    padding: 20px 15px 16px;
  }

  .invitacion-personal .inv-divider {
    margin: 14px auto 16px;
  }

  #invitacion .invitacion-mensaje {
    margin: 0 auto 18px;
    font-size: 19px;
  }
}

/* Short phones (iPhone SE size): thin status bar, so less room above the wreath */
@media (max-width: 767px) and (max-height: 700px) {
  #invitacion {
    padding-top: 20px;
  }
}

/* Upright tablets: the same reduction from the desktop size */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
  .aros {
    width: 420px;
    height: 420px;
  }

  .circulo {
    width: 282px;
    height: 282px;
  }

  .falta {
    font-size: 11px;
  }

  .reloj {
    margin: 9px 0 22px;
  }

  .reloj .number {
    font-size: 34px;
  }

  .reloj .time {
    font-size: 11px;
  }
}



/* ---------- 6. Celebration (#celebracion) ---------- */

#celebracion {
  padding: 60px 0;
}

/* The rings drawing needs less inner space than the other medallions */
#celebracion .medallon {
  padding: 25px;
}

@media (max-width: 767px) {
  #celebracion {
    padding: 50px 0;
  }

  #celebracion .medallon {
    padding: 18px;
  }
}


/* ---------- 7. Good to know (#informacion) ---------- */

#informacion {
  padding: 60px 0;
}


/* ---------- 8. Gifts (#regalos, hidden in Turkish) ---------- */

#regalos {
  padding: 60px 0;
}

.regalos-sub {
  max-width: 420px;
  margin: 14px auto 30px;
}

@media (max-width: 767px) {
  .regalos-sub {
    padding: 0 20px;
  }
}


/* ---------- 9. Photos (#retratos): carousel ---------- */

#retratos {
  padding: 50px 0 64px;
}

/* Phones: a full screen with Safari's bars minimised (lvh), so the ring photo of the next
   section doesn't peek in below the carousel when the bars shrink */
@media (max-width: 767px) {
  #retratos {
    min-height: 100lvh;
  }
}

.fotos {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 30px auto 0;
}

/* Soft fade at the edges instead of a hard cut */
.fotos .slick-list {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Rounded photos; the side ones faded and slightly smaller */
.foto {
  margin: 12px 10px 18px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .3);
  opacity: .55;
  transform: scale(.92);
  transition: opacity .9s ease, transform .9s ease;
}

.slick-center .foto {
  opacity: 1;
  transform: scale(1);
}

.foto a {
  display: block;
  outline: none;
}

.foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1;           /* all photos square (900×900 files in img/carrusel) */
  object-fit: cover;
}

.fotos .slick-slide:focus {
  outline: none;
}

/* Small dots in the site colours */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -34px;
  width: 100%;
  margin: 0;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 3px;
}

.slick-dots button {
  display: block;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0;
  color: transparent;
}

.slick-dots button::before {
  content: '';
  position: absolute;
  top: 3.5px;
  left: 3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-3);
  transition: background-color .3s ease;
}

.slick-dots .slick-active button::before {
  background-color: var(--color-1);
}

@media (max-width: 767px) {
  #retratos {
    padding: 50px 0 60px;
  }

  .fotos {
    margin-top: 26px;
  }

  .foto {
    margin: 10px 6px 16px;
  }
}

@media (min-width: 1600px) and (min-height: 950px) {
  .fotos {
    max-width: 1280px;
  }
}

/* Short screens: compact header so everything fits */
@media (max-height: 700px) {
  #retratos {
    padding: 28px 0 46px;
  }

  #retratos .medallon {
    width: 96px;
    height: 96px;
    padding: 22px;
    margin-bottom: 14px;
  }

  #retratos .inv-titulo {
    font-size: 40px;
  }

  #retratos .inv-titulo + .inv-divider {
    margin: 16px auto 16px;
  }

  .fotos {
    margin-top: 18px;
  }
}


/* ---------- 10. End (#final): site map over a photo, then the names ---------- */

#final {
  justify-content: flex-start;
}

.final-mapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16% 0;
}

/* Waves at the top and bottom of the photo */
.final-mapa::before,
.final-mapa::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Top: the hero's layered waves, flipped, so both big photos open and close the same way */
.final-mapa::before {
  top: -1px;
  z-index: 99;
  height: clamp(50px, 9vw, 130px);
  background: url('/img/decor/ondas-portada.svg?v=4') no-repeat bottom center / 100% 100%;
  transform: scaleY(-1);
}

.final-mapa::after {
  top: auto;
  bottom: -1px;
  z-index: 99;
  height: clamp(50px, 9vw, 130px);
  background: url('/img/decor/ondas-portada.svg?v=4') no-repeat bottom center / 100% 100%;   /* same waves as the hero */
}

.final-mapa .contenido {
  z-index: 999;
}

.final-titulo {
  margin: 0;
  font-family: var(--fuente-1);
  font-size: 60px;
  line-height: 60px;
  color: var(--color-claro);
}

.final-mapa .inv-divider {
  margin: 26px auto 30px;
  background-color: rgba(251, 246, 238, .7);
}

.mapa-sitio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}

.mapa-link {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid rgba(251, 246, 238, .65);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .06);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-claro);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.mapa-link .ico {
  width: 22px;
  height: 22px;
}

.mapa-link:hover,
.mapa-link:focus {
  border-color: #fff;
  background-color: #fff;
  color: var(--color-1);
}

/* RSVP button in white (only with a personal link) */
.final-rsvp {
  margin-top: 28px;
  border-color: #fff;
  background-color: #fff;
  color: var(--color-1);
}

.final-rsvp:hover,
.final-rsvp:focus {
  background-color: transparent;
  color: var(--color-claro);
}

/* Names at the very bottom; the scroll can also rest here */
.pie {
  margin-top: -2px;
  padding: 10% 15px;
  background-color: var(--color-4);
  text-align: center;
  scroll-snap-align: end;
}

.pie-nombres {
  margin: 0 0 .5rem;
  font-family: var(--fuente-1);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-2);
}

/* Same as the hero "&" (same measured margins) */
.pie-nombres span {
  display: inline-block;
  position: relative;
  margin: 0 .122em 0 .251em;
  font-size: 1em;
  opacity: .5;
}

@media (max-width: 767px) {
  .final-mapa {
    padding: 35% 0 50%;
  }

  .final-mapa::before {
    top: -2px;
  }

  .final-titulo {
    padding: 0 15px;
    font-size: 55px;
    line-height: 1;
  }

  .final-mapa .inv-divider {
    margin-top: 22px;
  }

  .pie {
    padding: 30% 15px 20%;
  }

  .pie-nombres {
    font-size: 42px;
  }

}

@media (max-width: 480px) {
  .mapa-sitio {
    gap: 10px;
    max-width: 340px;
  }

  .mapa-link {
    flex-basis: calc(50% - 5px);
    padding: 14px 8px;
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}


/* ---------- 11. Pop-ups (Bootstrap 4 modal behaviour + the site's white card) ---------- */

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none;
  font-family: var(--fuente-2);
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  content: '';
  display: block;
  height: min-content;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 36px 36px;
  border-radius: 20px;
  outline: 0;
  background-color: #fff;
  text-align: center;
  pointer-events: auto;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-1);
  opacity: .95;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

.fade {
  transition: opacity .15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

/* Round close button on the top-right corner of the card */
.modal .close {
  position: absolute;
  top: -15px;
  right: 0;
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-2);
  font-size: 34px;
  font-weight: 300;
  line-height: 40px;
  color: var(--color-claro);
}

.modal .close:hover {
  background-color: #fff;
  color: var(--color-2);
}

.modal-icono {
  display: inline-flex;
  align-self: center;
  margin-bottom: 8px;
  color: var(--color-2);
}

.modal-icono .ico {
  width: 30px;
  height: 30px;
}

.modal-titulo {
  margin: 0 0 16px;
  font-family: var(--fuente-1);
  font-size: 46px;
  line-height: 1;
  color: var(--color-1);
}

.modal-content .inv-divider {
  margin: 24px auto;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 460px;
    margin: 1.75rem auto;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
}

@media (max-width: 420px) {
  .modal-content {
    padding: 36px 22px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade,
  .modal.fade .modal-dialog {
    transition: none;
  }
}


/* ---------- 12. Pop-up contents ---------- */

/* When: schedule (times, icons joined by a thin line, names) */
.agenda {
  margin: 0;
  text-align: left;
}

.agenda li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 34px 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 9px 0;
}

.agenda li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(52px + 14px + 17px);
  top: calc(50% + 17px);
  width: 1px;
  height: calc(100% - 34px + 18px);
  background-color: var(--color-3);
}

.agenda-hora {
  font-size: 14px;
  letter-spacing: 1px;
  text-align: right;
  color: var(--color-2);
}

.agenda-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-3);
  border-radius: 50%;
  color: var(--color-1);
}

.agenda-icono .ico {
  width: 18px;
  height: 18px;
}

.agenda-nombre,
.agenda-sub {
  display: block;
}

.agenda-nombre {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-1);
}

.agenda-sub {
  font-size: 12px;
  font-style: italic;
  color: var(--color-6);
}




/* When: Apple / Google calendar buttons */
.cal-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.cal-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-3);
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-1);
  transition: border-color .3s ease;
}

.cal-link img {
  width: 16px;
  height: 16px;
}

.cal-link:hover,
.cal-link:focus {
  border-color: var(--color-1);
}

/* Where: map in a rounded frame */
.mapa-marco {
  position: relative;
  height: 260px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--color-5);
}

.mapa-marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transition: opacity .3s ease;
}

/* Spinner while the map loads */
.mapa-cargando {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(217, 214, 193, .2);
  border-top-color: #ddd;
  border-radius: 50%;
  animation: girar .8s linear infinite;
  transition: opacity .3s ease;
}

.mapa-cargando.oculto {
  opacity: 0;
  pointer-events: none;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.ampliar-mapa {
  align-self: center;
}

/* Text that can be copied (IBAN, booking code) + its copy button */
.copiable-label {
  margin-top: 22px;
}

.copiable {
  margin: 0 0 22px;
  padding: 12px 10px;
  border-radius: 4px;
  background-color: var(--color-5);
  font-size: 17px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-1);
  -webkit-user-select: all;
  user-select: all;
}

.btn-copiar {
  align-self: center;
  min-width: 200px;
}

.btn-copiar > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-copiar .ico {
  width: 16px;
  height: 16px;
}

.btn-copiar .btn-copiar-ok,
.btn-copiar.copiado .btn-copiar-normal {
  display: none;
}

.btn-copiar.copiado .btn-copiar-ok {
  display: inline-flex;
}

/* Where to stay */
.aloj-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aloj-opcion .inv-sub {
  max-width: 340px;
}

.aloj-opcion .copiable {
  margin-bottom: 6px;
}

.aloj-ayuda {
  margin: 0 0 18px;
  font-size: 12px;
}

.aloj-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.aloj-botones .inv-boton {
  min-width: 0;
  padding: 11px 22px;
}

.aloj-pronto {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px dashed var(--color-3);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-2);
}

/* Madrid → Toledo: routes with an icon, text and official links */
.rutas {
  margin: 0;
  text-align: left;
}

.ruta {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  column-gap: 14px;
  padding: 8px 0 14px;
}

.ruta .agenda-nombre {
  margin: 6px 0 4px;
}

.ruta p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-1);
}

.ruta strong {
  font-weight: 700;
}

.viaje-ultimo {
  margin: 4px 0 20px;
}

.viaje-omio {
  align-self: center;
}

/* Passport & visa: long content in left-aligned blocks */
#modalVisado .modal-dialog {
  max-width: 560px;
}

.visado-bloque {
  margin-bottom: 26px;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: var(--color-1);
}

.visado-bloque .inv-label {
  margin-bottom: 8px;
}

.visado-bloque p {
  margin: 0 0 10px;
}

.visado-bloque strong {
  font-weight: 700;
}

.enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enlaces a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-3);
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--color-1);
  transition: border-color .3s ease;
}

.enlaces a:hover,
.enlaces a:focus {
  border-color: var(--color-1);
}

.visado-notas p {
  font-size: 13px;
  font-style: italic;
  color: var(--color-6);
}

.visado-aviso {
  margin: 0;
  font-size: 11px;
  font-style: italic;
  color: var(--color-6);
}

@media (max-width: 420px) {
  .agenda li {
    grid-template-columns: 46px 34px 1fr;
    column-gap: 12px;
  }

  .agenda li:not(:last-child)::after {
    left: calc(46px + 12px + 17px);
  }


  .mapa-marco {
    height: 220px;
  }

  .copiable {
    padding: 12px 6px;
    font-size: 14px;
    letter-spacing: .5px;
  }
}


/* ---------- 13. Small helpers ---------- */

/* Line break only on phones (hero names) */
@media (min-width: 768px) {
  .solo-movil {
    display: none;
  }
}

/* With the visa card, "Good to know" has three cards: below 1200px they need the full width, so the
   side sprig gives way to the hanging leaves (top-left; top-right is the music button on these screens) */
@media (min-width: 768px) and (max-width: 1199px) {
  #informacion:has([data-mostrar="visado"]:not([hidden])) .hojas {
    display: none;
  }

  #informacion:has([data-mostrar="visado"]:not([hidden])) .hojas-colgantes {
    display: block;
  }
}


/* ---------- 14. Print button and printed keepsake (one A4 page, js/site.js section 16) ---------- */

/* Discreet text link under the end section's RSVP button (only with a personal link) */
.boton-imprimir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  font-family: var(--fuente-2);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-2);
  cursor: pointer;
}

.boton-imprimir .ico {
  width: 18px;
  height: 18px;
}

.boton-imprimir:hover,
.boton-imprimir:focus-visible {
  color: var(--color-1);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.boton-imprimir[hidden] {
  display: none;
}

/* Over the end section's photo */
.boton-imprimir-claro,
.boton-imprimir-claro:hover,
.boton-imprimir-claro:focus-visible {
  color: var(--color-claro);
}

.impresion {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    height: auto;
    min-height: 0;
    margin: 0;
    background: #fff;
  }

  /* Only the keepsake is printed (sections, pop-ups, music, photo mirrors… are all left out) */
  body > *:not(.impresion) {
    display: none !important;
  }

  .impresion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 210mm;
    height: 296mm;
    padding: 40mm 18mm;
    overflow: hidden;
    background:
      url('/img/decor/lineas.svg?v=2') center top / 210mm auto no-repeat,
      url('/img/decor/lineas.svg?v=2') center bottom / 210mm auto no-repeat,
      var(--color-4);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: var(--color-1);
    text-align: center;
  }

  .impresion-fecha,
  .impresion-lugar,
  .impresion-para {
    font-family: var(--fuente-2);
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  .impresion-fecha,
  .impresion-lugar {
    font-size: 18px;
    color: var(--color-2);
  }

  .impresion-nombres {
    margin: 18px 0 14px;
    font-family: var(--fuente-1);
    font-size: 86px;
    line-height: 1.1;
  }

  .impresion-nombres span {
    margin: 0 .12em 0 .25em;
    opacity: .5;
  }

  .impresion-divisor {
    width: 50px;
    height: 1px;
    margin: 44px auto;
    background-color: var(--color-2);
  }

  .impresion-para {
    font-size: 13px;
    color: var(--color-2);
  }

  .impresion-invitados {
    margin: 12px 0 6px;
    font-family: var(--fuente-2);
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .impresion-acompanantes {
    margin: 0;
    font-family: var(--fuente-2);
    font-size: 15px;
    font-style: italic;
    color: var(--color-6);
  }

  .impresion-mensaje {
    max-width: 140mm;
    margin: 34px auto 0;
    font-family: var(--fuente-1);
    font-size: 32px;
    line-height: 1.4;
  }

  /* When | Where, side by side like the Celebration cards */
  .impresion-datos {
    display: flex;
    justify-content: center;
    margin-top: 48px;
  }

  .impresion-datos > div {
    flex: 0 1 87mm;
    padding: 0 6mm;
  }

  .impresion-datos > div + div {
    border-left: 1px solid var(--color-3);
  }

  .impresion-etiqueta {
    display: block;
    margin-bottom: 8px;
    font-family: var(--fuente-2);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-2);
  }

  .impresion-dato {
    margin: 0;
    font-family: var(--fuente-2);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .impresion-detalle {
    margin: 4px 0 0;
    font-family: var(--fuente-2);
    font-size: 13px;
    font-style: italic;
    color: var(--color-6);
  }
}


/* Gifts pop-up: BIC under the "Copy IBAN" button */
.iban-bic-label {
  margin-top: 26px;
}

.iban-bic {
  letter-spacing: 3px;
}


/* ---------- 15. Without a personal link: only the cover (js/guest.js adds html.sin-invitacion) ---------- */

/* The rest of the invitation (schedule, venue, photos, IBAN…) is only for guests with their link.
   This only hides it on screen: the content is still in the page's files */
.sin-invitacion .seccion:not(#inicio),
.sin-invitacion .flecha-continuar {
  display: none !important;
}