/* =====================================================================
   STRATUS 3D · Design tokens
   Único lugar donde se definen colores, tipografía, espacios y movimiento.
   Cambia un valor aquí y se actualiza en todo el sitio.
   ===================================================================== */
:root {
  /* ---- Color (neutros de marca v1.0, ritmo blanco / niebla al estilo Apple) ---- */
  --suelo:          #FFFFFF;                 /* fondo principal */
  --superficie:     var(--s3d-niebla);       /* secciones alternas, fichas y campos */
  --superficie-2:   #E6E8EB;                 /* hover / estados */
  --linea:          rgba(21, 23, 26, .10);   /* líneas finas (separadores de listas) */
  --tinta:          var(--s3d-grafito);      /* texto principal */
  --tinta-2:        #5E646E;                 /* texto secundario (AA sobre blanco y niebla) */
  --campo:          var(--s3d-grafito);      /* campos oscuros: hero y paneles */
  --campo-2:        #2C3036;
  --sobre-campo:    #F5F5F7;
  --sobre-campo-2:  #A6ABB3;
  --acento:         var(--s3d-naranja);      /* contador del carrito y selección */
  --acento-hover:   var(--s3d-naranja-hover);
  --sobre-acento:   var(--s3d-grafito);      /* el blanco no llega a AA sobre este naranja */
  --enlace:         var(--s3d-azul);         /* enlaces de texto al estilo Apple */
  --whatsapp:       var(--s3d-whatsapp);
  --whatsapp-hover: var(--s3d-whatsapp-hover);
  --foco:           var(--s3d-azul);
  --error:          var(--s3d-error);

  /* ---- Tipografía: Archivo para titulares, IBM Plex Sans para texto (tokens de marca) ---- */
  --fuente: var(--s3d-font-body);
  --fuente-display: var(--s3d-font-display);
  --t-display: clamp(2.5rem, 1.4rem + 4.8vw, 5.75rem);  /* titular del hero */
  --t-titulo:  clamp(2rem, 1.35rem + 2.6vw, 3.5rem);     /* títulos de sección */
  --t-sub:     clamp(1.25rem, 1.12rem + .5vw, 1.5rem);   /* subtítulos */
  --t-texto:   1.0625rem;                                /* 17px, el cuerpo de Apple */
  --t-nota:    .875rem;                                  /* 14px */
  --peso-display: 800;
  --ancho-display: 100%;
  --tracking-display: -.03em;   /* tracking negativo en tamaños grandes; el texto queda en 0 */
  --interlinea-display: 1.04;
  --interlinea-texto: 1.5;

  /* ---- Forma ---- */
  --radio-tarjeta: 18px;   /* fichas y fotos grandes (estilo Apple Store) */
  --radio-campo: 12px;     /* campos de formulario y bloques chicos */

  /* ---- Espacio ---- */
  --margen: clamp(1.25rem, .6rem + 2.6vw, 3rem);   /* margen exterior: igual a ambos lados */
  --ancho-max: 1440px;
  --gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  --sec: clamp(5rem, 3rem + 8vw, 12rem);          /* separación entre secciones */
  --radio-boton: 999px;                            /* botones: totalmente redondos */
  --radio-media: var(--radio-tarjeta);
  --alto-cabecera: 64px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --d-press: 160ms;
  --d-ui: 220ms;
  --d-drawer: 420ms;
  --d-revelar: 1100ms;
}