/* ============================================================
   BotDynamics — hoja de estilo compilada a mano
   Sin build step, sin CDN de Tailwind. Solo archivos planos.

   Orden del archivo (importa, la cascada depende de esto):
     1. Tokens
     2. Reset
     3. Base
     4. Fondos animados
     5. Animaciones de scroll
     6. Componentes
     7. Utilidades           <- ver mistral.css parte 2
     8. Variantes responsive <- ver mistral.css parte 2
     9. Accesibilidad
   ============================================================ */

@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
    --cream:     #FFFAEB;
    --cream-50:  #FFFDF7;
    --cream-100: #FFF8E7;
    --cream-200: #F7F0DC;
    --cream-300: #EDE3C9;

    --ink:     #0A0A0A;
    --ink-900: #141414;
    --ink-800: #1F1F1F;
    --ink-700: #242424;
    --ink-600: #333333;
    --ink-500: #4F4F4F;
    --ink-400: #656565;

    --f1: #FFD800;  /* yellow */
    --f2: #FFAF00;  /* amber  */
    --f3: #FF8205;  /* orange */
    --f4: #FA500F;  /* ember  */
    --f5: #E10500;  /* red    */

    --hair:      rgba(10, 10, 10, .14);
    --hair-soft: rgba(10, 10, 10, .08);
    --hair-dark: rgba(255, 250, 235, .18);

    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Instrument Sans', 'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre {
    margin: 0;
}

ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

a { color: inherit; text-decoration: none; }

img, svg, video, canvas, iframe, object {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: transparent;
}

button, [type='button'], [type='submit'] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
}

input::placeholder, textarea::placeholder { opacity: 1; color: inherit; }

[hidden] { display: none; }
[x-cloak] { display: none !important; }

body > section:not(.hero-section),
body > footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* ---------- 3. Base ---------- */
html.scroll-smooth { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--cream);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
    font-weight: 600;
    line-height: 0.98;
    text-wrap: balance;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Variante compacta solo para numeracion decorativa */
.eyebrow-xs {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
}

::selection { background: var(--f3); color: #fff; }

*:focus-visible { outline: 2px solid var(--f4); outline-offset: 3px; }

.site-header.is-scrolled { padding-top: .5rem; }
.site-header.is-scrolled .site-nav {
    background: rgba(255, 250, 235, .80);
    border-color: var(--hair);
    box-shadow: 0 8px 32px rgba(10, 10, 10, .08);
}

.language-switch {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hair);
    background: rgba(255, 250, 235, .72);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
}

.menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bounce-delay-1 { animation-delay: 150ms; }
.bounce-delay-2 { animation-delay: 300ms; }

/* ---------- 4. Fondos animados ---------- */
.flame-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(52rem 40rem at 12% 8%,  rgba(255, 216, 0, .55), transparent 62%),
        radial-gradient(46rem 36rem at 82% 14%, rgba(255, 130, 5, .50), transparent 60%),
        radial-gradient(50rem 42rem at 68% 88%, rgba(250, 80, 15, .42), transparent 62%),
        radial-gradient(40rem 34rem at 22% 82%, rgba(225, 5, 0, .28),   transparent 60%),
        radial-gradient(60rem 50rem at 50% 50%, rgba(255, 175, 0, .22), transparent 70%);
    filter: blur(28px) saturate(115%);
    animation: mesh-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
.flame-mesh--soft  { opacity: .5; }
.flame-mesh--faint { opacity: .28; }

@keyframes mesh-drift {
    0%   { transform: scale(1)    translate3d(0, 0, 0); }
    33%  { transform: scale(1.08) translate3d(-2.5%, 1.5%, 0); }
    66%  { transform: scale(1.04) translate3d(2%, -2%, 0); }
    100% { transform: scale(1.10) translate3d(1%, 2.5%, 0); }
}

.flame-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    background: conic-gradient(from 0deg, var(--f1), var(--f3), var(--f5), var(--f2), var(--f1));
    animation: orb-spin 34s linear infinite;
    will-change: transform;
}
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* isolation + z-index:-1 mantienen el grano por encima del fondo de la
   seccion pero SIEMPRE por debajo del texto. */
.grain { isolation: isolate; }
.grain::after {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.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");
    animation: grain-shift 800ms steps(4) infinite;
}
@keyframes grain-shift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 1%); }
    50%  { transform: translate(1%, -2%); }
    75%  { transform: translate(-1%, -1%); }
    100% { transform: translate(0, 0); }
}

.grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--hair-soft) 1px, transparent 1px);
    background-size: 12.5% 100%;
}
.grid-lines--dark {
    background-image: linear-gradient(to right, rgba(255, 250, 235, .05) 1px, transparent 1px);
}
.grid-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--hair) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}

/* ---------- 5. Animaciones de scroll ---------- */
.rv-word {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.5em);
    transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
}
.rv-in .rv-word { opacity: 1; filter: blur(0); transform: translateY(0); }

[data-fade] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-fade].is-in { opacity: 1; transform: none; }

.rule-draw {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--ease);
}
.rule-draw.is-in { transform: scaleX(1); }

/* Los tiles del mosaico entran escalonados y en escalera */
[data-tile] {
    opacity: 0;
    transform: scale(.965) translateY(14px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-tile].is-in { opacity: 1; transform: none; }

/* ---------- 6. Componentes ---------- */

/* Mosaico de cuadrantes */
.mosaic-card {
    position: relative;
    isolation: isolate;
    transition: border-color .35s ease;
}
.mosaic-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 50%),
                rgba(255, 130, 5, .18), rgba(250, 80, 15, .07) 42%, transparent 72%);
}
.mosaic-card:hover { border-color: rgba(250, 80, 15, .45); z-index: 2; }
.mosaic-card:hover::before { opacity: 1; }

/* Barra de enfasis: se despliega de arriba a abajo en el tile bajo el
   cursor. Es el acento que senala la opcion activa. */
.tile-bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    background: linear-gradient(to bottom, var(--f2), var(--f3) 45%, var(--f5));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ease);
}
.mosaic-card:hover .tile-bar,
.mosaic-card:focus-within .tile-bar { transform: scaleY(1); }

.mosaic-card h3,
.mosaic-card p { transition: transform .45s var(--ease); }
.mosaic-card:hover h3 { transform: translateY(-3px); }
.mosaic-card:hover p  { transform: translateY(-1px); }

/* Card con glow que sigue el cursor */
.glow-card {
    position: relative;
    isolation: isolate;
    transition: border-color .35s ease, transform .35s var(--ease);
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%),
                rgba(255, 130, 5, .16), rgba(250, 80, 15, .06) 40%, transparent 70%);
}
.glow-card:hover { border-color: rgba(250, 80, 15, .40); transform: translateY(-3px); }
.glow-card:hover::before { opacity: 1; }

/* Botones */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.6rem;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 2px;
    overflow: hidden;
    isolation: isolate;
    transition: color .3s ease, border-color .3s ease;
}
.btn > * { position: relative; z-index: 2; }
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translateY(101%);
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.btn:hover::before { transform: translateY(0); }

/* Variante compacta para el boton del nav */
.btn-sm { padding: .625rem 1.25rem; font-size: .875rem; }

.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary::before { background: linear-gradient(100deg, var(--f1), var(--f3) 45%, var(--f5)); }
.btn-primary:hover { color: #fff; }

.btn-ghost { border: 1px solid var(--hair); color: var(--ink); background: transparent; }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--cream); border-color: var(--ink); }

.btn-light { background: var(--cream); color: var(--ink); }
.btn-light::before { background: linear-gradient(100deg, var(--f1), var(--f3) 45%, var(--f5)); }

/* Texto con degradado flame */
.flame-text,
.wordmark {
    background: linear-gradient(100deg,
                var(--f1) 0%, var(--f2) 22%, var(--f3) 48%, var(--f4) 72%, var(--f5) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.flame-text { animation: flame-slide 9s ease-in-out infinite alternate; }

@keyframes flame-slide {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

.flame-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--f3), var(--f5), transparent);
}

/* Wordmark gigante del footer. Relleno con gradiente en vez de outline:
   un stroke de 1px sobre texto de ~200px es geometricamente invisible. */
.wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: .82;
    white-space: nowrap;
    animation: flame-slide 14s ease-in-out infinite alternate;
}

/* Marquee */
.marquee { display: flex; overflow: hidden; user-select: none; gap: 0; }
.marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4rem;
    padding-right: 4rem;
    animation: marquee-scroll 38s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-100%); } }

.edge-fade {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Cursor blink del typewriter */
.caret::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: -0.15em;
    animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Pulso de estado */
.live-dot { position: relative; }
.live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: live-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes live-ping {
    0%        { transform: scale(1);   opacity: .7; }
    80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Nav */
.nav-link {
    position: relative;
    font-size: .875rem;
    color: var(--ink);
    opacity: .68;
    transition: opacity .25s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hairlines */
.hair   { border: 1px solid var(--hair); }
.hair-t { border-top: 1px solid var(--hair); }
.hair-b { border-bottom: 1px solid var(--hair); }
.hair-d { border: 1px solid var(--hair-dark); }