/* pyenzo-ds.css · Design System de Pyenzo — ARCHIVO GENERADO, NO EDITAR.
   Fuente: pyenzo-launchpad-dev src/index.css + tailwind.config.ts (commit 5e46b0b), con `npm run ds:export`.
   Para cambiar algo, cámbialo en el DS del sitio y vuelve a exportar. */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); }
button, input, textarea, select { font-family: inherit; color: inherit; }
button { background-color: transparent; }
/* Solo el subconjunto latin (español completo: á é í ó ú ñ ü ¿ ¡ — … €): sin latin-ext, cirílico ni vietnamita (2026-10-08, rendimiento). */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* Tipografía del DS (Trifuerza Pyenzo): una sola definición; tailwind.config.ts la usa y las apps sin React también */

:root {
  --font-heading: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Grotesk", ui-monospace, monospace;
}

:root, .light {
  /* --- GLOBAL PALETTE (Raw Colors) --- */
  /* Permite configurar qué color puro mapea a qué token en cada modo */
  --palette-purewhite: 0 0% 100%;
  --palette-pureblack: 0 0% 0%;
  --palette-darkwater: 202 90% 24%;
  --palette-darkwater-hover: 202 80% 30%;
  --palette-sapphire: 202 90% 60%;
  --palette-sapphire-soft: 202 75% 60%;
  --palette-oceanblue: 202 50% 45%;
  --palette-oceanblue-hover: 202 50% 51%;
  --palette-oceanblue-light: 202 50% 52%;
  /* #4795C2 — azul de texto/links en oscuro (5,4:1) */
  --palette-oceanblue-light-hover: 202 50% 58%;
  --palette-sunset-coral: 11 92% 53%;
  --palette-sunset-coral-hover: 11 92% 58%;
  --palette-sunset-coral-soft: 14 85% 68%;
  /* cola del gradiente coral (claro) */
  --palette-coral-glow: 11 96% 75%;
  /* cola de .text-gradient-accent */
  --palette-mattecoral: 11 92% 53%;
  /* #F5421A — coral Pyenzo en oscuro (decisión Leonardo 2026-09-29: el #E67055 se veía opaco) */
  --palette-mattecoral-hover: 11 92% 58%;
  --palette-mattecoral-soft: 11 75% 68%;
  /* cola del gradiente coral (oscuro) */
  --palette-gold: 42 95% 54%;
  /* #FAB91A — Oro Puro (claro), según DsColors */
  --palette-gold-bright: 42 95% 60%;
  --palette-gold-soft: 42 90% 72%;
  --palette-oldpaper: 38 50% 76%;
  --palette-oldpaper-hover: 38 50% 85%;
  --palette-oldpaper-soft: 38 60% 85%;
  --palette-oldpaper-fg: 38 50% 92%;
  --palette-oldpaper-light: 38 50% 82%;
  /* paradas del gradiente gold (oscuro) */
  --palette-oldpaper-deep: 38 50% 70%;
  --palette-success-light: 142 76% 36%;
  --palette-success-hover: 142 76% 42%;
  --palette-success-dark: 142 45% 40%;
  --palette-success-dark-hover: 142 71% 55%;
  --palette-success-bright: 152 75% 46%;
  /* cola del gradiente success (claro) */
  --palette-success-ink: 142 76% 29%;
  /* #12823B — verde para texto en claro (4,9:1) */
  --palette-success-ink-dark: 142 45% 43%;
  /* #3C9F60 — verde para texto en oscuro (4,6:1 sobre tarjeta) */
  --palette-singleblue: 209 41% 23%;
  --palette-singleblue-dark: 209 41% 18%;
  --palette-singleblue-light: 209 25% 78%;
  --palette-singleblue-mid: 209 41% 36%;
  /* cola del gradiente de marca */
  --palette-singleblue-mid-hover: 209 41% 42%;
  --palette-singleblue-field: 209 25% 57%;
  /* #7692AD — borde de campos en claro (3:1) */
  --palette-indigo-field: 188 20% 40%;
  /* #52757A — borde de campos en oscuro (≥3:1 sobre fondo y tarjeta) */
  --palette-regent: 215 9% 70%;
  --palette-indigo: 188 25% 18%;
  --palette-indigo-hover: 188 35% 32%;
  --palette-dark-teal: 173 73% 6%;
  --palette-dark-teal-card: 173 70% 10%;
  --palette-dark-teal-popover: 173 70% 8%;
  --palette-bush: 180 53% 9%;
  /* #0B2424 — tinta de los favicons (DsFavicons) y texto sobre Matte Coral en oscuro */
  --palette-bone-white: 43 62% 93%;
  --palette-bone-white-card: 0 0% 100%;
  --palette-bone-white-popover: 43 65% 96%;
  --palette-bone-white-fg: 43 62% 95%;
  --palette-sand: 41 45% 88%;
  --palette-sand-dark: 209 35% 28%;
  /* Modo Claro — "Alexa Website" */
  --background: var(--palette-bone-white-popover);
  --foreground: var(--palette-singleblue-dark);
  --card: var(--palette-bone-white-card);
  --card-foreground: var(--palette-singleblue-dark);
  --popover: var(--palette-bone-white-popover);
  --popover-foreground: var(--palette-singleblue-dark);
  --overlay: var(--palette-pureblack);
  /* --- CORE 5 BRAND TOKENS --- */
  /* Light Mode Mapping */
  --primary: var(--palette-darkwater);
  --primary-foreground: var(--palette-purewhite);
  --primary-hover: var(--palette-darkwater-hover);
  --primary-glow: var(--palette-sapphire);
  --primary-soft: var(--palette-singleblue-mid);
  /* cola del acento azul de títulos */
  --primary-fill: var(--palette-darkwater);
  /* relleno azul sólido con texto (botón default, badge…) */
  --primary-fill-hover: var(--palette-darkwater-hover);
  --primary-fill-foreground: var(--palette-purewhite);
  --coral: var(--palette-sunset-coral);
  --coral-foreground: var(--palette-dark-teal);
  /* Tinta Pyenzo #041A18 sobre coral: 4,85:1 (reposo) · 5,38:1 (hover). El blanco daba 3,7:1 */
  --coral-hover: var(--palette-sunset-coral-hover);
  --gold: var(--palette-gold);
  --gold-hover: var(--palette-gold-bright);
  --gold-soft: var(--palette-gold-soft);
  --gold-ink: var(--palette-singleblue-dark);
  /* Regla: el oro no es texto en claro → cae al color de texto */
  --success: var(--palette-success-light);
  /* #16A145 — Success Green (claro), según DsColors */
  --success-hover: var(--palette-success-hover);
  --success-ink: var(--palette-success-ink);
  /* verde para texto (deltas, mensajes) */
  --muted: var(--palette-sand);
  --muted-foreground: var(--palette-sand-dark);
  --secondary: var(--palette-singleblue);
  --secondary-foreground: var(--palette-bone-white-fg);
  --secondary-hover: var(--palette-singleblue-dark);
  /* --- SEMANTIC ALIASES (Herencia) --- */
  --accent: var(--coral);
  --accent-foreground: var(--coral-foreground);
  --danger: var(--coral);
  --destructive: var(--coral);
  --destructive-foreground: var(--coral-foreground);
  --destructive-hover: var(--coral-hover);
  --highlight: var(--primary);
  --highlight-foreground: var(--primary-foreground);
  --highlight-soft: var(--primary-soft);
  /* cola del acento de títulos */
  --eyebrow: var(--coral);
  /* línea superior de las secciones: coral del DS (Fluorescent en claro, Matte en oscuro) */
  --option-highlight: var(--coral) / 0.12;
  /* fondo de la opción activa en listas y menús */
  --border: var(--palette-singleblue-light);
  --input: var(--palette-singleblue-field);
  /* borde de campos: 3:1 */
  --ring: var(--coral);
  /* Anillo de foco con teclado: coral (decisión Leonardo 2026-09-28) */
  --radius: 0.875rem;
  --glass: var(--palette-bone-white-popover) / 0.90;
  --glass-border: var(--palette-oceanblue) / 0.22;
  /* Gradientes Oficiales (Transiciones cromáticas ricas) - FIJOS AL AZUL DE MARCA */
  /* Superficies de marca (CTAs): azul oscuro de marca fijo en ambos modos. */
  --gradient-brand: linear-gradient(135deg, hsl(var(--palette-darkwater)) 0%, hsl(var(--palette-singleblue-mid)) 100%);
  --gradient-brand-hover: linear-gradient(135deg, hsl(var(--palette-darkwater-hover)) 0%, hsl(var(--palette-singleblue-mid-hover)) 100%);
  /* Acento de títulos (.text-gradient-brand): hereda --highlight del modo para ser legible en oscuro. */
  --gradient-brand-text: linear-gradient(135deg, hsl(var(--highlight)) 0%, hsl(var(--highlight-soft)) 100%);
  --gradient-gold: linear-gradient(135deg, hsl(var(--palette-gold)) 0%, hsl(var(--palette-gold-bright)) 50%, hsl(var(--palette-gold-soft)) 100%);
  --gradient-coral: linear-gradient(135deg, hsl(var(--palette-sunset-coral)) 0%, hsl(var(--palette-sunset-coral-soft)) 100%);
  --gradient-success: linear-gradient(135deg, hsl(var(--palette-success-light)) 0%, hsl(var(--palette-success-bright)) 100%);
  --gradient-hero: radial-gradient(55% 55% at 78% 22%, hsl(var(--primary-glow) / 0.16) 0%, transparent 62%),
                     radial-gradient(45% 45% at 18% 82%, hsl(var(--coral) / 0.16) 0%, transparent 62%),
                     radial-gradient(40% 40% at 50% 100%, hsl(var(--secondary) / 0.10) 0%, transparent 60%),
                     radial-gradient(35% 35% at 88% 78%, hsl(var(--muted) / 0.20) 0%, transparent 60%);
  /* Sombras Oficiales */
  --shadow-glass: 0 10px 40px -12px hsl(var(--palette-darkwater) / 0.22);
  --shadow-glow: 0 0 60px -10px hsl(var(--primary) / 0.45);
  --shadow-gold: 0 0 40px -8px hsl(var(--gold) / 0.5);
  /* Opacidades Decorativas */
  --bg-grain: 0.07;
  --bg-grid: 0.06;
  --bg-dot-tex: 0.035;
  --bg-line: 0.16;
  --bg-shape: 0.10;
  --bg-axis: 0.04;
  --bg-dot-strong: 0.35;
  --bg-dot-soft: 0.50;
  --bg-shapes-layer: 0.9;
  --bg-grid-strong: 0.09;
  --bg-datapath: 0.08;
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] {
  /* Modo Oscuro — "Street" */
  --background: var(--palette-dark-teal);
  --foreground: var(--palette-bone-white);
  --card: var(--palette-dark-teal-card);
  --card-foreground: var(--palette-bone-white);
  --popover: var(--palette-dark-teal-popover);
  --popover-foreground: var(--palette-bone-white);
  --overlay: var(--palette-pureblack);
  /* --- CORE 5 BRAND TOKENS --- */
  /* Dark Mode Mapping (Opuestos configurados) */
  --primary: var(--palette-oceanblue-light);
  /* texto/links/íconos en oscuro: 5,4:1 */
  --primary-foreground: var(--palette-bone-white);
  /* Decisión Leonardo 2026-09-28: texto crema sobre primary en oscuro */
  --primary-hover: var(--palette-oceanblue-light-hover);
  --primary-glow: var(--palette-sapphire-soft);
  --primary-soft: var(--palette-sapphire-soft);
  --primary-fill: var(--palette-darkwater);
  /* botones azules sólidos: azul oscuro de marca también en oscuro */
  --primary-fill-hover: var(--palette-darkwater-hover);
  --primary-fill-foreground: var(--palette-bone-white);
  --coral: var(--palette-mattecoral);
  --coral-foreground: var(--palette-dark-teal);
  /* Misma tinta en oscuro (el coral es el mismo) */
  --coral-hover: var(--palette-mattecoral-hover);
  --gold: var(--palette-oldpaper);
  --gold-hover: var(--palette-oldpaper-hover);
  --gold-soft: var(--palette-oldpaper-soft);
  --gold-ink: var(--palette-oldpaper);
  /* en oscuro el dorado sí puede ser texto (11:1) */
  --success: var(--palette-success-dark);
  --success-hover: var(--palette-success-dark-hover);
  --success-ink: var(--palette-success-ink-dark);
  --muted: var(--palette-indigo);
  --muted-foreground: var(--palette-regent);
  --secondary: var(--palette-indigo);
  --secondary-foreground: var(--palette-bone-white-fg);
  --secondary-hover: var(--palette-indigo-hover);
  /* --- SEMANTIC ALIASES (Herencia Idéntica a Light Mode) --- */
  --accent: var(--coral);
  --accent-foreground: var(--coral-foreground);
  --danger: var(--coral);
  --destructive: var(--coral);
  --destructive-foreground: var(--coral-foreground);
  --highlight: var(--primary);
  --highlight-foreground: var(--primary-foreground);
  --highlight-soft: var(--primary-soft);
  /* cola del acento de títulos */
  --eyebrow: var(--coral);
  /* línea superior de las secciones: coral del DS (Fluorescent en claro, Matte en oscuro) */
  --option-highlight: var(--coral) / 0.12;
  /* fondo de la opción activa en listas y menús */
  --border: var(--palette-indigo);
  --input: var(--palette-indigo-field);
  --ring: var(--coral);
  /* Anillo de foco con teclado: coral (decisión Leonardo 2026-09-28) */
  --glass: var(--palette-dark-teal-card) / 0.90;
  --glass-border: var(--palette-oldpaper) / 0.18;
  /* Sombras Dark */
  --shadow-glass: 0 8px 30px -12px hsl(var(--palette-pureblack) / 0.55);
  --shadow-glow: 0 0 48px -14px hsl(var(--primary-glow) / 0.40);
  --shadow-gold: 0 0 32px -12px hsl(var(--gold) / 0.34);
  --gradient-hero: radial-gradient(60% 60% at 70% 30%, hsl(var(--primary-glow) / 0.16) 0%, transparent 60%),
                     radial-gradient(50% 50% at 20% 80%, hsl(var(--gold) / 0.10) 0%, transparent 60%);
  /* Gradientes Oficiales Dark (Transiciones cromáticas ricas adaptadas a dark mode) */
  /* --gradient-brand(-hover) no se redefine: los CTAs conservan el azul oscuro de marca. --gradient-brand-text hereda --highlight. */
  --gradient-gold: linear-gradient(135deg, hsl(var(--palette-oldpaper)) 0%, hsl(var(--palette-oldpaper-light)) 50%, hsl(var(--palette-oldpaper-deep)) 100%);
  --gradient-coral: linear-gradient(135deg, hsl(var(--palette-mattecoral)) 0%, hsl(var(--palette-mattecoral-soft)) 100%);
  --gradient-success: linear-gradient(135deg, hsl(var(--palette-success-dark)) 0%, hsl(var(--palette-success-dark-hover)) 100%);
  /* Decorative background opacities */
  --bg-grain: 0.04;
  --bg-dot-tex: 0.035;
  --bg-line: 0.09;
  --bg-shape: 0.055;
  --bg-axis: 0.035;
  --bg-dot-strong: 0.24;
  --bg-dot-soft: 0.30;
  --bg-shapes-layer: 0.55;
  --bg-grid-strong: 0.10;
  --bg-grid: 0.06;
  --bg-datapath: 0.10;
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  font-family: var(--font-body);
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

:root[data-theme="dark"] body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Escala tipográfica funcional: titulares firmes, cuerpo tranquilo */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h1 {
  letter-spacing: -0.024em;
}

p {
  line-height: 1.65;
}

::-moz-selection {
  background: hsl(var(--primary) / 0.25);
  color: hsl(var(--foreground));
}

::selection {
  background: hsl(var(--primary) / 0.25);
  color: hsl(var(--foreground));
}

/* Ley de autofill: el navegador NUNCA repinta los campos (cuadro amarillo/azul
     con borde propio). Los inputs autocompletados conservan el fondo transparente
     y el color de texto del Design System. */

input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill {
  -webkit-text-fill-color: hsl(var(--foreground));
  caret-color: hsl(var(--foreground));
  -webkit-transition: background-color 600000s ease-in-out 0s;
  transition: background-color 600000s ease-in-out 0s;
}

/* === TOKEN META UI === */

/* === GLOBAL GLASSMORPHISM (100% COVERAGE) === */

/* El contorno solo se impone cuando el elemento no declara su propio borde,
     evitando bordes duplicados en superficies anidadas. */

.glass {
  background: hsl(var(--glass));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid hsl(var(--glass-border));
  box-shadow: var(--shadow-glass), inset 0 1px 0 hsl(var(--foreground) / 0.04);
}

.glass-strong {
  background: hsl(var(--card) / 0.78);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid hsl(var(--glass-border));
  box-shadow: var(--shadow-glass), inset 0 1px 0 hsl(var(--foreground) / 0.06);
}

.text-gradient-brand {
  background: var(--gradient-brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-glow {
  background: var(--gradient-hero);
}

.grid-bg {
  background-image:
      linear-gradient(hsl(var(--gold-soft) / var(--bg-grid)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--gold-soft) / var(--bg-grid)) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Hand-crafted grain overlay for a tactile, non-AI feel */

.grain {
  position: relative;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--bg-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Elegant dot texture — sober, minimal. Uses currentColor so opacity reads from token. */

.dot-texture {
  color: hsl(0 0% 0%);
  opacity: var(--bg-dot-tex);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='0.7' fill='black'/></svg>");
  background-size: 32px 32px;
}

:root[data-theme="dark"] .dot-texture {
  color: hsl(0 0% 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='0.7' fill='white'/></svg>");
}

/* Decorative background SVG layer + element classes (centralised opacities) */

.bg-shapes {
  opacity: var(--bg-shapes-layer);
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .bg-shapes {
  mix-blend-mode: screen;
}

.bg-line-primary {
  stroke: hsl(var(--primary));
  stroke-opacity: var(--bg-line);
  fill: none;
}

.bg-line-gold    {
  stroke: hsl(var(--gold));
  stroke-opacity: var(--bg-line);
  fill: none;
}

.bg-line-glow    {
  stroke: hsl(var(--primary-glow));
  stroke-opacity: var(--bg-line);
  fill: none;
}

.bg-shape-primary {
  stroke: hsl(var(--primary));
  stroke-opacity: var(--bg-shape);
  fill: none;
}

.bg-shape-gold    {
  stroke: hsl(var(--gold));
  stroke-opacity: var(--bg-shape);
  fill: none;
}

.bg-shape-accent  {
  stroke: hsl(var(--accent));
  stroke-opacity: var(--bg-shape);
  fill: none;
}

.bg-shape-glow    {
  stroke: hsl(var(--primary-glow));
  stroke-opacity: var(--bg-shape);
  fill: none;
}

.bg-axis          {
  stroke: hsl(var(--foreground));
  stroke-opacity: var(--bg-axis);
}

.bg-dot-primary   {
  fill: hsl(var(--primary));
  fill-opacity: var(--bg-dot-strong);
}

.bg-dot-gold      {
  fill: hsl(var(--gold));
  fill-opacity: var(--bg-dot-soft);
}

.bg-dot-accent    {
  fill: hsl(var(--accent));
  fill-opacity: var(--bg-dot-soft);
}

/* Vertical section rail */

/* Glassmorphism orbs — large ambient background shapes */

.glass-orb {
  backdrop-filter: blur(80px) saturate(160%);
  -webkit-backdrop-filter: blur(80px) saturate(160%);
  border: 1px solid hsl(var(--glass-border));
  box-shadow:
      inset 0 1px 1px hsl(var(--foreground) / 0.06),
      0 0 80px -20px hsl(var(--primary) / 0.25);
}

:root[data-theme="dark"] .glass-orb {
  box-shadow:
      inset 0 1px 1px hsl(var(--foreground) / 0.04),
      0 0 100px -20px hsl(var(--primary-glow) / 0.35);
}

.btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  --tw-ring-offset-color: hsl(var(--background));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  animation-duration: 500ms;
}

.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-width: 0px;
}

.btn:active {
  opacity: 0.8;
  transition-duration: 75ms;
  animation-duration: 75ms;
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn svg {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn-cta {
  border-width: 2px;
  border-color: hsl(var(--coral));
  background-image: var(--gradient-brand);
  color: hsl(var(--primary-foreground));
  --tw-shadow: var(--shadow-glow);
  --tw-shadow-colored: var(--shadow-glow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  border: 1px solid transparent;
  transition: box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),
                transform 0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s ease,
                filter 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change: transform, box-shadow;
}

.btn-cta:hover {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.55),
                0 8px 26px -14px hsl(var(--accent) / 0.50);
  transform: translateY(-1px);
}

.btn-cta:active {
  transform: translateY(0);
}

.btn-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent 30%,
      hsl(var(--gold-soft) / 0.35) 50%,
      transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

.btn-cta:hover::after {
  transform: translateX(110%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta {
    transition: none;
  }

  .btn-cta:hover {
    transform: none;
  }

  .btn-cta {
    transition: none;
  }

  .btn-cta::after {
    display: none;
  }

  .btn-cta {
    transition: none;
  }

  .btn-cta:hover {
    transform: none;
  }

  .btn-cta {
    transition: none;
  }

  .btn-cta::after {
    display: none;
  }
}

.btn-cta:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: hsl(var(--coral-hover) / var(--tw-border-opacity, 1));
  background-image: var(--gradient-brand-hover);
}

.btn-cta:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-outline {
  border-color: hsl(var(--glass-border));
  border-width: 1px;
  border-color: hsl(var(--border) / 0.4);
  background-color: hsl(var(--background) / 0.9);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.btn-outline:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: hsl(var(--glass-border));
  background-color: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-outline:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-cta-secondary {
  border-color: hsl(var(--glass-border));
  color: hsl(var(--foreground));
  border-width: 1px;
  border-color: hsl(var(--border) / 0.4);
  background-color: hsl(var(--background) / 0.9);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.btn-cta-secondary:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: hsl(var(--muted) / 0.6);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-cta-secondary:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-ghost {
  color: hsl(var(--muted-foreground));
}

.btn-ghost:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: hsl(var(--muted) / 0.3);
  color: hsl(var(--foreground));
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.btn-ghost:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn-size-default {
  height: 2.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .btn-size-default {
    height: 2.5rem;
  }
}

.btn-size-cta {
  height: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .btn-size-cta {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .btn-size-cta {
    height: 2.75rem;
  }
}

.btn-size-icon {
  height: 2.75rem;
  width: 2.75rem;
}

@media (min-width: 768px) {
  .btn-size-icon {
    height: 2.5rem;
    width: 2.5rem;
  }
}

/* Gesto de navegación de Pyenzo: crecer 5 % (logo, menú principal). Sin color: el anillo coral es solo del teclado (focus-ring).
     Con «reducir movimiento» no crece. */

.hover-grow {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.hover-grow:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .hover-grow {
    transition-property: none;
  }

  .hover-grow:hover {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* Navegación principal (menú del sitio, pestañas del portal): mismo gesto que el logo (crece 5 % al pasar).
     Sección donde estás = la palabra se queda grande + un punto coral pequeño debajo (Leonardo 2026-10-04: la línea
     pesaba demasiado). Sección actual = aria-current="page" (enlaces) o aria-selected="true" (pestañas).
     El anillo coral de foco sigue siendo solo del teclado. */

.nav-link {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.nav-link:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition-property: none;
  }

  .nav-link:hover {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.nav-link {
  position: relative;
}

.nav-link[aria-current="page"],
  .nav-link[aria-selected="true"] {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .nav-link[aria-current="page"],
  .nav-link[aria-selected="true"] {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.nav-link[aria-current="page"]::after,
  .nav-link[aria-selected="true"]::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 0.25rem;
  height: 0.25rem;
  width: 0.25rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  background-color: hsl(var(--coral));
}

/* Encabezado de sección del sitio (DisplayHeading): eyebrow coral espaciado + titular Outfit; el acento va en .text-gradient-brand */

.display-eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: hsl(var(--eyebrow));
}

.display-title {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}

.display-title-md {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 640px) {
  .display-title-md {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* Campo de texto = Input/Textarea del sitio: borde 3:1, foco coral (field-control) */

.field-input {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: calc(var(--radius) - 2px);
  border-width: 1px;
  border-color: hsl(var(--input));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-ring-offset-color: hsl(var(--background));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:hover:not(:disabled):not(:focus-visible):not([data-state="open"]):not([aria-invalid="true"]) {
  border-color: hsl(var(--foreground) / 0.60);
}

.field-input[aria-invalid="true"] {
  border-color: hsl(var(--danger));
}

.field-input:focus-visible,.field-input[data-state="open"] {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

.field-input {
  background-color: hsl(var(--background) / 0.9);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.field-input::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}

.field-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.field-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Pastilla de acción (preguntas sugeridas, atajos): vidrio, borde de vidrio y el indicador de tarjeta (card-hover) */

.chip-action {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: hsl(var(--glass-border));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.chip-action:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-width: 0px;
}

.chip-action {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
                border-color 0.4s ease;
  will-change: transform, box-shadow;
}

.chip-action:hover,.chip-action:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px hsl(var(--coral) / 0.30),
                0 10px 30px -16px hsl(var(--coral) / 0.30),
                0 4px 18px -10px hsl(var(--primary) / 0.20);
  border-color: hsl(var(--coral) / 0.45);
}

.chip-action {
  border-width: 1px;
  border-color: hsl(var(--border) / 0.4);
  background-color: hsl(var(--background) / 0.9);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.chip-action:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Botón de tema para apps sin React (el sitio usa ThemeToggle con los mismos íconos de lucide). Va en el propio botón,
     junto a .btn.btn-ghost.btn-size-icon: luna en --primary en claro, sol en --gold-ink en oscuro, coral al pasar.
     El texto que la app ponga dentro (☾/☀) queda oculto; el ícono lo dibuja ::before. */

.theme-toggle {
  flex-shrink: 0;
  gap: 0px;
  font-size: 0px;
  line-height: 1;
}

.theme-toggle::before {
  content: "";
  display: block;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  background-color: hsl(var(--primary));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

:root[data-theme="dark"] .theme-toggle::before {
  background-color: hsl(var(--gold-ink));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2%27%2F%3E%3Cpath%20d%3D%27M12%2020v2%27%2F%3E%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27M2%2012h2%27%2F%3E%3Cpath%20d%3D%27M20%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27%2F%3E%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2%27%2F%3E%3Cpath%20d%3D%27M12%2020v2%27%2F%3E%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27M2%2012h2%27%2F%3E%3Cpath%20d%3D%27M20%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27%2F%3E%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27%2F%3E%3C%2Fsvg%3E");
}

.theme-toggle:hover::before {
  background-color: hsl(var(--coral));
}

/* Aviso de estado = <StatusBanner> del sitio (status-banner.tsx usa esta misma clase). El tono lo da una utilidad
     de superficie: surface-info (azul, informativo) | surface-success | surface-warning | surface-danger.
     El coral queda para errores y negativos (Leonardo 2026-10-08). Hereda de los tokens semánticos vía surface-*. */

.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Marco de contenido embebido (tablero de Power BI, demo de Donde Enzo): superficie de tarjeta con el borde de vidrio,
     el radio grande y la sombra de vidrio del DS; recorta el iframe a las esquinas. Hereda de --card y --glass-border. */

.embed-frame {
  background-color: hsl(var(--card) / 0.90);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow-glass), inset 0 1px 0 hsl(var(--foreground) / 0.04);
}

.embed-frame:not([class*="border"]) {
  border: 1px solid hsl(var(--glass-border));
}

.embed-frame {
  overflow: hidden;
  border-radius: 1rem;
  border-width: 1px;
  border-color: hsl(var(--glass-border));
  background-color: hsl(var(--card));
  --tw-shadow: var(--shadow-glass);
  --tw-shadow-colored: var(--shadow-glass);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pointer-events-none {
  pointer-events: none;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-bottom-\[15\%\] {
  bottom: -15%;
}

.-left-\[12\%\] {
  left: -12%;
}

.-right-\[10\%\] {
  right: -10%;
}

.-top-\[10\%\] {
  top: -10%;
}

.left-\[50\%\] {
  left: 50%;
}

.top-0 {
  top: 0px;
}

.top-\[35\%\] {
  top: 35%;
}

.-z-10 {
  z-index: -10;
}

.grid {
  display: grid;
}

.h-\[45vw\] {
  height: 45vw;
}

.h-\[55vw\] {
  height: 55vw;
}

.h-\[60vw\] {
  height: 60vw;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.w-\[45vw\] {
  width: 45vw;
}

.w-\[55vw\] {
  width: 55vw;
}

.w-\[60vw\] {
  width: 60vw;
}

.w-full {
  width: 100%;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out both;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-full {
  border-radius: 9999px;
}

.bg-gradient-brand {
  background-image: var(--gradient-brand);
}

.font-body {
  font-family: var(--font-body);
}

.font-heading {
  font-family: var(--font-heading);
}

.font-mono {
  font-family: var(--font-mono);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.font-semibold {
  font-weight: 600;
}

.text-eyebrow {
  color: hsl(var(--eyebrow));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-60 {
  opacity: 0.6;
}

.shadow-glass {
  --tw-shadow: var(--shadow-glass);
  --tw-shadow-colored: var(--shadow-glass);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-glow {
  --tw-shadow: var(--shadow-glow);
  --tw-shadow-colored: var(--shadow-glow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.will-change-transform {
  will-change: transform;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

/* Entrada al hacer scroll. Solo oculta con <html class="js"> (lo pone RevealBoot en el <head>): sin JavaScript todo se ve,
     y el script de RevealObserver la dispara en el primer cuadro, sin esperar a que React hidrate (el LCP dependía de eso). */

/* Mejora progresiva: en navegadores con animaciones ligadas al scroll (Chrome, Edge, Safari 26+) la entrada se hace solo con CSS.
     Lo que ya está dentro de la pantalla al cargar queda visible desde el primer pintado (el rango "entry" ya terminó) y lo de abajo
     entra al hacer scroll con el mismo efecto. Así el contenido principal no espera a ningún script (FCP/LCP en móvil).
     Los demás navegadores siguen con la versión de arriba (clase .js + RevealObserver). */

@supports (animation-timeline: view()) {
  .js .reveal, .js .reveal.in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
    /* Propiedades sueltas (no el atajo `animation`): el minificador fusiona el atajo con view() y Chrome lo descarta. */
    animation-name: reveal-in;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .js .reveal-left {
    animation-name: reveal-in-left;
  }

  .js .reveal-right {
    animation-name: reveal-in-right;
  }

  .js .reveal-scale {
    animation-name: reveal-in-scale;
  }

  .js .reveal-blur {
    animation-name: reveal-in-blur;
  }

  @keyframes reveal-in       {
    from {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes reveal-in-left  {
    from {
      opacity: 0;
      transform: translate3d(-28px, 0, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes reveal-in-right {
    from {
      opacity: 0;
      transform: translate3d(28px, 0, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes reveal-in-scale {
    from {
      opacity: 0;
      transform: scale(0.96);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes reveal-in-blur  {
    from {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      filter: blur(8px);
    }

    to {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
  }
}

/* === Foco con teclado (único en todo el DS) ===
     Un solo anillo coral de 2px (--ring), pegado al elemento (sin offset) y sin
     glow. Se compone con las sombras de Tailwind (--tw-ring-*), así que no
     borra shadow-glow. Los estados :hover de glow-*, btn-*-outline y shine ya
     NO se disparan con el foco: el foco se ve igual en todo el sitio. */

.focus-ring:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: hsl(var(--ring));
  --tw-ring-offset-width: 0px;
}

/* === Controles de formulario (Input, Textarea, Select, combobox) ===
     Un solo lenguaje de indicador en coral (--ring), igual que el foco de botones:
     - hover: borde neutro sutil (pasar el mouse no es "estar activo");
     - foco con teclado o lista abierta: borde coral + anillo de 1px (se lee como una sola línea de 2px). */

.field-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* El hover no aplica con foco, lista abierta ni error: con :not(:disabled) pesaba más que :focus-visible y [aria-invalid]
     y, con el mouse encima, el borde se quedaba gris mientras solo el anillo era coral (2026-10-08). */

.field-control:hover:not(:disabled):not(:focus-visible):not([data-state="open"]):not([aria-invalid="true"]) {
  border-color: hsl(var(--foreground) / 0.60);
}

/* Error: el borde del campo pasa a coral (--danger); el texto del mensaje va en FieldError. */

.field-control[aria-invalid="true"] {
  border-color: hsl(var(--danger));
}

.field-control:focus-visible,
  .field-control[data-state="open"] {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* === Opciones de listas y menús (Select, combobox, dropdown, context, menubar, nav) ===
     Opción activa (hover, teclado, submenú abierto): tinte coral suave con el texto
     en --foreground. El relleno coral sólido se reserva para CTAs y errores (--danger). */

.menu-option:hover,
  .menu-option:focus,
  .menu-option[data-highlighted],
  .menu-option[data-selected="true"],
  .menu-option[aria-selected="true"],
  .menu-option[data-state="open"] {
  outline: none;
  background-color: hsl(var(--option-highlight));
  color: hsl(var(--foreground));
}

/* === Pestañas de selección en lista (ej. tableros en Producto) ===
     Mismo estándar de indicadores: hover = tinte coral suave; activa = superficie
     de tarjeta con borde coral. !important para ganarle a los estados por defecto de <TabsTrigger>. */

.list-tab {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  color: hsl(var(--foreground));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.list-tab:hover {
  background-color: hsl(var(--option-highlight));
}

.list-tab[data-state="active"],
  .list-tab[aria-selected="true"] {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--coral)) !important;
  box-shadow: var(--shadow-glass) !important;
}

/* Check de la opción seleccionada: coral del DS. */

/* === Foco restaurado tras cerrar un overlay con teclado ===
     src/lib/input-modality.ts marca con [data-focus-restored] el botón que
     abrió el Dialog/Sheet cuando el cierre fue con Esc. Conserva el foco (se
     sigue tabulando desde ahí) pero se pinta en reposo: sin anillo ni outline.
     La marca se retira en el blur, así que el siguiente Tab muestra .focus-ring. */

[data-focus-restored]:focus-visible {
  outline: none !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* === Opción seleccionada en grupos de elección (ej. "¿Usas Siigo?") ===
     Se activa con aria-pressed="true". Un solo borde: cambia el color del
     borde propio del botón a --coral (Leonardo 2026-10-08: antes --gold; los botones de acción son coral),
     sin anillo extra encima. En el contorno coral, que en reposo ya tiene borde coral al 70 %, el seleccionado
     suma un tinte coral suave (--option-highlight) para distinguirse. */

/* === Línea fina superior (separador de header/secciones) ===
     Degradado transparente → --foreground al 8% → transparente. */

.hairline-top {
  background-image: linear-gradient(to right, transparent, hsl(var(--foreground) / 0.08), transparent);
}

/* Primary CTA hover: no border at rest, coral/red border on hover */

.glow-teal {
  border: 1px solid transparent;
  transition: box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),
                transform 0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s ease,
                filter 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change: transform, box-shadow;
}

.glow-teal:hover {
  border-color: hsl(var(--accent)) !important;
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.55),
                0 8px 26px -14px hsl(var(--accent) / 0.50);
  transform: translateY(-1px);
}

.glow-teal:active {
  transform: translateY(0);
}

/* Primary glow for opposite elements (Coral button -> Blue border) */

/* Success glow para elementos de validación y éxito (verde nativo) */

/* Subtle gold glow accent for cards / secondary surfaces */

/* Beloved coral glow accent for cards / panels */

/* --- Structural Utilities for Buttons & Tiles --- */

/* === Standardised hover for ALL cards: lift preciso + borde 1px === */

.card-hover {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
                border-color 0.4s ease;
  will-change: transform, box-shadow;
}

.card-hover:hover,
  .card-hover:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px hsl(var(--coral) / 0.30),
                0 10px 30px -16px hsl(var(--coral) / 0.30),
                0 4px 18px -10px hsl(var(--primary) / 0.20);
  border-color: hsl(var(--coral) / 0.45) !important;
}

/* === Standardised secondary/outline button hover === */

/* === Static brand gradient — does NOT change with theme (used for logo) === */

/* === BI architectural grid — uses foreground token, WCAG-AA safe ===
     Effective alpha kept ≤ 0.06 so contrast against background stays >7:1
     for body text and ≥4.5:1 for muted text in both themes. */

.bg-bi-grid {
  background-image:
      linear-gradient(to right,  hsl(var(--foreground) / var(--bg-grid-strong)) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--foreground) / var(--bg-grid-strong)) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg-bi-grid-fine {
  background-image:
      linear-gradient(to right,  hsl(var(--foreground) / var(--bg-grid)) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--foreground) / var(--bg-grid)) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* === BI Data-Path: nodes, links, sparklines — token-driven, AA-safe === */

.bg-datapath {
  opacity: var(--bg-datapath);
}

.bg-datapath-line {
  stroke: hsl(var(--foreground));
  fill: none;
  stroke-width: 1;
}

.bg-datapath-node-fill {
  fill: hsl(var(--foreground));
}

.bg-datapath-node-ring {
  stroke: hsl(var(--foreground));
  fill: none;
  stroke-width: 1;
}

/* === Decorative BI background elements (numbers, axes, mini-charts) === */

.bg-bi-text {
  fill: hsl(var(--foreground));
  fill-opacity: var(--bg-shape);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
}

.bg-bi-bar {
  fill: hsl(var(--primary));
  fill-opacity: var(--bg-shape);
}

.bg-bi-bar-gold {
  fill: hsl(var(--gold));
  fill-opacity: var(--bg-shape);
}

/* Animated sweeping shine for premium CTAs */

.shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent 30%,
      hsl(var(--gold-soft) / 0.35) 50%,
      transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

.shine:hover::after {
  transform: translateX(110%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur,
    .js .reveal, .js .reveal-left, .js .reveal-right, .js .reveal-scale, .js .reveal-blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }

  .glow-teal, .glow-gold, .glow-primary, .shine {
    transition: none !important;
  }

  .glow-teal:hover,
    .glow-primary:hover,
    .glow-gold:hover, .glow-gold:focus-within {
    transform: none !important;
  }

  .shine::after {
    display: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  .animate-float-slow, .animate-pulse-glow {
    animation: none !important;
  }
}

/* Disable heavy float on small screens to save battery */

/* Formalized Glass Effects (una sola fuente para las clases de vidrio) */

.glass-light {
  border-width: 1px;
  border-color: hsl(var(--border) / 0.4);
  background-color: hsl(var(--background) / 0.9);
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Superficie de los controles de formulario (Input, Textarea, Select, combobox, Checkbox, teléfono): el mismo vidrio de
     .glass-light pero SIN borde. Hereda de --background. Razón (2026-10-08): .glass-light trae border-border/40 y, por
     vivir en utilities, pisaba border-input; los campos se pintaban al 40 % (≈1,2:1) en vez de al 3:1 del DS. */

/* Capturas de tableros cortadas por abajo (El Pulso, La Billetera, Pyenzo Insights): el borde inferior se desvanece
     en los últimos 9 % para que se lea como "el tablero sigue" y no como un corte (2026-10-08). Es una máscara: no
     añade color, así que funciona igual en claro y oscuro. Se quita cuando las capturas vuelvan a salir completas. */

/* --- SUPERFICIES ESTRUCTURALES (Herencia de Core) --- */

/* Ítems de navegación (menú móvil, PageHeader): mismo indicador que .menu-option — tinte coral suave, texto sin cambiar de color. */

.surface-ghost {
  border-color: transparent;
  background-color: transparent;
  color: hsl(var(--foreground));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.surface-ghost:hover,
  .surface-ghost:focus-visible {
  background-color: hsl(var(--option-highlight));
  color: hsl(var(--foreground));
}

/* Superficie opaca para paneles que viven dentro de un contenedor con blur (ej. el menú del header):
     ahí backdrop-filter no funciona y un fondo translúcido deja ver el texto de atrás. */

/* --- BANNERS DE ESTADO (borde + fondo + color semántico) --- */

.surface-danger {
  border-width: 1px;
  border-color: hsl(var(--destructive) / 0.4);
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--foreground));
}

.surface-warning {
  border-width: 1px;
  border-color: hsl(var(--gold) / 0.4);
  background-color: hsl(var(--gold) / 0.1);
  color: hsl(var(--foreground));
}

.surface-info {
  border-width: 1px;
  border-color: hsl(var(--primary) / 0.3);
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.surface-success {
  border-width: 1px;
  border-color: hsl(var(--success) / 0.4);
  background-color: hsl(var(--success) / 0.1);
  color: hsl(var(--foreground));
}

/* --- NAVEGACIÓN (ítems de sidebar y menús) --- */

/* --- PUNTOS DE ESTADO (mockups y listados) --- */

/* --- AURAS DECORATIVAS (fondos radiales del layout) --- */

.aura-primary {
  background: radial-gradient(circle at 30% 30%, hsl(var(--primary) / 0.18), transparent 70%);
}

.aura-gold {
  background: radial-gradient(circle at 40% 40%, hsl(var(--gold) / 0.14), transparent 70%);
}

.aura-accent {
  background: radial-gradient(circle at 50% 50%, hsl(var(--accent) / 0.10), transparent 65%);
}

/* --- SUPERFICIES DE MARCA (mascota / loaders / mockups) --- */

/* --- MOCKUPS: perspectiva y tipografía SVG --- */

@keyframes loader-sweep {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(320%);
  }
}

@keyframes hub-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }

  50% {
    transform: translate3d(0, -2%, 0) scale(1.06);
    opacity: 1;
  }
}

@keyframes holo-shift {
  100% {
    background-position: 11.31px 11.31px;
  }
}

/*
  Pyenzo Design System — "Street"
  Palette: Bush #0B2424, Japanese Indigo #26464B, Stormcloud #546269,
           Regent Gray #8A939F, Old Paper #E1CDA4, Tom Thumb #3C5A3A.
  All colors HSL.
*/

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* =====================================================================
   SIMULACIÓN DE NAVEGADORES (galería de favicons, zona sistema)
   Los colores de Chrome/Arc son cromo de producto de terceros, no
   tokens de Pyenzo: se declaran aquí una sola vez y se consumen como
   clases semánticas. Nunca como utilidades arbitrarias en el TSX.
   ===================================================================== */

:root {
  --browser-chrome-dark-bg: #171717;
  --browser-chrome-dark-border: #2a2a2a;
  --browser-chrome-dark-fg: #d4d4d4;
  --browser-chrome-dark-tab-bg: #292a2d;
  --browser-chrome-dark-tab-fg: #e8eaed;
  --browser-chrome-dark-tab-border: #3c4043;
  --browser-chrome-light-bg: #e3e6e8;
  --browser-chrome-light-border: #d4d4d4;
  --browser-chrome-light-fg: #404040;
  --browser-chrome-light-tab-bg: #ffffff;
  --browser-chrome-light-tab-fg: #202124;
  --browser-chrome-light-tab-border: #d0d5dd;
  --browser-arc-dark-bg: #0f1017;
  --browser-arc-dark-border: #1e1b4b;
  --browser-arc-dark-fg: #c7d2fe;
  --browser-arc-dark-tab-bg: #1c1e2d;
  --browser-arc-dark-tab-fg: #ffffff;
  --browser-arc-dark-tab-border: #2c2e42;
  --browser-arc-warm-bg: #f3e5df;
  --browser-arc-warm-border: #fed7aa;
  --browser-arc-warm-fg: #431407;
  --browser-arc-warm-tab-bg: #fff9f6;
  --browser-arc-warm-tab-fg: #44261b;
  --browser-arc-warm-tab-border: #e9d4cc;
}

.browser-mock {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-radius: 0.75rem;
  border-width: 1px;
  padding: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background-color: var(--browser-mock-bg);
  border-color: var(--browser-mock-border);
  color: var(--browser-mock-fg);
}

.browser-mock-tab {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border-width: 1px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  background-color: var(--browser-mock-tab-bg);
  border-color: var(--browser-mock-tab-border);
  color: var(--browser-mock-tab-fg);
}

.browser-chrome-dark {
  --browser-mock-bg: var(--browser-chrome-dark-bg);
  --browser-mock-border: var(--browser-chrome-dark-border);
  --browser-mock-fg: var(--browser-chrome-dark-fg);
  --browser-mock-tab-bg: var(--browser-chrome-dark-tab-bg);
  --browser-mock-tab-fg: var(--browser-chrome-dark-tab-fg);
  --browser-mock-tab-border: var(--browser-chrome-dark-tab-border);
}

.browser-chrome-light {
  --browser-mock-bg: var(--browser-chrome-light-bg);
  --browser-mock-border: var(--browser-chrome-light-border);
  --browser-mock-fg: var(--browser-chrome-light-fg);
  --browser-mock-tab-bg: var(--browser-chrome-light-tab-bg);
  --browser-mock-tab-fg: var(--browser-chrome-light-tab-fg);
  --browser-mock-tab-border: var(--browser-chrome-light-tab-border);
}

.browser-arc-dark {
  --browser-mock-bg: var(--browser-arc-dark-bg);
  --browser-mock-border: var(--browser-arc-dark-border);
  --browser-mock-fg: var(--browser-arc-dark-fg);
  --browser-mock-tab-bg: var(--browser-arc-dark-tab-bg);
  --browser-mock-tab-fg: var(--browser-arc-dark-tab-fg);
  --browser-mock-tab-border: var(--browser-arc-dark-tab-border);
}

.browser-arc-warm {
  --browser-mock-bg: var(--browser-arc-warm-bg);
  --browser-mock-border: var(--browser-arc-warm-border);
  --browser-mock-fg: var(--browser-arc-warm-fg);
  --browser-mock-tab-bg: var(--browser-arc-warm-tab-bg);
  --browser-mock-tab-fg: var(--browser-arc-warm-tab-fg);
  --browser-mock-tab-border: var(--browser-arc-warm-tab-border);
}

/* Texto de contraste máximo sobre superficies gold sólidas o degradadas.
   Sustituye a los `text-slate-950` / `text-black` de la galería. */

.text-gold-contrast {
  color: hsl(var(--palette-darkwater, var(--foreground)));
}

/* === Componentes portables del DS (Leonardo, 2026-10-04: "Pyenzo es uno solo") ===
   Una sola definición para el sitio (Button, Input, Textarea) y para cualquier app de Pyenzo sin React (portal),
   que los recibe con `npm run ds:export` (pyenzo-ds.css). Mismas clases = mismo aspecto y mismos comportamientos.
   Las variantes son las mismas de button.tsx: btn-cta = "cta", btn-outline = "outline",
   btn-cta-secondary = "ctaSecondary", btn-ghost = "ghost"; tamaños btn-size-default / -cta / -icon. */

@media (min-width: 640px) {
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* Modo Oscuro — "Street" */
  --background: var(--palette-dark-teal);
  --foreground: var(--palette-bone-white);
  --card: var(--palette-dark-teal-card);
  --card-foreground: var(--palette-bone-white);
  --popover: var(--palette-dark-teal-popover);
  --popover-foreground: var(--palette-bone-white);
  --overlay: var(--palette-pureblack);
  /* --- CORE 5 BRAND TOKENS --- */
  /* Dark Mode Mapping (Opuestos configurados) */
  --primary: var(--palette-oceanblue-light);
  /* texto/links/íconos en oscuro: 5,4:1 */
  --primary-foreground: var(--palette-bone-white);
  /* Decisión Leonardo 2026-09-28: texto crema sobre primary en oscuro */
  --primary-hover: var(--palette-oceanblue-light-hover);
  --primary-glow: var(--palette-sapphire-soft);
  --primary-soft: var(--palette-sapphire-soft);
  --primary-fill: var(--palette-darkwater);
  /* botones azules sólidos: azul oscuro de marca también en oscuro */
  --primary-fill-hover: var(--palette-darkwater-hover);
  --primary-fill-foreground: var(--palette-bone-white);
  --coral: var(--palette-mattecoral);
  --coral-foreground: var(--palette-dark-teal);
  /* Misma tinta en oscuro (el coral es el mismo) */
  --coral-hover: var(--palette-mattecoral-hover);
  --gold: var(--palette-oldpaper);
  --gold-hover: var(--palette-oldpaper-hover);
  --gold-soft: var(--palette-oldpaper-soft);
  --gold-ink: var(--palette-oldpaper);
  /* en oscuro el dorado sí puede ser texto (11:1) */
  --success: var(--palette-success-dark);
  --success-hover: var(--palette-success-dark-hover);
  --success-ink: var(--palette-success-ink-dark);
  --muted: var(--palette-indigo);
  --muted-foreground: var(--palette-regent);
  --secondary: var(--palette-indigo);
  --secondary-foreground: var(--palette-bone-white-fg);
  --secondary-hover: var(--palette-indigo-hover);
  /* --- SEMANTIC ALIASES (Herencia Idéntica a Light Mode) --- */
  --accent: var(--coral);
  --accent-foreground: var(--coral-foreground);
  --danger: var(--coral);
  --destructive: var(--coral);
  --destructive-foreground: var(--coral-foreground);
  --highlight: var(--primary);
  --highlight-foreground: var(--primary-foreground);
  --highlight-soft: var(--primary-soft);
  /* cola del acento de títulos */
  --eyebrow: var(--coral);
  /* línea superior de las secciones: coral del DS (Fluorescent en claro, Matte en oscuro) */
  --option-highlight: var(--coral) / 0.12;
  /* fondo de la opción activa en listas y menús */
  --border: var(--palette-indigo);
  --input: var(--palette-indigo-field);
  --ring: var(--coral);
  /* Anillo de foco con teclado: coral (decisión Leonardo 2026-09-28) */
  --glass: var(--palette-dark-teal-card) / 0.90;
  --glass-border: var(--palette-oldpaper) / 0.18;
  /* Sombras Dark */
  --shadow-glass: 0 8px 30px -12px hsl(var(--palette-pureblack) / 0.55);
  --shadow-glow: 0 0 48px -14px hsl(var(--primary-glow) / 0.40);
  --shadow-gold: 0 0 32px -12px hsl(var(--gold) / 0.34);
  --gradient-hero: radial-gradient(60% 60% at 70% 30%, hsl(var(--primary-glow) / 0.16) 0%, transparent 60%),
                     radial-gradient(50% 50% at 20% 80%, hsl(var(--gold) / 0.10) 0%, transparent 60%);
  /* Gradientes Oficiales Dark (Transiciones cromáticas ricas adaptadas a dark mode) */
  /* --gradient-brand(-hover) no se redefine: los CTAs conservan el azul oscuro de marca. --gradient-brand-text hereda --highlight. */
  --gradient-gold: linear-gradient(135deg, hsl(var(--palette-oldpaper)) 0%, hsl(var(--palette-oldpaper-light)) 50%, hsl(var(--palette-oldpaper-deep)) 100%);
  --gradient-coral: linear-gradient(135deg, hsl(var(--palette-mattecoral)) 0%, hsl(var(--palette-mattecoral-soft)) 100%);
  --gradient-success: linear-gradient(135deg, hsl(var(--palette-success-dark)) 0%, hsl(var(--palette-success-dark-hover)) 100%);
  /* Decorative background opacities */
  --bg-grain: 0.04;
  --bg-dot-tex: 0.035;
  --bg-line: 0.09;
  --bg-shape: 0.055;
  --bg-axis: 0.035;
  --bg-dot-strong: 0.24;
  --bg-dot-soft: 0.30;
  --bg-shapes-layer: 0.55;
  --bg-grid-strong: 0.10;
  --bg-grid: 0.06;
  --bg-datapath: 0.10;
}
  :root:not([data-theme="light"]) body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
  :root:not([data-theme="light"]) .dot-texture {
  color: hsl(0 0% 100%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='0.7' fill='white'/></svg>");
}
  :root:not([data-theme="light"]) .bg-shapes {
  mix-blend-mode: screen;
}
  :root:not([data-theme="light"]) .glass-orb {
  box-shadow:
      inset 0 1px 1px hsl(var(--foreground) / 0.04),
      0 0 100px -20px hsl(var(--primary-glow) / 0.35);
}
  :root:not([data-theme="light"]) .theme-toggle::before {
  background-color: hsl(var(--gold-ink));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2%27%2F%3E%3Cpath%20d%3D%27M12%2020v2%27%2F%3E%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27M2%2012h2%27%2F%3E%3Cpath%20d%3D%27M20%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27%2F%3E%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%202v2%27%2F%3E%3Cpath%20d%3D%27M12%2020v2%27%2F%3E%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27%2F%3E%3Cpath%20d%3D%27M2%2012h2%27%2F%3E%3Cpath%20d%3D%27M20%2012h2%27%2F%3E%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27%2F%3E%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27%2F%3E%3C%2Fsvg%3E");
}
}