/* ==========================================================
   STEPPERS 1: CLARO GLASSMORPHISM (ESTILO APPLE) + VERDE CLARO
   ========================================================== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: #eef1f4 !important; /* Gris/plata muy suave, NO blanco plano */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #2d3135 !important;
  box-sizing: border-box !important;

  /* TRUCO ANTI-COPIA: Bloquea la selección de texto en cualquier navegador */
  -webkit-user-select: none !important; /* Safari */
  -moz-user-select: none !important;    /* Firefox */
  -ms-user-select: none !important;     /* IE10+ */
  user-select: none !important;         /* Chrome, Opera y estándar */
}

*, *:before, *:after {
  box-sizing: inherit !important;
}

body {
  overflow-x: hidden !important;
}

/* ==========================================================
   FONDO DE ESFERAS Y ANIMACIONES
   ========================================================== */
.esferas-fondo-armando {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background:
    radial-gradient(circle at top left, rgba(255, 157, 36, 0.22), transparent 32%),
    radial-gradient(circle at bottom right, rgba(0, 210, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #fffaf1 0%, #f3eee6 50%, #ffffff 100%) !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.orbe-luz {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(70px) !important;
  opacity: 0.58 !important;
}

.orbe-fuego-1 {
  width: 360px !important;
  height: 360px !important;
  top: -70px !important;
  left: -90px !important;
  background: radial-gradient(circle, rgba(255,85,0,0.9) 0%, rgba(255,143,36,0.38) 60%, rgba(0,0,0,0) 100%) !important;
  animation: flotarFuego 8s ease-in-out infinite alternate !important;
}

.orbe-turquesa-1 {
  width: 380px !important;
  height: 380px !important;
  bottom: -95px !important;
  right: -90px !important;
  background: radial-gradient(circle, rgba(0,210,255,0.75) 0%, rgba(0,145,210,0.28) 65%, rgba(0,0,0,0) 100%) !important;
  animation: flotarTurquesa 10s ease-in-out infinite alternate !important;
}

.orbe-fucsia {
  width: 310px !important;
  height: 310px !important;
  top: 34% !important;
  right: -120px !important;
  background: radial-gradient(circle, rgba(255,0,187,0.55) 0%, rgba(180,0,130,0.22) 55%, rgba(0,0,0,0) 100%) !important;
  animation: flotarFucsia 7s ease-in-out infinite alternate !important;
}

.orbe-oro {
  width: 330px !important;
  height: 330px !important;
  bottom: -110px !important;
  left: -110px !important;
  background: radial-gradient(circle, rgba(255,187,0,0.72) 0%, rgba(200,100,0,0.24) 60%, rgba(0,0,0,0) 100%) !important;
  animation: flotarOro 9s ease-in-out infinite alternate !important;
}

.orbe-cian-aux {
  width: 260px !important;
  height: 260px !important;
  top: -90px !important;
  right: 15% !important;
  background: radial-gradient(circle, rgba(0,119,255,0.45) 0%, rgba(0,50,150,0.18) 50%, rgba(0,0,0,0) 100%) !important;
  animation: flotarFuego 11s ease-in-out infinite alternate-reverse !important;
}

.orbe-fuego-2 {
  width: 280px !important;
  height: 280px !important;
  top: 55% !important;
  left: 20% !important;
  background: radial-gradient(circle, rgba(255,60,0,0.55) 0%, rgba(150,30,0,0.18) 60%, rgba(0,0,0,0) 100%) !important;
  animation: flotarOro 8s ease-in-out infinite alternate-reverse !important;
}

.orbe-extra-1 { top: 13% !important; left: 74% !important; animation-delay: -4s !important; }
.orbe-extra-2 { top: 75% !important; left: 5% !important; right: auto !important; bottom: auto !important; animation-delay: -8s !important; }
.orbe-extra-3 { top: 44% !important; left: 42% !important; width: 260px !important; height: 260px !important; animation-delay: -2s !important; }

@keyframes flotarFuego {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(160px, 110px) scale(1.25); }
  100% { transform: translate(-40px, 230px) scale(0.9); }
}
@keyframes flotarTurquesa {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-180px, -150px) scale(1.3); }
  100% { transform: translate(60px, -190px) scale(0.95); }
}
@keyframes flotarFucsia {
  0% { transform: translate(0, 0) scale(0.9); }
  50% { transform: translate(-210px, 150px) scale(1.35); }
  100% { transform: translate(-80px, -120px) scale(1); }
}
@keyframes flotarOro {
  0% { transform: translate(0, 0) scale(1.15); }
  50% { transform: translate(180px, -40px) scale(0.95); }
  100% { transform: translate(90px, 170px) scale(1.2); }
}

/* ==========================================================
   TARJETA CONTENEDORA - TRANSPARENCIA ESTILO APPLE (GLASSMORPHISM)
   ========================================================== */
.envoltorio-pagina {
  width: 100% !important;
  min-height: 100vh !important;
  padding: 42px 14px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  z-index: 10 !important;
}

.tarjeta-certificacion {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 35px 24px 24px 24px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06) !important;
  border-radius: 32px !important;
}

.cabecera-certificacion {
  text-align: center !important;
  padding: 8px 8px 22px 8px !important;
}

/* ==========================================================
   FOTO CIRCULAR GIRO INLINE CONSTANTE
   ========================================================== */
.marco-foto-resplandor {
  display: block !important;
  width: 218px !important;
  height: 218px !important;
  margin: 0 auto 22px auto !important;
  position: relative !important;
  border-radius: 50% !important;
  border: 3.5px solid #66cc99 !important; /* Verdecito claro de acento */
  background-color: #ffffff !important;
  cursor: pointer !important;
  transform-style: preserve-3d !important;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease !important;
}

.marco-foto-resplandor:hover {
  transform: rotateY(360deg) scale(1.04) !important;
  box-shadow: 0 0 35px rgba(102, 204, 153, 0.45) !important;
}

.recorte-imagen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 3 !important;
}

.recorte-imagen .foto-perfil {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

@keyframes giraDiscoIncesante {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================
   TÍTULOS EFECTO MAQUINA ESCRITORA
   ========================================================== */
.contenedor-nombre-efecto {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto 8px auto !important;
}

.nombre-principal {
  font-size: clamp(1.35rem, 5vw, 2.35rem) !important;
  font-weight: 900 !important;
  color: #1e2225 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  display: inline-block !important;
  border-right: 3.5px solid #66cc99 !important; /* Cursor verde claro */
  width: 0;
  max-width: 36ch !important;
  animation: escribirComputadora 2.4s steps(36) forwards, parpadeoCursorReal 0.75s step-end infinite !important;
  animation-delay: 0.5s !important;
}

@keyframes escribirComputadora { from { width: 0; } to { width: 36ch; } }
@keyframes parpadeoCursorReal { from, to { border-color: transparent; } 50% { border-color: #66cc99; } }

.subtitulo-principal {
  color: #4ca37b !important; /* Tono verde adaptado para legibilidad */
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  margin: 14px 0 6px 0 !important;
}

/* ==========================================================
   BLOQUES Y ADAPTACIONES VISUALES
   ========================================================== */
.seccion-imagen-principal, .imagen-expositor-destacada, .bienvenida, .descuentos, .expositor, .frase-final, .redes, .pie-creditos, .bloque-seccion {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}

.imagen-principal, .imagen-expositor-destacada img {
  width: 100% !important;
  border-radius: 20px !important;
  display: block !important;
  object-fit: cover !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
}

.bienvenida { text-align: center !important; }
.etiqueta-bienvenida { font-size: 1.02rem !important; color: #5a6065 !important; margin: 0 0 6px 0 !important; }
.logo-steppers { width: min(250px, 68%) !important; height: auto !important; display: block !important; margin: 0 auto 15px auto !important; }
.bienvenida p { color: #40454a !important; font-size: 0.96rem !important; line-height: 1.65 !important; max-width: 650px !important; margin: 0 auto !important; }
.frase-motivacion { font-size: 0.85rem !important; font-weight: 800 !important; color: #4ca37b !important; text-transform: uppercase !important; margin: 15px 0 0 0 !important; }

/* ==========================================================
   ACORDEONES (ACENTUACIÓN VERDECITO CLARO)
   ========================================================== */
.bloque-seccion h2, .expositor h2, .redes h2 {
  background: transparent !important;
  color: #1e2225 !important;
  text-align: center !important;
  font-size: clamp(1.2rem, 4vw, 1.55rem) !important;
  margin: 0 0 14px 0 !important;
  font-weight: 800 !important;
}

.acordeon {
  width: 100% !important;
  margin: 0 0 9px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.65) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
}

.acordeon summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 15px 20px !important;
  background: #66cc99 !important; /* Botón en tono verde claro */
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
}

.acordeon summary::-webkit-details-marker { display: none !important; }
.acordeon summary::after { content: "+" !important; color: #ffffff !important; font-size: 1.4rem !important; font-weight: 900 !important; }
.acordeon[open] summary::after { content: "−" !important; }
.acordeon summary:hover { background: #55b982 !important; }

.contenido-acordeon {
  padding: 20px !important;
  background: rgba(255,255,255,0.35) !important;
  color: #353a3f !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

.contenido-acordeon h3, .contenido-acordeon h4 { color: #4ca37b !important; margin-bottom: 10px !important; font-weight: 800; }
.contenido-acordeon ol, .contenido-acordeon ul { padding-left: 20px; margin: 10px 0; }
.contenido-acordeon li { margin-bottom: 6px; }

.tabla-costos div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.08); padding: 9px 0; }
.tabla-costos strong { color: #4ca37b; font-size: 1.1rem; }

/* ==========================================================
   GRID DE DESCUENTOS Y LOGOS
   ========================================================== */
.descuentos p { text-align: center !important; color: #4a5055 !important; font-weight: 600 !important; }
.logos-descuento, .logos-avales { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; padding: 10px 0 !important; }
.logos-descuento img, .logos-avales img { width: 45% !important; max-width: 145px !important; object-fit: contain !important; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06)) !important; transition: transform 0.25s ease !important; }
.logos-descuento img:hover, .logos-avales img:hover { transform: scale(1.06) !important; }

/* ==========================================================
   EXPOSITOR Y ELEMENTOS FINALES
   ========================================================== */
.nombre-expositor { text-align: left !important; font-size: 0.85rem !important; font-weight: 900 !important; color: #4ca37b !important; letter-spacing: 0.08em !important; }
.foto-expositor-horizontal { width: 100% !important; max-height: 380px !important; object-fit: cover !important; border-radius: 16px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important; }
.frase-final p { text-align: center; font-family: Georgia, serif !important; font-size: 1.15rem !important; line-height: 1.8 !important; font-style: italic !important; color: #4a5055 !important; }

/* ==========================================================
   REDES Y WHATSAPP CON ACENTO VERDE
   ========================================================== */
.iconos-redes { display: flex !important; justify-content: center !important; gap: 14px !important; margin: 15px 0 !important; }
.iconos-redes a { width: 55px !important; height: 55px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; box-shadow: 0 6px 18px rgba(0,0,0,0.05) !important; transition: transform 0.2s ease !important; }
.iconos-redes a:hover { transform: translateY(-3px) scale(1.06) !important; }
.iconos-redes img { width: 34px !important; }
.texto-whatsapp { text-align: center; font-size: 0.8rem !important; color: #555e65 !important; font-weight: 600; text-transform: uppercase; margin-bottom: 14px; }

.boton-whatsapp-grande {
  width: 100px !important; height: 100px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; margin: 0 auto;
  background: #66cc99 !important; /* Fondo verde claro */
  box-shadow: 0 12px 28px rgba(102, 204, 153, 0.35) !important;
  transition: transform 0.25s ease !important;
}
.boton-whatsapp-grande:hover { transform: scale(1.08) rotate(4deg) !important; }
.boton-whatsapp-grande img { width: 58px !important; filter: brightness(0) invert(1); } /* Ícono en color blanco */

/* ==========================================================
   FOOTER O PIE DE CREDITO
   ========================================================== */
.pie-creditos { text-align: center !important; padding-top: 18px; }
.mini-redes { display: flex !important; justify-content: center !important; gap: 10px !important; margin-bottom: 8px !important; }
.mini-redes img { width: 18px !important; opacity: 0.5; }
.pie-creditos p { font-size: 0.8rem !important; color: #7a828a !important; margin: 0 !important; }

/* MEDIA QUERIES RESPONSIVE */
@media (max-width: 620px) {
  .tarjeta-certificacion { padding: 25px 14px !important; }
  .acordeon summary { font-size: 1.05rem !important; padding: 14px 16px !important; }
}