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

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.
   #bloque-b and #bloque-e host the pinned hscroll carousels — sticky
   descendants need an ancestor chain with no overflow other than `clip`
   (proven not to break sticky, unlike `hidden`), so they get `clip` too. */
#top, #bloque-a, #bloque-d, #bloque-c, #contacto { overflow-x: hidden; }
#bloque-b, #bloque-e { 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 has its own
   full-bleed treatment. */
.map-card {
  position: relative;
}

.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); }