/* ============================================================
   STRUCTOR — Sistema visual de Casos de éxito
   Extiende el design system existente (primary #136dec,
   slate + acento amarillo, radios generosos).
   ============================================================ */

/* ── Electric Border ─────────────────────────────────────────
   El trazo lo dibuja assets/js/electric-border.js sobre un
   <canvas> insertado dentro de .eb. Aquí solo el posicionamiento
   y el resplandor de fondo.
   ---------------------------------------------------------- */
.eb {
    position: relative;
    border-radius: 2rem;
}

.eb-canvas-container {
    position: absolute;
    top: -60px;
    left: -60px;
    pointer-events: none;
    z-index: 3;
}

.eb-canvas {
    display: block;
}

.eb-bg-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    box-shadow: 0 0 0 1px rgba(77, 166, 255, 0.18),
                0 0 38px -12px rgba(77, 166, 255, 0.55);
}

.eb.eb-on .eb-bg-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .eb-bg-glow { transition: none; }
}

/* ── Tarjeta de caso ─────────────────────────────────────── */
.cs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.cs-card--link:hover {
    box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.22);
    transform: translateY(-3px);
}

/* Toda la tarjeta es clicable: el enlace del pie cubre la superficie,
   sin duplicar enlaces para lectores de pantalla. */
.cs-card--link .cs-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Variante compacta (Home): una sola fila, sin portada grande */
.cs-card--compact {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.35rem;
    border-radius: 1.5rem;
}

.cs-card--compact:hover { transform: none; }

.cs-mini {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 1rem;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logotipo real del cliente: fondo neutro claro y borde fino, en vez del
   fondo oscuro pensado para el icono abstracto de transición. */
.cs-mini--logo {
    background: #fff;
    border: 1px solid #e2e8f0;
}

.cs-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid rgba(19, 109, 236, 0.16);
    white-space: nowrap;
}

/* ── Carrusel (Home) ─────────────────────────────────────── */
.cs-carousel { position: relative; }

.cs-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.cs-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 0.5rem;
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

.cs-slide.is-active { opacity: 1; }

/* Dos tarjetas por vista en pantallas anchas */
@media (min-width: 1024px) {
    .cs-slide { flex-basis: 50%; }
}

/* La tarjeta ocupa todo el alto del slide para que ambas queden igualadas */
.cs-slide .eb { height: 100%; }

@media (prefers-reduced-motion: reduce) {
    .cs-track, .cs-slide { transition: none; }
}

.cs-dot {
    width: 24px;
    height: 4px;
    border-radius: 9999px;
    background: #cbd5e1;
    transition: background 0.3s ease, width 0.3s ease;
}

.cs-dot.is-active { background: #136dec; width: 38px; }

.cs-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    transition: all 0.25s ease;
}

.cs-nav-btn:hover:not(:disabled) {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.cs-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cs-nav-btn:focus-visible,
.cs-card a:focus-visible,
.cs-filter:focus-visible {
    outline: 2px solid #136dec;
    outline-offset: 3px;
}

/* ── Filtros del índice ──────────────────────────────────── */
.cs-filter {
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

.cs-filter:hover { border-color: #cbd5e1; color: #0f172a; }

.cs-filter[aria-pressed="true"] {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

/* ── Página de caso: tipografía editorial ────────────────── */
.cs-prose p { color: #475569; line-height: 1.75; margin-bottom: 1rem; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose strong { color: #0f172a; font-weight: 700; }

.cs-step-num {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: #94a3b8;
}

/* Nodo de proceso / infraestructura */
.cs-node {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.cs-node:hover {
    border-color: rgba(19, 109, 236, 0.45);
    background: rgba(19, 109, 236, 0.07);
}

.cs-node__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.65rem;
    background: rgba(19, 109, 236, 0.14);
    color: #93c5fd;
    flex-shrink: 0;
}

/* ── Medidor de consumo de tareas (sección "El problema") ──────────────
   Simula el panel de suscripción de una plataforma de pago por tareas:
   la cuota del plan se agota hasta el techo y, a partir de ahí, el
   exceso pasa a facturarse aparte. Representa el modelo de precios
   público, no el consumo real de ningún cliente.
   ---------------------------------------------------------------------- */
.cs-quota__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.cs-quota__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #cbd5e1;
}

.cs-quota__brand svg { width: 19px; height: 19px; flex-shrink: 0; }

.cs-quota__badge {
    margin-left: auto;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 800;
    white-space: nowrap;
    color: #fda4af;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.3);
    opacity: 0;
}

.cs-quota__row + .cs-quota__row { margin-top: 0.85rem; }

.cs-quota__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 0.4rem;
}

.cs-quota__label em { font-style: normal; font-size: 0.64rem; font-weight: 700; color: #64748b; }

.cs-quota__track {
    height: 7px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.15);
    overflow: hidden;
}

.cs-quota__fill { display: block; height: 100%; width: 0; border-radius: inherit; }
.cs-quota__fill--plan { background: linear-gradient(90deg, #ff4f00, #ff8a4c); }
.cs-quota__fill--over { background: rgba(244, 63, 94, 0.55); }

.reveal.active .cs-quota__fill--plan { animation: cs-quota-plan 2.2s cubic-bezier(0.33, 1, 0.68, 1) 0.25s forwards; }
.reveal.active .cs-quota__badge      { animation: cs-quota-badge 0.45s ease-out 2.3s forwards; }
.reveal.active .cs-quota__fill--over { animation: cs-quota-over 1.6s ease-out 2.5s forwards; }

@keyframes cs-quota-plan  { to { width: 100%; } }
@keyframes cs-quota-over  { to { width: 17%; } }
@keyframes cs-quota-badge { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .cs-quota__fill--plan { width: 100%; }
    .cs-quota__fill--over { width: 17%; }
    .cs-quota__badge { opacity: 1; }
    .reveal.active .cs-quota__fill--plan,
    .reveal.active .cs-quota__fill--over,
    .reveal.active .cs-quota__badge { animation: none; }
}

/* ── Stack con logotipos oficiales ───────────────────────── */
.cs-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-tool:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.25);
}

.cs-tool svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Símbolo oficial de n8n (apaisado 75×30): se dimensiona por altura para no deformarlo */
.cs-tool svg.cs-n8n { width: 36px; height: 14.4px; }
.cs-tool img { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }

/* Variante compacta: para usar logos dentro de cards/prosa, no solo en el Stack */
.cs-tool--sm { padding: 0.4rem 0.75rem; font-size: 0.74rem; gap: 0.4rem; }
.cs-tool--sm svg, .cs-tool--sm img { width: 14px; height: 14px; }
.cs-tool--sm svg.cs-n8n { width: 30px; height: 12px; }

/* Sobre fondo oscuro (secciones dark) */
.cs-tool--dark { background: rgba(255,255,255,0.04); border-color: rgba(148,163,184,0.22); color: #cbd5e1; }
.cs-tool--dark:hover { border-color: rgba(148,163,184,0.4); }

/* Marcas cuyo color corporativo no contrasta sobre blanco */
.cs-tool--onDark svg {
    background: #0f172a;
    border-radius: 5px;
    padding: 3px;
    width: 22px;
    height: 22px;
}

/* ── Estado del lead que cambia solo (demo animada) ──────── */
.cs-status {
    position: relative;
    display: inline-block;
    min-width: 186px;
    height: 34px;
    vertical-align: middle;
}

.cs-status__chip {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.9rem;
    border-radius: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    animation: cs-status-cycle 8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 4s);
}

/* Colores tomados de los propios estados del CRM en Notion */
.cs-status__chip--new { background: #dbe8fa; color: #1f3a5f; }
.cs-status__chip--booked { background: #d7e8dd; color: #2c5545; }

@keyframes cs-status-cycle {
    0%, 3%    { opacity: 0; transform: translateY(8px) scale(0.96); }
    9%, 44%   { opacity: 1; transform: translateY(0) scale(1); }
    50%, 100% { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* Pulso que marca el momento en que la automatización escribe en el CRM */
.cs-pulse {
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #136dec;
    animation: cs-pulse 8s ease-in-out infinite;
}

@keyframes cs-pulse {
    0%, 40%   { opacity: 0.25; box-shadow: 0 0 0 0 rgba(19, 109, 236, 0); }
    45%       { opacity: 1; box-shadow: 0 0 0 6px rgba(19, 109, 236, 0.18); }
    55%, 100% { opacity: 0.25; box-shadow: 0 0 0 0 rgba(19, 109, 236, 0); }
}

/* Barra que representa un dato oculto por privacidad */
.cs-redacted {
    display: inline-block;
    height: 10px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, #cbd5e1 0 9px, #e6ebf2 9px 17px);
}

@media (prefers-reduced-motion: reduce) {
    .cs-status__chip { animation: none; }
    .cs-status__chip--new { opacity: 0; }
    .cs-status__chip--booked { opacity: 1; }
    .cs-pulse { animation: none; opacity: 1; }
}

/* ── Micro-animaciones del problema (apartado 03) ────────── */
.cs-micro {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 14px;
    margin-top: 0.6rem;
}

/* Contactos que entran y se pierden por el camino */
.cs-micro--stray { display: block; position: relative; width: 62px; overflow: hidden; }

.cs-micro--stray span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 9999px;
    background: #64748b;
    opacity: 0;
    animation: cs-stray 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.6s);
}

@keyframes cs-stray {
    0%   { transform: translate(0, 0); opacity: 0; }
    20%  { opacity: 0.9; }
    70%  { transform: translate(34px, var(--dy, -5px)); opacity: 0.5; }
    100% { transform: translate(62px, calc(var(--dy, -5px) * 2.2)); opacity: 0; }
}

/* Conversación escrita a mano, una a una */
.cs-micro--type span {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #94a3b8;
    animation: cs-type 1.5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes cs-type {
    0%, 65%, 100% { transform: translateY(0); opacity: 0.3; }
    32%           { transform: translateY(-5px); opacity: 1; }
}

/* Métricas que nunca llegan a levantar */
.cs-micro--bars { align-items: flex-end; gap: 4px; }

.cs-micro--bars span {
    width: 6px;
    height: 3px;
    border-radius: 2px;
    background: #64748b;
    animation: cs-nodata 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.22s);
}

@keyframes cs-nodata {
    0%, 100% { height: 3px; opacity: 0.5; }
    50%      { height: 8px; opacity: 0.85; }
}

/* ── Flujos verticales tipo Zapier (el punto de partida) ─── */
.cs-zap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.cs-zap__col { display: flex; flex-direction: column; }

.cs-zap__card {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.65rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    animation: cs-zap-on 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.42s + var(--row, 0) * 1.5s);
}

.cs-zap__card svg { width: 13px; height: 13px; flex-shrink: 0; }
.cs-zap__card .material-symbols-outlined { font-size: 14px; color: #94a3b8; flex-shrink: 0; }
.cs-zap__txt { font-size: 0.62rem; font-weight: 700; color: #475569; line-height: 1.25; min-width: 0; }

/* Los pasos que se repiten en los tres flujos */
.cs-zap__card--dup { border-style: dashed; background: #fafbfc; }

.cs-zap__wire { width: 2px; height: 13px; margin: 0 auto; background: #e2e8f0; }

/* El naranja es el de Zapier: marca de dónde venían estos flujos */
@keyframes cs-zap-on {
    0%, 6%     { border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
    10%, 18%   { border-color: #FF4F00; box-shadow: 0 0 0 3px rgba(255, 79, 0, 0.1); }
    26%, 100%  { border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
}

@media (max-width: 639px) {
    .cs-zap { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ── Lienzo punteado, como el canvas de n8n ──────────────── */
.cs-canvas {
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background-color: rgba(255, 255, 255, 0.02);
    background-image: radial-gradient(rgba(148, 163, 184, 0.28) 1px, transparent 1px);
    background-size: 16px 16px;
    padding: 1.6rem 1.1rem 1.3rem;
}

/* ── Capas que se recorren de arriba abajo (cómo funciona) ─ */
.cs-layer { position: relative; overflow: hidden; }

.cs-layer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #136dec;
    transform: scaleY(0);
    transform-origin: top;
    animation: cs-layer-sweep 7s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.45s);
}

.cs-layer--end::before { background: #eab308; }

@keyframes cs-layer-sweep {
    0%, 3%     { transform: scaleY(0); opacity: 0; }
    7%, 18%    { transform: scaleY(1); opacity: 1; }
    26%, 100%  { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-chain__node { animation: none; }
    .cs-layer::before { animation: none; opacity: 0.35; transform: scaleY(1); }
}

/* ── Migración entre plataformas (hero de Resolvier) ─────── */
.cs-mig { display: flex; align-items: flex-start; gap: 0.75rem; }

.cs-mig__side { flex: 0 0 auto; width: 108px; text-align: center; }

.cs-mig__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.6rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.cs-mig__logo svg { width: 26px; height: 26px; }
.cs-mig__logo svg.cs-n8n { width: 40px; height: 16px; }

/* El destino queda marcado con el color de marca de n8n */
.cs-mig__side--target .cs-mig__logo {
    background: rgba(255, 145, 172, 0.1);
    border-color: rgba(255, 145, 172, 0.4);
    box-shadow: 0 0 0 4px rgba(255, 145, 172, 0.08);
}

.cs-mig__name { font-size: 0.8rem; font-weight: 800; color: #e2e8f0; line-height: 1.2; }

.cs-mig__sub {
    margin-top: 0.2rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    line-height: 1.3;
}

.cs-mig__flow {
    position: relative;
    flex: 1 1 auto;
    min-width: 40px;
    height: 2px;
    margin-top: 27px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.22), rgba(255, 145, 172, 0.45));
}

/* Los procesos viajando de una plataforma a la otra */
.cs-mig__flow span {
    position: absolute;
    top: -2.5px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    opacity: 0;
    animation: cs-mig-dot 2.8s linear infinite;
    animation-delay: calc(var(--i, 0) * 0.7s);
}

@keyframes cs-mig-dot {
    0%        { left: 0; opacity: 0; background: #FF4F00; }
    12%, 82%  { opacity: 1; }
    100%      { left: calc(100% - 7px); opacity: 0; background: #FF91AC; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-mig__flow span { animation: none; opacity: 0.85; background: #FF91AC; left: calc(50% - 3.5px); }
    .cs-mig__flow span:not(:first-child) { display: none; }
}

/* ── Recorrido animado del procesamiento ─────────────────── */
.cs-pipe {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 560px;
}

.cs-pipe__node { flex: 0 0 auto; width: 62px; text-align: center; }

.cs-pipe__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 0.5rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
    animation: cs-pipe-on 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1.2s);
}

/* Puertos de entrada y salida, como los que dibuja n8n en cada nodo */
.cs-pipe__icon::before,
.cs-pipe__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 9999px;
    border: 1.5px solid rgba(148, 163, 184, 0.5);
    background: #0f172a;
}

.cs-pipe__icon::before { left: -4px; }
.cs-pipe__icon::after { right: -4px; }

.cs-pipe__node:first-child .cs-pipe__icon::before,
.cs-pipe__node:last-child .cs-pipe__icon::after { display: none; }

.cs-pipe__icon svg { width: 20px; height: 20px; }
.cs-pipe__icon svg.cs-n8n { width: 32px; height: 12.8px; }

@keyframes cs-pipe-on {
    0%, 12%    { border-color: rgba(148, 163, 184, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 0 rgba(19, 109, 236, 0); }
    18%, 28%   { border-color: rgba(19, 109, 236, 0.6); background: rgba(19, 109, 236, 0.12); box-shadow: 0 0 0 5px rgba(19, 109, 236, 0.1); }
    40%, 100%  { border-color: rgba(148, 163, 184, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 0 rgba(19, 109, 236, 0); }
}

.cs-pipe__label { font-size: 0.66rem; font-weight: 700; color: #94a3b8; line-height: 1.25; }

.cs-pipe__link {
    position: relative;
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    margin-top: 22px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.22);
}

/* El punto viaja de un nodo al siguiente justo después de encenderse */
.cs-pipe__link span {
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.9);
    opacity: 0;
    animation: cs-pipe-dot 6s linear infinite;
    animation-delay: calc(var(--i, 0) * 1.2s);
}

@keyframes cs-pipe-dot {
    0%, 12%   { left: 0; opacity: 0; }
    15%       { opacity: 1; }
    26%       { left: calc(100% - 6px); opacity: 1; }
    30%, 100% { left: calc(100% - 6px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-pipe__icon { animation: none; }
    .cs-pipe__link span { animation: none; opacity: 0.8; left: calc(50% - 3px); }
}

/* ── Embudo del recorrido (apartado 04) ──────────────────── */
.cs-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.cs-funnel__bar {
    width: var(--w);
    max-width: 100%;
    padding: 0.62rem 0.5rem;
    border-radius: 0.65rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.cs-funnel__bar--1 { background: #eff6ff; color: #1e40af; box-shadow: inset 0 0 0 1px #dbeafe; }
.cs-funnel__bar--2 { background: #dbeafe; color: #1e40af; }
.cs-funnel__bar--3 { background: #93c5fd; color: #10306b; }
.cs-funnel__bar--4 { background: #136dec; color: #fff; }

/* El embudo se dibuja al entrar en pantalla, reutilizando .reveal */
.reveal .cs-funnel__bar { width: 0; opacity: 0; }

.reveal.active .cs-funnel__bar {
    animation: cs-funnel-grow 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.14s);
}

@keyframes cs-funnel-grow {
    from { width: 0; opacity: 0; }
    to   { width: var(--w); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-micro--stray span {
        animation: none;
        opacity: 0.5;
        transform: translate(calc(var(--i, 0) * 18px), 0);
    }
    .cs-micro--type span,
    .cs-micro--bars span { animation: none; opacity: 0.45; }
    .reveal .cs-funnel__bar,
    .reveal.active .cs-funnel__bar { animation: none; width: var(--w); opacity: 1; }
}

/* ── Pasos numerados del sistema (apartado Notion + n8n) ─── */
.cs-phase {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 0.6rem;
    background: rgba(19, 109, 236, 0.16);
    border: 1px solid rgba(19, 109, 236, 0.35);
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

/* Campos del formulario representados como esquema */
.cs-field {
    padding: 0.6rem 0.8rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
}

.cs-field::after {
    content: "";
    display: block;
    height: 5px;
    margin-top: 0.5rem;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.18);
}

/* Campos que permiten cualificar antes de responder */
.cs-field--key { border-color: rgba(19, 109, 236, 0.45); color: #bfdbfe; }
.cs-field--key::after { background: rgba(19, 109, 236, 0.4); }

/* ── Capturas del sistema ────────────────────────────────── */
.cs-shot {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 12px 32px -20px rgba(15, 23, 42, 0.35);
}

.cs-shot img { display: block; width: 100%; height: auto; }

.cs-shot--scroll { overflow-x: auto; }
.cs-shot--scroll img { max-width: none; width: 1100px; }

/* Diagrama ancho pero con mucho espacio vacío: scroll más corto para que
   en móvil no se convierta en un bloque alto y casi vacío. */
.cs-shot--scroll.cs-shot--compact img { width: 820px; }

@media (min-width: 1024px) {
    .cs-shot--scroll img,
    .cs-shot--scroll.cs-shot--compact img { width: 100%; }
}

/* ── Notificación nativa (aviso por Telegram) ────────────── */
.cs-notif {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    max-width: 400px;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.55);
}

.cs-notif__icon { position: relative; flex-shrink: 0; width: 42px; height: 42px; }

.cs-notif__icon img {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    display: block;
    object-fit: cover;
}

.cs-notif__badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 0 0 2.5px rgba(15, 23, 42, 0.92);
}

.cs-notif__badge svg { width: 18px; height: 18px; display: block; }

.cs-notif__body { min-width: 0; flex: 1; }

.cs-notif__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.cs-notif__app {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.cs-notif__time { font-size: 0.68rem; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }

.cs-notif__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.cs-notif__text { font-size: 0.82rem; color: rgba(255, 255, 255, 0.68); line-height: 1.45; }

/* ── Mini mock de móvil (chat de Telegram) ───────────────── */
.cs-phone {
    width: 100%;
    max-width: 265px;
    border-radius: 2.3rem;
    background: linear-gradient(160deg, #1e293b, #0b1220);
    padding: 9px;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
    position: relative;
}

.cs-phone__notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 82px;
    height: 18px;
    border-radius: 9999px;
    background: #0b1220;
    z-index: 5;
}

/* Altura fija de teléfono real: el mensaje se recorre dentro, no estira la página */
.cs-phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 500px;
    border-radius: 1.7rem;
    overflow: hidden;
    background: linear-gradient(180deg, #dbe9f0, #eef3ea);
}

.cs-phone__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.15rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 700;
    color: #0f172a;
}

.cs-phone__statusicons { display: inline-flex; align-items: center; gap: 4px; color: #0f172a; }

.cs-phone__chatbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 1rem 0.65rem;
}

.cs-phone__back { font-size: 1.1rem; font-weight: 700; color: #136dec; line-height: 1; }

.cs-phone__avatar { width: 28px; height: 28px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }

.cs-phone__chatid { min-width: 0; }
.cs-phone__chatname { font-size: 0.74rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.cs-phone__chatstatus { font-size: 0.62rem; color: #64748b; line-height: 1.2; }

.cs-phone__chat {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.65rem 1.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}

.cs-phone__chat::-webkit-scrollbar { width: 4px; }
.cs-phone__chat::-webkit-scrollbar-track { background: transparent; }
.cs-phone__chat::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.22);
    border-radius: 9999px;
}

.cs-phone__chat:focus-visible { outline: 2px solid #136dec; outline-offset: -2px; }

/* Degradado inferior: pista visual de que queda mensaje por debajo */
.cs-phone__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(238, 243, 234, 0), rgba(238, 243, 234, 0.92));
}

.cs-phone__bubble {
    position: relative;
    background: #fff;
    border-radius: 1.1rem;
    border-top-left-radius: 0.3rem;
    padding: 0.85rem 0.9rem 1.6rem;
    font-size: 0.7rem;
    line-height: 1.6;
    color: #1c1c1e;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.cs-phone__msgtitle { font-weight: 700; margin-bottom: 0.75rem; }
.cs-phone__body { margin-bottom: 0.75rem; }
.cs-phone__bubble p:last-of-type { margin-bottom: 0; }
.cs-phone__section { font-weight: 700; margin-top: 0.9rem; margin-bottom: 0.35rem; }

.cs-phone__link { color: #3390ec; }
.cs-phone__url { font-size: 0.66rem; line-height: 1.5; word-break: break-all; }

.cs-phone__msgtime {
    position: absolute;
    right: 0.9rem;
    bottom: 0.55rem;
    font-size: 0.6rem;
    color: #94a3b8;
}

.cs-blur {
    display: inline-block;
    filter: blur(4px);
    user-select: none;
    -webkit-user-select: none;
}

/* ── Visualización de datos ──────────────────────────────── */
.cs-bar-track {
    position: relative;
    height: 10px;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.cs-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 9999px;
    width: 0;
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-bar-fill--base { background: #94a3b8; }
.cs-bar-fill--now { background: linear-gradient(90deg, #136dec, #60a5fa); }
.cs-bar-fill--down { background: linear-gradient(90deg, #059669, #34d399); }

@media (prefers-reduced-motion: reduce) {
    .cs-bar-fill { transition: none; }
}

.cs-up { color: #136dec; }
.cs-down { color: #059669; }

.cs-note { font-size: 0.78rem; color: #94a3b8; line-height: 1.6; }

/* ── Diagrama de recorrido con bifurcación (fondo claro) ──────────────────
   Reutilizado por: contexto del proceso de negocio y protección frente
   a duplicados. Vertical por defecto; la bifurcación es un grid de 2
   columnas con un pequeño conector SVG en forma de horquilla.
   ---------------------------------------------------------------------- */
.cs-flow { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: 0 auto; }

.cs-flow__item { opacity: 0; transform: translateY(6px); }

.reveal.active .cs-flow__item {
    animation: cs-flow-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.14s);
}

@keyframes cs-flow-in { to { opacity: 1; transform: translateY(0); } }

.cs-flow__node {
    width: 100%;
    max-width: 260px;
    padding: 0.7rem 1.1rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.cs-flow__node-label { font-size: 0.84rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.cs-flow__node-sub { font-size: 0.68rem; color: #94a3b8; font-weight: 600; margin-top: 0.15rem; line-height: 1.3; }

/* Una persona iniciando su reclamación: avatar que respira sobre el primer
   nodo y un trazo que viaja hacia "Reclamación", como si el caso entrara
   en el sistema justo en ese momento. */
.cs-flow__node--persona { position: relative; margin-top: 18px; }

.cs-flow__persona-icon {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #eff6ff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    animation: cs-persona-breathe 2.6s ease-in-out infinite;
}

.cs-flow__persona-icon .material-symbols-outlined { font-size: 16px; }

@keyframes cs-persona-breathe {
    0%, 100% { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15), 0 0 0 0 rgba(29, 78, 216, 0.3); }
    50%      { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15), 0 0 0 6px rgba(29, 78, 216, 0); }
}

.cs-flow__link--claim { position: relative; }

.cs-flow__link--claim span {
    position: absolute;
    top: 0;
    left: -2.5px;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #136dec;
    box-shadow: 0 0 6px rgba(19, 109, 236, 0.7);
    opacity: 0;
    animation: cs-claim-travel 3.4s ease-in-out infinite;
    animation-delay: 1.3s;
}

@keyframes cs-claim-travel {
    0%   { top: 0; opacity: 0; }
    12%  { opacity: 1; }
    80%  { top: calc(100% - 7px); opacity: 1; }
    100% { top: calc(100% - 7px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-flow__persona-icon { animation: none; }
    .cs-flow__link--claim span { animation: none; opacity: 0.6; top: calc(50% - 3.5px); }
}

.cs-flow__node--pivot { border-color: #cbd5e1; background: #fff; box-shadow: 0 2px 10px -6px rgba(15, 23, 42, 0.18); }

/* Rama que no continúa: tratamiento neutro */
.cs-flow__node--muted { background: #f8fafc; border-style: dashed; }
.cs-flow__node--muted .cs-flow__node-label { color: #94a3b8; font-weight: 700; }

/* Rama que avanza: acento principal de STRUCTOR */
.cs-flow__node--accent { background: #eff6ff; border-color: #bfdbfe; }
.cs-flow__node--accent .cs-flow__node-label { color: #1d4ed8; }

.cs-flow__link { width: 2px; height: 20px; background: #cbd5e1; }

.cs-flow__fork { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; width: 100%; margin-top: -2px; }

.cs-flow__fork-svg { display: block; width: 100%; height: 22px; color: #cbd5e1; overflow: visible; }

.cs-flow__branch { display: flex; flex-direction: column; align-items: center; }
.cs-flow__branch .cs-flow__link { height: 16px; }
.cs-flow__branch .cs-flow__node { margin-bottom: 0; }
.cs-flow__branch .cs-flow__node + .cs-flow__link { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .cs-flow__item { opacity: 1; transform: none; animation: none; }
}

/* ── Nodo que escribe en base de datos (diagrama de idempotencia) ───────
   El "Registrar" del flujo de idempotencia es, en la práctica, una
   escritura en PostgreSQL: se marca con su logo oficial y un pulso
   sutil en su azul de marca para que se lea como "ahí ocurre algo".
   ---------------------------------------------------------------------- */
.cs-flow__node--db { position: relative; overflow: visible; }

.cs-flow__db-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(65, 105, 225, 0.25);
}

.cs-flow__db-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.cs-flow__db-tag span { font-size: 0.62rem; font-weight: 700; color: #4169E1; letter-spacing: 0.01em; }

.cs-flow__node--db::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(65, 105, 225, 0.45);
    animation: cs-db-ping 2.6s ease-out infinite;
}

@keyframes cs-db-ping {
    0%   { box-shadow: 0 0 0 0 rgba(65, 105, 225, 0.4); }
    70%  { box-shadow: 0 0 0 7px rgba(65, 105, 225, 0); }
    100% { box-shadow: 0 0 0 0 rgba(65, 105, 225, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-flow__node--db::after { animation: none; box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.18); }
}

/* ── Diagrama de arquitectura modular (sección Capas) ─────────────────────
   Canales+adaptadores en paralelo → núcleo de lógica de negocio (único
   lugar donde se usa verde) → capacidades reutilizables.
   ---------------------------------------------------------------------- */
.cs-arch { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }

@media (min-width: 1024px) {
    .cs-arch { flex-direction: row; align-items: center; justify-content: center; gap: 0; }
}

.cs-arch__item { opacity: 0; transform: translateY(6px); }

.reveal.active .cs-arch__item {
    animation: cs-flow-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s);
}

.cs-arch__channels { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; max-width: 300px; }

@media (min-width: 1024px) { .cs-arch__channels { max-width: 220px; } }

.cs-arch__pair { display: flex; align-items: center; gap: 0.4rem; }

.cs-arch__chip {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.5rem;
    border-radius: 0.7rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.66rem;
    font-weight: 800;
    color: #334155;
    text-align: center;
    line-height: 1.2;
}

/* Todos los iconos de los chips al mismo tamaño, sean logo oficial
   (SVG) o icono de interfaz (Material), para que ninguna fila cante. */
.cs-arch__chip svg,
.cs-arch__chip .material-symbols-outlined {
    width: 18px;
    height: 18px;
    font-size: 18px;
    flex-shrink: 0;
}

.cs-arch__chip--new {
    background: #fffbeb;
    border: 1.5px dashed #eab308;
    color: #92650b;
}

.cs-arch__mini-arrow { flex-shrink: 0; color: #cbd5e1; font-size: 0.72rem; font-weight: 700; }

.cs-arch__connect {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    padding: 0.3rem 0;
}

@media (min-width: 1024px) { .cs-arch__connect { width: auto; max-width: none; flex: 0 0 auto; padding: 0 1.1rem; } }

.cs-arch__connect-line {
    position: relative;
    width: 2px;
    height: 24px;
    background: linear-gradient(180deg, #cbd5e1, #6ee7b7);
    border-radius: 2px;
}

@media (min-width: 1024px) {
    .cs-arch__connect-line { width: 56px; height: 2px; background: linear-gradient(90deg, #cbd5e1, #6ee7b7); }
}

.cs-arch__connect-line span {
    position: absolute;
    top: 0;
    left: -2.5px;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
    opacity: 0;
    animation: cs-arch-dot-v 3.2s linear infinite;
    animation-delay: 1s;
}

@keyframes cs-arch-dot-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { top: calc(100% - 7px); opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }

@media (min-width: 1024px) {
    .cs-arch__connect-line span { top: -2.5px; left: 0; animation-name: cs-arch-dot-h; }
    @keyframes cs-arch-dot-h { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { left: calc(100% - 7px); opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
}

.cs-arch__connect--out .cs-arch__connect-line { background: linear-gradient(180deg, #6ee7b7, #cbd5e1); }
@media (min-width: 1024px) { .cs-arch__connect--out .cs-arch__connect-line { background: linear-gradient(90deg, #6ee7b7, #cbd5e1); } }

.cs-arch__core {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    max-width: 230px;
    padding: 1.1rem 1.2rem;
    border-radius: 1.2rem;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    text-align: center;
}

.cs-arch__core-label { font-size: 0.92rem; font-weight: 900; color: #14532d; }
.cs-arch__core-sub { font-size: 0.68rem; font-weight: 700; color: #3f7a53; }

.cs-arch__caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
    max-width: 380px;
}

@media (min-width: 640px) { .cs-arch__caps { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; } }
@media (min-width: 1024px) { .cs-arch__caps { grid-template-columns: 1fr; max-width: 170px; gap: 0.5rem; } }

.cs-arch__cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 0.5rem;
    border-radius: 0.8rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.cs-arch__cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.6rem;
    background: rgba(19, 109, 236, 0.1);
    color: #136dec;
}

.cs-arch__cap-icon .material-symbols-outlined { font-size: 16px; }
.cs-arch__cap-label { font-size: 0.7rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
.cs-arch__cap-sub { font-size: 0.6rem; color: #94a3b8; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .cs-arch__item { opacity: 1; transform: none; animation: none; }
    .cs-arch__connect-line span { animation: none; opacity: 0.7; top: calc(50% - 3.5px); left: calc(50% - 3.5px); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .eb, .cs-card { border-radius: 1.5rem; }
    .cs-card--compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1.1rem;
    }
    .cs-mini { width: 100%; height: 88px; border-radius: 0.9rem; }
    .cs-slide { padding: 0 0.25rem; }
}