/* ==========================================
   1. PALETA DE COLORES Y VARIABLES GLOBALES
   ========================================== */
:root {
  /* Fondos */
  --bg-principal: #F5F2EB;      /* Marfil suave / Lienzo principal */
  --bg-tarjeta: #F5EBE1;        /* Crema calido / Contenedores */
  --bg-destacado: #EADEC9;      /* Arena claro / Bloques especiales */

  /* Textos */
  --texto-principal: #AA7A1E;   /* Bronze - Dorado Oscuro / Lectura y titulos */
  --texto-titulos: #C16C73;     /* Terracota Rosa / Titulos destacados */
  
  /* Acentos */
  --acento-rosa: #D8A5A9;        /* Rosa empolvado */
  --acento-rosado-suave: #E8C5C8; /* Rosa pastel */
  --acento-coral: #E3A89F;       /* Coral suave */

  /* Detalle Metalico */
  --dorado-brillante: #D4AF37;   /* Dorado clasico */
  --dorado-suave: #E5C79E;       /* Dorado suave */

  /* Fuentes */
  --fuente-titulos: 'Cormorant Garamond', serif;
  --fuente-cuerpo: 'Montserrat', sans-serif;
  --fuente-cursiva: 'Great Vibes', cursive; /* Estilo cursiva elegante reutilizable */
}

/* ==========================================
   2. REINICIO BASICO Y ESTILOS GLOBALES
   ========================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-principal);
  color: var(--texto-principal);
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--texto-titulos);
  font-weight: 500;
  text-align: center;
}

/* ==========================================
   3. CONTENEDOR PRINCIPAL RESPONSIVO
   ========================================== */
#sitio-invitacion {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: var(--bg-principal);
  box-shadow: 0 0 35px rgba(170, 122, 30, 0.18);
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  #sitio-invitacion {
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 20px;
  }
}

/* ==========================================
   4. MODULOS DEL SITIO
   ========================================== */
/* ==========================================
   MODULO 1: ESTILOS DE LA PORTADA
   ========================================== */
.modulo1-portada {
  width: 100%;
  min-height: 100vh; /* Ocupa el 100% del alto de la pantalla */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
}

.contenedor-foto-portada {
  width: 100%;
  height: 100vh; /* Fuerza la altura completa hasta arriba */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ajuste adaptativo: Funciona con imagenes verticales u horizontales */
.foto-portada {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cubre todo el espacio sin deformar ni dejar franjas */
  object-position: center; /* Mantiene el centro de la imagen enfocado */
  display: block;
}

/* Adaptacion para pantallas grandes */
@media screen and (min-width: 768px) {
  .modulo1-portada {
    padding: 0; /* Elimina margenes superiores en PC */
  }
  
  .foto-portada {
    border-radius: 0; /* Elimina bordes para cobertura total */
  }
}

/* ==========================================
   MODULO 2: ESTILOS DE PRESENTACION
   ========================================== */
.modulo2-presentacion {
  position: relative;
  width: 100%;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  margin-bottom: 0%;

  /* 1. Imagen de fondo centrada con cover 
  background-image: url('images/fondo1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;*/
}

.modulo2-contenido {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 2. Imagen de iniciales grande */
.contenedor-iniciales {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 2. Imagen de iniciales con margen inferior reducido */
.imagen-iniciales {
  width: 260px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 4px 10px rgba(170, 122, 30, 0.15));
  margin-bottom: 10px; /* Margen negativo suave para acercar los nombres */
}

/* 3. Nombres con margen superior ajustado */
.nombres-novios {
  font-family: var(--fuente-titulos);
  color: #AA7A1E;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1; /* Interlineado mas compacto */
  margin: 0 0 10px 0; /* Elimina margen superior para pegar a las iniciales */
  letter-spacing: 1px;
  text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.8);
}

/* 4. Texto poetico en color negro legible */
.texto-poetico {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  padding: 0 10px;
  text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.9);
}

/* 5. Texto de bienvenida en #AA7A1E */
.texto-bienvenida-m2 {
  font-family: var(--fuente-cuerpo);
  color: #AA7A1E;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 15px;
}

/* Adaptacion para pantallas medianas y grandes */
@media screen and (min-width: 768px) {
  .modulo2-presentacion {
    padding: 40px 40px;
  }

  .imagen-iniciales {
    width: 260px;
  }

  .nombres-novios {
    font-size: 3.8rem; /* Tamaño proporcional para PC */
  }

  .texto-poetico {
    font-size: 1.45rem;
  }
}

/* ==========================================
   MODULO 2: SEPARADOR Y CORTEJO (PADRES Y PADRINOS)
   ========================================== */

/* 1. Estilos para el separador decorativo */
.contenedor-separador {
  width: 100%;
  display: flex;
  justify-content: center;
  /*margin: 5px 0 0px 0;*/
  }

.imagen-separador {
  width: 300px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: -20px; /* Margen negativo suave para acercar los nombres */
}

/* 2. Estructura general del cortejo */
.seccion-cortejo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 10px;
}

/* Titulos en la fuente clasica Cormorant Garamond */
.titulo-cortejo {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0px;
}

.subtitulo-cortejo {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Grid adaptativo para los padres */
.grid-padres {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.bloque-familia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Etiqueta distintiva Novia / Novio */
.etiqueta-rol {
  font-family: var(--fuente-cuerpo);
  color: #AA7A1E;
  font-size: 1.0rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

/* Nombres en negro brillante y lectura clara */
.nombre-persona {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Tarjeta destacada para los padrinos (Sin fondo) */
.bloque-padrinos {
  width: 100%;
  max-width: 480px;
  background-color: transparent; /* Fondo completamente transparente */
  border: 0px solid var(--dorado-suave); /* Conserva el borde dorado sutil */
  border-radius: 12px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

/* Responsive para pantallas medianas y PC */
@media screen and (min-width: 600px) {
  .grid-padres {
    grid-template-columns: 1fr 1fr; /* Dos columnas paralelas en PC y tablets */
    gap: 20px;
  }

  .imagen-separador {
    width: 300px;
  }

  .titulo-cortejo {
    font-size: 1.8rem;
  }

  .nombre-persona {
    font-size: 1.45rem;
  }
}

/* ==========================================
   MODULO 3: ESTILOS FOTOGRAFIA DE TRANSICION
   ========================================== */
.modulo3-imagen-fondo {
  width: 100%;
  height: 600px; /* Controla el alto vertical deseado (puedes probar 300px, 350px, etc.) */
  background-image: url('images/02.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* Mantiene la cobertura sin dejar espacios vacios */
  background-position: center center;
  position: relative;
  overflow: hidden;
  margin-top: 0%;
  margin-bottom: 0%;
}

/* Adaptacion para pantallas medianas y PC */
@media screen and (min-width: 768px) {
  .modulo3-imagen-fondo {
    height: 800px; /* Alto proporcional para pantallas mas grandes */
  }
}

/* ==========================================
   MODULO 4: CUENTA REGRESIVA Y EVENTOS
   ========================================== */
.modulo4-evento {
  width: 100%;
  padding: 20px 20px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.modulo4-contenido {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* 1. Texto poetico */
.texto-poetico-m4 {
  font-family: var(--fuente-titulos);
  color: #AA7A1E;
  font-size: 2.0rem;
  font-style: italic;
  font-weight: 500;
}

/* 2. Contador regresivo directo sin recuadros */
.contador-regresivo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  color: #000000;
  margin: 5px 0;
}

.bloque-tiempo {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 55px;
}

.numero-tiempo {
  font-family: var(--fuente-titulos);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: #000000;
}

.etiqueta-tiempo {
  font-family: var(--fuente-cuerpo);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #000000;
  margin-top: 6px;
}

.separador-tiempo {
  font-family: var(--fuente-titulos);
  font-size: 2.2rem;
  font-weight: 700;
  color: #000000;
  line-height: 1;
}

/* 3 y 4. Agenda la fecha con ano centrado abajo */
.bloque-fecha-evento {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.titulo-agenda {
  font-family: var(--fuente-cuerpo);
  color: #000000;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.linea-fecha-destacada {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fuente-titulos);
  color: #000000;
}

.dia-semana, .mes-ano {
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.numero-dia {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.linea-divisora {
  color: var(--dorado-suave);
  font-size: 1.8rem;
  font-weight: 300;
}

.ano-centrado {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 4px;
  margin-top: -2px;
}

/* 6. Grid para Ceremonia y Recepcion */
.grid-eventos {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 10px;
}

.tarjeta-evento {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  gap: 6px;
}

/* Estilos para las imagenes de los iconos (icono1.png e icono2.png) */
.contenedor-icono {
  width: 60px;
  height: 60px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.titulo-evento {
  font-family: var(--fuente-titulos);
  color: #000000;
  font-size: 1.8rem;
  font-weight: 700;
}

.hora-evento {
  font-family: var(--fuente-cuerpo);
  color: #000000;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.lugar-evento {
  font-family: var(--fuente-titulos);
  color: #AA7A1E;
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 2px;
}

.direccion-evento {
  font-family: var(--fuente-cuerpo);
  color: #000000;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  max-width: 280px;
}

/* Adaptacion para pantallas medianas y PC */
@media screen and (min-width: 650px) {
  .grid-eventos {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .numero-tiempo {
    font-size: 3.5rem;
  }

  .separador-tiempo {
    font-size: 2.8rem;
  }

  .bloque-tiempo {
    min-width: 70px;
  }

  .direccion-evento {
    max-width: 100%;
  }
}

/* ==========================================
   MODULO 5: ESTILOS FOTOGRAFIA PARALLAX
   ========================================== */
.modulo5-imagen-fixed {
  width: 100%;
  height: 75vh; /* Altura amplia para dar presencia visual a la foto */
  min-height: 800px;
  background-image: url('images/03.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* Efecto parallax al deslizar */
  position: relative;
  overflow: hidden;
  padding: 20px 0px;
}

/* ==========================================
   MODULO 6: LLUVIA DE SOBRES
   ========================================== */
.modulo6-lluvia-sobres {
  background-color: #ffffff;
  padding: 20px 20px;
  text-align: center;
}

.modulo6-contenedor {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 20px;
  border: 1px solid #AA7A1E; /* Marco delgado estilo dorado suave */
  border-radius: 8px;
  background-color: #fdfbf7;
}

/* Titulo con tipografia poetica */
.modulo6-titulo {
  color: #AA7A1E; /* Dorado elegante */
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

/* Icono del sobre */
.modulo6-icono-wrap {
  margin: 0 auto 25px auto;
}

.modulo6-icono {
  width: 75px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Mensaje principal */
.modulo6-mensaje-destacado {
  color: #1a1a1a;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* Cuerpo de la explicacion */
.modulo6-mensaje-cuerpo {
  color: #444444;
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Nota final destacada */
.modulo6-nota-final {
  color: #AA7A1E;
  font-size: 1rem;
  font-style: var(--fuente-cuerpo);
  margin-top: 15px;
}

/* Ajustes responsivos */
@media screen and (min-width: 768px) {
  .modulo6-lluvia-sobres {
    padding: 50px 20px;
  }

  .modulo6-titulo {
    font-size: 2.8rem;
  }

  .modulo6-mensaje-destacado {
    font-size: 1.1rem;
  }

  .modulo6-icono {
    width: 75px;
  }
}

/* ==========================================
Estilos Módulo 7: Confirmación de Asistencia 
 ========================================== */

.rsvp-section {
  padding: 2.5rem 2.5rem;
  max-width: cover;
  margin: 0 auto;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
  box-sizing: border-box;
  background-color: #fdfbf7;
}

.rsvp-container {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0e6d2;
}

/* Punto 1: Título en #AA7A1E */
.rsvp-title {
  color: #AA7A1E;
  font-size: 2.0rem;
  margin-bottom: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Punto 2: Destaque de la Familia */
.rsvp-family-box {
  background-color: #fcf9f2;
  border-left: 4px solid #AA7A1E;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 6px;
}

.rsvp-family-label {
  display: block;
  font-size: 0.85rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.rsvp-family-name {
  color: #000000;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  word-break: break-word;
}

/* Punto 3: Mensaje elegante */
.rsvp-message {
  color: #4a4a4a;
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
  text-align: justify;
}

.rsvp-message p {
  margin-bottom: 1rem;
}

/* Punto 3.2: Resaltado de Fecha Límite */
/*.rsvp-deadline-text {
  background-color: #ffffff;
  padding: 0.8rem;
  border-radius: 0px;
  border: 0px dashed #AA7A1E;
}*/

.highlight-date {
  color: #AA7A1E;
  font-size: 1.05rem;
  font-weight: 700;
  /*text-decoration: underline;*/
}

/* Punto 4.1 y 4.2: Formulario Adaptado a Celular */
.rsvp-fields {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.rsvp-field-group {
  flex: 1;
  text-align: left;
}

.rsvp-field-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 0.4rem;
}

.rsvp-select {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background-color: #ffffff;
  color: #333333;
  outline: none;
  transition: border-color 0.3s;
  height: 48px; /* Tamaño ideal para interacción táctil */
}

.rsvp-select:focus {
  border-color: #AA7A1E;
}

/* Punto 4.3: Botones Vistosos y Diferenciados */
.rsvp-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.btn-rsvp {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
}

/* Botón Confirmar (Principal) */
.btn-confirm {
  background-color: #AA7A1E;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(170, 122, 30, 0.3);
}

.btn-confirm:active {
  transform: scale(0.98);
  background-color: #8c6418;
}

/* Botón No Asistir (Secundario) */
.btn-decline {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 2px solid #dde1e5;
}

.btn-decline:active {
  transform: scale(0.98);
  background-color: #e9ecef;
}

/* Mensajes de Estado */
.rsvp-status {
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
}

.rsvp-status.success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.rsvp-status.error {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
}

.hidden {
  display: none;
}

/* Adaptación responsive para pantallas estrechas */
@media (max-width: 400px) {
  .rsvp-fields {
    flex-direction: column;
  }
}

/* ==========================================
   MÓDULO 8: ESTILOS MOSAICO ESTILO EDITORIAL
   ========================================== */
.modulo8-galeria {
  padding: 60px 20px;
  background-color: #ffffff;
  text-align: center;
}

.modulo8-contenedor {
  max-width: 1000px;
  margin: 0 auto;
}

.modulo8-titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #AA7A1E;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* Contenedor del Mosaico */
.modulo8-mosaico-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  }

.mosaico-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  background-color: #eaeaea;
}

.mosaico-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  justify-content: center;
}

.mosaico-item:hover img {
  transform: scale(1.05);
}

/* Layout en Pantallas Grandes / Desktop */
@media screen and (min-width: 768px) {
  .modulo8-mosaico-v2 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
  }

  /* La foto 1 abarca 2 filas verticales a la izquierda */
  .item-destacado {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  /* Fotos 2 y 3 quedan arriba */
  .item-cuadrado {
    grid-column: auto;
    grid-row: auto;
  }

  /* La foto 4 abarca 2 columnas en la parte inferior */
  .item-ancho {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* Layout para Celulares */
@media screen and (max-width: 767px) {
  .mosaico-item {
    aspect-ratio: 1 / 1;
  }

  /* En celular, la primera foto y la cuarta destacan en horizontal */
  .item-destacado,
  .item-ancho {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================
   MÓDULO 9: ESTILOS FOOTER ELEGANTE
   ========================================== */
.modulo9-footer {
  background-color: #1a1a1a; /* Oscuro sobrio */
  padding: 25px 20px;
  text-align: center;
  border-top: 1px solid #AA7A1E;
}

.modulo9-contenedor {
  max-width: 1000px;
  margin: 0 auto;
}

.modulo9-texto {
  font-family: 'Montserrat', sans-serif;
  color: #a0a0a0;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin: 0;
}

.modulo9-enlace {
  color: #AA7A1E;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.modulo9-enlace:hover {
  color: #d49e35;
  text-decoration: underline;
}





/* ==========================================
   ANIMACIONES ELEGANTES AL HACER SCROLL
   ========================================== */

/* Estado inicial: invisible y ligeramente desplazado hacia abajo */
.animar-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Estado activo: se revela con suavidad */
.animar-reveal.revelado {
  opacity: 1;
  transform: translateY(0);
}

/* Retardo gradual para elementos seguidos (efecto cascada) */
.retraso-1 { transition-delay: 0.15s; }
.retraso-2 { transition-delay: 0.30s; }
.retraso-3 { transition-delay: 0.45s; }
.retraso-4 { transition-delay: 0.60s; }