/* IZV — component styles. Every value comes from tokens.css; no literal brand colours here. */
/* Motion lives here, not in tokens.json (the format has no motion family). */
:root { --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 3200ms; }
html, body { margin: 0; }
body { font-family: var(--font-sans); background: var(--papel); color: var(--tinta); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
.izv-ico { display: block; flex: none; }
.izv-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-5); }
.izv-col { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
:where(.izv-btn, .izv-nav-link, .izv-seg-opt, .izv-glass-close, a):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Wordmark */
.izv-wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--petroleo); text-decoration: none; }
.izv-wordmark svg { display: block; }
.izv-wordmark-ink { fill: var(--petroleo); }
.izv-wordmark-line { stroke: var(--agua); stroke-width: 10; }
.izv-wordmark-sub { font-size: 11px; line-height: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 500; max-width: 13ch; }

/* Button */
.izv-btn { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h); padding: 0 22px; border-radius: var(--radius-pill); border: 1px solid transparent; font: 500 15px/20px var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-base) cubic-bezier(.2,.8,.2,1); }
.izv-btn:active { transform: scale(.97) !important; }
.izv-btn-sm { --h: 36px; padding: 0 16px; font-size: 14px; }
.izv-btn-lg { --h: 52px; padding: 0 28px; font-size: 16px; }
.izv-btn-arrow { padding-right: 16px; }
.izv-btn-chev { transition: transform var(--dur-fast); }
.izv-btn:hover .izv-btn-chev { transform: translateX(3px); }
.izv-btn-icon { display: inline-flex; }
.izv-btn-primary { background: var(--tinta); color: var(--on-tinta); }
.izv-btn-primary:hover { color: var(--on-tinta); box-shadow: var(--shadow-btn); }
.izv-btn-accent { background: var(--petroleo); color: var(--on-petroleo); }
.izv-btn-accent:hover { color: var(--on-petroleo); background: var(--petroleo-hover); box-shadow: var(--shadow-btn); }
.izv-btn-secondary { background: var(--blanco); color: var(--tinta); border-color: var(--linea); }
.izv-btn-secondary:hover { color: var(--tinta); border-color: var(--gris); }
.izv-btn-glass { background: var(--vidrio); color: var(--tinta); border-color: var(--vidrio-borde); box-shadow: var(--shadow-glass); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); }
.izv-btn-ghost { background: transparent; color: var(--tinta); }
.izv-btn-ghost:hover { background: var(--velo); }
.izv-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* NavBar */
.izv-nav { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); min-height: 60px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--shadow-glass); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); }
.izv-nav-brand { display: inline-flex; text-decoration: none; border-radius: var(--radius-xs); }
.izv-nav-links { position: relative; display: flex; gap: 2px; margin: 0 auto; padding: 4px; }
.izv-nav-ind { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: var(--radius-pill); background: var(--blanco); box-shadow: var(--shadow-card); transition: transform var(--dur-base) cubic-bezier(.3,.8,.2,1), width var(--dur-base) cubic-bezier(.3,.8,.2,1), opacity var(--dur-fast); }
.izv-nav-link { position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--radius-pill); color: var(--gris); text-decoration: none; font: 500 14px/20px var(--font-sans); transition: color var(--dur-fast); }
.izv-nav-link:hover { color: var(--tinta); }
.izv-nav-link[data-active="true"] { color: var(--tinta); }
.izv-nav-actions { display: flex; gap: var(--space-2); align-items: center; }
@media (max-width: 760px) { .izv-nav-links { display: none; } .izv-nav-actions { margin-left: auto; } .izv-wordmark-sub { display: none; } }

/* Chip */
.izv-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 12px 0 10px; border-radius: var(--radius-pill); font: 500 13px/18px var(--font-sans); white-space: nowrap; border: 1px solid transparent; }
.izv-chip-icon { display: inline-flex; }
.izv-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.izv-chip-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--tinta); box-shadow: inset 0 0 0 4px var(--tinta), inset 0 0 0 6px var(--agua-claro); }
.izv-chip-neutral { background: var(--crema); color: var(--tinta); border-color: var(--linea); }
.izv-chip-agua { background: var(--agua-soft); color: var(--agua-texto); }
.izv-chip-signal { background: var(--agua-claro); color: var(--tinta-fija); }
.izv-chip-perdida { background: var(--perdida-soft); color: var(--perdida); }
.izv-chip-glass { background: var(--vidrio); color: var(--tinta); border-color: var(--vidrio-borde); box-shadow: var(--shadow-glass); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.izv-chip-glass .izv-chip-dot { background: var(--agua-texto); }

/* Segmented */
.izv-seg { position: relative; display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--crema); border: 1px solid var(--linea); }
.izv-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: var(--radius-pill); background: var(--tinta); transition: transform var(--dur-base) cubic-bezier(.3,.8,.2,1), width var(--dur-base) cubic-bezier(.3,.8,.2,1); }
.izv-seg-opt { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; height: 36px; padding: 0 18px; border-radius: var(--radius-pill); font: 500 14px/20px var(--font-sans); color: var(--gris); transition: color var(--dur-base); }
.izv-seg-opt:hover { color: var(--tinta); }
.izv-seg-opt[data-on="true"] { color: var(--on-tinta); }
.izv-seg-sm .izv-seg-opt { height: 30px; padding: 0 14px; font-size: 13px; }

/* Stage */
.izv-stage { --mx: 50%; --my: 40%; position: relative; overflow: hidden; background: var(--crema); isolation: isolate; }
.izv-stage-framed { border-radius: var(--radius-xl); border: 1px solid var(--linea); }
.izv-stage-glow { position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(var(--blur-glow)); opacity: .55; pointer-events: none; transition: left 1.2s cubic-bezier(.2,.8,.2,1), top 1.2s cubic-bezier(.2,.8,.2,1); }
.izv-stage-glow-a { background: var(--agua-claro); left: calc(var(--mx) - 40%); top: calc(var(--my) - 30%); }
.izv-stage-glow-b { background: var(--blanco); right: -8%; bottom: -20%; opacity: .9; }
.izv-stage-inner { position: relative; }

/* GlassCard */
.izv-glass { --sx: 50%; --sy: 0%; position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--space-5); background: var(--vidrio); border: 1px solid var(--vidrio-borde); box-shadow: var(--shadow-glass); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); transition: transform var(--dur-base) cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; color: var(--tinta); }
.izv-glass-spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--sx) var(--sy), var(--vidrio-borde), transparent 45%); opacity: .7; }
.izv-glass-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.izv-glass-eyebrow { font: 500 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--space-1); }
.izv-glass-title { font: 500 18px/24px var(--font-sans); letter-spacing: -.015em; }
.izv-glass-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linea); background: var(--blanco); color: var(--gris); cursor: pointer; font-size: 16px; line-height: 1; }
.izv-glass-body { position: relative; font-size: 15px; line-height: 24px; color: var(--gris); }

/* MetricCard */
.izv-metric { position: relative; border-radius: var(--radius-md); padding: var(--space-5); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--shadow-card); min-width: 240px; height: 100%; box-sizing: border-box; }
.izv-metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.izv-metric-label { font: 500 14px/20px var(--font-sans); color: var(--gris); }
.izv-metric-value { margin-top: var(--space-3); font: 500 40px/44px var(--font-mono); letter-spacing: -.035em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.izv-metric-note { margin-top: var(--space-1); font-size: 13px; line-height: 18px; color: var(--gris); }
.izv-delta { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); font: 500 12px/16px var(--font-mono); }
.izv-delta.is-good { background: var(--agua-soft); color: var(--agua-texto); }
.izv-delta.is-bad { background: var(--perdida-soft); color: var(--perdida); }
.izv-spark { position: relative; margin-top: var(--space-4); height: 64px; }
.izv-spark-svg { display: block; width: 100%; height: 64px; overflow: visible; cursor: crosshair; }
.izv-spark-line { fill: none; stroke: var(--agua-texto); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.izv-spark-area { fill: var(--agua-soft); }
.izv-spark-svg.is-neg .izv-spark-line { stroke: var(--perdida); }
.izv-spark-svg.is-neg .izv-spark-area { fill: var(--perdida-soft); }
.izv-spark-rule { stroke: var(--linea); stroke-width: 1; }
.izv-spark-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--agua-texto); box-sizing: border-box; pointer-events: none; }
.izv-spark-svg.is-neg ~ .izv-spark-dot { border-color: var(--perdida); }
.izv-spark-tip { position: absolute; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--tinta); color: var(--on-tinta); font: 500 12px/16px var(--font-mono); white-space: nowrap; pointer-events: none; }

/* XRayOrb */
.izv-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.izv-orb { --hx: 35%; --hy: 28%; --rx: 0deg; --ry: 0deg; position: relative; border-radius: 50%; transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform var(--dur-base) cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-float); }
.izv-orb-core { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at var(--hx) var(--hy), var(--petroleo-fijo) 0%, var(--tinta-fija) 72%); }
.izv-orb-bars { position: absolute; inset: 0; width: 100%; height: 100%; }
.izv-orb-bars rect { fill: var(--agua-claro); opacity: .28; }
.izv-orb-base { stroke: var(--agua-claro); stroke-width: .5; opacity: .5; }
.izv-orb-scan { position: absolute; left: -10%; right: -10%; height: 34%; top: -34%; background: linear-gradient(180deg, transparent, var(--agua-claro) 55%, transparent 56%); opacity: .55; mix-blend-mode: screen; animation: izv-scan var(--dur-slow) cubic-bezier(.5,0,.5,1) infinite; }
.izv-orb-ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--agua-claro); opacity: .18; }
.izv-orb-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at var(--hx) var(--hy), var(--vidrio-borde) 0%, transparent 30%), radial-gradient(circle at 50% 120%, var(--agua-claro), transparent 45%); opacity: .9; box-shadow: inset 0 0 0 1px var(--vidrio-borde), inset 0 -18px 40px -10px var(--agua); }
.izv-orb-caption { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.izv-orb-title { font: 400 28px/32px var(--font-sans); letter-spacing: -.03em; color: var(--tinta); }
.izv-orb-sub { font-size: 14px; line-height: 20px; color: var(--gris); max-width: 28ch; }
@keyframes izv-scan { 0% { top: -34%; } 60%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .izv-orb-scan { animation: none; top: 30%; } .izv-cursor.is-float { animation: none; } }

/* CursorTag */
.izv-cursor { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: none; }
.izv-cursor-arrow path { fill: var(--tinta); stroke: var(--blanco); stroke-width: 1.2; }
.izv-cursor-pill { margin-left: 12px; padding: 4px 10px; border-radius: var(--radius-pill) ; font: 500 12px/16px var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-card); }
.izv-cursor-agua .izv-cursor-pill { background: var(--agua-claro); color: var(--tinta-fija); }
.izv-cursor-tinta .izv-cursor-pill { background: var(--tinta); color: var(--on-tinta); }
.izv-cursor-perdida .izv-cursor-pill { background: var(--perdida-soft); color: var(--perdida); }
.izv-cursor.is-float { animation: izv-float 5s ease-in-out infinite; }
@keyframes izv-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -6px); } }

/* Hero */
.izv-hero { display: grid; gap: var(--space-7); padding: var(--space-9) var(--space-6) var(--space-8); }
.izv-hero.is-center { justify-items: center; text-align: center; }
.izv-hero.is-left { grid-template-columns: 1.1fr .9fr; align-items: center; text-align: left; }
.izv-hero-copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: inherit; }
.izv-hero.is-center .izv-hero-copy { align-items: center; }
.izv-hero-title { margin: 0; display: flex; flex-direction: column; font-weight: 350; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.045em; color: var(--tinta); }
.izv-hero-l2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--gris); font-size: 1.04em; }
.izv-hero-lead { margin: 0; max-width: 56ch; font-size: 19px; line-height: 30px; color: var(--gris); }
.izv-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: inherit; }
.izv-hero.is-center .izv-hero-ctas { justify-content: center; }
@media (max-width: 760px) { .izv-hero.is-left { grid-template-columns: 1fr; } }