:root{
  --base: #fdfcfa;
  --alt:  #f4efe8;
  --text: #2f2623;
  --muted:#6f6158;
  --accent:#8b6b52;
  --accent2:#b08968;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

html, body{
  width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

body{
  margin:0;
  background: var(--base);
  color: var(--text);
  font-family: "Cormorant Garamond", serif;
  text-align: center; /* TODO centrado por defecto */
}

/* Landing */
/*.landing{
  height: 92vh;
  min-height: 560px;
  background-image: url("assets/landing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
*/
/* Landing */
.landing{
  position: relative;
  height: 92vh;
  min-height: 560px;
  background-image: url("assets/landing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scroll-hint{
  background: var(--base);
  padding: 20px 0 28px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  width: 100%;
}

.scroll-gif{
  width: 48px;
  max-width: 48px;
  height: auto;
  opacity: .85;
  transition: opacity .3s ease;
}

.scroll-gif:hover{
  opacity: 1;
}

/* Bandas alternadas */
.band{ width:100%; padding: 64px 0; }
.band-a{ background: var(--base); }
.band-b{ background: var(--alt); }

.container{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 0 18px;
}

/* “¡Nos casamos!” vs fecha -> estilos alternados */
.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-size: 1rem;
}

.headline{
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 5.6vw, 62px);
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

.lead{
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

.actions{
  margin-top: 26px;
  display:flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  border: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.btn-ghost{
  background: rgba(0,0,0,.06);
  color: var(--text);
}

/* Temporizador con “flip” suave */
.countdown{ margin-top: 28px; }
.timer{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.unit{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  min-width: 90px;
}

.digits{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 900;
  font-size: clamp(34px, 7vw, 64px);
  color: var(--accent);
  line-height: 1;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(47,38,35,.10);
  position: relative;
  perspective: 600px;
}

/* animación flip */
.digits.flip{
  animation: flip 360ms ease;
}
@keyframes flip{
  0%{ transform: rotateX(0deg); }
  49%{ transform: rotateX(-90deg); }
  50%{ transform: rotateX(90deg); }
  100%{ transform: rotateX(0deg); }
}

.unit-label{
  font-family: ui-sans-serif, system-ui;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--muted);
  font-size: .78rem;
}

.sep{
  font-family: ui-sans-serif, system-ui;
  font-weight: 900;
  color: rgba(47,38,35,.35);
  font-size: clamp(18px, 4vw, 34px);
  transform: translateY(-8px);
}

/* Split foto + texto (todo centrado) */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.split.reverse .photo{ order: 2; }
.split.reverse .copy{ order: 1; }

.photo{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
}
.photo img{
  width:100%;
  height: min(520px, 60vh);
  object-fit: cover;
  display:block;
  border-radius: 18px;
}

.copy{ padding: 6px 0; }

.quote{
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 14px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.4;
}

.text{
  font-size: clamp(18px, 2.8vw, 24px);
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

.section-title{
  font-family: "Playfair Display", serif;
  letter-spacing: .08em;
  font-size: clamp(22px, 3.6vw, 34px);
  margin: 0 0 26px;
}

/* Itinerario */
.it-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  margin: 0 auto;
}
.it-icon{
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.it-name{
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 4.2vw, 42px);
}
.it-time{
  font-family: ui-sans-serif, system-ui;
  font-weight: 900;
  color: var(--accent);
  font-size: clamp(22px, 3.6vw, 32px);
}
.it-sep{
  width: min(420px, 70%);
  height: 1px;
  background: rgba(47,38,35,.18);
  margin: 28px auto;
}
.spacer{ height: 22px; }

/* Dress code */
.dress{ margin-top: 14px; }
.dress-title{
  font-family: ui-sans-serif, system-ui;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 8px;
}
.dress-main{
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 4vw, 40px);
  margin-bottom: 10px;
}
.dress-sub{
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--muted);
}

/* Luna de miel icon */
.moon-icon{
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin: 0 auto 18px;
  display:block;
}

/* Regalo/luna de miel + copiar sin azul */
.gift{
  margin-top: 18px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  align-items:center;
}

.gift-row{
  width: min(640px, 100%);
  display:grid;
  grid-template-columns: 90px 1fr 120px;
  gap: 12px;
  align-items:center;
  padding: 14px 12px;
  border-top: 1px solid rgba(47,38,35,.12);
  border-bottom: 1px solid rgba(47,38,35,.12);
}

.gift-label{
  font-family: ui-sans-serif, system-ui;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 0.85rem;
}
.gift-value{
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight: 700;
  word-break: break-all;
  overflow-wrap: anywhere; /* clave para que NO ensanche en mobile */
}

.copybtn{
  font-family: ui-sans-serif, system-ui;
  background: rgba(139,107,82,.14);
  color: var(--text);
  border: 1px solid rgba(47,38,35,.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  text-decoration: none;
  appearance: none;
}
.copybtn:hover{ background: rgba(139,107,82,.20); }
.copybtn:active{ transform: translateY(1px); }
.copybtn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(176,137,104,.22); }

/* Footer */
.footer{ padding: 56px 0 90px; }
.footer-text{
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 3.4vw, 34px);
  margin: 0;
  color: var(--text);
}

/* Mobile */
@media (max-width: 860px){
  .landing{ height: 78vh; min-height: 520px; }
  .band{ padding: 52px 0; }

  .split{ grid-template-columns: 1fr; gap: 14px; }
  .split.reverse .photo, .split.reverse .copy{ order: initial; }

  .photo img{ height: 420px; }

  .gift-row{
    grid-template-columns: 1fr;
    gap: 10px;
    text-align:center;
  }

  .timer{ gap: 10px; }
  .unit{ min-width: 78px; }
  .sep{ transform: translateY(-6px); }
}

.music-btn{
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));

  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(47,38,35,.14);
  background: rgba(139,107,82,.92);
  color: #fff;
  font-size: 20px;

  z-index: 2147483647;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.music-btn.playing{
  background: rgba(47,38,35,.92);
}