/* ADN Base — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff; /* [Marca] Fondo base de página y de capítulos. En oscuro es negro puro, como los capítulos de producto. */
  --surface-alt: #f5f5f7; /* [Marca] Fondo de tiles, cards y bandas que alternan con surface. Cambiar de surface a surface-alt sustituye a los separadores. */
  --surface-raised: #fafafc; /* [Marca] Fondo de módulos dentro de un capítulo (cards sobre surface-alt, panel de tienda). */
  --text-primary: #1d1d1f; /* [Intocable: contraste ≥ 15:1] Titulares y texto principal sobre surface, surface-alt y surface-raised. */
  --text-secondary: #6e6e73; /* [Marca] Subtítulos, descripciones y eyebrows. 5,07:1 sobre surface y 4,66:1 sobre surface-alt en claro; ≥ 6,5:1 en oscuro. */
  --text-muted: #6e6e73; /* [Marca] La parte gris del párrafo con entrada (la frase inicial va en text-primary). ≥ 4,6:1 en ambos temas. */
  --text-tertiary: #86868b; /* [Marca] Solo texto ≥ 24px o ≥ 19px en 600: 3,62:1 sobre surface claro, no apto para texto pequeño. Legal y notas usan text-secondary. */
  --action: #0071e3; /* [Marca: el único color de acción] Fondo del botón primario. Texto encima: on-action (4,7:1). */
  --action-hover: #0066cc; /* [Marca] Hover del botón primario. Apple aclara a #0077ed, que con blanco da 4,32:1; en claro se oscurece a #0066cc (5,57:1). */
  --on-action: #ffffff; /* [Intocable] Texto e iconos sobre action y action-hover. */
  --link: #0066cc; /* [Marca] Enlaces de texto y botón secundario. 5,57:1 sobre surface claro, 6,96:1 sobre negro. */
  --line: #d2d2d7; /* Líneas decorativas de 1px (filas de specs, separadores). No sirve como borde de control: no llega a 3:1. */
  --line-subtle: #e8e8ed; /* Separador muy suave bajo la nav local y entre filas de lista. */
  --field-border: #86868b; /* Borde de inputs, selects y opciones seleccionables (≥ 3,6:1 en ambos temas). */
  --focus: #0071e3; /* [Intocable] Anillo de foco de teclado: 2px sólido con 3px de separación. Nunca se elimina. */
  --focus-halo: rgba(0, 113, 227, 0.32); /* Halo de 4px alrededor de un campo de formulario enfocado, además del borde en focus. */
  --material: rgba(210, 210, 215, 0.64); /* Fondo translúcido de botones circulares (flechas de carrusel, play/pausa) sobre imagen o fondo. */
  --nav-material: rgba(250, 250, 252, 0.8); /* Fondo de la nav global y la nav local fija, siempre con material-blur detrás. */
  --new: #b64400; /* Etiqueta "Nuevo" y novedades. 5,5:1 sobre surface claro, 10,2:1 sobre negro. */
  --success: #008009; /* Confirmaciones y disponibilidad ("Disponible hoy"). */
  --error: #e30000; /* Errores de formulario: borde del campo y mensaje. 4,92:1 claro, 6,16:1 oscuro. */
  --highlight: #00a347; /* [Marca, opcional] Acento de un tema especial (valores, campaña). Nunca sustituye a action. */
  --shadow-none: none; /* [Intocable] Todo el marketing: cards, tiles, botones. */
  --shadow-task: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); /* Solo cards clicables de tarea (soporte, ayuda). Señala "esto es un botón". */
}
[data-theme="dark"] {
  --surface: #000000;
  --surface-alt: #161617;
  --surface-raised: #1d1d1f;
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted: #86868b;
  --text-tertiary: #86868b;
  --action: #0071e3;
  --action-hover: #0077ed;
  --on-action: #ffffff;
  --link: #2997ff;
  --line: #424245;
  --line-subtle: #2a2a2d;
  --field-border: #86868b;
  --focus: #2997ff;
  --focus-halo: rgba(41, 151, 255, 0.4);
  --material: rgba(66, 66, 69, 0.72);
  --nav-material: rgba(22, 22, 23, 0.8);
  --new: #ff9f0a;
  --success: #32d74b;
  --error: #ff453a;
  --highlight: #00d959;
  --shadow-task: 8px 8px 16px 0px rgba(0, 0, 0, 0.4);
}
:root {
  --space-1: 4px; /* Separación entre icono y texto. */
  --space-2: 8px; /* Gap entre botones circulares, puntos de paginación. */
  --space-3: 12px; /* Separación entre tiles de la home y entre cards apiladas. */
  --space-4: 16px; /* Gap entre los dos CTAs, padding de opciones seleccionables. */
  --space-5: 20px; /* Gap de carruseles de cards. */
  --space-6: 24px; /* Gutter lateral en móvil y gap entre columnas de rejilla. */
  --space-8: 32px; /* Padding interior de cards. */
  --space-10: 40px; /* Separación titular → contenido dentro de un capítulo. */
  --space-12: 48px; /* Gap entre bloques de un mismo capítulo. */
  --space-14: 56px; /* Padding superior de tiles de home y de filas de specs. */
  --space-18: 72px; /* Separación titular de capítulo → media. */
  --space-section-sm: 112px; /* [Intocable] Padding vertical de sección en móvil (≤ 734px). */
  --space-section-md: 120px; /* [Intocable] Padding vertical de sección en tablet (735–1068px). */
  --space-section: 144px; /* [Intocable] Padding vertical de sección en escritorio. El aire es el ADN. */
  --space-section-end: 224px; /* Padding inferior de cierre de las secciones más importantes. */
  --radius-sm: 8px; /* Miniaturas e imágenes pequeñas. */
  --radius-field: 12px; /* Inputs, buscador y opciones seleccionables. */
  --radius-panel: 18px; /* Paneles de tienda y cards de tarea de soporte. */
  --radius-card: 28px; /* [Marca] Cards y tiles de landing y producto. Radio grande = tono amable y premium. */
  --radius-tile: 32px; /* Tiles editoriales (índice de noticias). */
  --radius-pill: 980px; /* [Intocable] Todos los botones. Píldora perfecta a cualquier alto. */
  --radius-round: 50%; /* Botones circulares y selectores de color. */
  --container-hero: 1680px; /* Medios a casi sangre en heros. */
  --container-content: 1260px; /* Contenido de landing y producto: cards y carruseles. */
  --container-nav: 1024px; /* Enlaces de la nav global y footer. */
  --container-text: 980px; /* Specs, soporte, índice de noticias, imágenes de artículo. */
  --container-reading: 650px; /* Columna de lectura de artículos (≈ 70 caracteres). */
  --container-copy: 420px; /* Ancho máximo de un párrafo dentro de una card o tile. */
  --container-fluid: 87.5%; /* Ancho del contenido en tablet y móvil. */
  --bp-xlarge: 1441px; /* min-width: pantallas grandes, el hero puede crecer hasta container-hero. */
  --bp-large: 1069px; /* min-width: escritorio, escala tipográfica completa. */
  --bp-medium: 735px; /* min-width: tablet (735–1068px), titulares un escalón menos. */
  --bp-small: 734px; /* max-width: móvil, titulares a menos de la mitad, texto base igual. */
  --bp-xsmall: 480px; /* max-width: móviles estrechos, las rejillas pasan a una columna. */
  --control-lg: 44px; /* Alto del botón estándar y área táctil mínima. */
  --control-sm: 36px; /* Alto del botón pequeño (dentro de tiles y en móvil). */
  --control-field: 56px; /* Alto de inputs, buscador y opciones. */
  --nav-global: 44px; /* Alto de la nav global. */
  --nav-local: 52px; /* Alto de la nav local fija. */
  --duration-short: 0.24s; /* Cambios de estado pequeños: color, opacidad. */
  --duration-standard: 0.32s; /* Hover, menús, carrusel. */
  --duration-reveal: 0.6s; /* Aparición de contenido al entrar en pantalla (valor propio; Apple combina 0,3–0,4 s con desplazamiento). */
  --ease-standard: cubic-bezier(0.4, 0, 0.6, 1); /* Curva de casi todas las transiciones de apple.com. */
  --ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1); /* Fundido + subida suave de contenido. */
  --material-blur: saturate(1.8) blur(20px); /* backdrop-filter de la nav global y la nav local. */
  --opacity-disabled: 0.42; /* Controles deshabilitados. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display-hero: 600 96px/100px var(--font-sans); /* Titular de capítulo de producto. 64px en tablet, 40px en móvil. */
  --text-display-xl: 600 80px/84px var(--font-sans); /* Hero de página y nombre de categoría. 64px tablet, 40px móvil. */
  --text-display-lg: 600 64px/68px var(--font-sans); /* H1 de comparador, frases largas de capítulo. 56px tablet, 40px móvil. */
  --text-display-md: 600 56px/60px var(--font-sans); /* Titular de sección en home y landing. 48px tablet, 32px móvil. */
  --text-display-sm: 600 48px/52px var(--font-sans); /* Titular de bloque ("Lo principal."), titular de artículo. 40px tablet, 32px móvil. */
  --text-headline: 600 40px/44px var(--font-sans); /* Titular dentro de tiles. 32px tablet, 28px móvil. */
  --text-title-lg: 600 32px/36px var(--font-sans); /* Nombre de producto en el hero, títulos grandes de card. 28px tablet, 24px móvil. */
  --text-title: 600 28px/32px var(--font-sans); /* Título de card de carrusel y frases de highlight. 24px tablet, 21px móvil. */
  --text-title-sm: 600 24px/28px var(--font-sans); /* Títulos de módulo, cabeceras de fila de specs, título de nav local. */
  --text-eyebrow: 600 21px/25px var(--font-sans); /* Etiqueta de capítulo en text-secondary sobre display-hero. */
  --text-lead: 400 21px/29px var(--font-sans); /* Párrafo de introducción de capítulo; admite frase de entrada en 600. */
  --text-article: 400 19px/27px var(--font-sans); /* Cuerpo de artículo en columna de lectura (container-reading). */
  --text-body: 400 17px/25px var(--font-sans); /* Texto base de toda la interfaz. No cambia de tamaño en móvil. Apple usa −0,022em con SF Pro Text; con Inter, −0,011em. */
  --text-body-strong: 600 17px/25px var(--font-sans); /* Frase de entrada de párrafo, etiquetas de opción, encabezados de fila. */
  --text-caption: 400 14px/20px var(--font-sans); /* Botón pequeño, precios, ayudas bajo campos. */
  --text-micro: 400 12px/16px var(--font-sans); /* Navegación global, legal, pies de imagen, footer. */
}
.display-hero {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 100px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.display-xl {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 84px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.display-lg {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 68px;
  font-weight: 600;
  letter-spacing: -0.009em;
}
.display-md {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.display-sm {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.003em;
}
.headline {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: 0em;
}
.title-lg {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0.004em;
}
.title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0.007em;
}
.title-sm {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0.009em;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: 0.011em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 29px;
  font-weight: 400;
  letter-spacing: 0.011em;
}
.article {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0.012em;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: -0.011em;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.011em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.016em;
}
.micro {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}