/* =========================
   RESET + BASE
   ========================= */
/* Reset mínimo: quita márgenes y paddings por defecto, usa caja bordeada */
*{margin:0;padding:0;box-sizing:border-box;}
/* Raíz del documento: define alto, scroll suave y activa scroll-snap vertical global */
html{
  height:100%;                                /* asegura 100% de alto para hijos */
  scroll-behavior:smooth;                      /* animación suave en anclas */
  overflow-y:auto;                             /* habilita scroll vertical */
  scroll-snap-type:y mandatory;                /* snap vertical por secciones */
}
/* Cuerpo base: fuente y mínimo alto */
body{
  min-height:100%;                             /* cuerpo como mínimo del alto de la ventana */
  font-family:'Josefin Sans',sans-serif;       /* tipografía principal */
}



/* =========================
   HEADER (iniciales flotantes)
   ========================= */
/* Encabezado centrado arriba, absoluto para no empujar el layout */
header{
  position:absolute;top:20px;left:50%;         /* fija posición arriba y centrada */
  transform:translateX(-50%);                  /* corrige el 50% para centrar exacto */
  z-index:2;                                   /* por encima de fondos decorativos */
}
/* Estilo de las iniciales “M & D” */
.initials{
  font-size:1.2rem;letter-spacing:.5rem;color:#000; /* tracking amplio para look elegante */
  font-family:'The Seasons',serif;                  /* tipografía para títulos */
  margin-top: 2rem;
}



/* =========================
   SECCIONES (comunes)
   ========================= */
/* Cada sección es un “punto de snap” y ocupa una pantalla en desktop */
section{
  scroll-snap-align:start;                     /* engancha inicio de la sección al snap */
  width:100%;                                  /* ancho completo */
  height:100vh;                                /* 1 pantalla de alto en desktop */
}



/* =======================================================
   HERO
   ======================================================= */
/* Portada con textura de papel y contenido centrado */
.hero{
  background:#f5f1ee;                          /* color base cálido */
  display:grid;place-items:center;             /* centra contenido en ambos ejes */
  height:100vh;                                /* ocupa toda la pantalla (desktop) */
  padding:2rem 1rem;                           /* respiración interna */
  position:relative;isolation:isolate;         /* crea contexto de apilado propio */
}
/* Capa de textura papel superpuesta */
.hero::before{
  content:"";                                  /* pseudo-elemento vacío */
  position:absolute;inset:0;                   /* cubre toda la sección */
  background:url("Papel.png") repeat;          /* textura papel repetida */
  opacity:.25;mix-blend-mode:multiply;         /* integra con el color de fondo */
  pointer-events:none;z-index:0;               /* decorativo, no clickeable */
}
/* Contenedor del hero (pila vertical) */
.hero-container{
  position:relative;z-index:1;                 /* por encima de la textura */
  max-width:1200px;margin:0 auto;              /* limita ancho y centra */
  display:flex;flex-direction:column;          /* apila elementos */
  align-items:center;                          /* centra horizontalmente */
}

/* Título y subtítulo del hero */
.hero h1{
  font-family:'The Seasons',serif;             /* tipografía de títulos */
  font-size:clamp(2.4rem,8vw,4.6rem);          /* tamaño fluido responsive */
  font-weight:400;line-height:1.05;            /* grosor y altura de línea */
  margin:.25rem 0 .5rem;                       /* separación vertical */
  margin-top: 0rem;
  margin-bottom: 3rem;
}
.subtitle{ /* subtítulo reutilizable en varias secciones */
  font-size:1.5rem;margin-bottom:1rem;         /* tamaño y separación */
  font-family:'Josefin Sans',sans-serif;       /* tipografía de texto */
}
/* Línea de detalles (fecha) */
.details{
  display:flex;justify-content:center;gap:4rem;/* centra y separa ítems */
  font-size:1.1rem;margin-bottom:1rem;         /* tamaño y margen inferior */
}

/* Bloque: contador + reproductor */
.countdown-player{
  margin-top:7rem;                              /* distancia del título */
  display:flex;flex-direction:column;           /* apila contador y player */
  align-items:center;gap:1rem;                  /* centra y separa */
}
.countdown-container{text-align:center;}        /* centra textos del contador */
.countdown-title{font-size:1.1rem;font-weight:600;margin-bottom:.15rem;} /* texto “Solo quedan” */
/* Grid del contador (días/horas/min/seg) */
.countdown{
  display:flex;gap:1.25rem;justify-content:center;align-items:center; /* distribución */
  font-size:2.2rem;font-weight:700;             /* tamaño visible y énfasis */
}
.countdown div{display:flex;flex-direction:column;align-items:center;} /* apila número y etiqueta */
.countdown small{font-size:.9rem;color:#555;}   /* etiquetas más discretas */

/* Decoración en esquina superior izquierda del hero */
.hero-corner{
  position:absolute;left:0;top:0;z-index:0;     /* posiciona detrás del contenido */
  pointer-events:none;user-select:none;         /* no interactúa */
}
.hero-corner img{width:clamp(140px,28vw,400px);height:auto;display:block;} /* tamaño fluido */

/* Reproductor del hero (botón play) */
.hero-player{
  margin-top:3rem;display:flex;flex-direction:column; /* apila elementos del player */
  align-items:center;gap:.5rem;                        /* centra y separa */
}
.hero-player button#play{
  background:#000;color:#fff;border:none;border-radius:50%; /* botón circular negro */
  width:3.3rem;height:3.3rem;font-size:1.1rem;cursor:pointer;/* dimensiones e interactividad */
  transition:transform .2s;                               /* animación al hover */
}
.hero-player button#play:hover{transform:scale(1.08);}     /* efecto zoom suave */
.hero-player .play-btn{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;} /* fallback tamaño */
.hero-player-hint{
  font-size:clamp(14px,1.6vw,18px);color:#444;letter-spacing:.3px; /* tipografía orientativa */
  margin:0;text-align:center;opacity:.9;                            /* estilo ligero */
}

/* HERO: responsive (tablets/móviles) */
@media (max-width:1024px){
  section{height:auto;padding:2rem 1rem;}      /* secciones dejan de forzar 100vh */
  .hero{padding:28vh 1rem 0;}                  /* baja el contenido para no chocar con barra del navegador móvil */
  .hero h1{font-size:3rem;}                    /* título más pequeño */
  .subtitle{font-size:1.2rem;}                 /* subtítulo más pequeño */
  .countdown{font-size:1.9rem;gap:1rem;}       /* contador más compacto */
}
@media (max-width:480px){
  .hero{padding:26vh 1rem 0;}                  /* aún más espacio superior en pantallas muy pequeñas */
  .hero h1{font-size:1.9rem;}                  /* reduce título */
  .subtitle{font-size:1rem;}                   /* reduce subtítulo */
  .countdown{font-size:1.5rem;gap:.6rem;}      /* contador compacto */
  .countdown small{font-size:.8rem;}           /* etiquetas pequeñas */
}



/* =======================================================
   STORY (Galería + texto) + LIGHTBOX
   ======================================================= */
/* Sección historia con textura y dos columnas */
.story{
  background:#e4c5b6;padding:4rem 1rem;        /* color y respiración */
  position:relative;isolation:isolate;          /* capa para textura */
}
.story::before{
  content:"";position:absolute;inset:0;         /* cubre todo */
  background:url("Papel.png") repeat;           /* textura papel */
  opacity:.25;mix-blend-mode:multiply;          /* integra con color */
  pointer-events:none;z-index:0;                /* decorativa */
}
/* Contenedor a 2 columnas (galería + texto) */
.story-container{
  display:flex;align-items:center;gap:3rem;     /* coloca lado a lado y separa */
  max-width:1280px;margin:0 auto;               /* ancho máximo */
  height:calc(100vh - 8rem);                    /* ocupa casi 1 pantalla con padding */
  position:relative;z-index:1;                  /* por encima de la textura */
}

/* Carrusel básico con transición tipo “fade” */
.story-gallery{
  position:relative;flex:0 0 50%;               /* 50% del ancho */
  height:640px;margin-block:auto;               /* altura fija (desktop) y centrado vertical */
  align-self:center;overflow:hidden;border-radius:.9rem; /* recorte y esquinas */
  box-shadow:0 14px 34px rgba(0,0,0,.14);       /* sombra suave */
  isolation:isolate;background:#f0f0f0;         /* fondo mientras carga */
}
.story-gallery img{
  position:absolute;inset:0;width:100%;height:100%; /* las fotos ocupan todo el marco */
  object-fit:cover;object-position:center;          /* recorte agradable */
  opacity:0;transform:scale(1.05);                  /* estado inicial (oculta y ligera escala) */
  transition:opacity 900ms ease-in-out,transform 900ms ease-in-out; /* transición suave */
}
.story-gallery img.active{opacity:1;transform:scale(1);} /* imagen activa visible */

/* Flechas de navegación y “dots” del carrusel */
.sg-arrow{
  position:absolute;top:50%;transform:translateY(-50%); /* centradas verticalmente */
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center; /* botón circular */
  background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06); /* fondo translúcido */
  backdrop-filter:blur(4px);color:#111;cursor:pointer;z-index:2;     /* estilo general */
  transition:background .2s,transform .2s,opacity .2s;opacity:0;     /* aparece al hover (desktop) */
}
.sg-prev{left:12px;}                               /* flecha izquierda */
.sg-next{right:12px;}                              /* flecha derecha */
.story-gallery:hover .sg-arrow{opacity:1;}         /* muestra flechas al hover */
.sg-arrow:hover{background:rgba(255,255,255,.95);transform:translateY(-50%) scale(1.06);} /* feedback hover */
.sg-dots{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%); /* centrado abajo */
  display:flex;gap:8px;z-index:2;                /* organiza puntos */
}
.sg-dots button{
  width:8px;height:8px;border-radius:999px;border:none;cursor:pointer;  /* punto básico */
  background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset; /* contraste leve */
  transition:transform .2s,background .2s,width .2s; /* animaciones */
}
.sg-dots button.active{width:18px;background:#fff;} /* punto activo “píldora” */

/* Columna de texto de la historia */
.story-text{flex:1 1 42%;align-self:center;}     /* ocupa ~42% restante */
.story-text h2{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,8vw,4.6rem); /* título fluido */
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;             /* estilo */
}
.story-text p{
  font-size:1.125rem;line-height:1.6;color:#333;margin-bottom:1.2rem; /* párrafo legible */
  font-family:'Josefin Sans',sans-serif;                              /* tipografía de lectura */
}

/* Lightbox (visor a pantalla) */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.8); /* superposición oscura */
  display:none;align-items:center;justify-content:center;z-index:999; /* oculto inicialmente */
}
.lightbox.open{display:flex;}                      /* clase que muestra el visor */
.lb-image{
  max-width:92vw;max-height:86vh;object-fit:contain;border-radius:.5rem; /* img adaptada */
  box-shadow:0 20px 60px rgba(0,0,0,.5);                                /* sombra */
}
.lb-close,.lb-arrow{
  position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.85); /* botones viz. */
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
}
.lb-close{top:18px;right:18px;}                     /* botón cerrar arriba-derecha */
.lb-arrow{top:50%;transform:translateY(-50%);width:52px;height:52px;} /* flechas laterales */
.lb-prev{left:22px;}                                /* flecha previa */
.lb-next{right:22px;}                               /* flecha siguiente */

/* STORY: responsive */
@media (max-width:1024px){
  .story-container{
    flex-direction:column;text-align:center;height:auto;padding-block:1.25rem; /* apila */
  }
  .story-text{ order:1; }                           /* texto primero en móvil */
  .story-gallery{
    order:2;width:100%;height:auto;aspect-ratio:4/3;max-height:420px;margin-block:1rem; /* carrusel flexible */
  }
  .story-gallery img{
    position:absolute;display:block;width:100%;height:100%; /* asegura cobertura */
    object-fit:cover;opacity:0;transform:none;              /* sin escala */
  }
  .story-gallery img.active{opacity:1;}                     /* muestra activa */
}
@media (max-width:480px){
  .story-gallery{aspect-ratio:1/1;max-height:360px;}        /* cuadrada en phones chicos */
  .sg-arrow{opacity:1;}                                     /* en táctil no hay hover: siempre visibles */
}
/* STORY: micro-ajustes pantallas muy pequeñas (≤380w o ≤740h) */
@media (max-width:380px), (max-height:740px){
  .story{ padding: 2rem 1rem 1.25rem; }                     /* reduce padding */
  .story-container{ gap: 1.25rem; }                         /* separa menos */
  .story-text h2{
    font-size: clamp(1.6rem, 8.4vw, 1.9rem);                /* título más compacto */
    line-height: 1.1;margin-bottom: .5rem;
  }
  .story-text p{
    font-size: clamp(.95rem, 3.6vw, 1rem);                  /* párrafo más pequeño */
    line-height: 1.55;max-width: 62ch;margin: 0 auto;padding-inline: 10px;
  }
  .story-gallery{
    height: clamp(230px, 46vh, 320px);                      /* limita alto del carrusel */
    margin-block: .75rem;
  }
  .sg-arrow{ opacity: 1; }                                  /* flechas visibles */
}



/* ===== WITNESS ===== */
/* Sección de ubicación con textura */
.witness{
  background:#f5f1ee;padding:4rem 1rem;position:relative;isolation:isolate; /* base */
}
.witness::before{
  content:"";
  position:absolute;inset:0;
  background:url("Papel.png") repeat;
  opacity:.25;mix-blend-mode:multiply;
  pointer-events:none;z-index:0;
}

/* Layout de dos columnas y estilos de texto */
.witness-container{ display: flex; align-items: center; gap: 4rem; max-width: 1200px; margin: 0 auto; } /* 2 col + ancho máx */
.witness-text{ flex: 1; text-align: center; }                            /* columna de textos */
.witness-text h2{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,8vw,4.6rem);     /* título fluido */
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;
}
.witness-text p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: .35rem;
}
.witness-text a.map-button {
  display: inline-flex;                                                   /* centra botón en col */
  margin-left: auto;
  margin-right: auto;
}
/* Botones de mapas */
.map-button{
  width: 200px;
  height: 44px;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  color: #000;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2rem;
  text-decoration: none;
  transition: background-color .2s ease, transform .15s ease, color .2s ease;
  margin-top: 0;
}
.map-button:hover{
  background: #000;
  color: #fff;
}
.map-button:active{ transform: scale(.98); }                               /* feedback táctil */
.witness-image{ flex: 0 0 440px; display: flex; justify-content: center; } /* columna imagen fija */
.witness-image img{ width: 100%; border-radius: .5rem; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,.1); } /* estilo img */

/* WITNESS — forzar a 1 pantalla en móvil */
@media (max-width: 980px){
  section.witness{
    height:100svh !important;      /* ocupa exactamente 1 viewport (móvil) */
    padding:14px 12px;              /* compacto */
  }

  .witness-container{
    display:grid;
    grid-template-rows: auto 1fr;   /* texto arriba, imagen toma el resto */
    gap:10px;
    text-align:center;
    max-width:680px;
    margin:0 auto;
  }

  /* Texto comprimido */
  .witness-text h2{
    font-size: clamp(1.6rem, 8.4vw, 1.9rem);
    line-height: 1.1;margin-bottom: .5rem;
  }
  .witness-text p{
    font-size:clamp(.9rem,3.2vw,1rem);
    line-height:1.45;
    margin:.15rem 0;
  }

  /* Botones en 1 línea y bajos */
  .map-buttons{
    display:flex; gap:.5rem; justify-content:center; align-items:center;
    margin:.35rem auto .6rem;
  }
  .map-button{
    flex:1 1 0; height:36px; padding-inline:.7rem; border-radius:999px;
    width:auto; margin-top:0; white-space:nowrap;
  }

  /* Imagen ocupa el espacio restante del viewport */
  .witness-image{ display:flex; align-items:center; justify-content:center; }
  .witness-image img{
    width:100%;
    height:100%;
    max-height:100%;                /* nunca excede el contenedor */
    object-fit:cover;
    border-radius:.5rem;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
  }
}

/* Perfil estricto 360×740 (y similares): recortes extra */
@media (max-width: 380px), (max-height: 740px){
  section.witness{ padding:12px 10px; }
  .witness-text h2{ font-size:clamp(1.45rem,6.2vw,1.8rem); }
  .map-button{ height:34px; padding-inline:.6rem; }
  .witness-text p{ margin:.12rem 0; }           /* reduce espacios entre párrafos */
}
@media (max-width: 980px){
  .witness-image img{
    max-height: 50vh;              /* limita la imagen para que quepa todo */
  }
}

@media (max-width:380px), (max-height:740px){
  .witness-image img{
    max-height: 40vh;              /* aún más pequeña en pantallas muy cortas */
  }
}



/* =======================================================
   REGALO (dos columnas + figura central de vestimenta)
   ======================================================= */
/* Contenedor principal de la sección Regalo/Dress code */
.detalles-regalo{
  display:flex;flex-wrap:wrap;min-height:100vh; /* dos columnas (desktop) */
  position:relative;isolation:isolate;          /* capa para textura */
}
/* Columna base (izquierda/derecha) */
.detalles-col{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; /* centra contenido */
  padding:3rem 2rem;position:relative;isolation:isolate; /* espacio interno + capa propia */
}
/* Columna izquierda (mensaje) */
.detalles-col.izquierda{
  background:#e4c5b6;text-align:center;        /* mismo tono arena */
}
/* Textura papel sobre ambas columnas */
.detalles-col.izquierda::before,
.detalles-col.derecha::before{
  content:"";position:absolute;inset:0;background:url("Papel.png") repeat; /* textura */
  opacity:.25;mix-blend-mode:multiply;pointer-events:none;z-index:0;        /* integración y no clickeable */
}
/* Columna derecha (dress code) */
.detalles-col.derecha{background:#e4c5b6;text-align:center;} /* base arena (se complementa más abajo) */

/* (Posibles utilitarios de la izquierda) */
.titulo-bloque{                                  /* ⚠️ actualmente no usado: ver nota al final */
  font-size:2.2rem;margin-bottom:.5rem;font-family:'The Seasons',serif;
}
.imagen-con-decoracion{position:relative;margin-top:2rem;} /* envoltorio para imagen + hoja */
.imagen-con-decoracion img:first-child{
  max-width:460px;border-radius:4px;filter:grayscale(100%); /* foto principal en grises */
}
.decoracion-hoja{position:absolute;bottom:-20px;left:-40px;width:80px;} /* hoja overlapped */
.firma{margin-top:.5rem;font-size:1.2rem;font-style:italic;font-family:'Josefin Sans',sans-serif;} /* ⚠️ no usada hoy */
.subtitle{text-align:center;} /* reutiliza subtítulo centrado en izquierda */

/* Compactación y centrado en izquierda */
.detalles-regalo .detalles-col{padding-bottom:clamp(12px,1.8vw,20px);} /* afina respiración inferior */
.detalles-col.izquierda{
  display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center; /* título | imagen | texto */
  gap:1rem;min-height:52vh;
}
.detalles-col.izquierda .imagen-con-decoracion{display:grid;place-items:center;width:100%;} /* centra imagen */

/* Bloque derecho “dress code” (3 columnas) */
.detalles-col.derecha{
  background:#f4f1ee;                            /* tono claro para contraste */
  padding:clamp(22px,3vw,40px);                  /* respiración fluida */
  display:grid;grid-template-rows:auto auto auto;row-gap:clamp(8px,1.2vw,16px); /* flujo en bloque */
  align-content:start;text-align:left;           /* texto alineado a la izquierda */
}
/* Titulares de la sección (tres variantes, mismo look) */
.dc-head{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,4vw,4.6rem);
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;text-align: center;
}
.dc-head2{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,2vw,4.6rem);
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;text-align: center;
}
.dc-head3{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,4vw,4.6rem);
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;text-align: center;
}
/* Tres columnas: Mujer | Figura central | Hombre */
.dc-cols{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start; /* 2 columnas elásticas + figura auto */
  column-gap:clamp(16px,2.4vw,28px);                                /* separación fluida */
}
.dc-sub{text-align:center;font-weight:600;margin:0 0 .4em 0;font-size:clamp(18px,2.2vw,22px);} /* subtítulo columna */
.dc-list{list-style:none;margin:0;padding:0;display:grid;gap:.45em;} /* lista sin viñetas por defecto */
.dc-list li{position:relative;padding-left:1.05em;}                  /* espacio para pseudoviñeta */
.dc-list li::before{content:"•";position:absolute;left:0;line-height:1;opacity:.65;} /* “bullet” personalizada */

/* Figura central (vestidos) */
.dc-figure{display:flex;align-items:center;justify-content:center;margin-block:clamp(2px,.6vw,8px);} /* centra figura */
.dc-figure img{
  width:min(280px,22vw);height:auto;                                   /* tamaño fluido */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));user-select:none;pointer-events:none; /* sombra y no interactuable */
}

/* Badge “colores no recomendados” */
.dc-colors{text-align:center;margin-top:.4rem;}  /* centra bloque de paleta */
.dc-badge{
  display:inline-block;background:#6e7f65;color:#fff;padding:.38rem .9rem;border-radius:999px; /* pastilla */
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.9rem;margin-bottom:.7rem;
}
.dc-swatches{display:flex;gap:clamp(12px,2vw,22px);justify-content:center;flex-wrap:wrap;} /* paleta responsiva */
.swatch{display:grid;justify-items:center;gap:.35rem;} /* contenedor por color */
.swatch span{
  width:56px;height:56px;border-radius:50%;background:var(--c,#eee); /* círculo del color (usa --c) */
  border:2px solid rgba(0,0,0,.08);box-shadow:inset 0 2px 6px rgba(0,0,0,.12); /* relieve */
}
.swatch small{font-size:.85rem;opacity:.85;}      /* etiqueta del color */

/* REGALO: responsive — 1 bloque por pantalla (full-bleed) */
@media (max-width:980px){
  :where(html,body){ overflow-x:hidden; }        /* previene desplazamiento lateral accidental */

  /* La sección deja de forzar altura y snap global */
  section.detalles-regalo{
    height:auto !important;min-height:auto !important; /* libera altura */
    scroll-snap-align:unset !important;padding:0 !important;margin:0 !important; /* sin snap propio */
  }

  /* Apila los 2 bloques y los hace “full-bleed” (de borde a borde) */
  .detalles-regalo{display:flex;flex-direction:column;gap:0;overflow:visible;} /* una debajo de otra */
  .detalles-col.derecha{ order:2; }               /* orden: izquierda primero, luego derecha */
  .detalles-col.izquierda{ order:1; }

  .detalles-col{
    position:relative;width:100dvw;max-width:100dvw; /* ocupa todo el viewport horizontal */
    margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw); /* truco full-bleed */
    padding:0;box-sizing:border-box;
    min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always; /* 1 pantalla por bloque */
  }

  /* Contenido con respiración interna homogénea */
  .detalles-col > *{
    width:100%;max-width:none;margin:0;
    padding-left:clamp(12px,3.5vw,18px);padding-right:clamp(12px,3.5vw,18px); /* márgenes fluidos */
  }
  .detalles-col > :first-child{ margin-top:0; }   /* quita espacios fantasma */
  .detalles-col > :last-child{  margin-bottom:0; }

  /* Izquierda (imagen + texto) */
  .imagen-con-decoracion{ margin:0; }             /* quita margen superior */
  .imagen-con-decoracion img:first-child{
    display:block;width:100%;max-width:100%;height:auto; /* imagen full-bleed */
  }

  /* Derecha (vestimenta) en una sola columna */
  .detalles-col derecha .dc-head3{ text-align:center; font-size:clamp(32px,7vw,48px); margin:0 0 .8rem;} /* ⚠️ selector mal escrito, no afecta (ver nota) */

  /* Ajuste de tamaños equivalentes para dc-head/dc-head2 en móvil */
  .dc-head{
    text-align:center;
    font-size:clamp(32px,7vw,48px); /* mismo tamaño que .dc-head2 */
  }
  .dc-head2{
    text-align:center;
    font-size:clamp(32px,4vw,48px); /* mismo tamaño que .dc-head */
  }

  .dc-cols{ grid-template-columns:1fr; }         /* una columna vertical */
  .dc-figure{ order:2; margin:12px auto; }       /* figura al centro, debajo de “Mujer” */
  .dc-figure img{ width:min(72vw,340px); height:auto; } /* tamaño de la figura */
}
/* REGALO — micro-ajustes (≤380w o ≤740h) */
@media (max-width:380px), (max-height:740px){
  .detalles-col{
    height:100svh;min-height:auto;padding-block:clamp(6px,2vh,10px); /* comprime alto y paddings */
    display:grid;grid-template-rows:auto auto auto;                   /* flujo vertical */
  }
  .detalles-col > *{ padding-inline:clamp(10px,3vw,14px); }           /* reduce padding lateral */

  /* Derecho (vestimenta) */
  .dc-head3{font-size:clamp(24px,6vw,30px);line-height:1.06;margin:0 0 .4rem;}
  .dc-head{font-size:clamp(24px,6vw,30px);line-height:1.06;margin:0 0 .4rem;}
  .dc-cols{ row-gap:clamp(4px,1vh,8px); }                            /* separaciones pequeñas */
  .dc-sub{ font-size:clamp(14px,3.5vw,16px); margin:.1rem 0; }
  .dc-list{ gap:.3em; }
  .dc-list li{ font-size:clamp(12.5px,3.2vw,14px); line-height:1.35; }

  .dc-figure{ order:2; margin:4px auto; }                            /* figura compacta */
  .dc-figure img{
    max-height:22svh;max-width:64vw;width:auto;height:auto;          /* limita alto */
  }

  .dc-colors{ margin-top:.2rem; }                                     /* menos espacio */
  .dc-badge{ font-size:.72rem; padding:.24rem .6rem; }
  .dc-swatches{ gap:clamp(8px,2.4vw,12px); }
  .swatch span{ width:36px; height:36px; }
  .swatch small{ font-size:.74rem; }

  .detalles-col.derecha p{
    font-size:clamp(12.5px,3.2vw,14px);line-height:1.45;margin:.2rem 0 0; /* párrafos compactos */
  }

  /* Izquierdo (foto + mensaje) */
  .detalles-col.izquierda .titulo-bloque{
    font-size:clamp(26px,6.5vw,32px);line-height:1.08;margin:0;      /* ⚠️ ver nota: no usado hoy */
  }
  .imagen-con-decoracion img:first-child{
    max-height:40svh;width:100%;height:auto;object-fit:cover;        /* limita foto */
  }
  .detalles-col.izquierda .subtitle{
    font-size:clamp(12.5px,3.2vw,14px);line-height:1.5;margin:0;
  }
}
/* REGALO — Bloque izquierdo a pantalla completa (≤980px) */
@media (max-width:980px){
  .detalles-col.izquierda{
    height:100svh;min-height:100svh;display:grid;                     /* 1 pantalla exacta */
    grid-template-rows:max-content 1fr max-content; /* título | imagen | texto */
    align-content:start;
  }
  .detalles-col.izquierda .imagen-con-decoracion{
    display:grid;place-items:center;min-height:0;                     /* centra imagen */
  }
  .detalles-col.izquierda .imagen-con-decoracion img:first-child{
    max-height:42svh;width:100%;height:auto;object-fit:cover;border-radius:.5rem; /* controla alto de foto */
  }
}

/* Ajustes de títulos rojo/azul en móvil (pedido previo: mismo tamaño y centrados) */
@media (max-width: 980px){
  /* Igual tamaño y área legible para ambos */
  .detalles-col.izquierda .dc-head,
  .detalles-col.izquierda .dc-head2{
    font-size: clamp(26px, 6.5vw, 32px);       /* igual para los dos */
    line-height: 1.12;
    text-align: center;
    max-width: 28ch;                           /* evita que queden muy anchos */
    margin-left: auto;
    margin-right: auto;
    padding-inline: clamp(12px, 4vw, 20px);    /* evita “al borde” */
  }

  /* El título de arriba (rojo) baja un poco */
  .detalles-col.izquierda .dc-head{
    margin-top: 5rem;                         /* baja */
    margin-bottom: 0.8rem;
  }

  /* El de abajo (azul) sube un poco hacia la imagen */
  .detalles-col.izquierda .dc-head2{
    margin-top: 0rem;                          /* sube */
    margin-bottom: 5rem;
  }
}

/* Micro-ajuste para 360×740 (o pantallas muy pequeñas) */
@media (max-width: 380px), (max-height: 740px){
  .detalles-col.izquierda .dc-head,
  .detalles-col.izquierda .dc-head2{
    font-size: clamp(24px, 6vw, 28px);         /* mantiene igualdad y legibilidad */
    max-width: 30ch;                            /* un poco más ancho para evitar demasiadas líneas */
  }
  .detalles-col.izquierda .dc-head{  margin-top: 1rem;  }  /* reduce distancia en pantallas muy pequeñas */
  .detalles-col.izquierda .dc-head2{ margin-top: 0.7rem; }
}



/* =======================================================
   RSVP (tarjeta + formulario + scroll interno)
   ======================================================= */
/* Sección RSVP y tarjeta centrada */
.rsvp-ref{
  background:#e4c5b6;display:grid;place-items:center;height:100vh; /* ocupa pantalla completa (desktop) */
  padding:2rem 1rem;position:relative;isolation:isolate;           /* capa para textura */
}
.rsvp-ref::before{
  content:"";position:absolute;inset:0;background:url("Papel.png") repeat; /* textura papel */
  opacity:.25;mix-blend-mode:multiply;pointer-events:none;z-index:0;
}
.rsvp-inner{
  text-align:center;max-width:900px;width:min(92vw,900px);margin-inline:auto; /* tarjeta centrada */
  position:relative;z-index:1;
}
.rsvp-overline{
  letter-spacing:.6rem;font-size:.9rem;margin-bottom:1rem;           /* overline decorativa */
  font-family:'Josefin Sans',sans-serif;
}
.rsvp-title{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,8vw,4.6rem); /* título fluido */
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;
}
.rsvp-bang{font-size:1.05em;}                                       /* aumenta ligeramente los signos ¡! */
.rsvp-subtitle{
  font-size:1rem;letter-spacing:.35rem;text-transform:uppercase;color:#111; /* subtítulo en mayúsculas */
  margin-bottom:2.25rem;font-family:'Josefin Sans',sans-serif;
}
.rsvp-subtitle span{font-weight:700;}                               /* énfasis en fecha límite */

/* Tarjeta/formulario */
.rsvp-form{
  margin:1.25rem auto 0;width:min(92vw,720px);                       /* ancho cómodo */
  background:#ffffffcc;backdrop-filter:blur(2px);                    /* efecto vidrio leve */
  border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:1.2rem;/* borde y radio */
  box-shadow:0 12px 28px rgba(0,0,0,.08);                            /* sombra suave */

  /* Scroll interno en móviles largos */
  max-height:min(76vh,540px);overflow-y:auto;scrollbar-gutter:stable;/* permite scrollear dentro */
  padding-right:.5rem;scroll-behavior:smooth;                         /* suave al foco */
}
.rsvp-form .row{display:grid;gap:.45rem;margin-bottom:1rem;}         /* cada campo en grid */
.rsvp-form label{
  font-size:.95rem;color:#222;text-align:left;font-family:'Josefin Sans',sans-serif; /* etiqueta legible */
}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{
  width:100%;appearance:none;font:inherit;color:#111;background:#fafafa; /* campos con fondo claro */
  border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:.85rem 1rem; /* borde y padding */
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s,transform .02s; /* feedback focus */
}
.rsvp-form textarea{resize:vertical;min-height:110px;}              /* textarea redimensionable */
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{
  background:#fff;border-color:#111;box-shadow:0 0 0 4px rgba(0,0,0,.08); /* estado focus accesible */
}
.rsvp-form .help{
  font-size:.85rem;color:#666;text-align:left;font-family:'Josefin Sans',sans-serif; /* ayudas sutiles */
}
.rsvp-form .cta{
  margin-top:.35rem;width:100%;height:56px;border-radius:999px;border:1.5px solid #111; /* botón grande */
  background:#111;color:#fff;font-size:1rem;letter-spacing:.06rem;                    /* contraste alto */
  box-shadow:0 10px 22px rgba(0,0,0,.10);cursor:pointer;                              /* sombra y puntero */
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,color .2s ease; /* animaciones */
  font-family:'Josefin Sans',sans-serif;
}
.rsvp-form .cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.14);} /* hover suave */
.rsvp-form .cta:disabled{opacity:.6;cursor:not-allowed;}             /* estado deshabilitado */
#formFeedback{transition:all .2s ease;font-family:'Josefin Sans',sans-serif;} /* zona de feedback */
#formFeedback.success{
  color:#0c7c3d;background:#e8f5ee;border:1px solid rgba(12,124,61,.25);
  padding:.75rem 1rem;border-radius:12px;
}
#formFeedback.error{
  color:#b00020;background:#fdebed;border:1px solid rgba(176,0,32,.25);
  padding:.75rem 1rem;border-radius:12px;
}
.rsvp-form .cta.is-loading{position:relative;pointer-events:none;opacity:.85;} /* evita doble envío */
.rsvp-form .cta.is-loading::after{
  content:"Enviando…";position:absolute;inset:0;display:grid;place-items:center;font-weight:600; /* overlay de envío */
}
.readonly{background:#f7f7f7;cursor:not-allowed;}                   /* campos solo lectura */

/* Scrollbar (WebKit/Firefox) */
.rsvp-form::-webkit-scrollbar{width:10px;}                          /* ancho barra */
.rsvp-form::-webkit-scrollbar-track{background:transparent;}        /* pista transparente */
.rsvp-form::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:8px;} /* pulgar */
.rsvp-form::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.38);} /* hover */
.rsvp-form{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;} /* Firefox */



/* ======= LANDING (Portada con sobre) ======= */
/* Fondo papel + centrado del sobre */
.paper-bg{
  background:#e4c5b6;position:relative;isolation:isolate;min-height:100vh; /* base */
  display:grid;place-items:center;padding:2rem 1rem;                        /* centra contenido */
}
.paper-bg::before{
  content:"";position:absolute;inset:0;background:url("Papel.png") repeat; /* textura */
  opacity:.25;mix-blend-mode:multiply;pointer-events:none;z-index:0;
}

/* Tipografías de portada y layout */
.landing-inner{
  position:relative;z-index:1;text-align:center;width:min(92vw,860px); /* ancho legible */
  display:flex;flex-direction:column;align-items:center;               /* centra pila */
}
.landing-overline{
  letter-spacing:.35rem;font-size:.95rem;margin-bottom:.6rem;          /* estilo de overline */
  font-family:'Josefin Sans',sans-serif;
}
.landing-names{
  font-family:'The Seasons',serif;font-size:clamp(2.4rem,8vw,4.6rem);  /* título principal */
  font-weight:400;line-height:1.05;margin:.25rem 0 .5rem;
}
.landing-date{
  font-size:clamp(1rem,2.5vw,1.2rem);letter-spacing:.35rem;text-transform:uppercase; /* fecha estilizada */
  margin-bottom:2rem;font-family:'Josefin Sans',sans-serif;
}

/* Sobre clicable (imagen + nombres) */
.envelope-link{display:inline-block;text-decoration:none;}            /* enlace sin subrayado */
.envelope-wrap{position:relative;display:inline-block;}               /* contenedor relativo */
.envelope-img{
  width:min(86vw,560px);height:auto;display:block;margin:0 auto 1.25rem; /* tamaño y margen */
  border-radius:12px;box-shadow:0 18px 30px rgba(0,0,0,.18);               /* tarjeta con sombra */
  transition:transform .25s,box-shadow .25s,filter .25s;                   /* animación hover */
}
.envelope-link:hover .envelope-img{
  transform:translateY(-2px);box-shadow:0 22px 36px rgba(0,0,0,.22);filter:brightness(1.02); /* feedback hover */
}

/* Nombres manuscritos sobre el sobre */
.envelope-names{
  position:absolute;left:7.5%;bottom:17%;display:grid;gap:.25rem;pointer-events:none; /* ubicados sobre la imagen */
}
.guest-line{
  font-family:'Pinyon Script',cursive;font-size:clamp(1rem,2.1vw,1.25rem); /* fuente manuscrita */
  line-height:1.08;letter-spacing:.02rem;color:#1a1a1a;opacity:.95;        /* estilo tinta */
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;    /* nitidez */
  filter:url(#ink-bleed) drop-shadow(0 .2px .2px rgba(0,0,0,.15));         /* filtro “tinta corrida” */
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 .3px rgba(0,0,0,.25);      /* relieve sutil */
  transform-origin:left center;                                            /* rotaciones desde la izquierda */
}
.guest-line:nth-child(1){transform:rotate(-2.2deg) skewX(-1deg);}         /* inclinaciones orgánicas */
.guest-line:nth-child(2){transform:rotate(-1.4deg);}
.guest-line:nth-child(3){transform:rotate(-.8deg) skewX(.5deg);}

/* CTA/badge de cupos */
.landing-cta{
  font-size:.95rem;letter-spacing:.28rem;text-transform:uppercase;    /* texto guía bajo el sobre */
  margin-bottom:1.6rem;font-family:'Josefin Sans',sans-serif;
}
.landing-reserved-title{                                              /* ⚠️ no usado hoy */
  font-size:1rem;letter-spacing:.28rem;text-transform:uppercase;margin:.6rem 0 .4rem;
}
.landing-reserved-badge{
  width:96px;height:96px;border-radius:20px;border:2px solid #111;    /* badge circular del conteo */
  display:grid;place-items:center;margin:.2rem auto .6rem;background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.landing-reserved-badge span{
  font-size:2.6rem;font-weight:700;font-family:'Josefin Sans',sans-serif; /* cifra grande */
}
.landing-reserved-sub{letter-spacing:.28rem;text-transform:uppercase;font-size:1rem;} /* ⚠️ no usado hoy */

/* Flecha indicadora y decoraciones de esquina */
.landing-cta-wrap{position:relative;display:inline-block;}           /* agrupa flecha + texto */
.landing-arrow{
  position:absolute;left:190px;top:-140px;width:150px;height:auto;transform:rotate(-8deg); /* ubica flecha */
  pointer-events:none;                                                /* solo decorativa */
}

/* Esquinas florales (fijas y responsivas) */
.corner-deco,.corner-deco-left{
  position:fixed;bottom:0;z-index:0;pointer-events:none;             /* pegadas al borde inferior */
}
.corner-deco{ right:0; }                                             /* a la derecha */
.corner-deco-left{ left:0; }                                         /* a la izquierda */
.corner-deco img,.corner-deco-left img{
  width: clamp(120px, 38vw, 500px);height: auto;display: block;      /* tamaño fluido */
}

/* LANDING: ajustes responsivos */
@media (max-width: 768px){
  .landing-arrow{ left:140px; top:-110px; width:120px; }             /* flecha más pequeña/arrimada */
}
@media (max-height: 520px) and (orientation: landscape){
  /* Si la pantalla es muy baja en horizontal, oculta flores para no invadir contenido */
  .corner-deco,.corner-deco-left{ display:none; }
}

/* =========================
   FIN DEL CSS
   ========================= */