/* Motion + detalles gráficos de la portada, el catálogo, las páginas de curso, el blog y los formularios (postula, opinión).
   Mismo lenguaje que los anuncios pagados: titular que sube enmascarado, foto que se revela en círculo,
   línea dorada que se dibuja y entradas escalonadas.
   Todo se oculta solo cuando motion.js agrega .mo a <html> (sin JS o con movimiento reducido, se ve todo). */

/* ---------- Gráfica (siempre visible) ---------- */
/* clip (no hidden): con hidden el hero se podía desplazar por dentro y dejar la foto de fondo sin velo */
.hero { overflow: hidden; overflow: clip; isolation: isolate; }
/* anillos dorados detrás de las relatoras, como en los anuncios (solo páginas de curso) */
.hero:has(.hero-rel)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 620px; height: 620px; right: -140px; top: 50%; margin-top: -310px; border-radius: 50%;
  border: 1px solid rgba(196,149,58,.28);
  box-shadow: 0 0 0 46px rgba(196,149,58,.035), 0 0 0 120px rgba(196,149,58,.025); outline: 1px solid rgba(196,149,58,.18); outline-offset: 46px;
}
.docente img { box-shadow: 0 0 0 3px var(--navy, #1C2B4A), 0 0 0 5px rgba(196,149,58,.6); }
.fact { position: relative; }
.fact::before { content: ""; position: absolute; left: 24px; top: 0; width: 28px; height: 2px; background: var(--gold); transform-origin: left; }
.pilar-num { display: inline-block; }
/* secciones navy: anillo en la esquina inferior izquierda */
.docentes, .cta-final { position: relative; overflow: hidden; isolation: isolate; }
.docentes::after, .cta-final::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 380px; height: 380px; left: -190px; bottom: -190px;
  border-radius: 50%; border: 1px solid rgba(196,149,58,.3); box-shadow: 0 0 0 36px rgba(196,149,58,.04); outline: 1px solid rgba(196,149,58,.16); outline-offset: 36px;
}

/* blog: acentos dorados en etiqueta, separador y recuadro final */
.tag::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--gold); transform-origin: left; }
.meta { position: relative; }
.meta::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; background: var(--gold); transform-origin: left; }
main > .cta { position: relative; overflow: hidden; isolation: isolate; }
main > .cta::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 260px; height: 260px; right: -110px; bottom: -130px;
  border-radius: 50%; border: 1px solid rgba(196,149,58,.35); box-shadow: 0 0 0 26px rgba(196,149,58,.05); outline: 1px solid rgba(196,149,58,.18); outline-offset: 26px;
}

/* formulario enviado: check verde (se dibuja al aparecer) */
.form-success .ok, .exito .ok { display: block; width: 58px; height: 58px; margin: 0 auto 12px; fill: none; stroke: #1FA855; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .hero:has(.hero-rel)::after { width: 420px; height: 420px; right: -210px; top: auto; bottom: -120px; margin-top: 0; }
  main > .cta::after { right: -170px; bottom: -180px; }
}

/* ---------- Animación ---------- */
@keyframes mo-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes mo-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mo-reveal { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(75% at 50% 45%); } }
@keyframes mo-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-spin { to { transform: rotate(360deg); } }
@keyframes mo-float { 50% { transform: translateY(-8px); } }
@keyframes mo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mo-strike { from { background-size: 0 2px; } to { background-size: 100% 2px; } }
@keyframes mo-growy { from { transform: scaleY(0); } }
@keyframes mo-sweep { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mo-tab { from { opacity: 0; transform: translateX(60px); } }
@keyframes mo-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .mo .hero::after { animation: mo-up 1.2s cubic-bezier(.2,.8,.2,1) .2s both; }

  /* titular: palabras que suben desde una máscara */
  .mo .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  .mo .w { display: inline-block; animation: mo-rise .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.15s + var(--i) * .045s); }

  .mo .hero .label, .mo .hero-label { animation: mo-up .6s cubic-bezier(.2,.8,.2,1) .05s both; }
  .mo .hero .sub, .mo .hero .lead, .mo .hero-sub, .mo .hero-meta { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .55s both; }
  .mo .hero .lead { animation-delay: .7s; }
  /* formularios (postula, opinión): el párrafo del hero no lleva clase */
  .mo .hero .wrap > p { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .55s both; }
  .mo .hero-actions, .mo .hero-stats { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .85s both; }
  .mo .hero-sello { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) 1s both; }
  /* blog: cabecera del artículo */
  .mo main > .back, .mo .tag { animation: mo-up .6s cubic-bezier(.2,.8,.2,1) .05s both; }
  .mo .tag::before, .mo .meta::after { animation: mo-grow .8s cubic-bezier(.2,.8,.2,1) .8s both; }
  .mo main h1 ~ .meta, .mo article .lead { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .6s both; }
  .mo article .lead { animation-delay: .75s; }
  .post { transition: padding-left .25s; }
  .post:hover { padding-left: 10px; }
  .mo .hero-note { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) 1s both; }

  /* Oratoria: se tacha $30.000 y aparece $15.000 */
  .mo .hero-price { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .75s both; }
  .mo .hero-price s { animation: mo-strike .5s cubic-bezier(.6,0,.2,1) 1.25s both; }
  .mo .hero-price strong { display: inline-block; animation: mo-pop .6s cubic-bezier(.2,.8,.2,1) 1.55s both; }
  .mo .hero-price > span { animation: mo-up .6s cubic-bezier(.2,.8,.2,1) 1.75s both; }

  /* check del formulario: la animación parte cuando el bloque pasa de display:none a visible */
  .mo :is(.form-success, .exito) .ok :is(circle, path) { stroke-dasharray: 1; }
  .mo :is(.form-success, .exito) .ok circle { animation: mo-draw .6s ease-out .1s both; }
  .mo :is(.form-success, .exito) .ok path { animation: mo-draw .4s ease-out .6s both; }
  .mo .form-success h3, .mo .exito h2 { animation: mo-up .6s cubic-bezier(.2,.8,.2,1) .5s both; }

  /* logo de la portada: misma firma que el logo animado de la campaña, a tamaño de menú.
     La C se dibuja en barrido, entran las pestañas, aparece el círculo y sube el nombre letra por letra.
     Solo la primera vez de cada visita (motion.js pone .lgp); sin eso el logo se ve entero y quieto. */
  .lgp .lg { overflow: visible; }
  .lgp .lg g { transform-box: fill-box; }
  .lgp .lg .sweep { stroke-dasharray: 100 100; animation: mo-sweep .7s cubic-bezier(.6,0,.3,1) .1s both; }
  .lgp .lg .tab { animation: mo-tab .45s cubic-bezier(.2,.8,.2,1) .5s both; }
  .lgp .lg .t2 { animation-delay: .58s; }
  .lgp .lg .circ { transform-origin: center; animation: mo-pop .5s cubic-bezier(.2,.8,.2,1) .7s both; }
  .lgp .lg .dv { transform-origin: center; animation: mo-growy .45s cubic-bezier(.2,.8,.2,1) .85s both; }
  .lgp .lg .l { animation: mo-up .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.9s + var(--i) * .035s); }
  .lgp .lg .o { animation: mo-up .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.2s + var(--i) * .05s); }

  /* tarjetas de relatoras del hero: suben una tras otra y la foto se revela en círculo; después quedan quietas.
     Al pasar el cursor o enfocar, la tarjeta se levanta apenas (fill backwards, para que el hover pueda moverla). */
  .mo .rel-card { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) .45s backwards; }
  .mo .rel-card + .rel-card { animation-delay: .6s; }
  .mo .rel-card img { animation: mo-reveal 1s cubic-bezier(.6,0,.2,1) .7s both; }
  .mo .rel-card + .rel-card img { animation-delay: .85s; }
  .rel-card { transition: transform .25s, border-color .25s, background-color .25s; }
  .rel-card:hover, .rel-card:focus-visible { transform: translateY(-4px); }

  /* datos clave */
  .mo .fact { animation: mo-up .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1s + var(--i) * .1s); }
  .mo .fact::before { animation: mo-grow .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1.3s + var(--i) * .1s); }

  /* bloques que aparecen al hacer scroll */
  .mo .rv { opacity: 0; }
  .mo .rv.in { animation: mo-up .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .09s); }
  .mo .gold-line.rv { opacity: 1; transform: scaleX(0); transform-origin: left; }
  .mo .gold-line.rv.in { animation: mo-grow .8s cubic-bezier(.2,.8,.2,1) .15s both; }
  .mo .docente img.rv { opacity: 1; clip-path: circle(0%); }
  .mo .docente img.rv.in { animation: mo-reveal .9s cubic-bezier(.6,0,.2,1) .2s both; }
}