/* ═══════════════════════════════════════════════════════════════════
   Quibo Clean showcase — editorial teal + pasteles decorativos

   Hereda el sistema visual de la matriz (mesh gradients, orbs,
   noise overlay, sparkles, scroll progress, spotlight cursor,
   card-tilt, reveals) y lo tiñe con la identidad teal de Clean.

   Teal 50-950 es dominante. Mint + sky acompañan como pasteles
   decorativos. Coral entra solo como pincelada cálida en CTA/
   pricing. Lavender solo en la zona oscura del asistente para dar
   glow complementario sin traicionar la identidad teal.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Base ────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    background: #FAFAF8;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* overflow-x:clip evita scrollbar horizontal (por orbes/mesh-hero) sin crear contenedor de scroll → preserva position:sticky */
    overflow-x: clip;
}

::selection {
    background: #0c2826;
    color: #f0fdfa;
}

a:focus-visible,
button:focus-visible,
[data-agent-demo]:focus-visible {
    outline: 2px solid #0c2826;
    outline-offset: 3px;
    border-radius: 6px;
}

.font-display {
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "liga" 1, "calt" 1, "ss01" 1;
}


/* ── Scroll progress bar ─────────────────────────────────────── */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(var(--scroll, 0));
    background: linear-gradient(90deg, #5eead4 0%, #7dd3fc 45%, #fda4af 100%);
    z-index: 60;
    pointer-events: none;
    will-change: transform;
}


/* ── Noise overlay ───────────────────────────────────────────── */

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    opacity: 0.032;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}


/* ── Console / mockup spotlight (cursor-follow) ──────────────── */

[data-agent-demo] {
    --mx: 50%;
    --my: 50%;
}

[data-agent-demo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--mx) var(--my),
        rgba(94, 234, 212, 0.22) 0%,
        rgba(125, 211, 252, 0.10) 38%,
        transparent 72%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

[data-agent-demo]:hover::after,
[data-agent-demo]:focus-within::after {
    opacity: 1;
}


/* ── Header logo microinteracción ────────────────────────────── */

.header-logo img,
.header-logo span {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

.header-logo:hover img {
    transform: translateY(-1px) rotate(-6deg);
}

.header-logo:hover span {
    transform: translateY(-1px);
}


/* ── Gradient meshes de atmósfera ────────────────────────────── */

/* Cada mesh es un ::before absolutamente posicionado detrás del
   contenido, con mask-image que desvanece arriba y abajo para evitar
   líneas duras al cambiar de sección. Paleta teal + mint + sky
   dominante, con coral puntual para CTA/pricing. */

.mesh-hero,
.mesh-process,
.mesh-case,
.mesh-cta,
.mesh-teal,
.mesh-cool {
    background: #FAFAF8;
    position: relative;
    isolation: isolate;
}

.mesh-hero::before,
.mesh-process::before,
.mesh-case::before,
.mesh-cta::before,
.mesh-teal::before,
.mesh-cool::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}

/* Hero: mantener el mesh casi sólido hasta el final del section para
   que enlace con el mesh-seam-top del siguiente sin dejar banda blanca,
   pero con una pequeña caída de opacidad al borde inferior para que la
   transición a una sección sin seam-top no se note como escalón. */
.mesh-hero::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 80%, rgba(0,0,0,0.75) 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 80%, rgba(0,0,0,0.75) 100%);
}

.mesh-hero::before {
    background:
        radial-gradient(ellipse 62% 52% at 22% 42%, rgba(153, 246, 228, 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 55% 42% at 82% 38%, rgba(186, 230, 253, 0.50) 0%, transparent 62%),
        radial-gradient(ellipse 70% 50% at 52% 62%, rgba(204, 251, 241, 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 40% 30% at 88% 60%, rgba(253, 164, 175, 0.28) 0%, transparent 60%);
}

.mesh-process::before {
    background:
        radial-gradient(ellipse 50% 40% at 15% 45%, rgba(186, 230, 253, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 55%, rgba(153, 246, 228, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 50% 65%, rgba(204, 251, 241, 0.45) 0%, transparent 65%);
}

.mesh-case::before {
    background:
        radial-gradient(ellipse 60% 45% at 50% 50%, rgba(153, 246, 228, 0.52) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 20% 45%, rgba(204, 251, 241, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 80% 55%, rgba(186, 230, 253, 0.42) 0%, transparent 65%);
}

.mesh-cta::before {
    background:
        radial-gradient(ellipse 55% 40% at 28% 48%, rgba(153, 246, 228, 0.58) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 72% 55%, rgba(253, 164, 175, 0.38) 0%, transparent 65%),
        radial-gradient(ellipse 45% 30% at 50% 62%, rgba(186, 230, 253, 0.45) 0%, transparent 65%);
}

.mesh-teal::before {
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(94, 234, 212, 0.35) 0%, transparent 62%),
        radial-gradient(ellipse 50% 40% at 12% 30%, rgba(153, 246, 228, 0.50) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 88% 70%, rgba(125, 211, 252, 0.35) 0%, transparent 65%);
}

.mesh-cool::before {
    background:
        radial-gradient(ellipse 55% 40% at 20% 40%, rgba(125, 211, 252, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 80% 60%, rgba(153, 246, 228, 0.50) 0%, transparent 65%);
}


/* ── Seam continuation ──────────────────────────────────────────
   Para secciones que siguen al hero sin tener su propio mesh —
   añade un gradiente pastel en la parte superior que continúa
   el desvanecimiento del hero, evitando el hard edge del
   overflow-hidden cuando los orbs se recortan al borde. */

.mesh-seam-top {
    position: relative;
    isolation: isolate;
}

/* Empieza a la intensidad/paleta del bottom del hero para que la unión
   sea perceptualmente continua, y se desvanece hacia abajo para liberar
   el fondo limpio donde caen las cards. */
.mesh-seam-top::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 380px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 110% at 52% 0%, rgba(204, 251, 241, 0.55) 0%, transparent 62%),
        radial-gradient(ellipse 60% 100% at 18% 0%, rgba(153, 246, 228, 0.42) 0%, transparent 62%),
        radial-gradient(ellipse 55% 90% at 82% 0%, rgba(186, 230, 253, 0.38) 0%, transparent 62%),
        radial-gradient(ellipse 45% 80% at 88% 0%, rgba(253, 164, 175, 0.26) 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
}


/* ── Orbs pastel animados ────────────────────────────────────── */

.pastel-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.7;
    animation: orb-drift 16s ease-in-out infinite alternate;
}

.pastel-orb-teal    { background: radial-gradient(circle, #99f6e4 0%, transparent 70%); }
.pastel-orb-mint    { background: radial-gradient(circle, #bbf7d0 0%, transparent 70%); }
.pastel-orb-sky     { background: radial-gradient(circle, #bae6fd 0%, transparent 70%); }
.pastel-orb-coral   { background: radial-gradient(circle, #ffc9b8 0%, transparent 70%); }
.pastel-orb-lavender{ background: radial-gradient(circle, #e9d5ff 0%, transparent 70%); }
.pastel-orb-deepteal{ background: radial-gradient(circle, #5eead4 0%, transparent 70%); }

@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(22px, -18px) scale(1.06); }
}


/* ── Hero SVG underline animado ──────────────────────────────── */

.hero-underline svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-underline path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw-underline 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

@keyframes draw-underline {
    to { stroke-dashoffset: 0; }
}


/* ── Decorative sparkles ─────────────────────────────────────── */

.decorative-sparkle {
    position: absolute;
    pointer-events: none;
    width: 18px;
    height: 18px;
    animation: sparkle-pulse 3s ease-in-out infinite;
}

@keyframes sparkle-pulse {
    0%, 100% { transform: scale(1) rotate(0deg);  opacity: 0.35; }
    50%      { transform: scale(1.25) rotate(25deg); opacity: 0.95; }
}


/* ── Card tilt + glow ────────────────────────────────────────── */

.card-tilt {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
}

.card-tilt:hover {
    transform: translateY(-4px);
}


/* ── Hero pill (doble dot — ping + pulse) ────────────────────── */

.pill-dot {
    position: relative;
    display: inline-flex;
    width: 0.5rem;
    height: 0.5rem;
}

.pill-dot::before,
.pill-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: currentColor;
}

.pill-dot::before {
    opacity: 0.65;
    animation: pill-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pill-dot::after {
    animation: pill-pulse 1.8s ease-in-out infinite;
}

@keyframes pill-ping {
    70%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes pill-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.9; }
    50%      { transform: scale(1);    opacity: 1; }
}


/* ── Metrics / tabular numbers ───────────────────────────────── */

.metric-number {
    font-feature-settings: "ss01", "ss02";
    font-variant-numeric: tabular-nums;
}


/* ── Process dashed line ─────────────────────────────────────── */

.process-line {
    stroke-dasharray: 6 6;
    animation: dash-move 25s linear infinite;
}

@keyframes dash-move {
    to { stroke-dashoffset: -240; }
}


/* ── Reveals al scroll ───────────────────────────────────────── */

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.85s cubic-bezier(0.2, 0.65, 0.3, 1),
        transform 0.85s cubic-bezier(0.2, 0.65, 0.3, 1);
    transition-delay: var(--delay, 0ms);
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}


/* ── Asistente chat bubbles atmosphere (en sección dark) ───────── */

.asistente-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.asistente-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 35% at 15% 25%, rgba(94, 234, 212, 0.20) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 85% 75%, rgba(216, 180, 254, 0.14) 0%, transparent 60%);
    opacity: 0.9;
}


/* ── Soft brand shadow utility ─────────────────────────────────
   Multi-layer orgánica. Cuatro capas en cascada: micro (1px)
   para asentar la card, cerca (6px) para separarla del fondo,
   media (18px) para el cuerpo del halo, y una capa lejana muy
   ancha (60-100px) con poco negative spread para que el halo
   se disipe en círculo en vez de cortarse en recto. */

.shadow-teal-soft {
    box-shadow:
        0 1px 2px rgba(20, 184, 166, 0.04),
        0 6px 16px -6px rgba(20, 184, 166, 0.10),
        0 18px 40px -14px rgba(15, 118, 110, 0.14),
        0 44px 90px -32px rgba(15, 118, 110, 0.18);
}

.shadow-teal-xl {
    box-shadow:
        0 2px 4px rgba(20, 184, 166, 0.04),
        0 10px 24px -8px rgba(20, 184, 166, 0.10),
        0 28px 60px -16px rgba(15, 118, 110, 0.14),
        0 60px 120px -36px rgba(15, 118, 110, 0.18);
}


/* ── Guía de uso /guia/ ──────────────────────────────────────── */

/* Cuerpo legible para lectura larga. Limita ancho, line-height
   generoso, espaciado entre bloques. Aplica a un wrapper para no
   pisar otras secciones del showcase. */

.guia-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
}

.guia-prose > * + * {
    margin-top: 1.1em;
}

.guia-prose p {
    max-width: 62ch;
}

.guia-prose h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: #1E293B;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 2.6em;
    margin-bottom: 0.4em;
    scroll-margin-top: 84px;
}

.guia-prose h3 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #1E293B;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.3em;
}

.guia-prose ol {
    counter-reset: guia-step;
    list-style: none;
    padding: 0;
}

.guia-prose ol > li {
    position: relative;
    padding-left: 2.4rem;
    margin-top: 0.9em;
    counter-increment: guia-step;
}

.guia-prose ol > li::before {
    content: counter(guia-step);
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #99f6e4;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guia-prose ul {
    list-style: none;
    padding-left: 0;
}

.guia-prose ul > li {
    position: relative;
    padding-left: 1.4rem;
}

.guia-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #14b8a6;
}

.guia-prose strong {
    color: #1E293B;
    font-weight: 600;
}

.guia-prose code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.88em;
    background: #f0fdfa;
    color: #115e59;
    padding: 0.12em 0.4em;
    border-radius: 6px;
    border: 1px solid #ccfbf1;
}

.guia-prose a {
    color: #0f766e;
    text-decoration: underline;
    text-decoration-color: rgba(20, 184, 166, 0.35);
    text-underline-offset: 3px;
}

.guia-prose a:hover {
    text-decoration-color: #0f766e;
}

/* Placeholder de captura de pantalla pendiente */
.guia-screenshot-placeholder {
    margin: 1.6em 0 0.6em;
    padding: 1.2rem 1.4rem;
    border: 1.5px dashed #5eead4;
    background: #f0fdfa;
    border-radius: 18px;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    color: #115e59;
    font-size: 0.875rem;
    line-height: 1.55;
}

.guia-screenshot-placeholder .gsp-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 12px;
    background: #ccfbf1;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guia-screenshot-placeholder .gsp-label {
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 600;
    color: #0f766e;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
}

.guia-screenshot {
    margin: 1.8em 0 1em;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e6efea;
    background: #fafdfb;
    box-shadow: 0 18px 40px -28px rgba(15, 118, 110, 0.35);
}

.guia-screenshot img {
    width: 100%;
    height: auto;
    display: block;
}

/* Capturas verticales (mobile): acotar ancho para que no ocupen toda la columna */
.guia-screenshot:has(img[src*="/mobile/"]) {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.guia-screenshot figcaption {
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.8rem;
    color: #4b6258;
    padding: 0.7rem 1rem 0.85rem;
    background: #f3f7f5;
    border-top: 1px solid #e6efea;
    text-align: center;
}

/* Callouts */
.guia-callout {
    margin: 1.4em 0 0.6em;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: #f0fdfa;
    border-left: 3px solid #14b8a6;
    color: #0f766e;
    font-size: 0.9rem;
    line-height: 1.55;
}

.guia-callout--warn {
    background: #fff5f2;
    border-left-color: #ef6c42;
    color: #b94324;
}

.guia-callout--tip {
    background: #f0f9ff;
    border-left-color: #38bdf8;
    color: #0369a1;
}

.guia-callout strong {
    color: inherit;
    font-weight: 600;
}

/* Sticky TOC lateral */
.guia-toc {
    position: sticky;
    top: 84px;
    align-self: flex-start;
    font-size: 0.875rem;
    line-height: 1.6;
}

.guia-toc a {
    display: block;
    padding: 0.35rem 0.75rem;
    color: #64748B;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.18s ease;
}

.guia-toc a:hover {
    color: #0f766e;
    border-left-color: #99f6e4;
    background: #f0fdfa;
}

/* Tarjetas de la home de la guía */
.guia-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.6rem;
    border-radius: 20px;
    background: white;
    border: 1px solid #E2E8F0;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.3s ease;
    height: 100%;
}

.guia-card:hover {
    border-color: #5eead4;
    transform: translateY(-3px);
    box-shadow: 0 16px 50px -18px rgba(20, 184, 166, 0.3);
}

.guia-card .guia-card-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: #f0fdfa;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Subnav inferior (anterior / siguiente) */
.guia-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #E2E8F0;
}

.guia-pager a {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    text-decoration: none;
    color: #64748B;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    font-size: 0.9rem;
}

.guia-pager a:hover {
    border-color: #99f6e4;
    color: #0f766e;
    background: #f0fdfa;
}

.guia-pager a small {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: #94A3B8;
}

.guia-pager a.guia-pager-next {
    text-align: right;
    align-items: flex-end;
}

@media (max-width: 640px) {
    .guia-pager { grid-template-columns: 1fr; }
}


/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pastel-orb           { animation: none; }
    .hero-underline path  { animation: none; stroke-dashoffset: 0; }
    [data-animate]        { opacity: 1; transform: none; transition: none; }
    .card-tilt:hover      { transform: none; }
    .decorative-sparkle   { animation: none; }
    .process-line         { animation: none; }
    .scroll-progress      { display: none; }
    [data-agent-demo]::after { display: none; }
    .pill-dot::before,
    .pill-dot::after      { animation: none; }
    .header-logo:hover img,
    .header-logo:hover span { transform: none; }
    html                  { scroll-behavior: auto; }
}