@import url("./vendor/phosphor-icons/phosphor-light.css?v=20260916-fonts");

@font-face {
  font-family: "Poppins";
  src: url("./vendor/poppins/Poppins-300.woff2?v=20260916-fonts") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./vendor/poppins/Poppins-400.woff2?v=20260916-fonts") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./vendor/poppins/Poppins-500.woff2?v=20260916-fonts") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./vendor/poppins/Poppins-600.woff2?v=20260916-fonts") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/**
 * Design System Base
**/

:root {
  /* -----------------------------------------------------------------------
   * 1. Color: primitivos
   * -------------------------------------------------------------------- */
  --white: #fff;
  --black: #1d1d1d;

  --neutral-0: #fff;
  --neutral-25: #fafafa;
  --neutral-50: #f9fafb;
  --neutral-75: #f4f0f3;
  --neutral-100: #f4f4f4;
  --neutral-200: #eee;
  --neutral-300: #d9d9d9;
  --neutral-400: #a4a4a4;
  --neutral-500: #666;
  --neutral-700: #374556;
  --neutral-900: #212529;

  --brand-50: #f8f5ff;
  --brand-500: var(--purple-600);
  --primary-500: #374556;

  --purple-50: #f8f5ff;
  --purple-100: #ebd4fa;
  --purple-600: #6818aa;
  --pink-300: #fba5f2;
  --cyan-100: #d2f8f9;
  --cyan-500: #18d3d6;

  --color-lila-suave: #ebd4fa;
  --color-agua-suave: #d2f8f9;
  --yellow-400: #ffcd1c;
  --orange-400: #ffa85d;

  --blue-50: #e5f6fd;
  --blue-600: #2563eb;
  --green-50: #edf7ed;
  --green-600: #15803d;
  --green-700: #2d7d49;
  --amber-50: #fff4e5;
  --amber-500: #feaa42;
  --red-50: #fdeded;
  --red-600: #b52a37;
  --red-700: #b02a37;

  --gradient-soft: linear-gradient(
    90deg,
    var(--purple-100) 0%,
    var(--cyan-100) 100%
  );
  --degradado-suave: linear-gradient(
    90deg,
    var(--color-lila-suave) 0%,
    var(--color-agua-suave) 100%
  );
  --degradado-fondo: linear-gradient(
    90deg,
    #eaf6fc 0%,
    #ecf2fd 38%,
    #f1ecfc 70%,
    #f6ecfb 100%
  );
  --gradient-brand: linear-gradient(
    90deg,
    var(--cyan-500) 0%,
    var(--purple-600) 100%
  );
  --gradient-card-soft: linear-gradient(
    90deg,
    color-mix(in srgb, var(--purple-100) 18%, var(--surface-raised)) 0%,
    var(--surface-raised) 50%,
    color-mix(in srgb, var(--cyan-100) 18%, var(--surface-raised)) 100%
  );

  /* -----------------------------------------------------------------------
   * 2. Color: tokens semanticos
   * -------------------------------------------------------------------- */
  /* Igualado a --dark (--black): el azul pizarra se sustituye por el negro
     de la marca en enlaces, botones secundarios y foco de formularios. */
  --color-primary: var(--black);
  --color-brand: var(--brand-500);
  --color-action: var(--color-brand);
  --color-action-hover: color-mix(in srgb, var(--color-action), black 12%);
  --color-action-soft: var(--brand-50);

  --color-text: var(--black);
  --color-text-muted: var(--neutral-500);
  --color-text-inverse: var(--white);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-brand);

  --surface-page: var(--white);
  --surface-section: var(--purple-50);
  --surface-subtle: var(--neutral-100);
  --surface-raised: var(--white);
  --surface-readiness-now: #f1ffff;
  --surface-overlay: rgb(0 0 0 / 50%);

  --color-border: var(--neutral-300);
  --color-border-strong: var(--neutral-500);
  --color-focus: #80bdff;
  --color-highlight: rgb(228 255 170 / 60%);

  --color-info: var(--blue-600);
  --color-info-text: #1e3a5f;
  --color-info-surface: var(--blue-50);
  --color-success: var(--green-600);
  --color-success-text: #2b6e4f;
  --color-success-surface: var(--green-50);
  --color-warning: var(--amber-500);
  --color-warning-text: #7a5c2e;
  --color-warning-surface: var(--amber-50);
  --color-danger: var(--red-600);
  --color-danger-text: #4e0d14;
  --color-danger-surface: var(--red-50);

  /* -----------------------------------------------------------------------
   * Tipografia
   * -------------------------------------------------------------------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --font-icons: "Phosphor-Light";

  --font-size-2xs: clamp(0.813rem, 0.79rem + 0.094vw, 0.875rem);
  --font-size-xs: clamp(1rem, 0.989rem + 0.047vw, 1.031rem);
  --font-size-sm: clamp(1rem, 0.978rem + 0.094vw, 1.063rem);
  --font-size-base: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  --font-size-md: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem);
  --font-size-lg: clamp(1.25rem, 1.118rem + 0.563vw, 1.625rem);
  --font-size-xl: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
  --font-size-2xl: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);
  --font-size-3xl: clamp(2rem, 1.648rem + 1.502vw, 3rem);
  --font-size-4xl: clamp(2.25rem, 1.81rem + 1.878vw, 3.5rem);
  --font-size-5xl: clamp(2.375rem, 1.8rem + 2.45vw, 4rem);

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;

  --line-height-tight: 1.1;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-label: 0.03em;

  /* -----------------------------------------------------------------------
   * Espaciado. Escala fija para componentes y tokens fluidos para layout.
   * -------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;

  --gap-compact: clamp(0.625rem, 0.5rem + 0.56vw, 1rem);
  --gap-component: clamp(1rem, 0.825rem + 0.75vw, 1.5rem);
  --gap-layout: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  --section-space: clamp(2.5rem, 1.667rem + 4.167vw, 5rem);

  /* -----------------------------------------------------------------------
   * Forma, elevacion, layout y movimiento
   * -------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 3px rgb(0 0 0 / 8%);
  --shadow-card: 0 8px 20px rgb(55 69 86 / 8%);
  --shadow-sticky-top: -1px -1px 5px rgb(0 0 0 / 15%);
  --shadow-sticky-bottom: 0 3px 13px rgb(0 0 0 / 5%);
  --shadow-panel: 0 50px 100px -20px rgb(50 50 93 / 25%),
    0 30px 60px -30px rgb(0 0 0 / 30%);

  --container-max: 1640px;
  --container-content: 1320px;
  --container-showcase: 997px;
  --container-narrow: 900px;
  --container-gutter: clamp(0.938rem, 0.65rem + 1vw, 2rem);

  /* Referencia para documentacion y JavaScript; no usar var() en @media. */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-toast: 1080;

  /* -----------------------------------------------------------------------
   * 3. Tokens de componente
   * -------------------------------------------------------------------- */
  --button-font-size: var(--font-size-base);
  --button-font-weight: var(--font-weight-bold);
  --button-padding-block: var(--space-3);
  --button-padding-inline: var(--space-5);
  --button-radius: var(--radius-pill);
  --button-primary-bg: var(--color-action);
  --button-primary-color: var(--color-text-inverse);
  --button-secondary-bg: var(--color-primary);
  --button-secondary-color: var(--color-text-inverse);

  --input-bg: var(--surface-raised);
  --input-color: var(--color-text);
  --input-placeholder-color: var(--color-text-muted);
  --input-border-color: #cdcdcd;
  --input-border-color-focus: var(--color-primary);
  --input-radius: var(--radius-sm);
  --input-padding-block: var(--space-3);
  --input-padding-inline: var(--space-4);

  --card-bg: var(--surface-raised);
  --card-border-color: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-card);
  --card-padding: clamp(1rem, 0.8rem + 1vw, 2rem);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus), transparent 45%);

  /* -----------------------------------------------------------------------
   * 4. Alias de compatibilidad con Iturri 2
   * Los nuevos componentes deben consumir los tokens canonicos de arriba.
   * -------------------------------------------------------------------- */
  --dark: var(--black);
  --dark-light: var(--color-primary);
  --primary: var(--color-primary);
  --primary-color: var(--color-primary);
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand);
  --brand-light: var(--color-action-soft);
  --cta-color: var(--color-action);

  --neutral: var(--neutral-100);
  --neutral-light: var(--neutral-100);
  --neutral-base: var(--neutral-100);
  --neutral-dark: var(--neutral-50);
  --section-color: var(--surface-section);
  --bg-base: var(--surface-subtle);
  --bg-overlay: var(--surface-overlay);
  --border-box: var(--color-border);
  --border-color: var(--color-border);
  --highlight: var(--color-highlight);

  --success: var(--color-success);
  --success-color: var(--color-success-text);
  --success-text: var(--color-success-text);
  --state-color-success-light: var(--color-success-surface);
  --warning: var(--color-warning);
  --warning-color: var(--color-warning-text);
  --warning-text: var(--color-warning-text);
  --state-color-warning-light: var(--color-warning-surface);
  --danger: var(--color-danger);
  --danger-color: var(--color-danger);
  --danger-text: var(--color-danger-text);
  --state-color-danger-light: var(--color-danger-surface);
  --info: var(--color-info);
  --info-color: var(--color-info-text);
  --info-text: var(--color-info-text);
  --state-color-info-light: var(--color-info-surface);

  --font-family-base: var(--font-sans);
  --font-family-title: var(--font-display);
  --font-family-monospace: var(--font-mono);
  --font-icon-site: var(--font-icons);
  --font-weight-normal: var(--font-weight-regular);
  --letter-spacing-headings: var(--letter-spacing-heading);
  --letter-spacing-small: var(--letter-spacing-label);

  --border-radius-xs: var(--radius-sm);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-lg);
  --btn-border-radius: var(--button-radius);
  --btn-border-radius-xl: var(--radius-pill);
  --box-shadow-card: var(--shadow-card);
  --box-shadow-panel: var(--shadow-panel);
  --shadowtop: var(--shadow-sticky-top);
  --shadowbottom: var(--shadow-sticky-bottom);
  --container: var(--container-max);

  --spacing-1: var(--space-2);
  --spacing-2: clamp(0.75rem, 0.521rem + 1.147vw, 1.5rem);
  --spacing-3: clamp(1rem, 0.284rem + 3.181vw, 3rem);
  --spacing-4: var(--section-space);
  --gap-vertical-small: var(--gap-compact);
  --gap-vertical-medium: var(--gap-component);
  --gap-vertical-large: var(--gap-layout);
  --padding-section-y: var(--section-space);
  --padding-button-y: var(--button-padding-block);
  --padding-button-x: var(--button-padding-inline);

  --breakpoint-xs: 0;
}

/* Base minima y de baja especificidad. Puede eliminarse si el proyecto ya
 * dispone de reset; los tokens anteriores no dependen de estas reglas. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 var(--space-4);
  color: inherit;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

:where(strong, b) {
  font-weight: var(--font-weight-semibold);
}

:where(small) {
  font-size: var(--font-size-xs);
}

:where(a) {
  color: var(--color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:where(a:hover) {
  color: var(--color-link-hover);
}

:where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

:where(img, picture, svg, video) {
  display: block;
  max-width: 100%;
}

:where(:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}