/* ═══════════════════════════════════════════════════════════════
   D&M ACADEMY — refinamiento visual
   ═══════════════════════════════════════════════════════════════

   Se carga DESPUÉS del <style> de cada página y solo afina lo que
   ya existe: sombras, cristal, movimiento y foco. No cambia
   estructura ni colores de marca.

   Se enlaza así, justo antes de </head>:
       <link rel="stylesheet" href="refinado.css">

   Al cambiar algo aquí cambia en las diez páginas a la vez.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Sombras en dos capas: una corta que define el borde y otra larga
     que da altura. Una sola sombra difusa se ve plana. */
  --s-sm:0 1px 2px rgba(7,21,64,.05), 0 2px 6px rgba(7,21,64,.04);
  --s-md:0 2px 4px rgba(7,21,64,.05), 0 8px 22px rgba(7,21,64,.07);
  --s-lg:0 4px 8px rgba(7,21,64,.06), 0 18px 48px rgba(7,21,64,.13);
  --s-xl:0 6px 12px rgba(7,21,64,.08), 0 28px 70px rgba(7,21,64,.18);

  --vidrio:rgba(255,255,255,.72);
  --vidrio-borde:rgba(255,255,255,.6);

  /* Curva con rebote leve: el movimiento parece físico, no mecánico */
  --curva:cubic-bezier(.34,1.3,.64,1);
  --suave:cubic-bezier(.4,0,.2,1);
}

/* ── tipografía ── */

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Cifras alineadas en columna: precios y números se leen de un vistazo */
.precio, .stat-num, .num, .contador, .price, [data-num]{
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{letter-spacing:-.015em}
h1{letter-spacing:-.025em}

/* ── cabecera: cristal de verdad ── */

header{
  background:var(--vidrio) !important;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(0,40,104,.07) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:box-shadow .3s var(--suave), padding .3s var(--suave),
             background .3s var(--suave);
}
header.scrolled{
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--s-md);
}
/* Sin soporte de desenfoque, fondo sólido: nunca texto sobre transparencia */
@supports not (backdrop-filter: blur(1px)){
  header{ background:rgba(255,255,255,.98) !important; }
}

.flag-stripe{
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}

/* ── logotipo ── */

.logo-img{
  transition:transform .35s var(--curva), filter .35s var(--suave);
  filter:drop-shadow(0 2px 6px rgba(7,21,64,.14));
}
.logo:hover .logo-img, .logo-brand:hover .logo-img{
  transform:scale(1.04) rotate(-1.5deg);
}

/* ── enlaces del menú: subrayado que crece ── */

/* Solo los enlaces del menú principal: los de dentro de un desplegable
   (.dd-item) no llevan subrayado, ahí quedaría fuera de lugar. */
.nav-links > li > a, .nav-link{
  position:relative;
  transition:color .22s var(--suave);
}
.nav-links > li > a::after, .nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-5px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(to right, var(--navy), var(--navy-mid));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s var(--curva);
}
.nav-links > li > a:hover::after, .nav-link:hover::after,
.nav-link-active::after{ transform:scaleX(1); }

/* ── botones ── */

.btn-portal, .btn-inscribete, .btn, button[class*="btn"], a[class*="btn"]{
  transition:transform .18s var(--curva),
             box-shadow .24s var(--suave),
             filter .2s var(--suave) !important;
}
.btn-portal{
  box-shadow:0 1px 2px rgba(0,40,104,.24),
             0 5px 14px rgba(0,40,104,.24),
             inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-portal:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(0,40,104,.24),
             0 10px 24px rgba(0,40,104,.32),
             inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-inscribete{
  box-shadow:0 1px 2px rgba(229,168,18,.3),
             0 5px 14px rgba(229,168,18,.28),
             inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-inscribete:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(229,168,18,.3),
             0 10px 24px rgba(229,168,18,.36),
             inset 0 1px 0 rgba(255,255,255,.28);
}
/* Al pulsar se hunde: sin esto el botón no parece un botón */
.btn-portal:active, .btn-inscribete:active,
button[class*="btn"]:active, a[class*="btn"]:active{
  transform:translateY(0) scale(.975) !important;
  transition-duration:.06s !important;
}

/* ── el foco del teclado tiene que verse ── */

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--navy);
  outline-offset:3px;
  border-radius:6px;
}

/* ── tarjetas ── */

.card, .curso-card, .materia-card, .evento-card, .libro-card,
.programa-card, .cert-card, .plan-card, .feature-card, .testimonio{
  border:1px solid rgba(7,21,64,.045);
  box-shadow:var(--s-sm);
  transition:transform .32s var(--curva), box-shadow .32s var(--suave);
}
.card:hover, .curso-card:hover, .materia-card:hover, .evento-card:hover,
.libro-card:hover, .programa-card:hover, .cert-card:hover,
.plan-card:hover, .feature-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--s-lg);
}

/* ── menú desplegable ── */

.mega, .nav-dropdown .mega, .dropdown-menu{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--s-xl) !important;
}
@supports not (backdrop-filter: blur(1px)){
  .mega, .dropdown-menu{ background:rgba(255,255,255,.99) !important; }
}
.dd-item{
  transition:background .2s var(--suave), transform .22s var(--curva);
  border-radius:10px;
}
.dd-item:hover{
  background:rgba(0,40,104,.05);
  transform:translateX(3px);
}
.dd-icon{ transition:transform .28s var(--curva); }
.dd-item:hover .dd-icon{ transform:scale(1.12); }

/* ── secciones oscuras: halos con los colores de la bandera ── */

.hero, .hero-section, .cta-section, .seccion-oscura, .dark-section{
  position:relative;
  overflow:hidden;
  /* Crea un contexto de apilamiento propio: permite que los halos vayan
     detrás del contenido sin tocar ni un solo hijo. */
  isolation:isolate;
}

/* ── el hero no debe depender de sus hijos para tener altura ──

   El carrusel quita la clase .active a la diapositiva que sale y se la da
   a la siguiente en dos operaciones separadas. Entre una y otra ninguna
   diapositiva está en position:relative, y como todas las demás están en
   absolute, el hero se queda sin nada que lo sostenga y colapsa a cero.

   Se ve al entrar en la página o al volver desde otra: fondo azul vacío.
   Una altura mínima propia lo sostiene siempre, pase lo que pase con las
   clases. No cambia nada cuando el contenido es más alto. */

.hero{
  min-height:620px;
}
@media (max-width:1024px){
  .hero{ min-height:560px; }
}
@media (max-width:480px){
  .hero{ min-height:480px; }
}

/* Además, la diapositiva que sale deja de ocupar el flujo de inmediato:
   sin esto, durante la transición podrían solaparse dos alturas. */
.hero-slide.exit{
  position:absolute;
}

/* ── el contenido del hero no puede quedar invisible ──

   Las piezas del hero se animan con fill-mode "both", que las mantiene
   en opacity:0 hasta que la animación arranca. Si algo impide que
   arranque —una preferencia del sistema, un navegador que no soporta la
   animación, un error de JavaScript antes de tiempo— el texto no aparece
   nunca y el hero queda vacío.

   Esta regla garantiza que la diapositiva activa siempre sea visible.
   Cuando la animación sí funciona, ella manda y el efecto se ve igual. */
.hero-slide.active .h-anim-1,
.hero-slide.active .h-anim-2,
.hero-slide.active .h-anim-3,
.hero-slide.active .h-anim-4,
.hero-slide.active .h-anim-img{
  animation-fill-mode:forwards;
}
/* Si el navegador no puede animar, se ve todo de entrada */
@supports not (animation-name: slideUp){
  .h-anim-1, .h-anim-2, .h-anim-3, .h-anim-4, .h-anim-img{
    opacity:1 !important;
    transform:none !important;
  }
}
.hero::before, .hero-section::before,
.cta-section::before, .seccion-oscura::before{
  content:'';
  position:absolute;
  width:480px; height:480px;
  border-radius:50%;
  top:-180px; right:-140px;
  background:radial-gradient(circle, rgba(229,168,18,.28), transparent 68%);
  filter:blur(70px);
  pointer-events:none;
  z-index:-1;
}
.hero::after, .hero-section::after,
.cta-section::after, .seccion-oscura::after{
  content:'';
  position:absolute;
  width:420px; height:420px;
  border-radius:50%;
  bottom:-160px; left:-130px;
  background:radial-gradient(circle, rgba(0,146,70,.24), transparent 68%);
  filter:blur(70px);
  pointer-events:none;
  z-index:-1;
}
/* No se toca ningún hijo del hero: muchas páginas los posicionan en absoluto
   (círculos decorativos, capas de color, puntos del carrusel) y forzarles
   position:relative los sacaría del sitio y empujaría el contenido. */

/* Pieza de cristal para usar sobre fondos con color */
.vidrio{
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  transition:background .28s var(--suave), transform .28s var(--curva);
}
.vidrio:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}
@supports not (backdrop-filter: blur(1px)){
  .vidrio{ background:rgba(255,255,255,.2); }
}

/* ── formularios ── */

input, select, textarea{
  transition:border-color .2s var(--suave), box-shadow .2s var(--suave);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus){
  border-color:#CBD3E2;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3.5px rgba(0,40,104,.13);
}

/* La aparición al desplazar ya la trae cada página con su propia distancia.
   Pisarla aquí solo cambiaría su diseño sin aportar nada. */

/* ── punto que late: más discreto ── */

.pulse-dot{
  box-shadow:0 0 0 0 rgba(0,146,70,.6);
  animation:dma-latido 2.4s var(--suave) infinite;
}
@keyframes dma-latido{
  0%  { box-shadow:0 0 0 0 rgba(0,146,70,.5); }
  70% { box-shadow:0 0 0 9px rgba(0,146,70,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,146,70,0); }
}

/* ── menú móvil ── */

.mobile-menu{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--s-xl) !important;
}
@supports not (backdrop-filter: blur(1px)){
  .mobile-menu{ background:#fff !important; }
}
.hamburger span{
  transition:transform .3s var(--curva), opacity .2s var(--suave);
}

/* ── imágenes ── */

img{ -webkit-user-drag:none; }
.card img, .curso-card img, .libro-card img, .evento-card img{
  transition:transform .5s var(--suave);
}
.card:hover img, .curso-card:hover img,
.libro-card:hover img, .evento-card:hover img{
  transform:scale(1.045);
}

/* ── quien pida menos movimiento, lo recibe ── */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    /* El retardo TAMBIÉN debe anularse. Las animaciones del hero usan
       fill-mode "both" con retardos de hasta 0,55 s: si solo se acorta la
       duración, el elemento se queda en su estado inicial (opacity:0)
       durante todo el retardo y el hero aparece vacío. */
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  /* Lo que aparece al desplazar debe verse de entrada */
  .reveal, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; }
  /* Y el contenido del hero, siempre visible */
  .h-anim-1, .h-anim-2, .h-anim-3, .h-anim-4, .h-anim-img{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* ── al imprimir, nada de efectos ── */

@media print{
  header, .mobile-menu, .hamburger, .btn-portal, .btn-inscribete{ display:none !important; }
  .hero::before, .hero::after,
  .hero-section::before, .hero-section::after,
  .cta-section::before, .cta-section::after{ display:none !important; }
  .card, .curso-card{ box-shadow:none !important; border:1px solid #ddd !important; }
  .reveal, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; }
}