/* Kroma Living — Landing Inaugural
   Page-specific styles (design tokens come from _ds/.../styles.css) */

/* ---------- loading screen: plays once on first paint, see script.js ----------
   built entirely from the same vector isotipo/gradient/type the rest of the
   site already uses (no embedded video — a raster video re-encoded small
   enough to ship read as noticeably lower quality than the crisp vector
   marks everywhere else on the page). */
#kroma-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 500ms ease-out;
}
#kroma-loader.kroma-loader-out {
  opacity: 0;
  pointer-events: none;
}
/* the gradient "paint" lives in the SVG below, not as a CSS background —
   it has to be the thing the goo mask actually cuts a hole through (see
   script.js) rather than a separate layer sitting behind it */
#kroma-loader-svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.kroma-grad-stop-1 { stop-color: var(--kroma-bruma); }
.kroma-grad-stop-2 { stop-color: var(--kroma-lavanda); }
.kroma-grad-stop-3 { stop-color: var(--kroma-malva); }
.kroma-grad-stop-4 { stop-color: var(--kroma-terracota); }
.kroma-loader-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  transition: opacity 500ms ease, transform 500ms ease;
}
/* fades out over the transition's first 0.5s (see script.js) */
.kroma-loader-mark.kroma-loader-mark-out { opacity: 0; transform: scale(1.05); }
/* revealed by the paint-drip mask driven from script.js (#kroma-drip-path),
   not by a CSS entrance animation — see #kroma-drip-mask in index.html */
.kroma-loader-isotipo {
  height: min(40vh, 300px);
  width: auto;
  overflow: visible;
}
.kroma-loader-claim {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.01em;
  color: var(--kroma-petroleo);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
/* toggled from script.js once the paint-drip formation finishes */
.kroma-loader-claim.kroma-loader-claim-in {
  opacity: 1;
  transform: translateY(0);
}
/* locks scroll behind the loader — see script.js for when this comes off */
body.kroma-loading {
  overflow: hidden;
  height: 100vh;
}
/* the real page, scaling 1.05 → 1 as the goo mask reveals it (see
   script.js); its own wrapper, not a transform on <body> itself — a
   transformed <body> would hijack the containing block of every
   position:fixed descendant (the blobs, the loader itself) */
#kroma-landing {
  transform: scale(1.05);
  /* promotes it to its own GPU layer before the animation starts (not
     mid-animation, which is what causes an initial hitch) — cleared once
     the reveal finishes (see script.js) since keeping a page-tall layer
     promoted forever has its own memory cost */
  will-change: transform;
  /* top center, not the default 50% 50%: centering on the element's own
     box means the whole (multi-thousand-px-tall) page, not the viewport —
     that shoved the sticky header ~200px above y=0 during the reveal and
     was the real cause of a phantom extra scrollbar near the header. The
     viewport is always scrolled to the very top during the loader/reveal
     (scroll is locked until it finishes), so anchoring at the top edge
     keeps the header and hero pinned exactly in place instead. */
  transform-origin: top center;
}

html {
  scroll-behavior: smooth;
  /* the whole design is light-only. Plain "light" only sets which native
     form-control theme to use — Android Chrome's own auto-darkening of the
     page content (which is what actually breaks gradient text) needs the
     stronger "light only" to be told to leave the page alone entirely. */
  color-scheme: light only;
}

/* belt-and-braces: some Chrome-for-Android versions apply their own
   auto-dark rewrite to any page that doesn't itself define
   prefers-color-scheme:dark rules, regardless of "color-scheme: light
   only" above. Re-declaring every brand token here, unchanged, is the
   strongest signal that this page already handles its own theming, so
   the browser leaves gradients (background-clip:text and friends) alone
   instead of rewriting them into something illegible on a forced-dark
   background. */
@media (prefers-color-scheme: dark) {
  :root {
    --kroma-petroleo:  #1d1c3b;
    --kroma-bruma:     #a7cbe3;
    --kroma-lavanda:   #9a8dc3;
    --kroma-malva:     #c98eaa;
    --kroma-miel:      #e0a35c;
    --kroma-terracota: #e8764b;
    --kroma-calma:     #f5f1ea;
    --kroma-blanco:    #ffffff;

    --kroma-gradient: linear-gradient(105deg,
      var(--kroma-bruma) 0%,
      var(--kroma-lavanda) 34%,
      var(--kroma-malva) 62%,
      var(--kroma-terracota) 100%);
    --kroma-gradient-soft: linear-gradient(105deg,
      #cbe0ee 0%, #cfc6e2 33%, #e3c3d1 63%, #f2c0a6 100%);
    --kroma-gradient-radial: radial-gradient(120% 120% at 15% 20%,
      var(--kroma-bruma) 0%, var(--kroma-lavanda) 40%,
      var(--kroma-malva) 68%, var(--kroma-terracota) 100%);

    --petroleo-900: #14132a;
    --petroleo-800: #1d1c3b;
    --petroleo-700: #2c2a52;
    --petroleo-600: #423f6e;
    --petroleo-500: #5d5989;
    --petroleo-400: #837fa5;
    --petroleo-300: #aba8c3;
    --petroleo-200: #d2d0e0;
    --petroleo-100: #e9e8f0;

    --calma-50:  #faf8f4;
    --calma-100: #f5f1ea;
    --calma-200: #ece6db;
    --calma-300: #ddd5c7;
    --calma-400: #c3b9a8;

    color-scheme: light only;
  }

  body { background: var(--kroma-calma) !important; color: var(--kroma-petroleo) !important; }
}

body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  background: var(--kroma-calma);
  color: var(--kroma-petroleo);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* the "4" glyph in Chloe is nearly illegible: served by KFour (see @font-face below) */
  --font-display: 'KFour', 'Chloe', Georgia, serif;
}

/* belt-and-braces horizontal clip, applied per-section (not to html/body,
   and not via a shared wrapper) so it never interferes with position:sticky.
   All sections use `clip`, not `hidden`: per spec, overflow-x set to
   anything other than visible/clip forces the computed overflow-y to
   `auto` when it would otherwise be visible — `hidden` was silently
   turning every one of these sections into its own scroll container the
   moment its content got even 1px taller than its box (min-height doesn't
   prevent that check), which is what produced a phantom inner scrollbar
   confined to whichever section overflowed first (the hero was simply the
   one that did). `clip` is exempt from that swap (and is also proven not
   to break the position:sticky carousels in #bloque-b / #bloque-e). */
#top, #bloque-a, #bloque-b, #bloque-d, #bloque-c, #bloque-e, #contacto { overflow-x: clip; }

a { color: var(--kroma-petroleo); text-decoration: none; }

@keyframes kdrift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes klavaA { 0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } 33% { transform: translate3d(-6%, 8%, 0) scale(1.14) rotate(8deg); } 66% { transform: translate3d(5%, -7%, 0) scale(.94) rotate(-6deg); } 100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } }
@keyframes klavaB { 0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } 40% { transform: translate3d(9%, -9%, 0) scale(1.18) rotate(-9deg); } 75% { transform: translate3d(-7%, 6%, 0) scale(.9) rotate(7deg); } 100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } }
@keyframes klavaC { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8%, -6%, 0) scale(1.2); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes kfadeA { 0% { opacity: 0 } 5% { opacity: 1 } 28% { opacity: 1 } 34% { opacity: 0 } 100% { opacity: 0 } }
@keyframes kfadeB { 0% { opacity: 0 } 31% { opacity: 0 } 38% { opacity: 1 } 61% { opacity: 1 } 67% { opacity: 0 } 100% { opacity: 0 } }
@keyframes kfadeC { 0% { opacity: 0 } 64% { opacity: 0 } 71% { opacity: 1 } 94% { opacity: 1 } 99% { opacity: 0 } 100% { opacity: 0 } }
@keyframes kgoo { 0% { border-radius: 52% 48% 44% 56% / 34% 30% 70% 66%; transform: translate(-50%, 0) scaleX(1); } 33% { border-radius: 44% 56% 58% 42% / 28% 36% 64% 72%; transform: translate(-50%, 0) scaleX(1.12); } 66% { border-radius: 58% 42% 48% 52% / 38% 26% 74% 62%; transform: translate(-50%, 0) scaleX(.9); } 100% { border-radius: 52% 48% 44% 56% / 34% 30% 70% 66%; transform: translate(-50%, 0) scaleX(1); } }
@keyframes khint { 0%, 100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(7px); opacity: 1 } }

.k-card { position: relative; padding: 34px 32px 30px; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid var(--calma-200); cursor: default; transition: transform 320ms cubic-bezier(.2,.7,.3,1), box-shadow 320ms ease-out, background 320ms ease-out; }
.k-card-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 380ms cubic-bezier(.2,.7,.3,1), opacity 300ms ease-out; }
.k-card-body > div { overflow: hidden; }
.k-card-rule { width: 26px; height: 2px; background: var(--kroma-terracota); transition: width 380ms cubic-bezier(.2,.7,.3,1); }

.k-flip { perspective: 1200px; }
.k-flip-inner { position: relative; aspect-ratio: 3/4; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.22,.68,.24,1); }
.k-flip-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0); }
.k-flip-back { transform: rotateY(180deg); background: var(--kroma-petroleo); color: var(--kroma-calma); display: flex; align-items: flex-end; padding: 14px; }
.k-flip-back > div { font-size: clamp(12px, 1vw, 15px) !important; line-height: 1.4 !important; text-wrap: pretty; }

.k-num-col .k-num { position: relative; transition: transform 420ms cubic-bezier(.2,.7,.3,1), background 360ms ease-out, border-color 360ms ease-out, color 360ms ease-out, box-shadow 420ms ease-out; }
.k-num-col .k-num::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--acc); opacity: 0; transform: scale(.84); transition: opacity 420ms ease-out, transform 520ms cubic-bezier(.2,.7,.3,1); }
.k-num-col h3, .k-num-col p { transition: transform 420ms cubic-bezier(.2,.7,.3,1), color 360ms ease-out; }

/* el 4 de Chloe es casi ilegible: solo ese glifo se sirve con un serif Didone cercano */
@font-face { font-family: "KFour"; src: local("Didot Bold"), local("Bodoni 72 Bold"), local("Playfair Display Black"), local("Playfair Display Bold"), local("Georgia Bold"), local("Didot"), local("Georgia"); unicode-range: U+0034; size-adjust: 95%; }

.k-sub { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.k-sub-rule { width: 26px; height: 2px; background: var(--kroma-terracota); }

.k-phase { position: relative; padding-top: 20px; cursor: default; transition: transform 380ms cubic-bezier(.2,.7,.3,1); }
.k-phase::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(29,28,59,.16); }
.k-phase::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--acc); transition: width 560ms cubic-bezier(.2,.7,.3,1); }
.k-phase-n, .k-phase-item { transition: color 320ms ease-out, transform 380ms cubic-bezier(.2,.7,.3,1); }

.k-tech { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 32px 30px 28px; border-radius: 22px; background: color-mix(in oklab, var(--acc) 7%, #fff); border: 1px solid color-mix(in oklab, var(--acc) 26%, var(--calma-200)); transition: transform 380ms cubic-bezier(.2,.7,.3,1), box-shadow 380ms ease-out, background 380ms ease-out; }
.k-tech::after { content: ''; position: absolute; right: -18%; bottom: -46%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); opacity: .12; filter: blur(26px); transform: translate3d(14%, 14%, 0) scale(.92); transition: opacity 480ms ease-out, transform 640ms cubic-bezier(.2,.7,.3,1); }
.k-tech > * { position: relative; z-index: 1; }
.k-tech-n { transition: color 360ms ease-out; }
.k-tech-item { transition: transform 380ms cubic-bezier(.2,.7,.3,1); }

/* every :hover effect on the site lives here, gated to real pointer devices.
   Without this gate, mobile browsers apply :hover after a tap and only
   clear it when the user taps elsewhere — so a card a finger first lands on
   to start a horizontal swipe gets "stuck" mid hover-animation (lifting,
   flipping, glowing) at the same time the carousel is also transform-
   dragging it, which reads as a shaky/glitchy scroll. It also silently
   fought the tap-to-open toggle on .k-card: :hover stayed "on" after the
   first tap, so a second tap to close it had no visible effect. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--kroma-terracota); }

  .k-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 26px 54px rgba(29,28,59,.10); }
  .k-card:hover .k-card-body { grid-template-rows: 1fr; opacity: 1; }
  .k-card:hover .k-card-rule { width: 64px; }

  .k-flip:hover .k-flip-inner { will-change: transform; transform: rotateY(180deg); }

  /* el círculo lleva estilos inline (editor visual): el hover necesita !important */
  .k-num-col:hover .k-num { transform: translateY(-8px) scale(1.05); background: color-mix(in oklab, var(--acc) 20%, #fff) !important; border-color: var(--acc) !important; color: var(--acc) !important; box-shadow: 0 20px 38px -14px var(--acc); }
  .k-num-col:hover .k-num::after { opacity: .45; transform: scale(1); }
  .k-num-col:hover h3 { transform: translateX(5px); }
  .k-num-col:hover p { transform: translateX(5px); color: var(--petroleo-700); }

  .k-phase:hover { transform: translateY(-5px); }
  .k-phase:hover::after { width: 100%; }
  .k-phase:hover .k-phase-n { color: var(--acc); }
  .k-phase:hover .k-phase-item { transform: translateX(5px); color: var(--kroma-petroleo); }

  .k-tech:hover { transform: translateY(-7px); box-shadow: 0 28px 56px rgba(29,28,59,.11); background: color-mix(in oklab, var(--acc) 13%, #fff); }
  .k-tech:hover::after { opacity: .26; transform: translate3d(0,0,0) scale(1.06); }
  .k-tech:hover .k-tech-n { color: var(--acc); }
  .k-tech:hover .k-tech-item { transform: translateX(4px); }
}

/* no card chrome by default (true desktop): the map sits directly on the
   page background, as in the original design. Tablet re-adds the padded/
   rounded/shadowed card (see responsive.css) and mobile wraps the map in
   its own contained, rounded box (see .spain-map-host below). */
.map-card {
  position: relative;
  /* an invisible clipping frame: nothing else in this rule makes it look
     like a "card" by default (see the comment above), but without this the
     map's own pan/zoom (spain-map.js's setZoomable, plus city dots/labels
     that the SVG never clips internally) can drift the drawing past this
     box's edges — reads as the map "shifting and disappearing" mid-gesture. */
  overflow: hidden;
}
/* desktop: a fixed 640px height (see the inline style on <spain-map> in
   index.html) paired with the .map-layout grid's 1.4fr column meant the
   box's own aspect ratio drifted away from Spain's real one (760×560, from
   spain-map.js's viewBox) on narrower desktop/laptop widths, where that
   column is noticeably narrower than on a wide monitor but the height
   never followed suit. The SVG's preserveAspectRatio="slice" always fills
   the box, so a box that's gone too tall-and-narrow for Spain's shape has
   to zoom in and crop much more of the country to do it — that's what
   read as "the map gets cut off" on screens just above laptop size.
   aspect-ratio keeps the box honest to Spain's real proportions at any
   width; max-height caps it back to exactly today's 640px look once the
   column is wide enough to hit it (any screen that already looked fine
   keeps looking exactly the same). Tablet/mobile already set their own
   explicit heights with !important below/in responsive.css, so they're
   unaffected. */
.map-holder spain-map {
  aspect-ratio: 760 / 560;
  max-height: 640px;
}

/* spain-map.js wraps its own <svg> in a div.spain-map-host — its own
   containing box, rather than depending on whatever the page wraps it in
   (mirrors ArrayGo's own .arraygo-map-host). height:100% relays whatever
   explicit height the page puts on <spain-map> itself (desktop/tablet,
   inline in index.html / responsive.css) down to the svg; mobile
   overrides this to its own fixed, contained size — see responsive.css. */
.spain-map-host { display: block; width: 100%; height: 100%; min-width: 0; }

.k-field { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(245,241,234,.22); background: rgba(245,241,234,.06); color: var(--kroma-calma); font-family: var(--font-sans); font-size: 1rem; font-weight: 200; outline: none; transition: border-color 200ms ease-out, background 200ms ease-out; }
.k-field::placeholder { color: rgba(245,241,234,.45); }
.k-field:focus { border-color: var(--kroma-lavanda); background: rgba(245,241,234,.1); }

/* ---------- mobile-only, once-per-visit "pinch to zoom" hint over the map
   (see script.js) — .map-card is already position:relative above, and on
   mobile it's sized to match the contained map box exactly (see
   .spain-map-host in responsive.css), so `inset:0` + `border-radius:inherit`
   tracks whatever radius the map itself has there without hardcoding it
   twice. ---------- */
@media (max-width: 640px) {
  .map-pinch-hint {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    pointer-events: none;
    opacity: 1;
    transition: opacity 420ms ease-out;
  }
  .map-pinch-hint.map-pinch-hint-out { opacity: 0; }

  /* white-ish, not the spec's literal "gris/negro" — checked with a
     screenshot against our actual dark scrim (rgba(0,0,0,.45)) and a dark
     trail on a dark background was nearly invisible there */
  .map-pinch-trail { stroke: rgba(245,241,234,.6); }
  .map-pinch-dot { fill: var(--kroma-terracota); animation: mapPinchDotA 1700ms ease-in-out 2; }
  .map-pinch-dot--b { animation-name: mapPinchDotB; }

  @keyframes mapPinchDotA { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
  @keyframes mapPinchDotB { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-28px); } }
}