/* ============================================================
   FacilVitrum · Design Tokens (web corporativa)
   Base: Design System v1.1.0 (tokens.css, SoT brand-tokens.json).
   Namespace: --fv-*  ·  NINGUN valor de marca se escribe a mano fuera de aqui.
   Bloque A: tokens del DS (verbatim).
   Bloque B: tokens de capa web (layout, hero, scrims, z-index, tipos fluidos).
   Correccion C: --fv-on-accent = grafito (NUNCA blanco sobre turquesa, WCAG AA).
   ============================================================ */

:root {
  /* ===== BLOQUE A · DS v1.1 (verbatim) ===== */

  /* · Color de marca · */
  --fv-turquoise:      #0098c4;   /* acento; NO texto pequeno sobre claro */
  --fv-teal-deep:      #036176;   /* texto/enlaces/CTA sobre claro (AA) */
  --fv-teal-graphite:  #0d3a47;   /* fondo oscuro editorial (nunca #000) */
  --fv-warm-grey:      #676e71;   /* secundario, detalles */
  --fv-ink:            #23231f;   /* titulares y cuerpo sobre claro */

  /* · Neutros · */
  --fv-bone:           #F4F1EA;   /* fondo de pagina */
  --fv-paper:          #FBFAF5;   /* superficies elevadas */
  --fv-rule:           #E3DED3;   /* lineas/bordes calidos */
  --fv-text-soft:      #6e6a62;   /* texto secundario */
  --fv-white:          #FFFFFF;

  /* · Feedback (UI de formularios, NO marca) · */
  --fv-error:          #B0402F;
  --fv-success:        #2C7A5B;

  /* · Semantico: tema claro (por defecto) · */
  --fv-bg:             var(--fv-bone);
  --fv-surface:        var(--fv-paper);
  --fv-heading:        var(--fv-ink);
  --fv-text:           var(--fv-ink);
  --fv-text-2:         var(--fv-text-soft);
  --fv-link:           var(--fv-teal-deep);
  --fv-link-hover:     var(--fv-teal-graphite);
  --fv-border:         var(--fv-rule);
  --fv-accent:         var(--fv-turquoise);
  --fv-focus-ring:     var(--fv-teal-deep);

  /* · Tipografia · */
  --fv-font-display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
  --fv-font-body:    'Inter', 'Open Sans', -apple-system, system-ui, sans-serif;

  --fv-fs-display-xl: 3.25rem;
  --fv-fs-h1:         2.5rem;
  --fv-fs-h2:         1.9rem;
  --fv-fs-h3:         1.35rem;
  --fv-fs-body-lg:    1.125rem;
  --fv-fs-body:       1rem;
  --fv-fs-small:      0.875rem;
  --fv-fs-label:      0.75rem;

  /* · Espaciado (base 4) · */
  --fv-space-xs:  4px;
  --fv-space-sm:  8px;
  --fv-space-md:  16px;
  --fv-space-lg:  24px;
  --fv-space-xl:  32px;
  --fv-space-2xl: 48px;
  --fv-space-3xl: 64px;
  --fv-space-4xl: 96px;

  /* · Radius · */
  --fv-radius-sm:   4px;
  --fv-radius-md:   8px;
  --fv-radius-lg:   14px;
  --fv-radius-full: 9999px;

  /* · Sombras (estilo plano) · */
  --fv-shadow-sm:   0 1px 2px rgba(35,35,31,0.06);
  --fv-shadow-card: 0 2px 10px rgba(13,58,71,0.06);
  --fv-shadow-ring: 0 0 0 1px var(--fv-focus-ring);

  /* · Layout · */
  --fv-container:        1200px;
  --fv-container-narrow: 760px;
  --fv-gutter:           24px;
  --fv-section-y:        96px;

  /* · Motion · */
  --fv-dur-fast: 140ms;
  --fv-dur-base: 220ms;
  --fv-ease:     cubic-bezier(.2,.6,.2,1);

  /* · Vidrio / capa de movimiento (opcional, v1.1) · */
  --fv-glass-blur:        14px;
  --fv-glass-blur-bar:    12px;
  --fv-glass-tint:        rgba(255,255,255,.16);
  --fv-glass-border:      rgba(255,255,255,.5);
  --fv-glass-tint-dark:   rgba(13,58,71,.30);
  --fv-shine:             rgba(255,255,255,.7);
  --fv-shine-2:           rgba(150,224,242,.5);

  /* ===== CORRECCION C · contraste del acento =====
     El DS define --fv-on-accent: white, pero blanco sobre turquesa = 3.34
     (NO pasa WCAG AA texto normal). El Brand Book lo prohibe expresamente.
     Sobre turquesa SIEMPRE grafito (ink/turquesa = 4.72, pasa AA). */
  --fv-on-accent: var(--fv-ink);

  /* ===== BLOQUE B · capa web (additivo, namespace --fv-*) ===== */

  /* Tipos fluidos para hero/secciones editoriales (clamp = escala controlada) */
  --fv-fs-hero:      clamp(2.6rem, 6.2vw, 5.5rem);     /* titular hero */
  --fv-fs-display:   clamp(2rem, 3.6vw, 3.25rem);      /* aperturas de seccion grandes */
  --fv-fs-h2-fluid:  clamp(1.6rem, 2.6vw, 1.9rem);
  --fv-fs-counter:   clamp(2.6rem, 5vw, 4rem);         /* cifras de contadores */
  --fv-fs-eyebrow:   var(--fv-fs-label);

  /* Anchos */
  --fv-container-wide: 1320px;   /* secciones a sangre con respiracion */
  --fv-measure:        66ch;     /* longitud de linea optima de lectura */

  /* Header */
  --fv-header-h:       72px;
  --fv-header-h-lg:    84px;

  /* Ritmo vertical de secciones (fluido) */
  --fv-section-fluid:  clamp(64px, 9vw, 128px);

  /* Scrims sobre foto (legibilidad de texto sobre imagen, gradientes de marca) */
  --fv-scrim-dark:   linear-gradient(180deg, rgba(13,58,71,0) 30%, rgba(8,34,43,.82) 100%);
  --fv-scrim-side:   linear-gradient(90deg, rgba(8,34,43,.78) 0%, rgba(8,34,43,.30) 52%, rgba(8,34,43,0) 100%);
  --fv-scrim-soft:   linear-gradient(180deg, rgba(13,58,71,0) 55%, rgba(13,58,71,.55) 100%);

  /* Superficies de relleno de vidrio para slots/placeholders (gradientes del DS) */
  --fv-glass-surface: linear-gradient(135deg, #0d3a47, #0098c4);
  --fv-glass-fluted:  repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 2px, transparent 2px 22px), linear-gradient(180deg, #dfeef2, #cfe6ec);
  --fv-glass-deep:    linear-gradient(160deg, #0f4655, #0d3a47 55%, #06222b);

  /* Z-index */
  --fv-z-header:   100;
  --fv-z-overlay:  200;
  --fv-z-fx:       1;
}

/* · Superficie oscura editorial (teal-grafito). .fv-dark remapea semanticos. · */
.fv-dark {
  --fv-bg:         var(--fv-teal-graphite);
  --fv-surface:    #0f4655;
  --fv-heading:    var(--fv-white);
  --fv-text:       #dfe9ec;
  --fv-text-2:     #9bb4bc;
  --fv-link:       #7fd3e8;
  --fv-link-hover: var(--fv-white);
  --fv-border:     rgba(255,255,255,0.14);
  --fv-focus-ring: #7fd3e8;
  /* sobre oscuro el acento sigue siendo turquesa con texto grafito (4.72 vs negro del boton) */
  --fv-on-accent:  var(--fv-ink);
}