/* ==========================================================================
   CHUCHU & VAVU — Guía de formato
   Color único: #72695a  |  Espaciado entre bloques: 34px  |  Todo centrado
   ========================================================================== */

/* Glacial Indifference NO está en Google Fonts.
   Poné los archivos en /fonts (ver nombres abajo). Mientras tanto usa Jost. */
@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Regular.woff2") format("woff2"),
       url("./fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color: #72695a;
  --white: #ffffff;
  /* TAMAÑOS FLUIDOS: en celular se achican un poco y en pantallas
     grandes llegan exactamente a los valores de la guía (21 / 70 / 34). */
  /*--fs-text: clamp(17px, 1.2vw + 12.5px, 21px);*/
  --fs-main: clamp(56px, 4vw + 41px, 70px);
  --gap: clamp(28px, 1.6vw + 22px, 34px);

  --font-title: "Cormorant Garamond", serif;
  --font-text: "Glacial Indifference", "Jost", sans-serif;
}

/* ---------- RESET ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--color);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }

i { color: inherit; }

/* ---------- BLOQUES (34px entre elementos) ---------- */

.hero,
.section,
.countdown-section,
.footer {
  width: min(100%, var(--page-w));
  margin: 0 auto;
  padding: 0 20px var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.hero { padding-top: var(--gap); }

.footer { padding-bottom: var(--gap); }

.container { display: contents; }

.text-block { display: flex; flex-direction: column; align-items: center; max-width: 480px; padding: 0 4px; }

.text-block p { margin: 0; text-wrap: balance; }

/* ---------- TIPOGRAFÍAS ---------- */

/* Títulos de sección: Cormorant Garamond 21, mayúsculas */
.eyebrow,
.section-eyebrow,
.btn {
  font-family: var(--font-title);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color);
}

/* Título principal: Cormorant Garamond 70, mayúsculas */
.hero-names {
  font-family: var(--font-title);
  font-size: var(--fs-main);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color);
}

/* "¡Nos casamos!" es texto general (Glacial 21, mayúsculas y minúsculas) */
.hero .eyebrow {
  font-family: var(--font-text);
  text-transform: none;
}

/* ---------- IMÁGENES ---------- */

.hero-image img   { width: clamp(230px, 62vw, 330px); }
.rings-image img { width: clamp(180px, 48vw, 280px); }  /* antes: 130px / 34vw / 190px */
.venue-image img  { width: clamp(260px, 72vw, 400px); }
.split-image img  { width: clamp(170px, 46vw, 260px); }
.gift-image img  { width: clamp(160px, 44vw, 240px); }  /* antes: 110px / 30vw / 160px */
.rings-image,
.gift-image {
  margin-block: calc(var(--gap) * -1); /* resta la mitad del gap arriba y abajo */
  padding: 0;
  line-height: 0; /* saca el hueco que deja el navegador debajo de las imágenes */
}

.rings-image img,
.gift-image img {
  margin: 0;
  padding: 0;
}
/* ---------- REPRODUCTOR ---------- */

.hero-music-line {
  position: relative;
  width: clamp(230px, 60vw, 320px);
  height: 2px;
  margin: 0 auto;
  background: var(--color);
}

.music-seek {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin: 0;
  background: #d9d5cd;
  border-radius: 2px;
  transform: translateY(-50%);
  outline: none;
  cursor: pointer;
}

.music-seek::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: transparent; }

.music-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--color);
  cursor: pointer;
}

.music-seek::-moz-range-track    { height: 2px; border-radius: 2px; background: #d9d5cd; }
.music-seek::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--color); }
.music-seek::-moz-range-thumb    { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--color); cursor: pointer; }

.hero-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  color: var(--color);
  font-size: clamp(16px, 0.8vw + 13px, 19px);
}

/* Botón con fondo #72695a → ícono blanco */
.hero-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 10vw, 54px);
  height: clamp(44px, 10vw, 54px);
  border-radius: 50%;
  background: var(--color);
  color: var(--white);
}

.hero-play-button i { margin-left: 2px; font-size: 17px; color: var(--white); }

/* ---------- FECHA ---------- */

.hero-date,
.footer-names,
.footer-date {
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color);
}

.hero-date-number {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr; /* día · mes · año */
  align-items: center;
  column-gap: 0.7em;
  width: clamp(220px, 60vw, 300px);

  font-family: var(--font-text);
  font-weight: 200;
}

.hero-date-number .date-day  { justify-self: end; }
.hero-date-number .date-year { justify-self: start; }

/* Punto centrado verticalmente */
.hero-date-number .date-sep {
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: currentColor; /* mismo color que el texto (#72695a) */
}
/* ---------- CUENTA REGRESIVA ---------- */

.countdown-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
}

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5em;
}

.countdown-item { display: flex; flex-direction: column; align-items: center; }

.countdown-number,
.countdown-label,
.countdown-sep,
.countdown-message {
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color);
}

.countdown-message[hidden],
.countdown[hidden] { display: none; }

/* ---------- BOTONES ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.7em;
  border-radius: 999px;
  background: var(--color);
  color: var(--white);
  transition: opacity 0.2s ease;
}

.btn:hover { opacity: 0.85; }

.btn i { display: none; }

/* ---------- VESTIMENTA / REGALOS ---------- */

.split-layout,
.venue-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
}

.split-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.gift-account { display: flex; flex-direction: column; align-items: center; }

.gift-account p,
.gift-account strong {
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1;
  color: var(--color);
}

/* ---------- FOOTER ---------- */

.footer { border: 0; }

.footer .container { display: flex; flex-direction: column; align-items: center; }

/* ---------- VOLVER ARRIBA ---------- */

.floating-btn {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color);
  color: var(--white);
}

.floating-btn[hidden] { display: none; }

.floating-btn i { color: var(--white); }

/* ---------- LIGHTBOX ---------- */

.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(60, 54, 45, 0.92);
}

.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  font-size: 18px;
}

.lightbox-close { top: 15px; right: 15px; }
.lightbox-prev  { left: 15px; }
.lightbox-next  { right: 15px; }

/* ---------- ACCESIBILIDAD ---------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 15px;
  z-index: 3000;
  padding: 8px 12px;
  color: var(--white);
  background: var(--color);
}

.skip-link:focus { top: 15px; }

.reveal { opacity: 1; }

/* ---------- RESPONSIVE ---------- */



@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}