/* ============================================================
   COLORES Y FUENTES — cambia aquí el estilo de toda la página
   ============================================================ */
:root {
  --fondo: #f4f0e0;        /* crema / marfil (igual al crema de los patrones) */
  --texto: #7a6a5a;        /* taupe de títulos */
  --texto-suave: #4f463d;  /* taupe oscuro para párrafos */
  --oliva: #5c6b2e;        /* verde oliva: botones */
  --taupe-claro: #c4b5a2;  /* líneas y bordes */
  --franja: #4a5427;       /* barra oliva oscura de la galería */
  --fucsia: #c2306f;       /* toque de color: menú activo, hover */
  --naranja: #d8702f;      /* toque de color: separadores, detalles */
  --f-titulo: "Italiana", "Bodoni Moda", serif;
  --f-italica: "Playfair Display", serif;
  --f-menu: "Jost", sans-serif;
  --f-script: "Pinyon Script", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto-suave);
  font-family: var(--f-menu);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- Encabezado ---------- */
header { text-align: center; padding: 36px 16px 0; }
.monograma { display: inline-block; }
.monograma img { height: 96px; width: auto; display: block; }
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 28px 0 36px;
}
nav a {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color .2s;
}
nav a:hover, nav a.activo { color: var(--fucsia); }

/* ---------- Hero con fondo de letras JG ---------- */
.hero {
  position: relative;
  padding: 64px 16px;
  overflow: hidden;
}
/* Patrones sin fondo, sobre el crema de la página */
.hero::before, .portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/fondo-letras-sin-fondo.webp") center / cover no-repeat;
}
.hero-foto {
  position: relative;
  z-index: 1;
  max-width: 534px;
  margin: 0 auto;
  aspect-ratio: 534 / 400;
}
.hero-foto img, .foto-vacia {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.foto-vacia {
  background: linear-gradient(135deg, #cdbfae, #9d8c78);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Nombres ---------- */
.nombres { text-align: center; padding: 64px 16px 110px; }
.nombres h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(34px, 8vw, 60px);
  color: var(--texto);
  letter-spacing: .01em;
  line-height: 1.1;
}
.nombres h1 .y {
  font-family: var(--f-script);
  font-size: 1.3em;
  margin: 0 .02em;
  line-height: 0;
}
.nombres .fecha {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(26px, 5.5vw, 36px);
  color: var(--texto);
  margin-top: 8px;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
}
.nombres .gracias {
  max-width: 380px;
  margin: 26px auto 0;
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto-suave);
}
.nombres .gracias .raya { color: var(--naranja); }

/* ---------- Galería ---------- */
.galeria {
  background: var(--franja);
  padding: 30px 0;
}
.galeria-fotos {
  display: grid;
  grid-template-columns: 1fr 2.24fr;
  max-width: 1140px;
  margin: 0 auto;
  height: clamp(260px, 52vw, 527px);
}
.galeria-fotos > * { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Itinerario ---------- */
.itinerario { text-align: center; padding: 70px 16px 60px; }
.mascota { width: 110px; height: auto; margin: 0 auto 30px; display: block; }
.evento h2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 32px;
  color: var(--texto);
  letter-spacing: .03em;
}
.evento .dia {
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto);
  margin-top: 4px;
}
.evento .detalle {
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 13px;
  margin-top: 28px;
}
.separador { width: 130px; height: 1px; background: var(--naranja); margin: 50px auto; border: 0; }
.momento { margin-top: 32px; }
.momento h3 {
  font-family: var(--f-italica);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--texto);
}
.momento p {
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
}
.boton {
  display: inline-block;
  margin-top: 22px;
  background: var(--oliva);
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 28px;
  transition: background .2s;
}
.boton:hover { background: var(--fucsia); }

footer {
  text-align: center;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe-claro);
  padding: 40px 16px 50px;
}

@media (max-width: 600px) {
  .galeria-fotos { grid-template-columns: 1fr; height: auto; }
  .galeria-fotos > * { aspect-ratio: 4 / 3; height: auto; }
}

/* ============================================================
   PÁGINAS INTERIORES (Información, Qué hacer, Regalos, RSVP)
   ============================================================ */
.portada {
  position: relative;
  padding: 70px 16px;
  margin-top: 10px;
}
.portada > .foto-vacia, .portada > img {
  max-width: 330px;
  aspect-ratio: 3 / 4;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  border: 8px solid var(--fondo);
  position: relative;
  z-index: 1;
}
.portada::before { background-image: url("img/fondo-celosia-sin-fondo.webp"); }

.titulo-pagina {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 46px);
  color: var(--texto);
  letter-spacing: .04em;
  text-align: center;
  margin: 56px 16px 10px;
}
.contenido { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; text-align: center; }
.bloque { margin-top: 64px; }
.bloque h2 {
  font-family: var(--f-menu);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: 18px;
}
.bloque p, .lista li {
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 15px;
  line-height: 1.8;
}
.lista { list-style: none; }
.lista a { text-underline-offset: 3px; }
.lista a:hover { color: var(--fucsia); }

/* RSVP */
.rsvp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 980px;
  margin: 40px auto 0;
  padding: 0 16px 60px;
  align-items: center;
}
.rsvp .foto-vacia { aspect-ratio: 3 / 4; height: auto; }
.formulario { display: flex; flex-direction: column; gap: 22px; text-align: left; }
.formulario label {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.formulario input, .formulario textarea, .formulario select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--taupe-claro);
  padding: 8px 2px;
  font: 15px var(--f-menu);
  color: var(--texto-suave);
  outline: none;
}
.formulario textarea { border: 1px solid var(--taupe-claro); min-height: 110px; resize: vertical; padding: 10px; }
.formulario input:focus, .formulario textarea:focus { border-color: var(--oliva); }
.opciones { display: flex; gap: 12px; }
.opciones label { margin: 0; flex: 1; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; width: 0; }
.opciones span {
  display: block;
  text-align: center;
  border: 1px solid var(--taupe-claro);
  padding: 12px 6px;
  transition: background .2s, color .2s;
}
.opciones input:checked + span { background: var(--oliva); color: #fff; border-color: var(--oliva); }
.opciones input:focus-visible + span { outline: 2px solid var(--oliva); outline-offset: 2px; }
.formulario button { border: 0; cursor: pointer; align-self: flex-start; font-family: var(--f-menu); }
.gracias-rsvp {
  display: none;
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 18px;
  color: var(--texto);
}

@media (max-width: 600px) {
  .rsvp { grid-template-columns: 1fr; }
}

/* Cuenta regresiva (página principal) */
.cuenta-regresiva {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 40px);
  margin: 34px auto 0;
}
.cuenta-regresiva div { min-width: 64px; }
.cuenta-regresiva span {
  display: block;
  font-family: var(--f-titulo);
  font-size: clamp(34px, 7vw, 52px);
  color: var(--oliva);
  line-height: 1;
}
.cuenta-regresiva small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto);
}
.cr-final { font-family: var(--f-italica); font-style: italic; font-size: 22px; color: var(--fucsia); }

/* Nuestra historia: texto y fotos alternados */
.historia { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 70px; }
.historia .foto-vacia, .historia img { aspect-ratio: 3 / 4; height: auto; }
.historia .bloque { margin-top: 0; }
.historia .cuando {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .historia { grid-template-columns: 1fr; gap: 24px; }
  .historia .foto-vacia, .historia img { order: -1; }
}
.aviso-rsvp {
  text-align: center;
  font-family: var(--f-italica);
  font-style: italic;
  font-size: 15px;
  padding: 0 16px;
}

/* Mesa de regalos: datos bancarios */
.cuenta {
  display: inline-block;
  border: 1px solid var(--taupe-claro);
  padding: 30px 50px;
  margin-top: 20px;
}
.cuenta p { font-style: normal; font-family: var(--f-menu); letter-spacing: .06em; line-height: 1.9; }
.cuenta .numero { font-size: 20px; color: var(--oliva); letter-spacing: .12em; }
.copiar {
  margin-top: 14px;
  background: none;
  border: 1px solid var(--oliva);
  color: var(--oliva);
  font: 11px var(--f-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.copiar:hover { background: var(--oliva); color: #fff; }
@media (max-width: 600px) { .cuenta { padding: 24px 20px; } }

/* ============================================================
   MENÚ HAMBURGUESA (solo en celular)
   ============================================================ */
header { position: relative; }
.menu-boton {
  display: none;
  position: absolute;
  top: 20px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 11px 9px;
  z-index: 20;
}
.menu-boton span {
  display: block;
  height: 1.5px;
  background: var(--texto);
  margin-bottom: 7px;
  transition: transform .3s, opacity .3s;
}
.menu-boton span:last-child { margin-bottom: 0; }
/* Las 3 líneas se convierten en una X al abrir */
.menu-boton.abierto span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu-boton.abierto span:nth-child(2) { opacity: 0; }
.menu-boton.abierto span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 700px) {
  header { padding: 20px 16px 24px; text-align: left; }
  .monograma img { height: 70px; }
  .menu-boton { display: block; top: 33px; }  /* centrado con el logo */
  nav { text-align: center; }
  nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    margin: 16px 0 0;
  }
  nav.abierto ul { display: flex; }
  nav a { display: block; padding: 16px 0; font-size: 13px; }

  /* RSVP: el formulario primero y la foto abajo */
  .rsvp > .foto-vacia, .rsvp > img { order: 2; }
}

/* Celular: los nombres en una sola línea, más chicos para que quepan */
@media (max-width: 600px) {
  .nombres h1 { font-size: 7.6vw; white-space: nowrap; letter-spacing: 0; }
  .nombres h1 .y { font-size: 1.15em; }
  .nombres .fecha { font-size: 24px; }
}

/* Pase del invitado (RSVP) */
.pase {
  max-width: 380px;
  margin: 34px auto 0;
  padding: 22px 20px;
  border-top: 1px solid var(--taupe-claro);
  border-bottom: 1px solid var(--taupe-claro);
}
.pase-texto {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.pase-texto strong { color: var(--oliva); font-weight: 400; }
.rsvp-error { font: 14px var(--f-menu); color: var(--fucsia); }
.formulario button:disabled { opacity: .6; cursor: wait; }