/* ===== Paleta y variables (modo oscuro) ===== */
:root {
  --fondo:        #15101A;   /* noche profunda cálida */
  --fondo-2:      #1E1721;   /* noche cálida secundaria */
  --texto:        #E8DCD8;   /* crema suave */
  --texto-suave:  #B8A8A4;   /* crema apagado */
  --acento:       #E08CA0;   /* rosa vivo */
  --acento-claro: #2A1F26;   /* rosa profundo de fondo */
  --dorado:       #E0BE8A;   /* dorado cálido */
  --overlay:      rgba(21,16,26,0.85);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Compensar el notch en moviles con pantalla edge-to-edge */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Evitar el flash azul al tap en iOS */
  -webkit-tap-highlight-color: transparent;
}

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

/* ===== Titulos de seccion ===== */
.seccion-titulo {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 4rem);
  color: var(--dorado);
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  padding: 0 1rem;
}

/* ===== [1] HERO ===== */
#hero {
  position: relative;
  height: 100vh;             /* fallback para navegadores viejos */
  height: 100dvh;            /* se ajusta al ocultar/mostrar la barra del navegador */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#canvas-petalos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-texto {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.25rem;
  max-width: 100%;
  animation: aparecer 2s ease-out both;
}

.hero-texto h1 {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 6.5rem);
  color: var(--dorado);
  line-height: 1.1;
  text-shadow: 0 0 30px rgba(224,190,138,0.35), 0 2px 20px rgba(0,0,0,0.6);
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero-texto h1 em {
  font-style: normal;
  color: var(--acento);
}

.hero-sub {
  margin-top: 0.6rem;
  font-style: italic;
  font-size: clamp(1rem, 3.5vw, 1.7rem);
  color: var(--texto);
  letter-spacing: 0.02em;
}

.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 2rem;
  color: var(--dorado);
  animation: rebote 2s ease-in-out infinite;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rebote {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ===== [2] GALERIA ===== */
#galeria {
  padding: 3rem 0 4rem;
}

.swiper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
  /* permite scroll vertical de la pagina con el dedo sobre la galeria */
  touch-action: pan-y;
}

.swiper-slide {
  width: 88%;      /* móvil: slide prominente, solo un asomo de los lados */
  max-width: 420px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(224,190,138,0.08);
  background: var(--acento-claro);
  /* pista al navegador para usar compositing por GPU (importante en gama baja) */
  will-change: transform;
  /* el navegador puede descartar la pista cuando no hay animacion */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--acento-claro);
}

/* Controles */
.swiper-button-prev,
.swiper-button-next {
  color: var(--dorado);
  width: 44px;
  height: 44px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 1.6rem; font-weight: bold; }
.swiper-button-prev:active,
.swiper-button-next:active { transform: scale(0.9); }

/* Paginacion: expandir area tactil sin crecer el bullet visual */
.swiper-pagination-bullet {
  background: var(--texto);
  opacity: 0.55;
  position: relative;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  inset: -10px;   /* area de tap invisible de ~30x30px */
}
.swiper-pagination-bullet-active {
  background: var(--acento);
  opacity: 1;
  transform: scale(1.25);
}

/* ===== [3] CARTA ===== */
#carta {
  padding: 3rem 1rem 4rem;
  padding-bottom: max(4rem, env(safe-area-inset-bottom, 4rem));
  background: linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
}

.carta-contenido {
  font-family: 'Lora', Georgia, serif;
  font-style: normal;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.9;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--texto);
}

.carta-contenido p { margin-bottom: 1.4rem; }

.carta-firma {
  margin-top: 2.5rem;
  font-style: normal;
  text-align: right;
  color: var(--acento);
  letter-spacing: 0.05em;
  font-size: 1.15em;
}

/* ===== Breakpoints intermedios y tablet ===== */
@media (min-width: 480px) {
  .swiper-slide { width: 75%; }
}

@media (min-width: 768px) {
  .swiper-slide { width: 70%; }
}

@media (min-width: 600px) {
  .hero-texto { padding: 0 2rem; }
  .seccion-titulo { padding: 0; }
  #galeria { padding: 4rem 0 5rem; }
  #carta { padding: 4rem 1.5rem 5rem; }
}

@media (min-width: 768px) {
  #galeria { padding: 5rem 0 6rem; }
  #carta { padding: 4rem 1.5rem 6rem; }
}

@media (min-width: 1024px) {
  #carta { padding: 5rem 2rem 7rem; }
}

/* ===== Movil en horizontal (alturas pequenas) ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-texto h1 {
    font-size: clamp(1.8rem, 8vh, 3.5rem);
  }
  .hero-sub {
    font-size: clamp(1rem, 3.5vh, 1.3rem);
  }
  .hero-scroll {
    font-size: 1.5rem;
    bottom: 0.5rem;
  }
  #galeria { padding: 2.5rem 0 3rem; }
}

/* ===== Pantallas muy pequenas (iPhone SE 1ra gen 320px) ===== */
@media (max-width: 360px) {
  .hero-texto h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .hero-sub { font-size: 1rem; }
  .swiper-button-prev,
  .swiper-button-next { width: 36px; height: 36px; }
  .swiper-button-prev::after,
  .swiper-button-next::after { font-size: 1.3rem; }
  #carta { padding: 2.5rem 0.75rem 3.5rem; }
  .carta-contenido p { margin-bottom: 1.2rem; }
}

/* ===== Hover solo en dispositivos con puntero fino (no touch) ===== */
@media (hover: hover) and (pointer: fine) {
  .swiper-button-prev:hover,
  .swiper-button-next:hover { transform: scale(1.1); }
  .swiper-pagination-bullet:hover { opacity: 0.85; }
}

/* ===== Accesibilidad: reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-texto,
  .hero-scroll { animation: none; }
  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination-bullet { transition: none; }
}

/* ===== Ahorro de datos (plan Moviles prepago / roaming) ===== */
@media (prefers-reduced-data: reduce) {
  .swiper-slide { box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
  .hero-texto h1 { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
}