/* ═══════════════════════════════════════════════════════════════
   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 ── */

/* ── menú móvil ──

   El menú es AZUL OSCURO con texto blanco. Una versión anterior de este
   archivo le forzaba fondo blanco, y el texto blanco desaparecía: solo
   quedaban visibles los emojis y los títulos dorados.

   Aquí solo se afina el desenfoque y se compacta el tamaño, que a 2rem
   con 2,5rem de separación no cabía en una pantalla de móvil. */

.mobile-menu{
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  /* Que se pueda desplazar si no cabe todo, en lugar de recortarse. */
  justify-content:flex-start !important;
  overflow-y:auto;
  padding:5.5rem 1.5rem 2.5rem;
  gap:.15rem !important;
}
@supports not (backdrop-filter: blur(1px)){
  .mobile-menu{ background:rgba(7,21,64,.99) !important; }
}

/* Enlaces: de 2rem a un tamaño que cabe, con área de pulsación cómoda. */
.mobile-menu a{
  font-size:1.15rem !important;
  font-weight:700 !important;
  width:100%;
  max-width:340px;
  text-align:center;
  padding:.85rem 1rem;
  border-radius:12px;
  transition:background .2s var(--suave), color .2s var(--suave);
}
.mobile-menu a:active{ background:rgba(255,255,255,.1); }

/* Los botones de acción sí destacan, pero sin ocupar media pantalla. */
.mobile-menu .btn-main,
.mobile-menu .btn-portal,
.mobile-menu .btn-inscribete{
  font-size:.95rem !important;
  padding:.85rem 2rem !important;
  width:auto;
  margin-top:.6rem;
}

/* En pantallas bajas, aún más compacto. */
@media (max-height:680px){
  .mobile-menu{ padding-top:4.5rem; }
  .mobile-menu a{ font-size:1.05rem !important; padding:.7rem 1rem; }
}

/* ── movimiento del menú ──

   Tres cosas hacen que un menú se sienta cuidado y no brusco:

   1. Que el panel entre desde arriba en lugar de aparecer de golpe.
   2. Que los enlaces lleguen escalonados, no todos a la vez. Ese retraso
      de unos milisegundos entre uno y otro es casi imperceptible, pero
      es la diferencia entre «se abrió una lista» y «se desplegó un menú».
   3. Que la hamburguesa se convierta en una X con una curva que rebote
      un poco, en vez de girar de forma mecánica.

   Todo con transform y opacity, que van en la tarjeta gráfica: en un
   móvil modesto se nota. */

.mobile-menu.open{
  animation:dmaMenuEntra .34s var(--suave) !important;
}
@keyframes dmaMenuEntra{
  from{ opacity:0; transform:translateY(-10px) }
  to  { opacity:1; transform:none }
}

/* Los enlaces llegan uno detrás de otro. */
.mobile-menu.open a,
.nav-links.abierto a{
  animation:dmaEnlaceEntra .42s var(--curva) backwards;
}
@keyframes dmaEnlaceEntra{
  from{ opacity:0; transform:translateY(-14px) }
  to  { opacity:1; transform:none }
}
.mobile-menu.open > *:nth-child(1),
.nav-links.abierto li:nth-child(1) a{ animation-delay:.05s }
.mobile-menu.open > *:nth-child(2),
.nav-links.abierto li:nth-child(2) a{ animation-delay:.09s }
.mobile-menu.open > *:nth-child(3),
.nav-links.abierto li:nth-child(3) a{ animation-delay:.13s }
.mobile-menu.open > *:nth-child(4),
.nav-links.abierto li:nth-child(4) a{ animation-delay:.17s }
.mobile-menu.open > *:nth-child(5),
.nav-links.abierto li:nth-child(5) a{ animation-delay:.21s }
.mobile-menu.open > *:nth-child(6){ animation-delay:.25s }
.mobile-menu.open > *:nth-child(7){ animation-delay:.28s }
.mobile-menu.open > *:nth-child(8){ animation-delay:.31s }
.mobile-menu.open > *:nth-child(9){ animation-delay:.34s }
.mobile-menu.open > *:nth-child(10){ animation-delay:.37s }
.mobile-menu.open > *:nth-child(11){ animation-delay:.40s }
.mobile-menu.open > *:nth-child(n+12){ animation-delay:.43s }

/* Al pulsar, el enlace responde de inmediato. */
.mobile-menu a,
.nav-links.abierto a{
  transition:background .2s var(--suave), color .2s var(--suave),
             transform .16s var(--curva);
}
.mobile-menu a:active,
.nav-links.abierto a:active{
  transform:scale(.97);
  background:rgba(255,255,255,.12) !important;
}

/* La hamburguesa se convierte en X con un rebote leve. */
.hamburger{
  transition:transform .3s var(--curva);
}
.hamburger:active{ transform:scale(.9) }
.hamburger span{
  transition:transform .38s var(--curva), opacity .18s var(--suave),
             background .3s var(--suave), width .3s var(--curva);
}
/* Al abrirse sobre el fondo azul, las barras pasan a blanco. */
.hamburger.open span{ background:#fff !important }
/* La barra del medio se encoge antes de desaparecer: da sensación de
   que las otras dos la absorben. */
.hamburger.open span:nth-child(2){ width:0 !important; opacity:0 }

/* ── red de seguridad ──

   Los enlaces usan fill-mode «backwards», que los mantiene invisibles
   durante el retardo. Si la animación no llegara a arrancar —por una
   preferencia del sistema, un navegador antiguo o cualquier motivo—
   el menú se abriría vacío.

   Es el mismo patrón que dejó el hero de la portada en blanco, así que
   aquí va cubierto desde el principio: si no hay animación, se ve todo. */

@supports not (animation-name: dmaEnlaceEntra){
  .mobile-menu.open a,
  .nav-links.abierto a{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* Quien pidió menos movimiento no recibe ninguno, pero sí ve el menú.
   Se anula también el retardo: sin él, «backwards» dejaría los enlaces
   invisibles hasta que pasara el tiempo de espera. */
@media (prefers-reduced-motion: reduce){
  .mobile-menu.open,
  .mobile-menu.open a,
  .mobile-menu.open > *,
  .nav-links.abierto a,
  .nav-links.abierto li{
    animation:none !important;
    animation-delay:0s !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ── 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; }
}