/* Animaciones ilustradas, estilo dibujo a mano: trazos que se dibujan solos, piezas que
   caen suaves y un destello cálido. Solo SVG + CSS. Con "reducir movimiento" quedan quietas
   en su estado final. */

.scene { display: block; width: 100%; height: 100%; overflow: visible; }
.scene * { transform-box: fill-box; transform-origin: center; }
.scene .ln { fill: none; stroke: #0b1e2d; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .ln-sea { fill: none; stroke: #0f5c7a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .ln-soft { fill: none; stroke: #9fb8c4; stroke-width: 2.5; stroke-linecap: round; }
.scene .ln-white { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Trazo que se dibuja (el path lleva pathLength="1"). */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 8s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 1; } 22%, 86% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Aparece con un pequeño salto. */
.pop { opacity: 0; animation: pop 8s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes pop { 0%, 6% { opacity: 0; transform: translateY(10px) scale(.92); } 16%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Crece desde abajo (barras) o desde la izquierda (progreso). */
.grow { transform-origin: bottom; transform: scaleY(0); animation: grow 8s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes grow { 0%, 6% { transform: scaleY(0); } 24%, 86% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(1); opacity: 0; } }
.grow-x { transform-origin: left; transform: scaleX(0); animation: grow-x 8s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes grow-x { 0%, 8% { transform: scaleX(0); } 40%, 86% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }

/* Cae suave hasta su sitio (papeles a la carpeta). */
.fall { opacity: 0; animation: fall 8s cubic-bezier(.3, .8, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes fall { 0%, 4% { opacity: 0; transform: translate(var(--x, 0), -70px) rotate(var(--r, -8deg)); } 22%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Respira, flota, destella. */
.bob { animation: bob 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.twinkle { animation: twinkle 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.typing circle { animation: typing 1.2s ease-in-out infinite; }
.typing circle:nth-child(2) { animation-delay: .15s; }
.typing circle:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Del desorden al orden (negocios): 10 s por ciclo. */
.chaos { animation: chaos 10s ease-in-out infinite; }
@keyframes chaos { 0%, 32% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: translateY(14px) scale(.96); } }
.chaos .jit { animation: jit 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes jit { 0%, 100% { transform: rotate(var(--r, 0deg)); } 50% { transform: rotate(calc(var(--r, 0deg) * -1)) translateY(-3px); } }
.order { opacity: 0; animation: order 10s ease-in-out infinite; }
@keyframes order { 0%, 40% { opacity: 0; transform: translateY(12px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.late { transform-origin: bottom; animation: late 10s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes late { 0%, 44% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); } }
.late-x { transform-origin: left; animation: late-x 10s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes late-x { 0%, 46% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
.late-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: late-draw 10s cubic-bezier(.6, 0, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes late-draw { 0%, 48% { stroke-dashoffset: 1; } 66%, 100% { stroke-dashoffset: 0; } }
.late-pop { opacity: 0; animation: late-pop 10s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes late-pop { 0%, 50% { opacity: 0; transform: scale(.8); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .draw, .late-draw { animation: none; stroke-dashoffset: 0; }
  .pop, .fall, .late-pop, .order { animation: none; opacity: 1; transform: none; }
  .grow, .grow-x, .late, .late-x { animation: none; transform: none; }
  .bob, .twinkle, .pulse, .typing circle, .jit { animation: none; }
  .chaos { animation: none; opacity: 0; }
}

/* ── Colores de las escenas ── */
.scene .paper { fill: #fff; stroke: #0b1e2d; stroke-width: 2.5; stroke-linejoin: round; }
.scene .soft { fill: #dbe9ef; }
.scene .bar { fill: #e1ecf0; }
.scene .sea { fill: #0f5c7a; }
.scene .sealight { fill: #5aa3c0; }
.scene .ink { fill: #0b1e2d; }
.scene .white { fill: #fff; }
.scene .warm { fill: #e0a877; }
.scene .dots circle { fill: #e1ecf0; }

/* ── Tarjetas de procesos: escena animada sobre fondo suave ── */
.tool-art { aspect-ratio: 4 / 3; border-radius: 12px; background: #e8f0f3; margin-bottom: 12px; overflow: hidden; }
.tool-art--sand { background: #f5ede2; }
.tool-art--deep { background: linear-gradient(160deg, #0f5c7a, #0a2a3d); }

/* ── Negocios: la escena ocupa el panel izquierdo ── */
.frame--scene { background: #fbfbf7; display: block; padding: 6%; }
.frame--scene .scene { width: 100%; height: 100%; }
#before .frame img { filter: none; }
/* Capturas de las webs: el mismo hueco que la animación de la izquierda; la captura entera a todo
   lo ancho y, si sobra alto, lo rellena el fondo translúcido. */
.showcase .frame.frame--shot { background: #ebeae2; }
.frame--shot img { width: 100%; height: 100%; object-fit: contain; }

/* Puntos clave bajo lo implantado, cuando no hay cifra. */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--ink); }

/* El objetivo del negocio, en una línea serena. */
.goal { margin: 14px 0 0 !important; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; color: var(--sea); }
.caption .points:first-child { margin-top: 0 !important; }

/* Web del negocio, como muestra del trabajo. */
.biz-web { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 400; color: var(--sea); border-bottom: 1px solid rgba(15, 92, 122, .3); padding-bottom: 2px; transition: border-color .2s; }
/* Solo la diapositiva visible recibe clics (las demás están superpuestas y transparentes). */
.showcase .slide { pointer-events: none; }
.showcase .slide.on { pointer-events: auto; }
.biz-web:hover { border-bottom-color: var(--sea); }
.biz-web span { font-size: 12px; }
.mobile-cases .biz-web { justify-self: start; }

/* ── Móvil: carrusel que se desliza con el dedo, con puntos ── */
@media (max-width: 900px) {
  .mobile-cases {
    display: flex !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(var(--side) * -1); padding: 0 var(--side) 8px; scrollbar-width: none;
  }
  .mobile-cases::-webkit-scrollbar { display: none; }
  /* El margen inferior reservado a las leyendas de escritorio no aplica aquí. */
  .showcase-stick { padding-bottom: 88px; }
  /* Una tarjeta por negocio: la animación llena el recuadro y la foto del sistema
     va encajada en la esquina; debajo, nombre, una línea y la métrica. */
  .mobile-cases .mcase { flex: 0 0 84%; scroll-snap-align: center; display: grid; gap: 6px; align-content: start; }
  .mcase-media { position: relative; margin-bottom: 14px; }
  .mcase-media .frame--scene { aspect-ratio: 4 / 5; height: auto; border-radius: 18px; padding: 6% 12% 30%; box-shadow: none; }
  /* La captura de la web, entera y a su proporción, como una ventana apoyada en la esquina. */
  .mcase-thumb {
    position: absolute; right: 14px; bottom: 14px; width: 58%; max-height: 62%;
    border-radius: 8px; overflow: hidden; border: 3px solid #fff; background: #fff;
    box-shadow: 0 14px 30px -14px rgba(11, 30, 45, .5);
  }
  .mcase-thumb img { width: 100%; height: auto; }
  .mobile-cases .mcase h3 { border: 0; padding: 0; margin: 0; font-size: 24px; line-height: 1.2; }
  .mobile-cases .mcase p { margin: 0; font-size: 15px; color: var(--ink-2); }
  /* La línea de negocio, bajo el nombre: protagonista, en serif y tinta. */
  .mobile-cases .mcase h3 + p { font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink); }
  .mobile-cases .mcase .points { margin-top: 12px; font-size: 14px; }
  .mobile-cases .mcase .goal { font-size: 17px; color: var(--sea); }
  .mobile-cases .mcase .metric { margin-top: 6px !important; }
  .mobile-cases .mcase .metric b { font-size: 26px; }
  /* Barra de progreso + flechas: invita a deslizar y permite pasar con un toque. */
  .mobile-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
  .mobile-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-right: 8px; }
  .mobile-bar span { display: block; height: 100%; background: var(--sea); border-radius: 2px; transition: transform .15s linear; }
  .mobile-arrow {
    width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(11, 30, 45, .07); color: var(--ink);
    display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
  }
  .mobile-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-arrow:active { background: rgba(11, 30, 45, .14); }
  .mobile-arrow:disabled { opacity: .35; cursor: default; }
}
@media (min-width: 901px) { .mobile-nav { display: none; } }