/* fonts.css */
/* HSE Services de Colombia — Fonts
   Space Grotesk is served from Google Fonts (it is the real display face used
   in the identity). Helvetica is a system face — we use the native Helvetica
   Neue / Helvetica / Arial stack for body copy, matching the guideline. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* colors.css */
/* HSE Services de Colombia — Color system
   A deep forest green base + neon lime accent, cool blues, and greenish greys.
   Base values first, semantic aliases below. */

:root {
  /* ---- Core greens (base of the system: backgrounds & ink) ---- */
  --green-ink:        #07241A; /* main text / greenish blacks */
  --green-forest-deep:#082B1D; /* hero, footer, dark bands */
  --green-forest:     #0C3D24; /* cards on dark bg */
  --green-section:    #14512E; /* sections & medium surfaces */
  --green-text:       #36513F; /* body text on light */

  /* ---- Primary accent: the neon seal of the brand ---- */
  --lime:             #8DE61C; /* main accent, CTA, selection */
  --green-signal:     #0FB457; /* kickers, lines, theme-color */

  /* ---- Blue accents: water, basins & energy ---- */
  --blue:             #1E9BE8; /* secondary CTA, rivers */
  --blue-light:       #3DBEF5; /* tags, details, light beams */

  /* ---- Neon energy: only for light focus / glow ---- */
  --lime-electric:    #D8FF4A; /* epicentre core & sparkles */
  --lime-pale:        #F4FF9A; /* brightest glow centre */

  /* ---- Navy (multimedia): video & maps ---- */
  --navy:             #0E2740; /* top of video gradient */
  --navy-mid:         #0A1A2E; /* multimedia panel body */
  --navy-deep:        #060F1C; /* base of gradient */

  /* ---- Light neutrals ---- */
  --white:            #FFFFFF; /* light sections & cards */
  --bone:             #F1F6EA; /* form input backgrounds */
  --green-mist:       #E7F2E2; /* image placeholder backgrounds */

  /* ---- Greenish greys: text on dark backgrounds ---- */
  --green-100:        #BDD9C4; /* paragraphs on dark */
  --green-200:        #A7C7B2; /* subtitles & captions */
  --green-300:        #5F7D68; /* metadata & minimal text */

  /* ===================== Semantic aliases ===================== */
  /* Surfaces */
  --surface-dark:        var(--green-forest-deep);
  --surface-dark-card:   var(--green-forest);
  --surface-section:     var(--green-section);
  --surface-light:       var(--white);
  --surface-input:       var(--bone);
  --surface-placeholder: var(--green-mist);
  --surface-media:       var(--navy-mid);

  /* Text */
  --text-primary:        var(--green-ink);   /* on light */
  --text-body:           var(--green-text);  /* on light */
  --text-on-dark:        var(--green-100);   /* on dark */
  --text-muted-dark:     var(--green-200);   /* on dark */
  --text-meta-dark:      var(--green-300);   /* on dark */
  --text-invert:         var(--white);

  /* Accents */
  --accent:              var(--lime);        /* primary CTA / selection */
  --accent-signal:       var(--green-signal);/* kickers, hairlines */
  --accent-secondary:    var(--blue);        /* secondary CTA */
  --accent-secondary-lt: var(--blue-light);

  /* Lines & borders */
  --line-on-dark:        rgba(255,255,255,.10);
  --line-on-light:       rgba(7,36,26,.12);
  --line-accent:         var(--green-signal);

  /* Selection */
  --selection-bg:        var(--lime);
  --selection-fg:        var(--green-ink);

  /* Browser theme color */
  --theme-color:         var(--green-signal);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* typography.css */
/* HSE Services de Colombia — Typography
   Titles: Space Grotesk (400–700, tight tracking).
   Body: Helvetica (Helvetica Neue / Arial fallback).
   Kicker: Helvetica italic, UPPERCASE, wide tracking. */

:root {
  /* Families */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* Tracking */
  --track-display-tight: -0.04em; /* @kind font */
  --track-display:       -0.02em; /* @kind font */
  --track-body:          -0.01em; /* @kind font */
  --track-kicker:         0.10em; /* @kind font */

  /* Type scale (from the identity spec) */
  --fs-h1: clamp(40px, 6vw, 72px);   /* @kind font */
  --fs-h2: clamp(30px, 4.5vw, 56px); /* @kind font */
  --fs-h3: 21px;                     /* @kind font */
  --fs-body: 18px;                   /* @kind font */
  --fs-body-sm: 15px;                /* @kind font */
  --fs-kicker: 12px;                 /* @kind font */

  /* Line heights */
  --lh-display: 1.02; /* @kind font */
  --lh-heading: 1.08; /* @kind font */
  --lh-body:    1.58; /* @kind font */
  --lh-tight:   1.2;  /* @kind font */

  /* Semantic aliases */
  --title-font: var(--font-display);
  --body-font:  var(--font-body);
}

/* spacing.css */
/* HSE Services de Colombia — Spacing, radii, shadows, layout */

:root {
  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Section rhythm */
  --section-py: clamp(64px, 10vw, 128px); /* @kind spacing */
  --container:  1200px; /* @kind spacing */
  --gutter:     clamp(20px, 5vw, 64px); /* @kind spacing */

  /* Corner radii (from spec) */
  --radius-detail: 8px;    /* details */
  --radius-card:   12px;   /* cards */
  --radius-pill:   100px;  /* pill buttons */

  /* Borders */
  --border-hairline: 1px; /* @kind spacing */

  /* Shadows — subtle, greenish on light; glow accents handled by animation */
  --shadow-sm:  0 1px 2px rgba(7,36,26,.06);
  --shadow-card: 0 12px 40px -12px rgba(7,36,26,.25);
  --shadow-dark-card: 0 20px 60px -20px rgba(0,0,0,.55);

  /* Accent glows (halo colors — used by keyframes) */
  --glow-lime: 0 0 0 rgba(141,230,28,.0);
  --glow-lime-strong: 0 0 32px rgba(141,230,28,.55);
  --glow-blue-strong: 0 0 32px rgba(30,155,232,.5);
}

/* animation.css */
/* HSE Services de Colombia — Motion
   Base easing: cubic-bezier(.16,.84,.44,1). Soft, looping, low-amplitude —
   never harsh. All keyframes named to match the identity spec. */

:root {
  --ease-base:  cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-fx:    cubic-bezier(.22,.61,.36,1); /* @kind other */

  --dur-reveal: .9s; /* @kind other */
  --dur-floaty: 9s; /* @kind other */
  --dur-glow:   2.8s; /* @kind other */
  --dur-fx:     .7s; /* @kind other */
  --dur-ray:    3s; /* @kind other */
  --dur-epi:    2.6s; /* @kind other */
  --dur-count:  1.8s; /* @kind other */
}

/* Scroll entrance: opacity 0→1, block rises 30px. Staggered per block. */
@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle vertical float (±16px) for rings & decorative shapes */
@keyframes floaty {
  0%,100% { transform: translateY(-16px); }
  50%     { transform: translateY(16px); }
}

/* Pulsing lime halo around primary CTAs — suave, tipo luciérnaga */
@keyframes glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(141,230,28,.0); }
  50%     { box-shadow: 0 0 18px 1px rgba(141,230,28,.32); }
}

/* Blue variant of the halo for secondary CTAs */
@keyframes glowBlue {
  0%,100% { box-shadow: 0 0 0 0 rgba(30,155,232,.0); }
  50%     { box-shadow: 0 0 18px 1px rgba(30,155,232,.28); }
}

/* Diagonal shimmer crossing cards & buttons on hover */
@keyframes fx {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(220%) skewX(-18deg); }
}

/* Parabolic light beam growing from centre to region, then retracting */
@keyframes coRayGrow {
  0%   { transform: scaleY(.2) scaleX(.6); opacity: 0; }
  40%  { opacity: .9; }
  70%  { transform: scaleY(1) scaleX(1); opacity: .7; }
  100% { transform: scaleY(.2) scaleX(.6); opacity: 0; }
}

/* Luminous epicentre heartbeat (scale + opacity) */
@keyframes coEpi {
  0%,100% { transform: scale(.85); opacity: .5; }
  50%     { transform: scale(1.15); opacity: 1; }
}

/* Luciérnagas — micropuntos de luz amarilla vagando sin rumbo, lentos.
   Cada partícula combina firefly-drift (trayectoria errante) + firefly-blink
   (respiración corta de brillo). Usar con .hse-firefly y variar
   animation-duration/delay por partícula. */
@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(46px, -34px); }
  40%  { transform: translate(-28px, -62px); }
  60%  { transform: translate(-58px, 12px); }
  80%  { transform: translate(30px, 44px); }
  100% { transform: translate(0, 0); }
}
@keyframes firefly-blink {
  0%, 100% { opacity: .12; }
  45%      { opacity: .95; }
  55%      { opacity: .85; }
}
.hse-firefly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #F4FF9A;
  filter: blur(1px);
  box-shadow: 0 0 8px 2px rgba(216,255,74,.6), 0 0 16px 6px rgba(141,230,28,.25);
  pointer-events: none;
  animation: firefly-drift 24s ease-in-out infinite, firefly-blink 3.4s ease-in-out infinite;
}

/* Utility classes */
.hse-reveal   { animation: reveal var(--dur-reveal) var(--ease-base) both; }
.hse-floaty   { animation: floaty var(--dur-floaty) ease-in-out infinite; }
.hse-glow     { animation: glow var(--dur-glow) ease-in-out infinite; }
.hse-glowBlue { animation: glowBlue var(--dur-glow) ease-in-out infinite; }
.hse-epi      { animation: coEpi var(--dur-epi) ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hse-reveal, .hse-floaty, .hse-glow, .hse-glowBlue, .hse-epi, .hse-firefly {
    animation: none !important;
  }
}

/* base.css */
/* HSE Services de Colombia — Base element defaults.
   Applied opt-in via the .hse class or globally when consumers link styles.css. */

:root {
  color-scheme: light dark;
}

.hse, .hse-scope {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--text-body);
}

.hse h1, .hse h2, .hse h3,
.hse-h1, .hse-h2, .hse-h3 {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  margin: 0;
}

.hse-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--track-display-tight); line-height: var(--lh-display); }
.hse-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.hse-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }

.hse-body   { font-size: var(--fs-body); line-height: var(--lh-body); }
.hse-kicker {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--accent-signal);
}

/* Links — brand palette (never browser-default blue) */
a { color: var(--accent-signal); text-decoration: none; transition: color .2s var(--ease-base); }
a:hover { color: var(--lime); }
/* On dark surfaces */
.hse-on-dark a { color: var(--lime); }
.hse-on-dark a:hover { color: var(--lime-electric); }

/* Componentes */
.hse-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:16px;padding:15px 30px;border-radius:var(--radius-pill);white-space:nowrap;border:1.5px solid transparent;cursor:pointer;line-height:1;transition:transform .18s var(--ease-base),filter .18s var(--ease-base);-webkit-tap-highlight-color:transparent;}
.hse-btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;}
.hse-btn::before{content:"";position:absolute;top:0;left:0;height:100%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;}
.hse-btn:hover{filter:brightness(1.06);} .hse-btn:hover::before{animation:fx var(--dur-fx) var(--ease-fx);} .hse-btn:active{transform:scale(.97);}
.hse-btn--lg{font-size:18px;padding:19px 40px;}
.hse-btn--primary{background:var(--lime);color:var(--green-ink);}
.hse-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);}
@media (max-width:480px){.hse-btn--lg{font-size:16px;padding:16px 26px;white-space:normal;text-align:center;}}
.hse-card{position:relative;overflow:hidden;border-radius:var(--radius-card);padding:var(--sp-6);transition:transform .3s var(--ease-base);}
.hse-card--light{background:var(--surface-light);color:var(--text-body);border:1px solid var(--line-on-light);box-shadow:var(--shadow-card);}
.hse-card--dark{background:var(--surface-dark-card);color:var(--text-on-dark);border:1px solid var(--line-on-dark);box-shadow:var(--shadow-dark-card);}
.hse-card--interactive::before{content:"";position:absolute;top:0;left:0;height:100%;width:40%;background:linear-gradient(90deg,transparent,rgba(141,230,28,.14),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none;}
.hse-card--interactive:hover{transform:translateY(-4px);} .hse-card--interactive:hover::before{animation:fx var(--dur-fx) var(--ease-fx);}
.hse-card>*{position:relative;z-index:1;}
summary::-webkit-details-marker{display:none;}
details[open] summary span:last-child{transform:rotate(180deg);}
/* Página */

  body { margin: 0; }
  a { color: #8DE61C; } a:hover { color: #D8FF4A; }
  input::placeholder, textarea::placeholder { color: #5F7D68; }
  select option { color: #07241A; }
  @keyframes hseMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
  .hse-benefit:hover { background:#8DE61C !important; border-color:#8DE61C !important; color:#07241A !important; transform:translateY(-4px); box-shadow:0 14px 40px rgba(141,230,28,.28); }
  .hse-benefit:hover .hse-check { color:#07241A !important; }