/* Estilos del sitio (plan §2.2). Traducidos a CSS plano desde estilo-reference/styles.css. */

/* ==========================================================================
   1. Fuentes
   Locales en WOFF2, reducidas a caracteres latinos (DT-11). Rango de pesos
   según el eje wght de cada archivo.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../assets/fonts/work-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens
   Valores de :root y de @theme de la referencia. Se descartan los de
   sidebar, gráficos y dashboard, y el bloque .dark (el sitio ya es oscuro).
   ========================================================================== */

:root {
  /* Tipografía */
  --font-sans: "Work Sans", sans-serif;
  --font-display: "Sora", sans-serif;

  /* Radios */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* Colores */
  --background: oklch(0.13 0.04 264);
  --foreground: oklch(1 0 0);
  --card: oklch(0.18 0.055 263);
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.17 0.05 264);
  --popover-foreground: oklch(1 0 0);
  --primary: oklch(0.74 0.14 205);
  --primary-foreground: oklch(0.13 0.04 264);
  --secondary: oklch(0.35 0.16 295);
  --secondary-foreground: oklch(0.97 0.01 260);
  --muted: oklch(0.23 0.04 263);
  --muted-foreground: oklch(0.72 0.02 265);
  --accent: oklch(0.63 0.23 297);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.72 0.05 260 / 18%);
  --input: oklch(0.72 0.05 260 / 25%);
  --ring: oklch(0.74 0.14 205);
  --surface: oklch(0.16 0.05 264);
  --success: oklch(0.72 0.17 155);
  --warning: oklch(0.78 0.16 82);
  --whatsapp: oklch(0.7 0.18 155);
  --whatsapp-foreground: oklch(0.12 0.03 160);
}

/* ==========================================================================
   3. Base
   Reset mínimo y base de la referencia: colores, tipografía, foco visible y
   desplazamiento hacia las anclas.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  /* PROVISIONAL (spec §10, D-6, D-7 y D-8): valores de maquetación que la
     referencia no define. Neutrales hasta que Josías decida; se ajustan solo aquí. */
  --content-max-width: 72rem;
  --content-gutter-desktop: clamp(1.5rem, 6vw - 1rem, 4rem);
  --layout-space: 1rem;
  --header-logo-height: 2.5rem;
  --footer-logo-height: 4rem;
  --menu-panel-width: 20rem;
  --menu-panel-opacity: 85%;
  --menu-panel-blur: 0.75rem;
  --menu-slide-duration: 300ms;
  --whatsapp-button-size: 3.5rem;
  /* Nota de disponibilidad y etiqueta "Próximamente" (D-15, 2026-10-01). */
  --notice-width: 22rem;
  --notice-logo-height: 1.5rem;
  --notice-close-size: 2rem;
  --coming-soon-color: var(--warning);
  --video-toggle-size: 3rem;
  --video-toggle-icon-size: 1.25rem;
  --header-glass-opacity: 60%;
  --header-glass-blur: 0.75rem;
  --header-link-gap: 2rem;
  --hover-duration: 150ms;
  /* Botones algo más grandes y con las esquinas más redondeadas (ajuste de Josías del 2026-09-17). */
  --button-padding-block: 0.75rem;
  --button-padding-inline: 1.5rem;
  --button-font-size: 1.0625rem;
  --button-radius: var(--radius-xl);
  --button-hover-mix: 15%;
  --button-pro-darken: 15%;
  --button-pro-hover-darken: 8%;
  --hero-padding-block: 5rem;
  --hero-columns: minmax(0, 3fr) minmax(0, 2fr);
  --hero-column-gap: 4rem;
  --hero-logo-height: 4rem;
  --hero-logo-gap: 2.5rem;
  --hero-logo-height-mobile: 1.5rem;
  --section-padding-block: 4rem;
  --card-padding: 1.5rem;
  --hero-title-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --hero-title-line-height: 1.1;
  --hero-text-max-width: 48rem;
  /* Sin subtítulo (2026-09-15), el párrafo del hero sube un poco de tamaño (2026-09-17). */
  --hero-text-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --card-glow-size: 1.25rem;
  --card-glow-strength: 25%;
  --card-tint-strength: 14%;
  --card-title-size: 1.5rem;
  --section-title-size: clamp(1.875rem, 1.25rem + 2vw, 2.75rem);
  --section-intro-max-width: 40rem;
  --section-header-gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  --trust-padding-block: 2.5rem;
  --trust-darken: 35%;
  --trust-gap: 2rem;
  --trust-logo-size: 4.5rem;
  --trust-logo-width: 7.5rem;
  --trust-logo-padding: 0.5rem;
  --price-amount-size: 2.5rem;
  --price-small-size: 0.875rem;
  --price-cents-size: 0.5em;
  /* "Precio bajo cotización" de IDF Pro (2026-10-09): tamaño y cuánto blanco aclara su morado. PROVISIONAL D-18. */
  --price-quote-size: 1.375rem;
  --price-quote-lighten: 40%;
  --period-selector-padding: 0.25rem;
  --period-popular-size: 0.6875rem;
  --price-pro-tint: 16%;
  --price-pro-glow-size: 2rem;
  --price-pro-glow-strength: 45%;
  --fit-lighten: 4%;
  --footer-padding-block: 3rem;
  --footer-gap: 2rem;
  --footer-social-size: 2.75rem;
  --footer-social-icon-size: 1.25rem;
  --footer-title-size: 1rem;
  --footer-idf-logo-height: 1.75rem;
  --fit-icon-size: 2.5rem;
  --section-divider-strength: 25%;
  --contact-columns: minmax(0, 2fr) minmax(0, 3fr);
  --contact-column-gap: 3rem;
  --form-tint-strength: 8%;
  --form-control-darken: 30%;
  --form-field-gap: 0.375rem;
  --form-control-min-height: 2.75rem;
  --form-control-padding-block: 0.5rem;
  --form-control-padding-inline: 0.75rem;
  --form-border-strength: 70%;
  --form-error-lighten: 25%;
  --form-small-size: 0.875rem;
  --form-checkbox-size: 1.5rem;
  --legal-text-max-width: 60ch;
  --legal-line-height: 1.6;
  /* Páginas de recursos (spec 002, PROVISIONAL: D-16, 2026-10-03): bloque de descarga con las columnas del hero,
     títulos del tamaño de los de sección, vista previa y pasos. Se ajustan solo aquí. */
  --resource-columns: var(--hero-columns);
  --resource-column-gap: var(--hero-column-gap);
  --resource-padding-block: 2.5rem;
  --resource-title-size: var(--section-title-size);
  --resource-text-max-width: var(--section-intro-max-width);
  --resource-preview-max-width: 22rem;
  --resource-step-size: 2rem;
  --resource-button-lift: 0.1875rem;

  /* Colores del formulario (D-12): borde de campo con contraste 3:1 y texto de
     error con contraste 4.5:1 sobre el fondo celeste del cuadro (RNF-3). */
  --form-control-border: color-mix(in oklab, var(--muted-foreground) var(--form-border-strength), var(--background));
  --form-error-color: color-mix(in oklab, var(--destructive), white var(--form-error-lighten));

  /* Alto del encabezado fijo: el logo más su relleno vertical (DT-21). */
  --site-header-height: calc(var(--header-logo-height) + var(--layout-space) * 2);

  /* Al llegar a una sección o al enfocar un elemento, el encabezado fijo no lo
     tapa; el margen extra deja ver el contorno de foco (RF-1, DT-17, caso 33). */
  scroll-padding-top: calc(var(--site-header-height) + var(--layout-space));
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
  /* Una palabra muy larga (un correo, una URL) parte de línea en vez de desbordar a 360 px (RNF-1). */
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
}

a, button {
  -webkit-tap-highlight-color: transparent;
}

/* Foco visible con teclado (RNF-3). */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   4. Diseño
   Contenedor centrado con ancho máximo (RNF-1), encabezado y pie (RF-1, RF-2).
   ========================================================================== */

/* Contenedor: el fondo ocupa todo el ancho y el contenido queda centrado,
   con --layout-space de margen lateral mínimo, sin envoltorios extra en el HTML. */
.site-header, main > *, .site-footer {
  padding-inline: max(var(--layout-space), (100% - var(--content-max-width)) / 2);
}

/* Desde 768 px, más espacio libre a los lados (RNF-1, D-6). */
@media (width >= 768px) {
  .site-header, main > *, .site-footer {
    padding-inline: max(var(--content-gutter-desktop), (100% - var(--content-max-width)) / 2);
  }
}

/* Encabezado fijo arriba al desplazarse (RF-1, DT-21). Su capa deja el panel
   del menú móvil sobre el contenido y sobre el botón de WhatsApp (RF-3).
   Sin transform, filter ni backdrop-filter aquí: encerrarían el panel fijo. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-space);
  padding-block: var(--layout-space);
}

/* Fondo tipo vidrio (D-8): va en una capa detrás del contenido para no
   convertir al encabezado en contenedor del panel del menú (DT-21). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: color-mix(in oklab, var(--background) var(--header-glass-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--header-glass-blur));
  backdrop-filter: blur(var(--header-glass-blur));
}

.site-header-logo img {
  width: auto;
  height: var(--header-logo-height);
}

/* Pie (RF-2, PROVISIONAL: D-14): fondo un poco más claro, como ¿Es esto para tu negocio?
   En teléfono, una columna centrada: logos de IDF, Impulso Digital SV con sus redes y
   navegación; desde 768 px, tres columnas: Impulso, IDF y navegación (decisión de Josías
   del 2026-09-15). El copyright va en una franja al final. */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
  padding-block: var(--footer-padding-block);
  background-color: color-mix(in oklab, var(--background), white var(--fit-lighten));
}

/* En teléfono, el copyright queda por encima del botón de WhatsApp al llegar al final (RF-3). */
@media (width < 768px) {
  .site-footer {
    padding-block-end: calc(var(--whatsapp-button-size) + var(--layout-space) * 2);
  }
}

.site-footer-main {
  display: grid;
  gap: var(--footer-gap);
  justify-items: center;
  text-align: center;
}

.site-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-space);
}

/* Logos de IDF (T-53): altura pareja; si no caben en una fila, bajan centrados. */
.site-footer-idf-logos img {
  width: auto;
  height: var(--footer-idf-logo-height);
}

.site-footer-idf-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--layout-space);
}

.site-footer-social {
  justify-content: center;
}

.site-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-social-size);
  height: var(--footer-social-size);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  transition: color var(--hover-duration), border-color var(--hover-duration);
}

.site-footer-social-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.site-footer-social-icon {
  width: var(--footer-social-icon-size);
  height: var(--footer-social-icon-size);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--footer-gap);
  text-align: start;
}

.site-footer-group-title {
  margin: 0 0 var(--layout-space);
  font-size: var(--footer-title-size);
  font-weight: 600;
}

.site-footer-group ul {
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer-group a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--hover-duration);
}

.site-footer-group a:hover {
  color: var(--primary);
}

.site-footer-bottom {
  padding-block-start: var(--footer-gap);
  border-top: 1px solid color-mix(in oklab, var(--primary) var(--section-divider-strength), transparent);
  color: var(--muted-foreground);
  font-size: var(--form-small-size);
  text-align: center;
}

@media (width >= 768px) {
  .site-footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .site-footer-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: start;
  }

  .site-footer-idf {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
  }

  .site-footer-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: start;
  }

  .site-footer-brand, .site-footer-social {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.site-footer-brand img {
  width: auto;
  height: var(--footer-logo-height);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer p {
  margin: 0;
}

/* ==========================================================================
   5. Componentes
   ========================================================================== */

/* Menú del encabezado (RF-1, D-1, DT-19).
   Desde 768 px, la navegación y "Solicitar información" se ven en fila. Por
   debajo de 768 px el grupo es un panel oculto a la derecha, también sin
   scripts (RNF-10); mobile-menu.js (T-61) muestra el botón y marca el
   encabezado con data-menu="open" para que el panel se deslice. */

.site-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-space);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hover-duration) ease;
}

.site-nav a:hover {
  color: var(--primary);
}

/* "Solicitar información" como botón relleno (D-8 provisional). */
.site-menu .site-header-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  background-color: var(--primary);
  color: var(--primary-foreground);
  transition: background-color var(--hover-duration) ease;
}

.site-menu .site-header-cta:hover {
  background-color: color-mix(in oklab, var(--primary), white var(--button-hover-mix));
  color: var(--primary-foreground);
}

.site-menu-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-menu-toggle[hidden] {
  display: none;
}

@media (width < 768px) {
  .site-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(var(--menu-panel-width), 100%);
    height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: calc(var(--header-logo-height) + var(--layout-space) * 2) var(--layout-space) var(--layout-space);
    background-color: color-mix(in oklab, var(--background) var(--menu-panel-opacity), transparent);
    backdrop-filter: blur(var(--menu-panel-blur));
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--menu-slide-duration) ease, visibility 0s linear var(--menu-slide-duration);
  }

  .site-header[data-menu="open"] .site-menu {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--menu-slide-duration) ease, visibility 0s;
  }

  .site-nav ul {
    flex-direction: column;
  }
}

@media (width >= 768px) {
  .site-menu-toggle {
    display: none;
  }

  /* Navegación y botón a la derecha, centrados en el alto del encabezado. */
  .site-menu {
    gap: var(--header-link-gap);
  }

  .site-nav ul {
    align-items: center;
    gap: var(--header-link-gap);
  }
}

/* Botón flotante de WhatsApp (RF-3), con el brillo shadow-glow de la referencia. */
.whatsapp-button {
  position: fixed;
  right: var(--layout-space);
  bottom: var(--layout-space);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--whatsapp-button-size);
  height: var(--whatsapp-button-size);
  border-radius: 50%;
  background-color: var(--whatsapp);
  color: var(--whatsapp-foreground);
  box-shadow: 0 12px 34px color-mix(in oklab, var(--whatsapp) 28%, transparent);
}

/* En teléfono, el script lo oculta mientras un campo del formulario tiene el foco (RF-3, T-43). */
.whatsapp-button[hidden] {
  display: none;
}

/* Nota de disponibilidad (RF-22, DT-23, PROVISIONAL: D-15): <dialog> no modal fijo encima del botón de
   WhatsApp, con el borde y el brillo de las tarjetas. En teléfono ocupa el ancho de la pantalla. inset y
   margin anulan la posición por defecto del <dialog>. */
.availability-notice {
  position: fixed;
  inset: auto var(--layout-space) calc(var(--whatsapp-button-size) + var(--layout-space) * 2) auto;
  z-index: 10;
  width: min(var(--notice-width), calc(100% - var(--layout-space) * 2));
  margin: 0;
  padding: var(--layout-space);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  background-color: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
}

/* El display va solo aquí: al cerrarse con la X, el navegador le quita open y la nota desaparece. */
.availability-notice[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem var(--layout-space);
}

/* En teléfono, mientras se escribe en el formulario se oculta junto con el botón de WhatsApp (caso 37). */
.availability-notice:has(+ .whatsapp-button[hidden]) {
  display: none;
}

/* Logos de los productos que hoy se pueden contratar, en fila (IDF One e IDF Pro desde el 2026-10-09). */
.availability-notice-logos {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: var(--layout-space);
}

.availability-notice img {
  width: auto;
  height: var(--notice-logo-height);
}

.availability-notice form {
  grid-area: 1 / 2;
}

.availability-notice p {
  grid-area: 2 / 1 / auto / -1;
  margin: 0;
  font-size: var(--form-small-size);
}

.availability-notice-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--notice-close-size);
  height: var(--notice-close-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color var(--hover-duration) ease;
}

.availability-notice-close:hover {
  color: var(--foreground);
}

.availability-notice-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Botones (PROVISIONAL, sin D-n): el principal repite el aspecto de
   "Solicitar información" (D-8); el secundario usa la variante de contorno
   del sistema de diseño de la referencia. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
  text-decoration: none;
  transition: background-color var(--hover-duration) ease, color var(--hover-duration) ease;
}

.button-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover {
  background-color: color-mix(in oklab, var(--primary), white var(--button-hover-mix));
}

/* Botones morados: "Quiero IDF Pro" y "Enviar" (2026-09-15). Morado oscurecido: con el
   de la referencia, el texto blanco se queda en 3,88:1 y WCAG AA pide 4,5:1 (RNF-3).
   Al pasar el puntero se aclara un poco, sin bajar de 4,5:1. */
.button-pro {
  background-color: color-mix(in oklab, var(--accent), black var(--button-pro-darken));
  color: var(--accent-foreground);
}

.button-pro:hover {
  background-color: color-mix(in oklab, var(--accent), black var(--button-pro-hover-darken));
}

.button-secondary {
  border-color: var(--input);
  background-color: transparent;
  color: var(--foreground);
}

.button-secondary:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Hero (RF-4): sin imagen, con la cuadrícula de fondo de la referencia. */
.hero {
  padding-block: var(--hero-padding-block);
}

/* Logos de IDF en el hero (decisión de Josías del 2026-09-15): en teléfono, en fila
   debajo de los CTA y pequeños para que quepan; desde 768 px, apilados a la derecha. */
.hero-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--layout-space);
  margin-block-start: var(--section-header-gap);
}

.hero-logos img {
  width: auto;
  height: var(--hero-logo-height-mobile);
}

/* Desde 768 px, el hero cubre la ventana bajo el encabezado para que la
   cuadrícula no se corte, con el contenido centrado en vertical (RF-4). */
@media (width >= 768px) {
  .hero {
    display: grid;
    grid-template-columns: var(--hero-columns);
    column-gap: var(--hero-column-gap);
    align-content: center;
    min-height: calc(100dvh - var(--site-header-height));
  }

  .hero > :not(.hero-logos) {
    grid-column: 1;
  }

  .hero-logos {
    grid-column: 2;
    grid-row: 1 / -1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hero-logo-gap);
    margin-block-start: 0;
  }

  .hero-logos img {
    height: var(--hero-logo-height);
  }
}

/* Titular en blanco grisáceo con "— con IDF" degradado, subtítulo menor y
   párrafo menos brillante (RF-4, D-9 provisional). */
.hero-title {
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line-height);
  color: var(--secondary-foreground);
}

.hero-text {
  color: var(--muted-foreground);
  font-size: var(--hero-text-size);
}

.hero-title, .hero-text {
  max-width: var(--hero-text-max-width);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space);
}

/* Espaciado vertical de las secciones de contenido (PROVISIONAL). */
.section {
  padding-block: var(--section-padding-block);
}

/* Todos los títulos de sección de la página principal con el mismo tamaño
   (decisión de Josías del 2026-09-15). El subtítulo del hero tiene el suyo. */
main > section > h2 {
  font-size: var(--section-title-size);
}

/* Comparativa (RF-5): una tarjeta por producto; una columna en móvil y tres
   desde 768 px. Aspecto según el Card del sistema de diseño de la referencia
   (PROVISIONAL, sin D-n). */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-space);
}

@media (width >= 768px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Borde brillante con resplandor del color propio de cada producto
   (RF-5, D-10 provisional): celeste, intermedio y morado para IDF Pro. */
.product-card {
  --card-accent: var(--border);

  display: flex;
  flex-direction: column;
  gap: var(--layout-space);
  padding: var(--card-padding);
  border: 1px solid var(--card-accent);
  border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--card-accent) var(--card-tint-strength), transparent);
  color: var(--card-foreground);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--card-accent) var(--card-glow-strength), transparent);
}

.product-card-one {
  --card-accent: var(--primary);
}

.product-card-one-plus {
  --card-accent: color-mix(in oklab, var(--primary), var(--accent));
}

.product-card-pro {
  --card-accent: var(--accent);
}

/* Encabezado de sección centrado (RF-5, D-10 provisional). */
/* Mismo espacio entre título, párrafo y contenido de la sección (T-65). */
.section-title {
  margin-block-end: var(--section-header-gap);
}

.section-title, .section-intro {
  text-align: center;
}

.section-intro {
  max-width: var(--section-intro-max-width);
  margin-block-start: 0;
  margin-block-end: var(--section-header-gap);
  margin-inline: auto;
  color: var(--muted-foreground);
}

.product-card h3 {
  font-size: var(--card-title-size);
}

/* Confianza (RF-6, D-11 provisional): franja más baja y oscura con el título
   y los clientes autorizados; en columna en móvil y en fila desde 768 px. */
.trust {
  display: flex;
  flex-direction: column;
  gap: var(--trust-gap);
  padding-block: var(--trust-padding-block);
  background-color: color-mix(in oklab, var(--background), black var(--trust-darken));
}

.trust-title {
  margin: 0;
  text-align: left;
}

.trust-clients {
  display: flex;
  flex-direction: column;
  gap: var(--trust-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

/* Logo del cliente en una tarjeta clara (decisión de Josías del 2026-09-17, T-67): los logos vienen
   con fondo claro, así que cada uno va en su propia tarjeta del mismo tamaño sobre la franja oscura. */
.trust-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--trust-logo-width);
  height: var(--trust-logo-size);
  padding: var(--trust-logo-padding);
  margin-block-end: 0.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--foreground);
}

/* El logo entra completo en su tarjeta, sin recortarse ni deformarse. */
.trust-client-logo img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.trust-client p {
  margin: 0;
}

.trust-client-product {
  color: var(--muted-foreground);
}

/* Video demo (RF-7, DT-10): sin src hasta que video.js (T-44) lo cargue; la
   portada llena el cuadro con las medidas del video. */
.demo-video {
  width: 100%;
  aspect-ratio: 1920 / 1020;
  object-fit: cover;
  /* Esquinas y borde cian con el brillo de las tarjetas (2026-09-15). */
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
}

/* Control de pausa/reanudar (RF-7, D-4 decidida el 2026-09-17): círculo centrado
   debajo del video, con el vidrio del encabezado, borde cian e ícono relleno.
   video.js marca el estado en data-state y aquí se muestra el ícono que toca. */
.video-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--video-toggle-size);
  height: var(--video-toggle-size);
  margin: var(--layout-space) auto 0;
  padding: 0;
  border: 1px solid var(--primary);
  border-radius: 50%;
  background-color: color-mix(in oklab, var(--background) var(--header-glass-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--header-glass-blur));
  backdrop-filter: blur(var(--header-glass-blur));
  color: var(--foreground);
  cursor: pointer;
  transition: color var(--hover-duration) ease;
}

.video-toggle:hover {
  color: var(--primary);
}

.video-toggle[hidden] {
  display: none;
}

.video-toggle-icon {
  width: var(--video-toggle-icon-size);
  height: var(--video-toggle-icon-size);
  fill: currentColor;
}

.video-toggle[data-state="paused"] .video-toggle-pause {
  display: none;
}

.video-toggle[data-state="playing"] .video-toggle-play {
  display: none;
}

/* Precios (RF-8, PROVISIONAL): selector segmentado y tarjetas neutras. */
.price-period-text {
  color: var(--muted-foreground);
}

/* Selector de periodo: botones de opción nativos, ocultos a la vista pero
   enfocables, para conservar Tab y flechas (RNF-3). Centrado con el título y el
   subtítulo (decisión de Josías del 2026-09-15). */
.period-selector {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;
  gap: var(--period-selector-padding);
  margin: var(--section-header-gap) auto;
  padding: var(--period-selector-padding);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--muted);
}

.period-selector label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--hover-duration) ease, color var(--hover-duration) ease;
}

.period-selector input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.period-selector label:has(input:checked) {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.period-selector label:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* "Popular" (D-2, 2026-09-15): ovalada, en mayúsculas y flotando sobre el
   borde superior del selector, centrada sobre Anual. El margen superior del
   selector deja sitio a la mitad que sobresale. */
.period-popular {
  position: absolute;
  top: calc(-1 * var(--period-selector-padding));
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: var(--accent);
  color: var(--accent-foreground);
  font-size: var(--period-popular-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--layout-space);
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  color: var(--card-foreground);
}

/* IDF Pro siempre destacado en morado, más marcado que en la comparativa
   (2026-09-15, intensidad PROVISIONAL en D-10). */
.price-card-pro {
  border: 2px solid var(--accent);
  background-color: color-mix(in oklab, var(--accent) var(--price-pro-tint), var(--card));
  box-shadow: 0 0 var(--price-pro-glow-size) color-mix(in oklab, var(--accent) var(--price-pro-glow-strength), transparent);
}

.price-card h3, .price-card p {
  margin: 0;
}

/* Precio por mes grande; pago y ahorro e IVA en letra más pequeña (2026-09-15). */
/* Peso 800: el más grueso de Sora (2026-09-15). */
.price-amount {
  font-family: var(--font-display);
  font-size: var(--price-amount-size);
  font-weight: 800;
}

/* IDF Pro va bajo cotización (2026-10-09): el texto ocupa el lugar del precio, con su fuente y su
   peso, algo más pequeño para que quepa en una línea en teléfono, y en el morado de IDF Pro aclarado
   con blanco para que contraste con el fondo morado de la tarjeta (D-18). */
.price-quote {
  font-family: var(--font-display);
  font-size: var(--price-quote-size);
  font-weight: 800;
  color: color-mix(in oklab, var(--accent), white var(--price-quote-lighten));
}

/* Nota de IDF Pro: su precio depende de las personalizaciones (2026-09-15). */
.price-note {
  font-size: var(--price-small-size);
  color: var(--muted-foreground);
}

.price-billing, .price-tax {
  color: var(--muted-foreground);
  font-size: var(--price-small-size);
}

/* Centavos reducidos y elevados junto a la parte entera (D-3 provisional). */
.price-cents {
  font-size: var(--price-cents-size);
  vertical-align: super;
}

.price-card .button {
  margin-top: auto;
  /* A todo el ancho de la tarjeta y con el texto centrado (ajuste de Josías del 2026-09-17). */
  align-self: stretch;
}

/* Nota de guía: cuadro amarillo (--warning de la referencia) con el tinte de las
   tarjetas de la comparativa, sin brillo y con el texto en blanco (decisión de Josías del 2026-09-15). */
.pricing-note {
  margin-block-start: var(--section-header-gap);
  padding: var(--card-padding);
  border: 1px solid var(--warning);
  border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--warning) var(--card-tint-strength), transparent);
  color: var(--card-foreground);
}

@media (width >= 768px) {
  .price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 768px) {
  .trust {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .trust-clients {
    flex-direction: row;
  }
}

.product-card h3, .product-card p {
  margin: 0;
}

.product-card ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

/* El CTA queda al pie para alinearse entre tarjetas de distinta altura. */
.product-card .button {
  margin-top: auto;
  /* A todo el ancho de la tarjeta y con el texto centrado (ajuste de Josías del 2026-09-17). */
  align-self: stretch;
}

/* Etiqueta "Próximamente" de IDF One+ e IDF Pro, en la comparativa y en precios (RF-22, PROVISIONAL: D-15):
   con las medidas de "Popular", centrada sobre el borde superior de su tarjeta y en amarillo de aviso,
   para no confundirla con "Popular". */
.product-card, .price-card {
  position: relative;
}

.coming-soon-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: var(--coming-soon-color);
  color: var(--primary-foreground);
  font-size: var(--period-popular-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rayas celestes delgadas y tenues entre las secciones de la página principal y
   encima del pie (decisión de Josías del 2026-09-15, D-13). */
main > section + section, .site-footer {
  border-top: 1px solid color-mix(in oklab, var(--primary) var(--section-divider-strength), transparent);
}

/* ¿Es esto para tu negocio? (RF-12, PROVISIONAL: D-13): fondo un poco más claro que la
   página y cada tipo de negocio en una tarjeta con ícono (decisión de Josías del 2026-09-15).
   Las tarjetas se reparten en 2, 3 y 5 columnas; las que sobran quedan centradas. */
.fit-section {
  background-color: color-mix(in oklab, var(--background), white var(--fit-lighten));
}

.fit-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--layout-space);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-item {
  display: flex;
  flex: 0 1 calc((100% - var(--layout-space) * 1) / 2);
  flex-direction: column;
  align-items: center;
  gap: var(--layout-space);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  text-align: center;
}

/* En teléfono, la tarjeta que queda sola al final ocupa toda la fila (2026-09-15). */
@media (width < 768px) {
  .fit-item:last-child:nth-child(odd) {
    flex-basis: 100%;
  }
}

@media (width >= 768px) {
  .fit-item {
    flex: 0 1 calc((100% - var(--layout-space) * 2) / 3);
  }
}

@media (width >= 1024px) {
  .fit-item {
    flex: 0 1 calc((100% - var(--layout-space) * 4) / 5);
  }
}

.fit-icon {
  width: var(--fit-icon-size);
  height: var(--fit-icon-size);
  color: var(--primary);
}

.fit-label {
  font-weight: 500;
}

/* Formulario de contacto (RF-13 a RF-18, PROVISIONAL: D-12). Los errores y el
   campo trampa se ocultan con el atributo hidden: ninguna regla les da display. */
.contact-subtitle {
  color: var(--muted-foreground);
}

/* Cuadro celeste semitransparente, más transparente que las tarjetas, con su borde
   y su brillo (decisiones de Josías del 2026-09-15). */
.contact-form {
  display: grid;
  gap: var(--layout-space);
  margin-block-start: var(--section-header-gap);
  padding: var(--card-padding);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--primary) var(--form-tint-strength), transparent);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
  color-scheme: dark;
}

/* Las opciones de las listas se pintan fuera del cuadro: sin fondo propio,
   Windows las muestra con fondo blanco y el texto blanco heredado. */
.contact-form option {
  background-color: var(--popover);
  color: var(--popover-foreground);
}

/* Computadora: título y párrafo a la izquierda, formulario y su estado a la derecha;
   campos cortos de dos en dos y los anchos en toda la fila (decisión de Josías del 2026-09-15). */
@media (width >= 768px) {
  .contact-section {
    display: grid;
    grid-template-columns: var(--contact-columns);
    grid-template-rows: auto 1fr;
    column-gap: var(--contact-column-gap);
    align-items: start;
  }

  .contact-section > h2 {
    grid-column: 1;
    grid-row: 1;
    margin-block-start: 0;
  }

  .contact-subtitle {
    grid-column: 1;
    grid-row: 2;
    margin-block-start: 0;
  }

  .contact-form {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: 0;
  }

  .form-status {
    grid-column: 2;
    grid-row: 3;
  }

  .form-field-full, .contact-form .button {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: grid;
  gap: var(--form-field-gap);
  min-width: 0;
}

.form-field > label {
  font-weight: 500;
}

.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--form-control-min-height);
  padding: var(--form-control-padding-block) var(--form-control-padding-inline);
  border: 1px solid var(--form-control-border);
  border-radius: var(--radius-md);
  /* Más oscuro que la página, para distinguirlo del cuadro (2026-09-15). */
  background-color: color-mix(in oklab, var(--background), black var(--form-control-darken));
  color: var(--foreground);
}

.contact-form ::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

.contact-form textarea {
  resize: vertical;
}

/* Campo inválido: además del texto de error, el borde se ve el doble de grueso (RNF-3).
   Sin scripts, el navegador marca los campos tras interactuar con ellos. El
   .form-field da a ambos selectores más peso que la regla general de los campos. */
.contact-form .form-field [aria-invalid="true"], .contact-form:not([novalidate]) :user-invalid {
  border-color: var(--form-error-color);
  box-shadow: 0 0 0 1px var(--form-error-color);
}

.form-error {
  margin: 0;
  color: var(--form-error-color);
  font-size: var(--form-small-size);
  font-weight: 500;
}

.form-field-checkbox {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.75rem;
}

.form-field-checkbox input {
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.form-field-checkbox .form-error {
  grid-column: 2;
}

.contact-form label a, .form-status a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* "Enviar" a todo el ancho del cuadro (2026-09-15). */
.contact-form .button {
  justify-self: stretch;
}

/* Zona de estado: siempre presente para que se anuncie; solo ocupa espacio con mensaje.
   contact-form.js indica el estado con data-status (RF-16 a RF-18). */
.form-status:not(:empty) {
  margin-block-start: var(--layout-space);
  padding: var(--card-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.form-status[data-status="success"] {
  border-color: var(--success);
}

.form-status[data-status="error"] {
  border-color: var(--form-error-color);
}

/* Páginas legales (RF-19, RF-20, PROVISIONAL: D-12): líneas de longitud legible. */
.legal-page {
  padding-block: var(--section-padding-block);
}

.legal-page > * {
  max-width: var(--legal-text-max-width);
}

.legal-page p, .legal-page li {
  line-height: var(--legal-line-height);
}

/* Páginas de recursos (RF-23 a RF-30, PROVISIONAL: D-16): reutilizan las secciones, los botones y los tokens del
   sitio; lo propio está en las variables --resource-* de html. Cada regla apunta a una clase resource-*, así que
   la página principal y las legales no cambian. */

/* Bloque de descarga (RF-24): en teléfono, una columna en el orden del HTML, con la vista previa al final para que
   el botón se vea al abrir; desde 768 px, el texto a la izquierda y la vista previa a la derecha, como el hero. */
.resource-download {
  display: grid;
  align-items: center;
  gap: var(--section-header-gap);
  padding-block: var(--resource-padding-block);
}

@media (width >= 768px) {
  .resource-download {
    grid-template-columns: var(--resource-columns);
    column-gap: var(--resource-column-gap);
  }
}

.resource-download-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--layout-space);
  max-width: var(--resource-text-max-width);
}

.resource-download-text > * {
  margin: 0;
}

.resource-download h1 {
  font-size: var(--resource-title-size);
  line-height: var(--hero-title-line-height);
}

/* Botón de descarga (ajuste de Josías del 2026-10-03): al pasar el puntero se levanta con el brillo celeste de las
   tarjetas, y al hacer clic vuelve a su sitio. Solo con puntero, para que en el teléfono no quede levantado. */
.resource-download-button {
  transition:
    background-color var(--hover-duration) ease,
    color var(--hover-duration) ease,
    transform var(--hover-duration) ease,
    box-shadow var(--hover-duration) ease;
}

@media (hover: hover) {
  .resource-download-button:hover {
    transform: translateY(calc(-1 * var(--resource-button-lift)));
    box-shadow: 0 calc(2 * var(--resource-button-lift)) var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
  }

  .resource-download-button:active {
    transform: none;
  }
}

/* Etiqueta: con las medidas de "Popular" (D-2), en el celeste de la marca y con el tinte de las tarjetas. */
.resource-eyebrow {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--primary) var(--card-tint-strength), transparent);
  color: var(--primary);
  font-size: var(--period-popular-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
}

.resource-subtitle {
  color: var(--muted-foreground);
  font-size: var(--hero-text-size);
}

.resource-format {
  color: var(--muted-foreground);
  font-size: var(--form-small-size);
}

.resource-fallback {
  color: var(--muted-foreground);
  font-size: var(--form-small-size);
}

/* Respaldo como enlace de texto, en el celeste de la marca en lugar del azul del navegador. */
.resource-fallback a {
  color: var(--primary);
  text-decoration: underline;
}

/* Vista previa: con el borde de las tarjetas y el brillo celeste de la de IDF One. */
.resource-preview {
  justify-self: center;
  width: 100%;
  max-width: var(--resource-preview-max-width);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
}

.resource-preview img {
  width: 100%;
}

/* Cómo usarla (RF-26): cada paso con su número en un círculo celeste; role="list" en el HTML conserva la lista
   para los lectores de pantalla aunque no tenga viñetas nativas. */
.resource-steps-list {
  display: grid;
  gap: var(--layout-space);
  max-width: var(--resource-text-max-width);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: resource-step;
}

.resource-steps-list li {
  display: grid;
  grid-template-columns: var(--resource-step-size) 1fr;
  align-items: start;
  gap: var(--layout-space);
  line-height: var(--legal-line-height);
  counter-increment: resource-step;
}

.resource-steps-list li::before {
  content: counter(resource-step);
  display: grid;
  place-items: center;
  width: var(--resource-step-size);
  height: var(--resource-step-size);
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  line-height: 1;
}

/* Puente a IDF One (RF-27): el título queda como título de sección, con el tamaño común de todos (decisión de Josías
   del 2026-09-15); debajo, una tarjeta con el borde, el tinte y el brillo de la de IDF One en la comparativa (D-10). */
.resource-bridge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-space);
  max-width: var(--resource-text-max-width);
  margin-inline: auto;
  padding: var(--card-padding);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  background-color: color-mix(in oklab, var(--primary) var(--card-tint-strength), transparent);
  color: var(--card-foreground);
  box-shadow: 0 0 var(--card-glow-size) color-mix(in oklab, var(--primary) var(--card-glow-strength), transparent);
  text-align: center;
}

.resource-bridge-card p {
  margin: 0;
}

.resource-bridge-price {
  font-weight: 600;
}

.resource-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--layout-space);
}

/* ==========================================================================
   6. Utilidades de la referencia
   Traducción directa de las @utility de estilo-reference/styles.css.
   ========================================================================== */

/* Texto solo para lectores de pantalla (nombres de las redes del pie). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gradient-text {
  background-image: linear-gradient(105deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--primary) 8%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 78% 38%, color-mix(in oklab, var(--primary) 13%, transparent), transparent 36%),
    radial-gradient(circle at 90% 76%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 30%);
  background-size: 64px 64px, 64px 64px, auto, auto;
}