/* BLOQUE: Evitar que la página se desplace horizontalmente en móvil */
html, body {
  width: 100%;
  overflow-x: hidden; /* bloquea scroll horizontal */
}


/* ================================================================
   ARCHIVO: portada.css
   FECHA: 01/06/2026
   MOTIVO: Portada limpia con foto, texto, flores y sobre.
   NOTA:
   - Las flores NO tienen animación.
   - Cada flor se controla por separado:
     1. posición
     2. tamaño
     3. giro
================================================================ */

/* IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* =========================================================
   REINICIO GENERAL
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================================
   CUERPO DE LA PÁGINA
========================================================= */

body {
  font-family: 'Cormorant Garamond', serif; /* FUENTE GENERAL */
  background: #f5ede3;                      /* FONDO CREMA */
  display: flex;                            /* CENTRA CONTENIDO */
  justify-content: center;                  /* CENTRADO HORIZONTAL */
  min-height: 100vh;                        /* ALTO MÍNIMO */
  overflow-x: hidden;                       /* EVITA DESBORDE HORIZONTAL */
  overflow-y: auto;                         /* PERMITE VER SI ALGO BAJA */
}

/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.pagina {
  width: 100%;                              /* ANCHO TOTAL */
  max-width: 480px;                         /* FORMATO CELULAR */
  min-height: 100vh;                        /* ALTO MÍNIMO */
  display: flex;                            /* DISTRIBUCIÓN */
  flex-direction: column;                   /* ORDEN VERTICAL */
  position: relative;                       /* PERMITE CAPAS */
  background: #f5ede3;                      /* FONDO */
  overflow-x: hidden;  /* no permite desbordar a los lados */
  overflow-y: visible; /* deja ver contenido vertical */
}

/* =========================================================
   FOTO DE PORTADA: portada.png
========================================================= */

.foto-bloque {
  width: 100%;                              /* ANCHO TOTAL */
  height: 55vh;                             /* ALTO DE FOTO */
  flex-shrink: 0;                           /* NO SE ACHICA */
  position: relative;                       /* PERMITE DEGRADADO */
  overflow: hidden;                         /* SOLO RECORTA LA FOTO */

  opacity: 0;                               /* INICIO ANIMACIÓN */
  transform: translateY(60px);              /* ENTRA DESDE ABAJO */
  animation: portada-bloque-sube 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.foto-pareja {
  width: 100%;                              /* ANCHO TOTAL */
  height: 100%;                             /* ALTO TOTAL */
  object-fit: cover;                        /* LLENA EL BLOQUE */
  object-position: center top;              /* ENFOQUE ARRIBA */
  display: block;                           /* EVITA ESPACIOS */
}

/* DEGRADADO INFERIOR DE LA FOTO */
.foto-bloque::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;                              /* ALTO DEL DEGRADADO */
  background: linear-gradient(
    to bottom,
    rgba(245,237,227,0) 0%,
    rgba(245,237,227,1) 100%
  );
  pointer-events: none;
}

/* =========================================================
   TEXTO DE PORTADA
========================================================= */

/* =========================================================
   TEXTO DE PORTADA
   CONTROLA:
   "Sé testigo del amor que nos une..."
   "y de un 'sí' que durará"
   "toda la vida ♡"
========================================================= */

.texto-bloque {
  flex-shrink: 0;                           /* NO SE ACHICA */
  text-align: center;                       /* CENTRADO */

  padding: 0.5rem 1.5rem 0.6rem;            /* ESPACIO INTERNO */

  position: relative;                       /* PERMITE SUBIR O BAJAR CON top */
  top: -30px;                               /* AQUÍ SUBES O BAJAS EL TEXTO */

  opacity: 0;                               /* INICIO ANIMACIÓN */
  transform: translateY(12px);              /* ANIMACIÓN: entrada suave */
  animation: aparece-texto 0.9s ease forwards 0.3s;
}

.texto-small {
  font-size: 0.68rem;                       /* TAMAÑO TEXTO PEQUEÑO */
  letter-spacing: 0.18em;                   /* ESPACIADO ENTRE LETRAS */
  text-transform: uppercase;                /* MAYÚSCULAS */
  color: #BB5F11;                           /* COLOR */
  line-height: 1.8;                         /* INTERLINEADO */
}

.texto-cursiva {
  font-family: 'Great Vibes', cursive;      /* FUENTE ROMÁNTICA */
  font-size: clamp(2rem, 7vw, 3rem);        /* TAMAÑO RESPONSIVE */
  color: #3a2410;                           /* COLOR */
  line-height: 1.1;                         /* ALTURA */
  display: block;                           /* BLOQUE */
}

/* =========================================================
   BLOQUE DEL SOBRE Y FLORES
========================================================= */

.sobre-bloque {
  flex: 1;                                  /* OCUPA ESPACIO RESTANTE */
  width: 100%;                              /* ANCHO TOTAL */
  position: relative;                       /* PERMITE UBICAR FLORES */
  display: flex;                            /* DISTRIBUCIÓN */
  justify-content: center;                  /* CENTRA SOBRE */
  align-items: flex-start;                  /* SOBRE ARRIBA */
  overflow: visible;                        /* NO CORTA FLORES */

  opacity: 0;                               /* INICIO INVISIBLE */
  animation: aparece-sobre 1s ease forwards 0.9s;
}

/* =========================================================
   SOBRE: tarjeta.png
========================================================= */

.sobre-img {
  width: 72%;                               /* TAMAÑO DEL SOBRE */
  display: block;                           /* BLOQUE */
  cursor: pointer;                          /* MANITO */
  border-radius: 8px;                       /* BORDES */
  box-shadow: 0 12px 40px rgba(20,15,5,0.22);
  position: relative;                       /* PERMITE Z-INDEX */
  z-index: 3;                               /* SOBRE ENCIMA DE FLORES */
  margin-top: -1rem;                        /* SUBE EL SOBRE */
  transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
  animation: flotar 3.5s ease-in-out infinite 2s;
}

.sobre-img:hover {
  transform: scale(1.02) translateY(-4px);
}

/* =========================================================
   FLORES DE PORTADA
   AQUÍ NO HAY ANIMACIÓN.
   SOLO POSICIÓN, TAMAÑO Y GIRO.
========================================================= */

.flor {
  position: absolute;                       /* POSICIÓN LIBRE */
  pointer-events: none;                     /* NO BLOQUEA CLIC */
  z-index: 2;                               /* DETRÁS DEL SOBRE */
  transform-origin: center center;          /* CENTRO DE GIRO */
}

/* =========================================================
   FLOR IZQUIERDA: flor01.png
   AQUÍ CONTROLAS:
   1. POSICIÓN
   2. TAMAÑO
   3. GIRO
========================================================= */

.flor-izq {
  /* 1. POSICIÓN */
  left: -125px;                              /* HORIZONTAL: más positivo = derecha / más negativo = izquierda */
  top: -50px;                               /* VERTICAL: más positivo = baja / más negativo = sube */
  bottom: auto;                             /* NO TOCAR */

  /* 2. TAMAÑO */
  width: 60%;                               /* TAMAÑO DE LA FLOR */
  max-width: 250px;                         /* TAMAÑO MÁXIMO */

  /* 3. GIRO */
  transform: rotate(-120deg);               /* GIRO: negativo = izquierda / positivo = derecha */
}

/* =========================================================
   FLOR DERECHA: flor02.png
   AQUÍ CONTROLAS:
   1. POSICIÓN
   2. TAMAÑO
   3. GIRO
========================================================= */

.flor-der {
  /* 1. POSICIÓN */
  right: -100px;                            /* HORIZONTAL: más positivo = izquierda / más negativo = derecha */
  bottom: -60px;                            /* VERTICAL: más positivo = sube / más negativo = baja */
  top: auto;                                /* NO TOCAR */

  /* 2. TAMAÑO */
  width: 100%;                              /* TAMAÑO DE LA FLOR */
  max-width: 175px;                         /* TAMAÑO MÁXIMO */

  /* 3. GIRO */
  transform: scaleX(-1) rotate(20deg);      /* scaleX(-1) VOLTEA LA FLOR + rotate GIRA */
}

/* =========================================================
   TEXTO: TOCA PARA ABRIR
   MOTIVO: Colocar el texto dentro de la tarjeta/sobre.
========================================================= */

.clic-texto {
  position: absolute;                       /* POSICIÓN: permite ubicarlo sobre la tarjeta */
  bottom: 4.2rem;                           /* SUBE EL TEXTO: más grande = más arriba */
  left: 50%;                                /* CENTRA horizontalmente */
  transform: translateX(-50%);              /* CENTRADO exacto */
  font-size: 0.68rem;                       /* TAMAÑO del texto */
  letter-spacing: 0.2em;                    /* ESPACIADO entre letras */
  text-transform: uppercase;                /* MAYÚSCULAS */
  color: rgba(255,255,255,0.9);             /* COLOR del texto */
  white-space: nowrap;                      /* EVITA que se parta en dos líneas */
  z-index: 4;                               /* CAPA: encima de la tarjeta */
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);   /* SOMBRA para que se lea */
  opacity: 0;                               /* INICIO animación */
  animation: aparece-click 0.7s ease forwards 2s;
}

.clic-texto::before {
  content: '✦ ';
  animation: pulso 1.6s ease-in-out infinite;
}

.clic-texto::after {
  content: ' ✦';
  animation: pulso 1.6s ease-in-out infinite 0.8s;
}

/* =========================================================
   AJUSTES PARA CELULAR
   IMPORTANTE:
   SI MIRAS EN CELULAR, MANDA ESTE BLOQUE.
   AQUÍ TAMBIÉN CONTROLAS POSICIÓN, TAMAÑO Y GIRO.
========================================================= */

/* =========================================================
   AJUSTES PARA CELULAR
   IMPORTANTE:
   Aquí mantenemos las flores igual que en PC para que no cambien.
========================================================= */

/* =========================================================
   AJUSTES PARA CELULAR
   AQUÍ TAMBIÉN CAMBIAS POSICIÓN, TAMAÑO Y GIRO.
   SI VES EN CELULAR, CAMBIA AQUÍ.
========================================================= */

@media (max-width: 600px) {
  .flor-izq {
    left: -125px;                  /* MOVER HORIZONTAL CELULAR */
    top: -50px;                    /* MOVER VERTICAL CELULAR */
    bottom: auto;                  /* NO TOCAR */

    width: 100%;                    /* TAMAÑO CELULAR */
    max-width: 260px;              /* TAMAÑO MÁXIMO CELULAR */

    transform: rotate(-30deg);    /* GIRO CELULAR */
  }

  .flor-der {
    right: -130px;                 /* MOVER HORIZONTAL CELULAR */
    bottom: -20px;                 /* MOVER VERTICAL CELULAR */
    top: auto;                     /* NO TOCAR */

    width: 70%;                   /* TAMAÑO CELULAR */
    max-width: 230px;              /* TAMAÑO MÁXIMO CELULAR */

    transform: scaleX(-1) rotate(-30deg); /* GIRO CELULAR */
  }
}
/* =========================================================
   ANIMACIONES GENERALES
   NOTA:
   LAS FLORES NO ESTÁN ANIMADAS.
   SOLO SE ANIMA FOTO, TEXTO, SOBRE Y ESTRELLITAS.
========================================================= */

/* FOTO ENTRA DE ABAJO HACIA ARRIBA */
@keyframes portada-bloque-sube {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TEXTO APARECE */
@keyframes aparece-texto {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SOBRE APARECE */
@keyframes aparece-sobre {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TEXTO CLIC APARECE */
@keyframes aparece-click {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* SOBRE FLOTA */
@keyframes flotar {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* ESTRELLITAS DEL TEXTO */
@keyframes pulso {
  0%, 100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}