/* tioweb-framework 0.5.0-dev · cabecera H8 (complemento de la plantilla Atomic de Theme Builder).
   Origen: H8 assets/css/site-header.css. Solo comportamiento y estados que Elementor V4 no puede expresar:
   la apariencia editable (tamaños, colores, textos, espacios) vive en los estilos locales de la plantilla.
   Alcance: atributos data-tw-* del contrato de la cabecera. Los estados animados requieren html.tw-hdr-ready
   (los agrega header/boot.js): sin JS, la cabecera queda con el comportamiento nativo de M1-F.
   Especificidad: html … [data-tw-*] supera a .elementor .e-xxxx (estilo local) sin !important. */

/* ---------- 0 · Tokens del movimiento (H8 :root) ---------- */
[data-tw-header], [data-tw-menu] {
  --tw-header-hide-threshold: 10;
  --tw-roll-duration: 500ms;
  --tw-roll-stagger: 30ms;
  --tw-roll-ease: cubic-bezier(.76, 0, .024, 1);
  --tw-arrow-ease: cubic-bezier(.23, .65, .74, 1.09);
  --tw-menu-open-duration: 800ms;
  --tw-menu-close-duration: 450ms;
  --tw-menu-ease: cubic-bezier(.77, 0, .175, 1);
  --tw-menu-close-ease: cubic-bezier(.55, 0, .675, .19);
  --tw-star-ease: cubic-bezier(.22, 1, .36, 1);
  --tw-star-duration: 450ms;
  --tw-menu-video-delay: 320ms;
}

/* ---------- 1 · Bloqueo de scroll sin salto (H8 H2) ---------- */
html.tw-menu-open.tw-scrollbar-classic { scrollbar-gutter: stable; }
html.tw-menu-open, html.tw-menu-open body { overflow: hidden; }

/* ---------- 2 · Barra: ocultación con el desplazamiento (H8 .tw-site-header) ---------- */
html.tw-hdr-ready [data-tw-header-bar] {
  transition: opacity .3s var(--tw-arrow-ease), translate .3s var(--tw-arrow-ease), visibility 0s linear 0s;
}
html.tw-hdr-ready [data-tw-header-bar].is-hidden {
  opacity: 0;
  translate: 0 -10px;
  visibility: hidden;
  transition: opacity .3s var(--tw-arrow-ease), translate .3s var(--tw-arrow-ease), visibility 0s linear .3s;
}

/* ---------- 3 · CTA con rodillo de letras (H8 .tw-cta-roll) ---------- */
.tw-fw-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-tw-roll] .tw-fw-roll { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: top; white-space: nowrap; }
[data-tw-roll] .tw-fw-roll__line { display: block; }
[data-tw-roll] .tw-fw-roll__char {
  display: inline-block;
  transition: transform var(--tw-roll-duration) var(--tw-roll-ease);
  transition-delay: calc(var(--i, 0) * var(--tw-roll-stagger));
}
html [data-tw-roll] .tw-fw-roll-icon { display: inline-grid; place-items: center; height: 1.1em; overflow: hidden; }
[data-tw-roll] .tw-fw-roll-icon__glyph { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  [data-tw-roll]:hover .tw-fw-roll__char { transform: translateY(-100%); }
  [data-tw-roll]:hover .tw-fw-roll-icon__glyph { animation: tw-fw-slide-right-up .6s var(--tw-arrow-ease) .3s 1 both; }
}
[data-tw-roll]:focus-visible .tw-fw-roll__char { transform: translateY(-100%); }
[data-tw-roll]:focus-visible .tw-fw-roll-icon__glyph { animation: tw-fw-slide-right-up .6s var(--tw-arrow-ease) .3s 1 both; }
@keyframes tw-fw-slide-right-up {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100%, -100%); }
  51% { opacity: 0; }
  52% { transform: translate(-100%, 100%); opacity: 0; }
  53% { opacity: 1; }
  100% { transform: translate(0, 0); }
}

/* ---------- 4 · Panel: apertura desde el botón y cierre animado (H8 system-menu) ---------- */
/* Cerrado (y destino de la salida): el recorte vuelve al círculo del botón. display/overlay con allow-discrete
   mantienen el panel visible y en la capa superior durante la salida. Sin soporte, el cierre es instantáneo. */
html.tw-hdr-ready [data-tw-menu] {
  clip-path: var(--tw-menu-clip-start, inset(0 round 50px));
  transition:
    clip-path var(--tw-menu-close-duration) var(--tw-menu-close-ease),
    display var(--tw-menu-close-duration) allow-discrete,
    overlay var(--tw-menu-close-duration) allow-discrete;
}
/* Abierto: lo anima el JS (WAAPI, 800 ms); el estado final lo sostiene esta regla. */
html.tw-hdr-ready [data-tw-menu]:popover-open { clip-path: var(--tw-menu-clip-end, none); transition: none; }
/* Primer frame tras abrir, antes de medir: oculto, para no mostrar el panel completo un instante. */
html.tw-hdr-ready [data-tw-menu].is-preparing { clip-path: inset(50%); }

/* Velo (H8 .tw-menu__scrim: entra en .3 s, sale en .25 s). */
html.tw-hdr-ready [data-tw-menu]::backdrop {
  background-color: rgb(10 10 10 / 0);
  transition:
    background-color .25s ease-out,
    display .25s allow-discrete,
    overlay .25s allow-discrete;
}
html.tw-hdr-ready [data-tw-menu]:popover-open::backdrop { background-color: rgb(10 10 10 / .55); transition: background-color .3s ease-out; }
@starting-style {
  html.tw-hdr-ready [data-tw-menu]:popover-open::backdrop { background-color: rgb(10 10 10 / 0); }
}

/* Entrada escalonada (H8: fade-in-up tras el recorte; --i lo asigna menu.js). Solo opacity y translate. */
html.tw-hdr-ready [data-tw-menu-item],
html.tw-hdr-ready [data-tw-menu-fade] { opacity: 0; translate: 0 24px; }
html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-item] {
  opacity: 1;
  translate: 0 0;
  transition: opacity .24s ease, translate .32s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(380ms + var(--i, 0) * 40ms);
}
html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-fade] {
  opacity: 1;
  translate: 0 0;
  transition: opacity .3s ease-out .56s, translate .4s cubic-bezier(.22, .61, .36, 1) .56s;
}
html.tw-hdr-ready [data-tw-menu].is-closing [data-tw-menu-item],
html.tw-hdr-ready [data-tw-menu].is-closing [data-tw-menu-fade] { opacity: 0; translate: 0 0; transition: opacity .14s ease; transition-delay: 0s; }

/* X del panel: nace como hamburguesa y forma la X (H8: se juntan 0–160 ms y giran ±45° 200–360 ms).
   Al cerrar, primero vuelve a horizontal y luego se separan. */
html.tw-hdr-ready [data-tw-menu-close] [data-tw-line] {
  transform: none;
  rotate: 0deg;
  transition: rotate .16s ease, translate .16s ease .2s;
}
html.tw-hdr-ready [data-tw-menu-close] [data-tw-line="a"] { translate: 0 -3.5px; }
html.tw-hdr-ready [data-tw-menu-close] [data-tw-line="b"] { translate: 0 3.5px; }
html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-close] [data-tw-line] { translate: 0 0; transition: translate .16s ease, rotate .16s ease .2s; }
html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-close] [data-tw-line="a"] { rotate: 45deg; }
html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-close] [data-tw-line="b"] { rotate: -45deg; }

/* 0.4.0 · Con el panel abierto, la hamburguesa queda debajo del velo y asomaba 2 px sobre el borde superior del panel
   (un semicírculo gris junto a la X). Se oculta mientras el menú está abierto; vuelve al cerrar, bajo el recorte. */
html.tw-hdr-ready.tw-menu-open [data-tw-menu-toggle] { opacity: 0; transition: opacity .2s linear; }

/* ---------- 5 · Submenú plegable (H8 .tw-menu__sub-toggle) ---------- */
/* El botón solo existe con JS: sin JS el submenú queda abierto y no hay un control que no haga nada. */
html.tw-hdr-ready [data-tw-menu-subtoggle] { display: grid; place-items: center; }
html.tw-hdr-ready [data-tw-menu-subtoggle] > * { transition: rotate .3s var(--tw-arrow-ease); }
html.tw-hdr-ready [data-tw-menu-subtoggle][aria-expanded="true"] > * { rotate: 135deg; }
html.tw-hdr-ready [data-tw-menu-sub][hidden] { display: none; }
html.tw-hdr-ready [data-tw-menu-sub]:not([hidden]) { animation: tw-fw-menu-sub-in .3s var(--tw-arrow-ease) both; }
@keyframes tw-fw-menu-sub-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 6 · Foco visible dentro del panel blanco ---------- */
/* El estilo por defecto de los enlaces del kit dibuja el foco en blanco: sobre el panel no se ve. */
html .elementor [data-tw-menu] a:focus-visible { outline: 2px solid var(--tw-color-ink, #0A0A0A); outline-offset: 4px; }

/* ---------- 7 · Panel en una columna entre 1025 y 1199 px (H8 @media max-width 1199px) ---------- */
/* 0.5.0: el lateral (con el video) se ancla abajo a la derecha con posición absoluta (estilo local de Elementor)
   también en este tramo; el pie va en la fila 3, así nunca se superponen. */
/* Elementor solo distingue ≤1024 (tablet): este tramo se resuelve aquí, acotado al panel del menú. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
  html .elementor [data-tw-menu-content] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 28px; }
  html .elementor [data-tw-menu-aside] { align-items: flex-start; text-align: left; }
  html .elementor [data-tw-menu-aside] + * { align-self: end; }
}

/* ---------- 8 · Enlace de salto del tema con el aspecto de H8 (.tw-skip) ---------- */
html.tw-hdr-ready .skip-link.screen-reader-text:focus {
  top: 12px;
  left: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background-color: var(--tw-color-paper, #fff);
  color: var(--tw-color-ink, #0A0A0A);
  font-family: var(--tw-font-display, inherit);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none;
  text-decoration: none;
}

/* ---------- 10 · Elemento activo del menú (0.4.0, nav-current.js) ---------- */
/* Punto violeta pequeño a la izquierda del enlace activo: no desplaza el texto ni cambia el ancho de ningún ítem.
   aria-current="page" (página actual) o "location" (sección visible de la home). Sin JS no se marca nada. */
html.tw-hdr-ready [data-tw-menu-nav] a[aria-current] { position: relative; }
html.tw-hdr-ready [data-tw-menu-nav] a[aria-current]::before {
  content: "";
  position: absolute;
  inset-inline-start: -.4em;
  inset-block-start: var(--tw-current-top, .6em);
  width: .15em;
  height: .15em;
  border-radius: 50%;
  background-color: var(--tw-color-accent-violet, #7B5FE8);
  pointer-events: none;
}

/* ---------- 11 · Movimiento decorativo reutilizable: órbita lenta (0.4.0) ---------- */
/* Contrato: data-tw-motion="orbit" en una imagen decorativa (Elementor: atributo del widget Imagen).
   Giro continuo y lento con una flotación mínima. Solo corre con el menú abierto (si el objeto vive en el panel) y
   se detiene con movimiento reducido. No ocupa foco ni recibe clics. */
[data-tw-motion="orbit"] { pointer-events: none; user-select: none; }
html.tw-hdr-ready [data-tw-motion="orbit"] {
  animation: tw-fw-orbit var(--tw-orbit-duration, 48s) linear infinite, tw-fw-float 7s ease-in-out infinite alternate;
  will-change: transform;
}
html.tw-hdr-ready [data-tw-menu]:not(:popover-open) [data-tw-motion="orbit"] { animation-play-state: paused; }
@keyframes tw-fw-orbit { to { rotate: 360deg; } }
@keyframes tw-fw-float { from { translate: 0 -4px; } to { translate: 0 4px; } }

/* ---------- 12 · Estrella indicadora del menú (0.5.0, nav-indicator.js) ---------- */
/* Una sola estrella que se mueve con transform entre filas; el texto de los enlaces no cambia.
   Tinta en reposo (fila con aria-current) y violeta en la fila activa (cursor, foco visible o toque). */
html.tw-nav-star-ready [data-tw-menu-nav] { position: relative; }
.tw-fw-nav-star {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: var(--tw-color-ink, #0A0A0A);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--tw-star-x, 0px), var(--tw-star-y, 0px), 0) rotate(var(--tw-star-turn, 0deg));
  transition: transform var(--tw-star-duration) var(--tw-star-ease), color .25s ease, opacity .25s ease;
  will-change: transform;
}
.tw-fw-nav-star svg { display: block; width: 100%; height: 100%; }
.tw-fw-nav-star[data-tw-star="rest"] { opacity: 1; }
.tw-fw-nav-star[data-tw-star="active"] { opacity: 1; color: var(--tw-color-accent-violet, #7B5FE8); }
.tw-fw-nav-star.is-instant { transition: none; }
/* La estrella reemplaza al punto violeta de 0.4.0 (dos indicadores para la misma fila sobran). */
html.tw-nav-star-ready [data-tw-menu-nav] a[aria-current]::before { display: none; }
/* El área del enlace ocupa toda la fila: cursor y clic coinciden con la fila que señala la estrella. */
html.tw-nav-star-ready [data-tw-menu-nav] [data-tw-nav-row] > a,
html.tw-nav-star-ready [data-tw-menu-nav] [data-tw-nav-row] > span:first-child > a { display: block; }
html.tw-nav-star-ready [data-tw-menu-nav] [data-tw-nav-row]:has(> [data-tw-menu-subtoggle]) > span:first-child { flex: 1 1 auto; min-width: 0; }
/* El texto no cambia de color con el cursor: la estrella es la señal (el atenuado de la plantilla queda sin JS). */
html.tw-nav-star-ready .elementor [data-tw-menu-nav] [data-tw-nav-row]:hover,
html.tw-nav-star-ready .elementor [data-tw-menu-nav] [data-tw-nav-row] :hover { color: var(--tw-color-ink, #0A0A0A); }
html.tw-nav-star-ready .elementor [data-tw-menu-nav] a[data-tw-nav-row] { align-self: stretch; }
/* Botón del submenú: la estrella original cede su lugar a un «+» discreto; cuando la estrella móvil llega a la fila,
   el «+» se oculta (nunca dos estrellas). Abierto, el «+» gira a «×». Sigue siendo el mismo botón con aria-expanded. */
html.tw-nav-star-ready [data-tw-menu-subtoggle] { position: relative; }
html.tw-nav-star-ready [data-tw-menu-subtoggle] > * { opacity: 0; }
html.tw-nav-star-ready [data-tw-menu-subtoggle]::before,
html.tw-nav-star-ready [data-tw-menu-subtoggle]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  border-radius: 1px;
  background-color: rgba(10, 10, 10, .55);
  transition: opacity .2s ease, rotate .3s var(--tw-arrow-ease);
}
html.tw-nav-star-ready [data-tw-menu-subtoggle]::after { rotate: 90deg; }
html.tw-nav-star-ready [data-tw-menu-subtoggle][aria-expanded="true"]::before { rotate: 45deg; }
html.tw-nav-star-ready [data-tw-menu-subtoggle][aria-expanded="true"]::after { rotate: 135deg; }
html.tw-nav-star-ready [data-tw-menu-subtoggle][data-tw-star-here]::before,
html.tw-nav-star-ready [data-tw-menu-subtoggle][data-tw-star-here]::after { opacity: 0; }

/* ---------- 13 · Video decorativo del panel (0.5.0, menu-media.js) ---------- */
/* Decorativo: sin foco, sin clics ni menú contextual. Fondo del mismo gris claro del video mientras carga. */
[data-tw-menu] video[data-tw-menu-video] { pointer-events: none; user-select: none; }

/* ---------- 9 · Movimiento reducido (H8) ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-tw-roll] .tw-fw-roll__char { transition: none !important; transform: none !important; }
  [data-tw-roll] .tw-fw-roll-icon__glyph { animation: none !important; }
  [data-tw-roll]:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 4px; }
  html.tw-hdr-ready [data-tw-header-bar],
  html.tw-hdr-ready [data-tw-header-bar].is-hidden { transition: none; translate: none; }
  html.tw-hdr-ready [data-tw-menu],
  html.tw-hdr-ready [data-tw-menu]::backdrop { transition: none; }
  html.tw-hdr-ready [data-tw-menu-close] [data-tw-line],
  html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-close] [data-tw-line] { transition: none; }
  html.tw-hdr-ready [data-tw-menu-item],
  html.tw-hdr-ready [data-tw-menu-fade],
  html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-item],
  html.tw-hdr-ready [data-tw-menu].is-open [data-tw-menu-fade] { transition: opacity .12s linear; transition-delay: 0s; translate: none; }
  html.tw-hdr-ready [data-tw-menu-subtoggle] > * { transition: none; }
  html.tw-hdr-ready [data-tw-menu-sub]:not([hidden]) { animation: none; }
  html.tw-hdr-ready [data-tw-motion="orbit"] { animation: none; will-change: auto; }
  .tw-fw-nav-star { transition: opacity .12s linear; }
  html.tw-nav-star-ready [data-tw-menu-subtoggle]::before,
  html.tw-nav-star-ready [data-tw-menu-subtoggle]::after { transition: none; }
}