/* Transiciones y animaciones CSS */

/* ============================
   PANTALLA: PROPUESTA DE VALOR
   Stagger de entrada de tarjetas — CSS puro, sin GSAP.

   Mecanismo de reset automático:
   Las tarjetas son opacity:0 por defecto.
   El @keyframes solo se aplica mientras el padre tenga .screen--active.
   Cuando navigation.js quita .screen--active (cleanup), la animación
   desaparece → tarjetas vuelven a opacity:0.
   En la próxima entrada, .screen--active se re-agrega → animación
   arranca desde cero. No requiere lógica JS adicional.

   Timing: los delays suman la duración del slide de navegación (480ms)
   más el stagger incremental (130ms por tarjeta).
   ============================ */

/* Estado base: invisible (condición necesaria para el reset automático) */
.propuesta__tarjeta {
  opacity: 0;
}

/* Keyframe de entrada: viene desde derecha+ligeramente arriba */
@keyframes propuesta-tarjeta-entra {
  from {
    opacity: 0;
    transform: translateX(48px) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

/* Activar animación solo cuando la pantalla está activa */
#screen-propuesta.screen--active .propuesta__tarjeta {
  animation-name: propuesta-tarjeta-entra;
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(
    0,
    0,
    0.2,
    1
  ); /* material decelerate */
  animation-fill-mode: both; /* maintains 'from' state during delay, 'to' after end */
}

/* Delays: 480ms base (= duración slide nav) + 130ms stagger por tarjeta */
#screen-propuesta.screen--active .propuesta__tarjeta--1 {
  animation-delay: 480ms;
}
#screen-propuesta.screen--active .propuesta__tarjeta--2 {
  animation-delay: 610ms;
}
#screen-propuesta.screen--active .propuesta__tarjeta--3 {
  animation-delay: 740ms;
}
#screen-propuesta.screen--active .propuesta__tarjeta--4 {
  animation-delay: 870ms;
}
#screen-propuesta.screen--active .propuesta__tarjeta--5 {
  animation-delay: 1000ms;
}

/* Logo: entra primero (delay 0ms), misma duración y easing que las tarjetas.
   Keyframe propio porque el logo tiene translateX(-50%) base que debe componerse. */

/* Estado base: invisible cuando la pantalla no está activa */
.propuesta__logo {
  opacity: 0;
}

@keyframes propuesta-logo-entra {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

#screen-propuesta.screen--active .propuesta__logo {
  animation-name: propuesta-logo-entra;
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-fill-mode: both;
  animation-delay: 480ms;
}

/* ============================
   PROPUESTA DE VALOR — Panel de ampliación

   La transición de opacity + transform del contenedor
   (.propuesta__ampliacion → --visible) se controla aquí.
   La duración se expone como variable CSS para que propuesta.js
   pueda leerla con getComputedStyle y usarla en el setTimeout
   del reemplazo, sin hardcodear ningún número en JS.
   ============================ */

:root {
  --propuesta-dur-entrada: 300ms;
  --propuesta-dur-salida: 220ms;
  --propuesta-ease-entrada: cubic-bezier(0, 0, 0.2, 1);
  --propuesta-ease-salida: cubic-bezier(0.4, 0, 1, 1);
}

/* Transición base del contenedor (siempre activa) */
.propuesta__ampliacion {
  transition:
    opacity var(--propuesta-dur-salida) var(--propuesta-ease-salida),
    transform var(--propuesta-dur-salida) var(--propuesta-ease-salida);
}

/* Al agregar --visible cambia a curva de entrada */
.propuesta__ampliacion--visible {
  transition:
    opacity var(--propuesta-dur-entrada) var(--propuesta-ease-entrada),
    transform var(--propuesta-dur-entrada) var(--propuesta-ease-entrada);
}

/* ── Stagger de entrada de sub-ítems ──────────────
   Se activa cuando el panel tiene --visible.
   Cada .propuesta__ampliacion-item aparece en cascada
   con un pequeño delay incremental (80ms por ítem).
   Los items se generan dinámicamente por JS con clases
   --item-1, --item-2, --item-3.
   ─────────────────────────────────────────────────── */

@keyframes propuesta-item-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.propuesta__ampliacion--visible .propuesta__ampliacion-item {
  animation-name: propuesta-item-entra;
  animation-duration: 0.26s;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-fill-mode: both;
}

/* Delays por posición dentro del panel */
.propuesta__ampliacion--visible .propuesta__ampliacion-item--1 {
  animation-delay: calc(var(--propuesta-dur-entrada) + 0ms);
}
.propuesta__ampliacion--visible .propuesta__ampliacion-item--2 {
  animation-delay: calc(var(--propuesta-dur-entrada) + 80ms);
}
.propuesta__ampliacion--visible .propuesta__ampliacion-item--3 {
  animation-delay: calc(var(--propuesta-dur-entrada) + 160ms);
}

/* ====================================================
   BARRA-NAV — Cascada de entrada en dos pasos (scaleX)
   El tooltip NO participa en la cascada; tiene su propio
   mecanismo (max-width + scaleX, clase --visible, JS timer).

   Barra y home crecen desde el lado que mira al tooltip (lado interior del grupo).

   | Sección     | Origin barra  | Origin home   |
   |-------------|---------------|---------------|
   | --izquierda | right center  | left center   |
   | --derecha   | left center   | right center  |

   Cascada: barra (0ms) → home (1×duración de entrada).
   ==================================================== */

/* Estado base: invisible y colapsado en X */
.barra-nav__home,
.barra-nav__barra,
.barra-nav__volver {
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity var(--barra-nav-duracion-entrada) ease-out,
    transform var(--barra-nav-duracion-entrada) ease-out;
}

/* Transform-origin: barra crece desde el borde de pantalla; home desde el lado interior. */
.barra-nav--izquierda .barra-nav__barra {
  transform-origin: left center;
}
.barra-nav--izquierda .barra-nav__home {
  transform-origin: left center;
}

.barra-nav--derecha .barra-nav__barra {
  transform-origin: right center;
}
.barra-nav--derecha .barra-nav__home {
  transform-origin: right center;
}

/* Home: desplazado hacia el grupo (simula que nace detrás de la barra).
   --izquierda: home a la derecha del grupo → se desplaza a la izquierda (hacia barra).
   --derecha:   home a la izquierda del grupo → se desplaza a la derecha (hacia barra). */
.barra-nav--izquierda .barra-nav__home {
  transform: scaleX(0) translateX(-180px);
}
.barra-nav--derecha .barra-nav__home {
  transform: scaleX(0) translateX(180px);
}

/* Al animar: barra primero */
.barra-nav--animar .barra-nav__barra {
  transition-delay: 0ms;
  opacity: 1;
  transform: scaleX(1);
}

/* Home: arranca cuando la barra termina, vuelve a su posición natural */
.barra-nav--animar .barra-nav__home {
  transition-delay: var(--barra-nav-duracion-entrada);
  opacity: 1;
  transform: scaleX(1) translateX(0);
}

/* Volver: arranca después del home (duracion-entrada + 1×stagger) */
.barra-nav--animar .barra-nav__volver {
  transition-delay: calc(
    var(--barra-nav-duracion-entrada) + var(--barra-nav-stagger)
  );
  opacity: 1;
  transform: scaleX(1);
}

/* Transform-origin del volver: crece desde el borde de pantalla */
.barra-nav--izquierda .barra-nav__volver {
  transform-origin: right center;
}
.barra-nav--derecha .barra-nav__volver {
  transform-origin: left center;
}

/* Pulso de los anillos del círculo central */
@keyframes pulso-anillo {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.25;
  }
}

/* ====================================================
   CEMENTO GRANEL — Animaciones
   ==================================================== */

/* Keyframe compartido: fade-in + slide-up sutil.
   Usado por los 3 bloques de entrada y por los ítems del modal. */
@keyframes cemento-bloque-entra {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Entrada de los 3 bloques ───────────────────────────
   La clase .cemento--animando se agrega desde JS al recibir
   pantalla:cambiada, una vez que la transición de navegación
   ya terminó → delays relativos a ese momento (sin base 480ms). */

/* Bloque 1: imagen superior */
.cemento--animando .cemento__texto-1 {
  animation-name: cemento-bloque-entra;
  animation-duration: var(--cemento-dur-entrada);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: 0ms;
}

/* Bloque 3: imagen inferior */
.cemento--animando .cemento__modal-wrapper {
  animation-name: cemento-bloque-entra !important;
  animation-duration: var(--cemento-dur-entrada) !important;
  animation-timing-function: ease-out !important;
  animation-fill-mode: both !important;
  animation-delay: 200ms !important;
}

/* Bloque 3: imagen inferior */
.cemento--animando .cemento__texto-3 {
  animation-name: cemento-bloque-entra;
  animation-duration: var(--cemento-dur-entrada);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: var(--cemento-stagger);
}

/* Bloque 2: wrapper del botón + modal.
   Solo opacidad — el transform del wrapper lo controla el mecanismo
   de open/close. Si se usa cemento-bloque-entra aquí, el fill-mode:both
   dejaría transform:translateY(0) al terminar, abriendo el panel. */
@keyframes cemento-wrapper-entra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cemento--animando .cemento__modal-wrapper {
  animation-name: cemento-wrapper-entra;
  animation-duration: var(--cemento-dur-entrada);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: calc(var(--cemento-stagger) * 2);
}

/* Glow pulsante del círculo central */
@keyframes glow-circulo {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(200, 240, 0, 0.12),
      0 0 28px rgba(200, 240, 0, 0.42),
      0 0 70px rgba(200, 240, 0, 0.14),
      inset 0 0 38px rgba(0, 80, 180, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(200, 240, 0, 0.22),
      0 0 48px rgba(200, 240, 0, 0.55),
      0 0 100px rgba(200, 240, 0, 0.22),
      inset 0 0 38px rgba(0, 80, 180, 0.4);
  }
}

/* ====================================================
   SOLUCIONES MODULARES — Animaciones de entrada
   Activadas cuando #screen-soluciones tiene .soluciones--animando.
   La clase se agrega en pantalla:cambiada y se quita en pantalla:saliendo.

   Timeline:
     T+0ms    → T+700ms  : Header baja desde arriba + clip-path diagonal
     T+490ms  → T+890ms  : Título escala+opacity (sin slide)
     T+900ms  → T+1500ms : Bloque izquierdo slide desde izquierda
     T+1500ms → T+1900ms : Botón 1 slide+fade
     T+1650ms → T+2050ms : Botón 2 slide+fade
     T+1800ms → T+2200ms : Botón 3 slide+fade
   ==================================================== */

/* ── Fase 1: Header baja desde arriba + clip-path diagonal ── */

/* Estado inicial: header oculto arriba, clip recto */
.soluciones__header {
  transform: translateY(-100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    transform 700ms ease-out,
    clip-path 700ms ease-out;
}

/* Estado final: header visible con diagonal inferior */
.soluciones--animando .soluciones__header {
  transform: translateY(0);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* ── Fase 2: Título escala+opacity (empieza al 70% del header) ── */

/* Estado inicial: invisible y reducido */
.soluciones__titulo {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 400ms ease-out 490ms,
    transform 400ms ease-out 490ms;
}

/* Estado final: visible a escala natural */
.soluciones--animando .soluciones__titulo {
  opacity: 1;
  transform: scale(1);
}

/* ── Fase 3: Bloque izquierdo slide horizontal desde fuera ── */

/* Estado inicial: fuera de pantalla por la izquierda */
.soluciones__bloque-izq {
  transform: translateX(-100%);
  transition: transform 600ms ease-out 900ms;
}

/* Estado final: en posición */
.soluciones--animando .soluciones__bloque-izq {
  transform: translateX(0);
}

/* ── Fases 4-6: Botones en cascada (slide+fade) ── */

/* Estado inicial: invisible y desplazado */
.soluciones__boton {
  opacity: 0;
  transform: translateX(-60px);
  /* box-shadow incluido para que la liberación del :active sea suave */
  transition:
    opacity 400ms ease-out,
    transform 400ms ease-out,
    box-shadow 140ms ease;
}

/* Delays escalonados por posición */
.soluciones__boton:nth-child(1) {
  transition-delay: 1500ms;
}
.soluciones__boton:nth-child(2) {
  transition-delay: 1650ms;
}
.soluciones__boton:nth-child(3) {
  transition-delay: 1800ms;
}

/* Estado final: visible en posición */
.soluciones--animando .soluciones__boton {
  opacity: 1;
  transform: translateX(0);
}

/* ── Interacción táctil: prensa física ───────────────
   Va DESPUÉS de .soluciones--animando .soluciones__boton
   para ganar por orden de documento (misma especificidad).
   Mismo efecto 3D que .modulo:active. */
.soluciones__boton:active {
  transition:
    transform 55ms ease,
    box-shadow 55ms ease;
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

/* ====================================================
   PANTALLA INICIO — Animación de entrada en cascada
   Activada por .inicio--animando (clase en pantalla:cambiada,
   removida en pantalla:saliendo, y al cargar por primera vez).

   Timeline:
     T+0ms   : .inicio__encabezado
     T+100ms : .inicio__circulo
     T+200ms : .modulo--izq y .modulo--der (simultáneos)
     T+300ms : .modulo--bot
   ==================================================== */

:root {
  --inicio-anim-offset: 60px;
  --inicio-anim-dur: 400ms;
  --inicio-anim-delay-1: 0ms;
  --inicio-anim-delay-2: 100ms;
  --inicio-anim-delay-3: 200ms;
  --inicio-anim-delay-4: 300ms;
}

/* ── Estado inicial (sin .inicio--animando) ─────────────── */

/* Encabezado e izq/der: sin transform base propio, solo Y offset */
.inicio__encabezado,
.modulo--izq,
.modulo--der {
  opacity: 0;
  transform: translateY(var(--inicio-anim-offset));
  /* box-shadow incluido para no pisar el transition de .modulo */
  transition:
    opacity var(--inicio-anim-dur) ease-out,
    transform var(--inicio-anim-dur) ease-out,
    box-shadow 140ms ease;
}

/* Círculo: tiene translate(-50%,-50%) base — componer el Y offset */
.inicio__circulo {
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--inicio-anim-offset)));
  transition:
    opacity var(--inicio-anim-dur) ease-out,
    transform var(--inicio-anim-dur) ease-out;
}

/* Bot: tiene translateX(-50%) base — componer el Y offset */
.modulo--bot {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--inicio-anim-offset));
  transition:
    opacity var(--inicio-anim-dur) ease-out,
    transform var(--inicio-anim-dur) ease-out,
    box-shadow 140ms ease;
}

/* ── Estado final (con .inicio--animando) ────────────────── */

.inicio--animando .inicio__encabezado {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--inicio-anim-delay-1);
}

.inicio--animando .inicio__circulo {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: var(--inicio-anim-delay-2);
}

.inicio--animando .modulo--izq,
.inicio--animando .modulo--der {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--inicio-anim-delay-3);
}

.inicio--animando .modulo--bot {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: var(--inicio-anim-delay-4);
}

/* ── Preservar efecto de prensa táctil ────────────────────
   Problema: .inicio--animando .modulo--izq (0-2-0) y
   .modulo:active (0-2-0) tienen igual especificidad. Como
   animations.css viene después, las reglas de entrada ganarían
   y cancelarían el translateY(5px) del :active.
   Estas reglas (0-3-0) restauran el efecto correcto. */

.inicio--animando .modulo--izq:active,
.inicio--animando .modulo--der:active {
  transform: translateY(5px);
}

.inicio--animando .modulo--bot:active {
  transform: translateX(-50%) translateY(5px);
}

/* ── Feedback táctil rápido (especificidad 1-2-0) ─────────
   Las reglas de entrada tienen 400ms de transition. Sin este
   override, hundir una tarjeta también tarda 400ms — se siente
   lento. Con #screen-inicio (ID) la especificidad sube a 1-2-0,
   ganándole a las reglas de entrada (0-3-0 máximo) y forzando
   la transición de prensa a 80ms sin delay. */

#screen-inicio .modulo--izq:active,
#screen-inicio .modulo--der:active,
#screen-inicio .modulo--bot:active {
  transition:
    transform 80ms ease-out,
    box-shadow 80ms ease-out;
  transition-delay: 0ms;
}

/* ===== Animación de entrada de #screen-aliado ===== */

@keyframes aliado-entra {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estado base: invisible cuando la pantalla no está activa.
   fill-mode: both mantiene el estado final (opacity 1) mientras
   screen--active esté presente. Al salir, la animación se detiene
   y este estado base (opacity 0) vuelve a aplicar. */
.aliado__subtitulo2,
.aliado__icono-placeholder,
#screen-aliado .aliado__grid .modulo {
  opacity: 0;
}
#screen-aliado.screen--active .aliado__subtitulo2,
#screen-aliado.screen--active .aliado__icono-placeholder {
  animation: aliado-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 480ms;
}

/* Fila superior: nth-child(1) = arriba-izq (integracion),
                  nth-child(2) = arriba-der (soluciones-tecnicas) */
#screen-aliado.screen--active .aliado__grid .modulo:nth-child(1),
#screen-aliado.screen--active .aliado__grid .modulo:nth-child(2) {
  animation: aliado-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 610ms;
}

/* Fila inferior: nth-child(3) = abajo-izq (optimizacion),
                  nth-child(4) = abajo-der (soporte) */
#screen-aliado.screen--active .aliado__grid .modulo:nth-child(3),
#screen-aliado.screen--active .aliado__grid .modulo:nth-child(4) {
  animation: aliado-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 740ms;
}

/* Preservar efecto de prensa táctil post-animación.
   fill-mode: both (nivel 'animations' en la cascada) gana sobre
   las declaraciones author normales de layout.css, bloqueando el
   translateY(5px) del :active. !important eleva al nivel
   'author !important', que supera a animations en la cascada. */

#screen-aliado .aliado__grid .modulo.modulo--activo {
  opacity: 0.46 !important;
}

/* ===== Animación de entrada de #screen-inteligencia ===== */

/* Keyframe genérico: para .modulo--int-izq y .modulo--int-der (sin transform base) */
@keyframes inteligencia-entra {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe compuesto para el logo: tiene translateX(-50%) base en layout.css */
@keyframes inteligencia-logo-entra {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Keyframe compuesto para modulo-bot: tiene translateX(-50%) base en layout.css */
@keyframes inteligencia-bot-entra {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Estado base: invisible cuando la pantalla no está activa.
   fill-mode: both mantiene el estado final (opacity 1) mientras
   screen--active esté presente. Al salir la animación se detiene
   y este estado base (opacity 0) vuelve a aplicar. */
.inteligencia__logo,
#screen-inteligencia .modulo--int-izq,
#screen-inteligencia .modulo--int-der,
#screen-inteligencia .modulo--int-bot {
  opacity: 0;
}

/* Logo: primer elemento, delay 480ms (= duración slide de navegación) */
#screen-inteligencia.screen--active .inteligencia__logo {
  animation: inteligencia-logo-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 480ms;
}

/* Tarjetas izq + der: simultáneas, delay 610ms */
#screen-inteligencia.screen--active .modulo--int-izq,
#screen-inteligencia.screen--active .modulo--int-der {
  animation: inteligencia-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 610ms;
}

/* Tarjeta bot: delay 740ms */
#screen-inteligencia.screen--active .modulo--int-bot {
  animation: inteligencia-bot-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: 740ms;
}

/* Preservar efecto de prensa táctil post-animación.
   fill-mode: both (nivel 'animations') gana sobre author declarations normales,
   bloqueando el transform del :active de layout.css. !important sube al nivel
   'author !important', que supera a animations en la cascada. */
#screen-inteligencia .modulo--int-izq:active,
#screen-inteligencia .modulo--int-der:active {
  transform: translateY(5px) !important;
}

#screen-inteligencia .modulo--int-bot:active {
  transform: translateX(-50%) translateY(5px) !important;
}

/* ===== Indicador de mano touch reutilizable ===== */
/* La mano hace un micro-tap cada ciclo. La onda nace sincronizada con el tap.
   REQUISITO: el botón debe tener position: relative o position: absolute. */

/* Tap: quieta 70% del ciclo, baja 3px al 75-80%, vuelve al 90-100% */
@keyframes mano-tap {
  0%,
  70% {
    transform: rotate(-15deg) scale(0.8) translateY(0);
  }
  75%,
  80% {
    transform: rotate(-15deg) scale(0.8) translateY(3px);
  }
  90%,
  100% {
    transform: rotate(-15deg) scale(0.8) translateY(0);
  }
}

/* Onda: invisible 0-74%, nace al 75% (= cuando la mano toca), se expande hasta 100% */
@keyframes mano-ondas {
  0%,
  74% {
    transform: translateX(-50%) scale(0.4);
    opacity: 0;
  }
  75% {
    transform: translateX(-50%) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1.6);
    opacity: 0;
  }
}

.con-mano {
  /* El posicionamiento del botón debe definirse en su propia regla. */
}

/* Mano: hace un micro-tap cada 1.8s.
   rotate(-15deg) y scale(0.8) van dentro del keyframe — reemplazan
   las antiguas propiedades rotate y zoom que no componen con transform. */
.con-mano::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -22px;
  width: 60px;
  height: 60px;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M 13 2 C 11.355469 2 10 3.355469 10 5 L 10 16.8125 L 9.34375 16.125 L 9.09375 15.90625 C 7.941406 14.753906 6.058594 14.753906 4.90625 15.90625 C 3.753906 17.058594 3.753906 18.941406 4.90625 20.09375 L 4.90625 20.125 L 13.09375 28.21875 L 13.15625 28.25 L 13.1875 28.3125 C 14.535156 29.324219 16.253906 30 18.1875 30 L 19.90625 30 C 24.441406 30 28.09375 26.347656 28.09375 21.8125 L 28.09375 14 C 28.09375 12.355469 26.738281 11 25.09375 11 C 24.667969 11 24.273438 11.117188 23.90625 11.28125 C 23.578125 9.980469 22.394531 9 21 9 C 20.234375 9 19.53125 9.300781 19 9.78125 C 18.46875 9.300781 17.765625 9 17 9 C 16.648438 9 16.316406 9.074219 16 9.1875 L 16 5 C 16 3.355469 14.644531 2 13 2 Z' fill='white'/><path d='M 13 2 C 11.355469 2 10 3.355469 10 5 L 10 16.8125 L 9.34375 16.125 L 9.09375 15.90625 C 7.941406 14.753906 6.058594 14.753906 4.90625 15.90625 C 3.753906 17.058594 3.753906 18.941406 4.90625 20.09375 L 4.90625 20.125 L 13.09375 28.21875 L 13.15625 28.25 L 13.1875 28.3125 C 14.535156 29.324219 16.253906 30 18.1875 30 L 19.90625 30 C 24.441406 30 28.09375 26.347656 28.09375 21.8125 L 28.09375 14 C 28.09375 12.355469 26.738281 11 25.09375 11 C 24.667969 11 24.273438 11.117188 23.90625 11.28125 C 23.578125 9.980469 22.394531 9 21 9 C 20.234375 9 19.53125 9.300781 19 9.78125 C 18.46875 9.300781 17.765625 9 17 9 C 16.648438 9 16.316406 9.074219 16 9.1875 L 16 5 C 16 3.355469 14.644531 2 13 2 Z M 13 4 C 13.554688 4 14 4.445313 14 5 L 14 16 L 16 16 L 16 12 C 16 11.445313 16.445313 11 17 11 C 17.554688 11 18 11.445313 18 12 L 18 16 L 20 16 L 20 12 C 20 11.445313 20.445313 11 21 11 C 21.554688 11 22 11.445313 22 12 L 22 16 L 24.09375 16 L 24.09375 14 C 24.09375 13.445313 24.539063 13 25.09375 13 C 25.648438 13 26.09375 13.445313 26.09375 14 L 26.09375 21.8125 C 26.09375 25.277344 23.371094 28 19.90625 28 L 18.1875 28 C 16.722656 28 15.457031 27.476563 14.40625 26.6875 L 6.3125 18.6875 C 5.867188 18.242188 5.867188 17.757813 6.3125 17.3125 C 6.757813 16.867188 7.242188 16.867188 7.6875 17.3125 L 12 21.625 L 12 5 C 12 4.445313 12.445313 4 13 4 Z' fill='%23002366' fill-rule='evenodd'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 11;
  animation: mano-tap 1.8s ease-in-out infinite;
}

/* Onda: nace sincronizada con el tap (75% del ciclo, misma duración 1.8s) */
.con-mano::before {
  content: "";
  position: absolute;
  bottom: 27px;
  right: -16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-azul-oscuro);
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  animation: mano-ondas 1.8s ease-out infinite;
  pointer-events: none;
  z-index: 10;
}

/* Desincronización: se aplica a AMBOS pseudo-elementos para que mano y onda
   del mismo botón sigan sincronizadas entre sí al desfasarse con el resto. */
.con-mano:nth-child(2n)::after,
.con-mano:nth-child(2n)::before {
  animation-delay: -0.4s;
}
.con-mano:nth-child(3n)::after,
.con-mano:nth-child(3n)::before {
  animation-delay: -0.9s;
}
.con-mano:nth-child(4n)::after,
.con-mano:nth-child(4n)::before {
  animation-delay: -1.3s;
}

/* ===== Fin indicador de mano touch ===== */