/* ═══════════════════════════════════════════════════════════════════
   Quibo (matriz) showcase — claro + gradientes pastel
   ═══════════════════════════════════════════════════════════════════ */

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

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: #1E293B;
    color: #FAFAF8;
}

a:focus-visible,
button:focus-visible,
[data-agent-demo]:focus-visible {
    outline: 2px solid #1E293B;
    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, #7dd3fc 0%, #c084fc 50%, #fda4af 100%);
    z-index: 60;
    pointer-events: none;
    will-change: transform;
}

/* ── Console spotlight (cursor-follow en agent demo) ─────────── */

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

[data-agent-demo]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        240px circle at var(--mx) var(--my),
        rgba(125, 211, 252, 0.18) 0%,
        rgba(216, 180, 254, 0.10) 35%,
        transparent 70%
    );
    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);
}

@media (prefers-reduced-motion: reduce) {
    .header-logo:hover img,
    .header-logo:hover span { transform: none; }
    [data-agent-demo]::after { display: none; }
    .scroll-progress { display: none; }
}

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

/* Wrapper pattern: cada mesh tiene un ::before con el gradiente y un mask
   que desvanece el gradiente en los bordes superior e inferior para que
   no se vea una línea dura al cambiar de sección. El bg-sheet base del
   body sigue visible detrás. */

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

.mesh-hero::before,
.mesh-process::before,
.mesh-cta::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%);
}

.mesh-hero::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 45%, rgba(186, 230, 253, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 40%, rgba(253, 164, 175, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 60%, rgba(253, 186, 116, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 85% 55%, rgba(216, 180, 254, 0.50) 0%, transparent 60%);
}

.mesh-process::before {
    background:
        radial-gradient(ellipse 50% 40% at 15% 45%, rgba(216, 180, 254, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 55%, rgba(186, 230, 253, 0.55) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 50% 65%, rgba(253, 164, 175, 0.40) 0%, transparent 65%);
}

.mesh-cta::before {
    background:
        radial-gradient(ellipse 55% 40% at 25% 50%, rgba(186, 230, 253, 0.60) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 75% 55%, rgba(253, 186, 116, 0.45) 0%, transparent 65%),
        radial-gradient(ellipse 45% 30% at 50% 60%, rgba(216, 180, 254, 0.50) 0%, transparent 65%);
}

/* ── 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-sky    { background: radial-gradient(circle, #bae6fd 0%, transparent 70%); }
.pastel-orb-rose   { background: radial-gradient(circle, #fecdd3 0%, transparent 70%); }
.pastel-orb-peach  { background: radial-gradient(circle, #fed7aa 0%, transparent 70%); }
.pastel-orb-mint   { background: radial-gradient(circle, #bbf7d0 0%, transparent 70%); }
.pastel-orb-lavender { background: radial-gradient(circle, #e9d5ff 0%, transparent 70%); }

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

/* ── Agent demo console ──────────────────────────────────────── */

[data-agent-panel] {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

@keyframes agent-fade-in {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.agent-thinking-dot {
    animation: agent-thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes agent-thinking-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ── 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);
}

/* ── Métricas ────────────────────────────────────────────────── */

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

/* ═══ Artefactos de entregable (.q-*) ═════════════════════════
   El dispositivo firma del showcase: cada página enseña LO QUE COMPRAS
   como artefacto tangible (web en marco de navegador, ficha de negocio,
   resultado de búsqueda, informe mensual, artículo publicado), maquetado
   con el propio sistema de marca. Reglas duras:
   - Todo cluster con negocio ficticio lleva su .q-caption de honestidad.
   - Toda métrica dentro de un artefacto lleva el microcopy "datos de
     ejemplo" (text-[9px] text-faint) además de la caption.
   - Evocar sin suplantar: nada de logos/cromas/layouts pixel-perfect de
     terceros (Google, ChatGPT...). Dots de navegador neutros, nunca
     colores semáforo.
   - Estrellas de rating SIEMPRE honey (#e0b54f rellenas); el dot de
     estado "Abierto"/"activo" SIEMPRE teal (indicador funcional).
   - Rotaciones y posiciones absolutas solo desde md (móvil: en flujo).
   ════════════════════════════════════════════════════════════ */

/* Tinte por página: la página de producto fija su acento UNA vez y los
   artefactos lo consumen vía custom properties. */
.q-tint-cosmos { --q-accent: #3a55b0; --q-accent-soft: #eef2fc; --q-accent-deep: #26408c; }
.q-tint-coral  { --q-accent: #ef6c42; --q-accent-soft: #fff5f2; --q-accent-deep: #b94324; }
.q-tint-honey  { --q-accent: #c0892b; --q-accent-soft: #fbf6ea; --q-accent-deep: #7f561b; }
.q-tint-ink    { --q-accent: #1E293B; --q-accent-soft: #F1F5F9; --q-accent-deep: #0f172a; }

/* Card base de entregable. La rotación vive en utilidades del markup
   (rotate-0 md:-rotate-2), nunca aquí. */
.q-artefact {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Contenedor de composición: los satélites van absolute solo desde md.
   data-animate se aplica al stack ENTERO (nunca a hijos absolutos). */
.q-stack { position: relative; }

/* Coreografía hover: los papeles se ordenan al acercarte. Solo puntero
   fino con hover real. */
@media (min-width: 768px) and (hover: hover) {
    .q-stack:hover .q-tilt-l { transform: rotate(-0.5deg) translateY(-4px); }
    .q-stack:hover .q-tilt-r { transform: rotate(0.5deg) translateY(-4px); }
}

/* Marco de navegador */
.q-browser { overflow: hidden; }

.q-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background: #FAFAF8;
    border-bottom: 1px solid #E2E8F0;
}

.q-browser-dots {
    display: flex;
    gap: 0.3125rem;
    flex-shrink: 0;
}

.q-browser-dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #E2E8F0;
}

.q-browser-url {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 auto;
    max-width: 75%;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0.1875rem 0.875rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Barras skeleton para el "texto" de las mini-webs: nunca texto real
   por debajo de ~8px (ilegible y borroso en DPI 1). */
.q-skeleton {
    height: 0.375rem;
    border-radius: 9999px;
    background: #E2E8F0;
    opacity: 0.8;
}

/* Sparkline del informe: el único momento de movimiento firma del site.
   El trazo se dibuja al recibir .visible (reveal.js) en el ancestro
   [data-animate]. */
.q-spark .q-spark-line {
    fill: none;
    stroke: var(--q-accent, #ef6c42);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
}

[data-animate].visible .q-spark .q-spark-line {
    animation: q-spark-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
}

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

/* Pill de honestidad bajo cada cluster ficticio. Mismo lenguaje que la
   pill de foto del §11. */
.q-caption {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748B;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.q-caption::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #fb7185;
    flex-shrink: 0;
}

/* Chip flotante (generaliza el chip del hero actual). Absolute solo
   desde md; en móvil, en flujo o hidden. */
.q-chip-float {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0.625rem 1rem;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Chip de estado del portfolio: exactamente DOS estados. */
.q-chip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.1875rem 0.625rem;
    border: 1px solid #E2E8F0;
    background: #ffffff;
}

.q-chip-status::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.q-chip-status--produccion { color: #0f766e; }
.q-chip-status--produccion::before { background: #14b8a6; }

.q-chip-status--demo { color: #64748B; }
.q-chip-status--demo::before { background: #94A3B8; }

/* ── Línea dashed del proceso ────────────────────────────────── */

.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);
}

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

@media (prefers-reduced-motion: reduce) {
    .pastel-orb           { animation: none; }
    [data-animate]        { opacity: 1; transform: none; transition: none; }
    .card-tilt:hover      { transform: none; }
    .agent-thinking-dot   { animation: none; }
    .process-line         { animation: none; }
    html                  { scroll-behavior: auto; }
    .q-artefact           { transition: none; }
    .q-stack:hover .q-tilt-l,
    .q-stack:hover .q-tilt-r { transform: none; }
    .q-spark .q-spark-line { animation: none; stroke-dashoffset: 0; }
    [data-animate].visible .q-spark .q-spark-line { animation: none; stroke-dashoffset: 0; }
}