/* ==========================================================================
   Onda de voz animada y animación de botones, traídas del sitio NOMI
   para que Edu Care use exactamente las mismas piezas.
   Va después de educare.css: lo que repite, lo pisa.
   ========================================================================== */

/* ---- 1. ONDA DE VOZ -------------------------------------------------------
   En el sitio NOMI la onda es un <canvas> que se dibuja cuadro a cuadro.
   Acá reemplaza a los SVG fijos que había bajo los títulos.            */
/* .onda.onda para ganarle a `.acc .acc__wave`, que iba a 70px */
.onda.onda{
  display:block;
  width:min(300px,62vw);
  height:42px;
  margin-inline:auto;
}
.intro__wave.onda{ margin-top:18px }
.acc__wave.onda,
.pv__wave.onda{ margin-top:14px }

@media (prefers-reduced-motion:reduce){
  /* sin movimiento igual queda el trazo, dibujado una sola vez */
  .onda{ opacity:.9 }
}

/* ---- 2. BOTONES -----------------------------------------------------------
   El gradiente entra desde abajo al pasar el cursor, el botón sube 2px
   y la flecha se corre. Mismo tiempo y misma curva que en NOMI.        */
:root{ --onda-ease:cubic-bezier(.22,1,.36,1) }

.btn,
.cta-end__btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--onda-ease), box-shadow .5s var(--onda-ease),
             color .3s var(--onda-ease);
}

.btn::before,
.cta-end__btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,#3a24d6 0%,#3f7ff0 46%,#38d9a9 100%);
  transform:translateY(101%);
  transition:transform .55s var(--onda-ease);
}

.btn:hover,
.cta-end__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(58,36,214,.7);
}
.btn:hover::before,
.cta-end__btn:hover::before{ transform:translateY(0) }

/* la flecha acompaña, tanto si es <i> como si es el <span> del CTA final */
.btn i,
.btn > span[aria-hidden],
.cta-end__btn > span[aria-hidden]{
  font-style:normal;
  transition:transform .45s var(--onda-ease);
}
.btn:hover i,
.btn:hover > span[aria-hidden],
.cta-end__btn:hover > span[aria-hidden]{ transform:translateX(5px) }

/* sobre el gradiente el texto va en blanco, venga de donde venga el botón */
.btn--p:hover,
.btn--g:hover,
.btn--w:hover,
.cta-end__btn:hover,
#planes .plan--hl .btn--p:hover{ color:#fff }

/* estos cambiaban de fondo en hover; ahora el fondo lo pone el gradiente */
.btn--p:hover{ background:var(--violet) }
.btn--g:hover{ background:transparent; box-shadow:inset 0 0 0 1.5px transparent,
                                               0 14px 30px -14px rgba(58,36,214,.7) }
.btn--w:hover{ background:#fff }
.plan--hl .btn--p:hover{ background:#fff }
#planes .plan--hl .btn--p:hover{ background:var(--violet) }
.cta-end__btn:hover{ background:rgba(255,255,255,.7); border-color:var(--violet) }

@media (prefers-reduced-motion:reduce){
  .btn, .cta-end__btn, .btn::before, .cta-end__btn::before,
  .btn i, .cta-end__btn > span[aria-hidden]{ transition:none }
  .btn:hover, .cta-end__btn:hover{ transform:none }
}

/* ---- 3. MENÚ MÓVIL --------------------------------------------------------
   Mismo panel que NOMI Mental Care: pantalla completa, tipografía display
   grande, filetes finos y entrada escalonada. Cambian solo las secciones. */
.mnav{
  position:fixed;
  inset:0;
  top:0;
  z-index:150;
  /* el panel original era una columna centrada: acá los bloques van a lo ancho */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  background:var(--paper);
  box-shadow:none;
  border-top:0;
  overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) clamp(20px,5vw,34px)
          calc(40px + env(safe-area-inset-bottom,0px));
  opacity:0;
  visibility:hidden;
  transform:none;
  transition:opacity .35s var(--onda-ease), visibility .35s;
}
.mnav.is-on{ opacity:1; visibility:visible; transform:none }

.mnav__top{
  width:100%;
  max-width:520px;
  margin-inline:auto;
  min-height:44px;
}

/* la lista deja de estar centrada a lo alto: arranca arriba, como en NOMI */
.mnav ul.mnav__l{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:2px;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  padding:18px 0 0;
  flex:0 0 auto;
}
.mnav ul.mnav__l li{ border:0 }
.mnav ul.mnav__l li:last-child{ border:0 }

.mnav ul.mnav__l a{
  display:block;
  text-align:left;
  white-space:normal;
  padding:16px 4px;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.5rem,7vw,2.1rem);
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  border-bottom:1px solid rgba(10,10,18,.07);
  opacity:0;
  transform:translateY(12px);
  transition:color .3s var(--onda-ease);
}
.mnav ul.mnav__l a:hover{ color:var(--violet) }
.mnav ul.mnav__l a[aria-current]{ color:var(--violet) }

/* las dos experiencias cuelgan de "Cómo funciona", como el submenú de NOMI */
.mnav ul.mnav__l li:nth-child(3) a,
.mnav ul.mnav__l li:nth-child(4) a{
  padding-left:20px;
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(.98rem,4.2vw,1.16rem);
  padding-block:12px;
  color:var(--ink-60);
}

@keyframes mnavIn{ to{ opacity:1; transform:none } }
.mnav.is-on ul.mnav__l a{
  animation:mnavIn .5s var(--onda-ease) forwards;
  animation-delay:calc(var(--i,0) * .045s + .08s);
}
.mnav ul.mnav__l li:nth-child(1) a{ --i:0 }
.mnav ul.mnav__l li:nth-child(2) a{ --i:1 }
.mnav ul.mnav__l li:nth-child(3) a{ --i:2 }
.mnav ul.mnav__l li:nth-child(4) a{ --i:3 }
.mnav ul.mnav__l li:nth-child(5) a{ --i:4 }
.mnav ul.mnav__l li:nth-child(6) a{ --i:5 }
.mnav ul.mnav__l li:nth-child(7) a{ --i:6 }
.mnav ul.mnav__l li:nth-child(8) a{ --i:7 }

.mnav__ft{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  padding-top:32px;
}
.mnav a.mnav__cta{
  width:auto;
  align-self:flex-start;
  box-sizing:border-box;
  padding:.78em 1.5em;
  background:var(--violet);
  color:#fff;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.99rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  opacity:0;
  transform:translateY(12px);
}
.mnav a.mnav__back{
  width:auto;
  align-self:flex-start;
  border:0;
  padding:4px;
  font-size:.62rem;
  color:#6b6c80;
  opacity:0;
  transform:translateY(12px);
}
.mnav.is-on a.mnav__cta{ animation:mnavIn .5s var(--onda-ease) .42s forwards }
.mnav.is-on a.mnav__back{ animation:mnavIn .5s var(--onda-ease) .48s forwards }

@media (prefers-reduced-motion:reduce){
  .mnav ul.mnav__l a, .mnav a.mnav__cta, .mnav a.mnav__back{ opacity:1; transform:none; animation:none }
}