/* ============================================================
   SECCIÓN NUEVA — hero de la página de idioma:
   título con subrayado zigzag + rotador de banderas.
   ============================================================ */

/* ---------- Título con marcador zigzag ----------
   Replica el "highlight / underline_zigzag" que tenía el widget de Elementor:
   el trazo se dibuja en 1200 ms y se repite cada 8 s. */
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl svg{position:absolute;left:-.05em;bottom:-.26em;width:calc(100% + .1em);height:.46em;
  overflow:visible;pointer-events:none}
.hl svg path{fill:none;stroke:var(--bordo);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--largo);stroke-dashoffset:var(--largo)}
.hl.draw svg path{animation:trazo 1.2s cubic-bezier(.5,0,.5,1) forwards}
@keyframes trazo{to{stroke-dashoffset:0}}

/* las frases se apilan en la misma celda: el alto lo fija la más larga,
   así el título no salta al rotar */
.h1-rot{display:grid}
.h1-rot .frase{grid-area:1/1;opacity:0;transform:translateY(.28em);
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.h1-rot .frase.act{opacity:1;transform:none;pointer-events:auto}


.rot-cta{margin-top:1.2rem;max-width:420px;margin-inline:auto}
.rot-cta .btn{width:100%}
.rot-nota{margin-top:.6rem;font-size:.76rem;color:var(--tinta-3);text-align:center}

@media(prefers-reduced-motion:reduce){
  .hl svg path{stroke-dashoffset:0}
}