/*! Guren AI — estilos compartidos escritos a mano (no generados).
 * Los usan index.html, ana.html, laura.html y david.html junto a su CSS de Tailwind.
 * Contiene solo lo que Tailwind no expresa bien: historias con scroll (sticky), reveals, foco y movimiento reducido.
 */

:root {
  --g-teal: #061A18;
  --g-obsidian: #070A08;
  --g-sand: #F5ECE5;
  --g-header: 4rem;
}
@media (min-width: 640px) { :root { --g-header: 5rem; } }

html { scroll-padding-top: calc(var(--g-header) + 0.75rem); }

/* Escala proporcional en pantallas grandes: el diseño se ve igual que en un notebook de 13" (≈1470 × 860 útiles).
   Todo el CSS usa rem (el build convierte los px de Tailwind), así que basta con escalar la fuente raíz.
   Se limita por alto para que las secciones fijas (sticky) sigan cabiendo en pantalla. */
@media (min-width: 1500px) {
  html { font-size: clamp(16px, min(1.0884vw, 1.86vh), 28px); }
}
.g-page [hidden], .g-scope [hidden] { display: none !important; }

/* Foco visible coherente */
.g-page :focus-visible { outline: 0.125rem solid var(--g-teal); outline-offset: 0.1875rem; border-radius: 0.5rem; }
.g-page .g-dark :focus-visible, .g-page header :focus-visible, .g-page footer :focus-visible { outline-color: #F5ECE5; }

/* Reveal al scroll: visible por defecto; solo se oculta cuando JS está activo */
.js .g-reveal { opacity: 0; transform: translateY(1.125rem); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .g-reveal.is-in { opacity: 1; transform: none; }

/* Aurora suave del hero (sin video) */
.g-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.g-aurora::before, .g-aurora::after { content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(5.625rem); opacity: .55; }
.g-aurora::before { background: radial-gradient(circle, rgba(17,64,58,.95), transparent 65%); top: -30vmax; left: -10vmax; animation: g-drift-a 22s ease-in-out infinite alternate; }
.g-aurora::after { background: radial-gradient(circle, rgba(245,236,229,.10), transparent 60%); bottom: -35vmax; right: -15vmax; animation: g-drift-b 26s ease-in-out infinite alternate; }
@keyframes g-drift-a { to { transform: translate(18vmax, 10vmax) scale(1.1); } }
@keyframes g-drift-b { to { transform: translate(-16vmax, -8vmax) scale(1.15); } }

/* ===== Historias guiadas por scroll (estilo Apple) =====
 * <section data-story style="--steps:4"> <div class="g-story-track"> <div class="g-story-stage"> ...
 * [data-step-item="n"] se activa en el paso n; [data-step-min="n"] queda activo desde el paso n.
 * --p (0..1) es el progreso continuo; data-step el paso actual.
 */
.g-story-track { position: relative; height: calc(var(--steps, 4) * 62svh + 100svh - var(--g-header)); }
.g-story-stage { position: sticky; top: var(--g-header); height: calc(100svh - var(--g-header)); display: flex; align-items: center; overflow: hidden; }
.g-story [data-step-item] { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.g-story [data-step-item]:not(.is-active) { opacity: 0; transform: translateY(0.875rem); pointer-events: none; }
.g-story [data-step-min] { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), background-color .4s ease, color .4s ease, border-color .4s ease; }
.g-story [data-step-min]:not(.is-on) { opacity: 0; transform: translateY(0.625rem) scale(.98); }
.g-story-dot { width: 0.5rem; height: 0.5rem; border-radius: 62.4375rem; background: currentColor; opacity: .25; transition: width .35s ease, opacity .35s ease; }
.g-story-dot.is-active { width: 1.75rem; opacity: 1; }
.g-story-dot-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: inherit; background: none; border: 0; cursor: pointer; }
.g-story-bar { height: 0.125rem; background: currentColor; opacity: .9; transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Sin JS o con movimiento reducido: la historia se lee como una lista estática */
html:not(.js) .g-story-track { height: auto; }
html:not(.js) .g-story-stage { position: static; height: auto; overflow: visible; padding-block: 2rem; }
html:not(.js) .g-story [data-step-item], html:not(.js) .g-story [data-step-min] { opacity: 1; transform: none; position: static; }
html:not(.js) .g-story .g-story-static-hide, html:not(.js) .g-story-dots { display: none !important; }
html:not(.js) .g-story .g-story-steps { min-height: 0; }
html:not(.js) .g-story .g-story-steps > [data-step-item] + [data-step-item] { margin-top: 1.5rem; }
html:not(.js) .g-story .g-story-static-stack { height: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }

@media (prefers-reduced-motion: reduce) {
  /* Solo en páginas/secciones del sistema común: no altera el hero ni Meet Ana del index */
  .g-page *, .g-page *::before, .g-page *::after, .g-scope *, .g-scope *::before, .g-scope *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .g-reveal { opacity: 1; transform: none; }
  .g-story-track { height: auto; }
  .g-story-stage { position: static; height: auto; overflow: visible; padding-block: 2rem; }
  .g-story [data-step-item], .g-story [data-step-min] { opacity: 1 !important; transform: none !important; position: static !important; pointer-events: auto; }
  .g-story .g-story-static-hide { display: none !important; }
  .g-story .g-story-steps { min-height: 0; }
  .g-story .g-story-steps > [data-step-item] + [data-step-item] { margin-top: 1.5rem; }
  .g-story .g-story-static-stack { height: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
  .g-story-dots { display: none !important; }
}

/* Control segmentado (mismo patrón que las pestañas de productos del index) */
.g-seg { color: #3f3f46; border: 1px solid transparent; }
.g-seg:hover { color: #09090b; }
.g-seg[aria-selected="true"], .g-seg[aria-pressed="true"] { background: var(--g-teal); color: #fff; border-color: #041110; box-shadow: 0 1px 0.125rem rgba(0,0,0,.08); }
.g-seg-dark { color: #a1a1aa; border: 1px solid transparent; }
.g-seg-dark:hover { color: #fff; }
.g-seg-dark[aria-selected="true"], .g-seg-dark[aria-pressed="true"] { background: #F5ECE6; color: var(--g-teal); }

/* Tarjetas con elevación suave (igual que el index) */
.card-elevate { transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .25s ease; }
.card-elevate:hover { transform: translateY(-0.25rem); box-shadow: 0 1.25rem 2.1875rem -0.625rem rgba(0,0,0,.07), 0 0.5rem 1rem -0.375rem rgba(0,0,0,.03); }
@media (prefers-reduced-motion: reduce) { .card-elevate:hover { transform: none; } }

/* Acordeón: ícono + que rota a × */
.g-acc-icon svg { transition: transform .3s ease; }
[aria-expanded="true"] .g-acc-icon svg { transform: rotate(45deg); }

/* =====================================================================
   Movimiento (assets/site.js → initMotion). Todo cuelga de .g-motion,
   que solo existe si la persona no pidió reducir movimiento.
   ===================================================================== */
.g-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #F5ECE6, #6EE7B7); pointer-events: none; }

.g-motion .g-title { clip-path: inset(-10% -5% 100% -5%); transform: translateY(0.45em); transition: clip-path 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.g-motion .g-title.is-in { clip-path: inset(-10% -5% -20% -5%); transform: none; }

.g-word { transition: opacity .25s linear; opacity: .16; }
.g-scrub-static .g-word, html:not(.js) .g-word { opacity: 1; }

.g-spot-on { background-image: radial-gradient(22rem circle at var(--mx, -50%) var(--my, -50%), rgba(6, 26, 24, var(--spot, 0)), transparent 70%); }
.g-spot-on.g-spot-light { background-image: radial-gradient(26rem circle at var(--mx, -50%) var(--my, -50%), rgba(255, 255, 255, var(--spot, 0)), transparent 70%); }
.g-spot-on:hover { --spot: .07; }
.g-spot-on.g-spot-light:hover { --spot: .09; }

.g-tilt { transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.g-tilt:hover { transition-duration: .12s; }
.g-magnetic { transition: translate .35s cubic-bezier(.2,.7,.2,1), background-color .2s ease, color .2s ease, box-shadow .2s ease; }

/* Flechas de los CTA que avanzan al pasar el cursor */
.g-motion a:hover > svg.lucide-arrow-right, .g-motion a:hover > svg.lucide-arrow-up-right, .g-motion button:hover > svg.lucide-arrow-right { translate: 0.1875rem 0; }
.g-motion a > svg.lucide-arrow-right, .g-motion a > svg.lucide-arrow-up-right, .g-motion button > svg.lucide-arrow-right { transition: translate .25s ease; }

/* Paneles que crecen al entrar en pantalla (scroll-driven animations; sin soporte quedan quietos) */
@supports (animation-timeline: view()) {
  .g-motion [data-zoom] { animation: g-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  @keyframes g-zoom { from { scale: .9; opacity: .4; } to { scale: 1; opacity: 1; } }
}

/* Texto manifiesto que se ilumina con el scroll */
.g-manifesto { font-size: clamp(1.75rem, 1rem + 3.2vw, 3.75rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }

/* =====================================================================
   Prosa del blog (templates/partials/article.html → .g-prose)
   ===================================================================== */
.g-prose { color: #3f3f46; font-size: 1.0625rem; line-height: 1.8; }
.g-prose > * + * { margin-top: 1.25rem; }
.g-prose h2 { margin-top: 3rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: #09090b; scroll-margin-top: calc(var(--g-header) + 1rem); }
.g-prose h3 { margin-top: 2.25rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 700; color: #09090b; }
.g-prose h2 + *, .g-prose h3 + * { margin-top: 0.75rem; }
.g-prose strong { color: #09090b; font-weight: 600; }
.g-prose a { color: var(--g-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.g-prose a:hover { text-decoration-thickness: 2px; }
.g-prose ul, .g-prose ol:not(.g-steps) { padding-left: 0; list-style: none; }
.g-prose ul > li, .g-prose ol:not(.g-steps) > li { position: relative; padding-left: 1.5rem; }
.g-prose ul > li + li, .g-prose ol:not(.g-steps) > li + li { margin-top: 0.6rem; }
/* Viñeta: el delta de la marca */
.g-prose ul > li::before { content: ''; position: absolute; left: 0.1rem; top: 0.68em; width: 0.6rem; height: 0.52rem; background: var(--g-teal); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.g-prose blockquote { margin-top: 2rem; margin-bottom: 2rem; padding: 1.5rem 1.75rem; border-radius: 1.5rem; background: var(--g-sand); color: #18181b; font-size: 1.125rem; line-height: 1.7; border-left: 0.25rem solid var(--g-teal); }
.g-prose blockquote p + p { margin-top: 0.75rem; }
.g-prose code { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.9em; background: #f4f4f5; border-radius: 0.375rem; padding: 0.1em 0.35em; }
.g-prose figure { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.g-prose figcaption { font-weight: 700; color: #09090b; letter-spacing: -0.01em; margin-bottom: 1rem; }

.g-table { overflow-x: auto; border: 1px solid #e4e4e7; border-radius: 1.25rem; -webkit-overflow-scrolling: touch; }
.g-table:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 2px; }
.g-table table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 0.85rem 1rem; border-bottom: 1px solid #e4e4e7; }
.g-table thead th { background: var(--g-sand); color: #09090b; font-weight: 700; font-size: 0.875rem; }
.g-table tbody tr:last-child > * { border-bottom: 0; }
.g-table tbody th, .g-table td:first-child { color: #09090b; font-weight: 600; }
.g-table td:last-child { color: var(--g-teal); font-weight: 600; }

.g-steps { counter-reset: g-step; list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.g-steps > li { counter-increment: g-step; position: relative; padding: 1.1rem 1.25rem 1.1rem 3.6rem; border-radius: 1.25rem; background: var(--g-sand); border: 1px solid #e4e4e7; }
.g-steps > li::before { content: counter(g-step); position: absolute; left: 1.1rem; top: 1.05rem; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--g-teal); color: #fff; font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.g-steps > li strong { display: block; color: #09090b; line-height: 1.4; }
.g-steps > li span { display: block; margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.65; color: #52525b; }

.g-compare { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .g-compare { grid-template-columns: 1fr 1fr; } }
.g-compare > div { border-radius: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid #e4e4e7; background: #fff; }
.g-compare > div:first-child { background: var(--g-teal); border-color: var(--g-teal); color: #e4e4e7; }
.g-compare > div:first-child strong, .g-compare > div:first-child .g-compare-title { color: #fff; }
.g-compare > div:first-child ul > li::before { background: #F5ECE6; }
.g-compare .g-compare-title { font-weight: 700; color: #09090b; margin-bottom: 0.75rem; }
.g-compare ul { font-size: 0.9375rem; line-height: 1.6; }

.g-code-fig pre { overflow-x: auto; border-radius: 1.25rem; background: #09090b; color: #e4e4e7; padding: 1.25rem 1.4rem; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.7; }
.g-code-fig pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* Chips de filtro (blog) */
.g-chip { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #d4d4d8; background: #fff; color: #3f3f46; font-size: 0.875rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.g-chip:hover { border-color: var(--g-teal); color: var(--g-teal); }
.g-chip[aria-pressed="true"] { background: var(--g-teal); border-color: var(--g-teal); color: #fff; }

/* =====================================================================
   Firmas de los héroes de agentes (decorativas, aria-hidden).
   Ana = voz, Laura = correos 1-a-1, David = libro mayor. Solo CSS.
   ===================================================================== */
.g-sig { position: absolute; pointer-events: none; }
/* Ana: onda de voz continua a lo ancho */
.g-sig-voice { left: 0; right: 0; top: 30%; height: 9rem; opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.g-sig-voice svg { position: absolute; inset: 0; width: 200%; height: 100%; animation: g-sig-wave 9s linear infinite; }
.g-sig-voice svg + svg { animation-duration: 14s; animation-direction: reverse; opacity: .6; }
@keyframes g-sig-wave { to { transform: translateX(-50%); } }
/* Laura: asuntos de correo que suben, uno distinto para cada cuenta */
.g-sig-mail { top: 0; bottom: 0; width: 12rem; opacity: .7; display: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.g-sig-mail.is-left { left: 1rem; } .g-sig-mail.is-right { right: 1rem; }
.g-sig-mail ul { animation: g-sig-up 36s linear infinite; }
.g-sig-mail.is-right ul { animation-duration: 44s; }
.g-sig-mail li { margin-bottom: .75rem; padding: .7rem .9rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(228,228,231,.55); font-size: .75rem; line-height: 1.35; }
.g-sig-mail li b { display: block; color: rgba(245,236,230,.75); font-weight: 600; font-size: .6875rem; margin-bottom: .2rem; font-family: 'Geist Mono', ui-monospace, monospace; }
@keyframes g-sig-up { to { transform: translateY(-50%); } }
/* David: filas de un libro mayor; las duplicadas se marcan y se corrigen */
.g-sig-ledger { top: 18%; width: 12rem; display: none; font-family: 'Geist Mono', ui-monospace, monospace; font-size: .6875rem; color: rgba(228,228,231,.45); }
.g-sig-ledger.is-left { left: 1rem; } .g-sig-ledger.is-right { right: 1rem; }
.g-sig-ledger p { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: .6rem; margin-bottom: .3rem; animation: g-sig-row 10s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.25s); }
@keyframes g-sig-row { 0%, 100% { background: transparent; color: inherit; } 6% { background: rgba(255,155,138,.14); color: #FF9B8A; } 14% { background: rgba(110,231,183,.12); color: #6EE7B7; } 24% { background: transparent; color: inherit; } }
/* Solo cuando hay margen a los lados del contenido (max-w-5xl + dos columnas de 12rem) */
@media (min-width: 1360px) { .g-sig-mail, .g-sig-ledger { display: block; } }
@media (prefers-reduced-motion: reduce) { .g-sig-voice svg, .g-sig-mail ul, .g-sig-ledger p { animation: none !important; } }

/* =====================================================================
   Transición entre páginas (View Transitions; sin soporte, navegación normal)
   El header queda fijo y el contenido se funde y sube.
   ===================================================================== */
@view-transition { navigation: auto; }
[data-site-header], #main-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: g-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: g-vt-in .45s cubic-bezier(0, 0, .2, 1) both; }
@keyframes g-vt-out { to { opacity: 0; transform: translateY(-0.75rem); } }
@keyframes g-vt-in { from { opacity: 0; transform: translateY(1.25rem); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }