/* ============================================================
   INE & GALO — Hoja de estilos
   Organizada por secciones para editar fácil:
   0. Variables y base
   1. Navbar
   2. Manchas de acuarela (blobs)
   3. Sección Hero
   4. Sección ¡Nos casamos! (collage 2×2)
   5. Sección RSVP + Info del evento
   6. Páginas placeholder (nosotros / regalos)
   7. Footer
   8. Responsive (tablet / celular)
   ============================================================ */

/* ============================================================
   0. VARIABLES Y BASE
   ============================================================ */
:root {
  /* Paleta cálida tipo acuarela */
  --crema:       #FAF7F2;
  --crema-2:     #F3EBE0;
  --marron:      #7D5A50;
  --marron-soft: #9A7C70;
  --coral:       #C85A50;
  --coral-dark:  #B14A40;
  --durazno:     #EBC4A8;
  --rosa:        #F4DCDC;
  --rosa-input:  #F8E9E9;
  --texto:       #5E4A3E;

  /* Tipografías */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Montserrat", system-ui, sans-serif;

  /* Altura de la navbar (para compensar el scroll) */
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--texto);
  background: var(--crema);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* nunca scroll horizontal */
}

img { display: block; max-width: 100%; }

/* ============================================================
   1. NAVBAR (fija arriba, centrada)
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(125, 90, 80, 0.12);
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
}
.nav-link {
  font-family: var(--serif);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--marron);
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--coral); }
.nav-link.is-active {
  color: var(--coral);
  border-bottom: 1px solid var(--coral);
  padding-bottom: 2px;
}
.nav-sep { color: var(--marron-soft); opacity: 0.6; }

/* ============================================================
   2. MANCHAS DE ACUARELA (blobs difuminados de fondo)
   ============================================================ */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.blob--sage  { width: 30vw; height: 30vw; background: #9DAA85; top: -6vw;  left: 8vw; }
.blob--blue  { width: 26vw; height: 26vw; background: #A9C0D4; top: -4vw;  left: 34vw; }
.blob--peach { width: 34vw; height: 34vw; background: #EBC4A8; top: -8vw;  right: 2vw; }
.blob--soft  { opacity: 0.30; filter: blur(60px); }

/* ============================================================
   3. SECCIÓN HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 2vh) 5vw 4vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Pinceladas de acuarela colgando desde el borde superior */
.hero-strokes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4vw;
}

/* --- Imágenes del hero (acuarela + foto real superpuesta) --- */
.hero-images {
  position: relative;
  display: flex;
  justify-content: flex-start;   /* imágenes alineadas a la izquierda */
  align-items: flex-end;
  /* La altura se limita por viewport: nunca más alto que la pantalla */
  height: min(78vh, 620px);
}
.hero-img {
  /* contain = la imagen entra entera, nunca se recorta */
  object-fit: contain;
  border-radius: 4px;
}
.hero-img--art {
  height: 100%;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 10px 24px rgba(125, 90, 80, 0.18));
}
.hero-img--photo {
  position: absolute;
  /* alineada al borde derecho de la acuarela (que ahora está a la izquierda) */
  left: 62%;
  bottom: -2%;
  height: 46%;       /* ~20% más grande que antes (38% -> 46%) */
  width: auto;
  max-width: 50%;
  border: 5px solid #fff;
  box-shadow: 0 8px 20px rgba(125, 90, 80, 0.25);
}

/* --- Texto del hero (nombres + fecha) --- */
.hero-text { text-align: center; }
.hero-names {
  font-family: var(--serif);
  color: var(--marron);
  margin: 0;
  line-height: 1.02;
  font-weight: 500;
}
.hero-names .name {
  display: block;
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  letter-spacing: 0.04em;
}
.hero-names .amp {
  display: block;
  font-style: italic;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--marron-soft);
  margin: 0.1em 0;
}
.hero-date {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--texto);
  margin: 1.4rem 0 0.3rem;
}
.hero-place {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 2vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--marron-soft);
  margin: 0;
}

/* ============================================================
   4. SECCIÓN ¡NOS CASAMOS!  (texto + collage 2×2)
   ------------------------------------------------------------
   REGLA CLAVE para que el collage SIEMPRE entre en pantalla:
   - El alto de cada imagen se mide en vh (relativo a la pantalla),
     por lo que a cualquier zoom el bloque sigue cabiendo.
   - Acuarelas (.art): object-fit contain + caja ajustada a la
     ilustración -> nunca se recortan ni dejan aire a los lados.
   - Fotos reales (.frame--photo img): object-fit cover dentro de
     un marco prolijo -> pueden recortarse para combinar.
   ============================================================ */
.nos-casamos {
  position: relative;
  padding: 6vh 5vw;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  overflow: hidden;
}
/* Mancha durazno suave cubriendo la mitad izquierda (como la referencia) */
.nos-casamos .blob--peach {
  width: 55vw;
  height: 120%;
  border-radius: 45%;
  top: -10%;
  left: -18vw;
  right: auto;
  background: #EBC4A8;
  opacity: 0.28;
  filter: blur(70px);
}

.nc-grid {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 4vw;
}

/* --- Texto --- */
.nc-text { max-width: 460px; }
.nc-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--marron);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 1.2rem;
}
.nc-text p {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  margin: 0 0 1rem;
}

/* --- Collage (estilo referencia: acuarela GRANDE + foto real chica,
   en pareja, con leve superposición/desfasaje y borde de papel visible) --- */
.collage {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 26px);
  align-items: center;
  /* Tope global: el collage nunca supera el alto de pantalla */
  max-height: 92vh;
}
.collage-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* foto real arriba; la acuarela puede bajar */
  width: 100%;
}

/* --rowH = alto de la ACUARELA (la pieza grande). En vh => anti-zoom.
   Top = verticales (más altas) ; Bottom = horizontales (más bajas). */
.collage-row--top    { --rowH: min(34vh, 300px); }
.collage-row--bottom { --rowH: min(34vh, 300px); }

/* Acuarelas: pieza grande. Tamaño según proporción natural, contain,
   sin recorte y con su borde de papel a la vista. Va por encima. */
.art {
  height: var(--rowH);
  width: auto;
  max-width: 56%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Fotos reales: pieza más chica (~78% del alto de la acuarela),
   marco blanco prolijo; object-fit cover recorta dentro del marco. */
.frame--photo {
  height: calc(var(--rowH) * 0.78);
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(125, 90, 80, 0.18);
  flex: 0 0 auto;
  max-width: 42%;
  position: relative;
  z-index: 1;
}
.frame--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FILA DE ARRIBA: como estaba antes -> foto real y acuarela del MISMO alto,
   lado a lado, centradas, sin superposición ni desfasaje. */
.collage-row--top { align-items: center; gap: clamp(8px, 1.4vw, 16px); }
.collage-row--top .frame--photo { height: var(--rowH); max-width: 48%; }
.collage-row--top .art { max-width: 48%; margin: 0; }

/* FILA DE ABAJO: efecto en capas de la referencia (acuarela grande,
   superpuesta y desplazada hacia abajo respecto de la foto real). */
.collage-row--bottom .art { margin-left: clamp(-26px, -3.5vw, -14px); margin-top: clamp(20px, 5vh, 56px); }
.collage-row--bottom .frame--photo { margin-top: clamp(0px, 0.5vh, 6px); }
/* Aspecto de los marcos de foto (acompaña a su acuarela par) */
.frame--portrait  { aspect-ratio: 3 / 4; }   /* fila de arriba (verticales) */
.frame--landscape { aspect-ratio: 3 / 2; }   /* fila de abajo (horizontales) */

/* ============================================================
   5. SECCIÓN RSVP + INFO DEL EVENTO
   ============================================================ */
.rsvp {
  padding: 7vh 5vw;
  background: var(--crema);
}
.rsvp-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* formulario más compacto */
  gap: 4vw;
  align-items: start;
}

/* --- Formulario (compacto) --- */
.rsvp-form-wrap {
  background: #fff;
  border: 1px solid rgba(125, 90, 80, 0.12);
  border-radius: 10px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(125, 90, 80, 0.10);
  max-width: 420px;       /* tope de ancho del formulario */
}
.field { display: block; margin-bottom: 0.75rem; }
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--marron);
  margin-bottom: 0.25rem;
}
.rsvp-form input[type="text"],
.rsvp-form select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--texto);
  background: var(--rosa-input);
  border: 1px solid rgba(200, 90, 80, 0.18);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease;
}
.rsvp-form input:focus,
.rsvp-form select:focus { border-color: var(--coral); }

/* Selector de etiquetas (Confirmo / No puedo) */
.tag-select { display: flex; flex-direction: column; gap: 0.4rem; }
.tag {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--marron);
  background: var(--rosa-input);
  border: 1px solid rgba(200, 90, 80, 0.18);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tag:hover { border-color: var(--coral); }
.tag.is-selected {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

.form-error { color: var(--coral-dark); font-size: 0.85rem; margin: 0 0 0.8rem; }

.btn-enviar {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--coral);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-enviar:hover { background: var(--coral-dark); }

/* Mensaje de éxito */
.rsvp-success {
  text-align: center;
  padding: 2rem 1rem;
}
.rsvp-success h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--marron);
  margin: 0 0 0.5rem;
}

/* --- Info del evento (columna derecha) --- */
.event-info { text-align: center; }
.event-block { padding: 0; }
.event-img {
  width: min(220px, 70%);
  margin: 0 auto 0.4rem;
  border-radius: 6px;
}
.event-block:last-child .event-img { margin: 0.4rem auto 0; }
.event-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--marron);
  margin: 0.1rem 0;
}
.event-time {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--marron);
  margin: 0.1rem 0;
}
.event-place { font-weight: 500; margin: 0.2rem 0 0.05rem; }
.event-addr  { font-size: 0.9rem; color: var(--marron-soft); margin: 0; }
.event-divider {
  width: 1px;
  height: 22px;
  margin: 0.5rem auto;
  background-image: linear-gradient(var(--marron-soft) 40%, transparent 40%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  opacity: 0.6;
}

/* ============================================================
   6. PÁGINAS PLACEHOLDER (nosotros / regalos)
   ============================================================ */
.placeholder {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--nav-h) 5vw 5vw;
}
.placeholder .eyebrow {
  font-family: var(--serif);
  letter-spacing: 0.3em;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--marron-soft);
  margin-bottom: 1rem;
}
.placeholder h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--marron);
  margin: 0 0 1rem;
}
.placeholder .soon {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: var(--marron-soft);
  margin-bottom: 2rem;
}
.placeholder .back-link {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--coral);
  text-decoration: none;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 2px;
}
.placeholder .back-link:hover { color: var(--coral-dark); }

/* ============================================================
   6b. PÁGINA REGALOS
   ============================================================ */
.regalos {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 4vh) 6vw 6vh;
}
.regalos-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--marron);
  margin: 0 0 3vh;
}

/* Manchas de acuarela (decorativas) */
.regalos-blob--tr  { width: 26vw; height: 26vw; background: #9DAA85; top: -4vw;  right: 6vw;  opacity: 0.28; }
.regalos-blob--tr2 { width: 30vw; height: 30vw; background: #EBC4A8; top: -2vw;  right: -6vw; opacity: 0.30; }
.regalos-blob--bl  { width: 34vw; height: 34vw; background: #EBC4A8; bottom: -10vw; left: -8vw; top: auto; opacity: 0.26; }

/* Layout en dos columnas: texto + imagen */
.regalos-grid {
  position: relative;
  z-index: 1;
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 5vw;
  align-items: center;
}
.regalos-text {
  font-family: var(--serif);
  color: var(--texto);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
}
.regalos-text p { margin: 0 0 1.2rem; }
.regalos-thanks {
  text-align: center;
  font-weight: 600;
  color: var(--marron);
  margin: 1.6rem 0 2.2rem !important;
}
.bank { margin: 0 0 1.4rem; }
.bank p { margin: 0.1rem 0; }
.bank-title { font-weight: 600; color: var(--marron); }
.bank strong { font-weight: 600; }

/* Imagen acuarela: entra siempre completa (contain), con borde de papel */
.regalos-img-wrap { display: flex; justify-content: center; }
.regalos-img {
  width: 100%;
  max-width: 100%;
  max-height: 70vh;        /* nunca más alta que la pantalla */
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(125, 90, 80, 0.18);
}

.regalos-back {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 4vh;
}

/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer {
  text-align: center;
  padding: 2.5vh 5vw;
  background: var(--crema-2);
  color: var(--marron-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */

/* --- Tablet --- */
@media (max-width: 900px) {
  .rsvp-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .event-divider { height: 40px; }

  /* Regalos: una columna (texto arriba, imagen abajo) */
  .regalos-grid { grid-template-columns: 1fr; gap: 3rem; }
  .regalos-text { text-align: center; max-width: 560px; margin: 0 auto; }
  .regalos-img { max-height: 60vh; }
}

/* --- Celular --- */
@media (max-width: 680px) {
  :root { --nav-h: 56px; }

  /* Hero: una columna, imágenes arriba y texto debajo */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 4vh);
    padding-bottom: 5vh;
  }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  /* En celular: título/texto arriba, imagen abajo */
  .hero-text   { order: 1; }
  .hero-images { order: 2; height: min(55vh, 440px); }
  .hero-img--photo { height: 34%; max-width: 46%; }

  /* Nos casamos: texto arriba, collage abajo (sigue 2×2) */
  .nc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nc-text { max-width: none; text-align: center; margin: 0 auto; }
  .collage { max-height: none; }
  /* Filas un poco más bajas para que entren cómodas en el celular */
  .collage-row--top    { --rowH: min(28vh, 240px); }
  .collage-row--bottom { --rowH: min(24vh, 200px); }
}

/* --- Celular muy angosto --- */
@media (max-width: 380px) {
  .collage-row--top    { --rowH: 24vh; }
  .collage-row--bottom { --rowH: 21vh; }
  .nav-link { letter-spacing: 0.1em; }
}

/* --- Pantallas bajas (poco alto): proteger el collage --- */
@media (max-height: 700px) and (min-width: 681px) {
  .collage-row--top    { --rowH: 32vh; }
  .collage-row--bottom { --rowH: 28vh; }
  .hero-images { height: 70vh; }
}