/* ═══════════════════════════════════════════════════════
   ARTIS GLOBAL · index.css
═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --lima:      #a8d832;
  --lima-mid:  #62bc24;
  --lima-deep: #1e6830;
  --forest:    #0e3a1e;
  --ink:       #081a0d;
  --grad-brand: linear-gradient(135deg,#a8d832 0%,#52a01a 40%,#1e6830 70%,#0e3a1e 100%);
  --grad-btn:   linear-gradient(135deg,#a8d832 0%,#62bc24 100%);
  --grad-hero:  linear-gradient(150deg,#0e3d20 0%,#061812 55%,#0a2e18 100%);
  --white:   #ffffff;
  --muted:   rgba(255,255,255,.6);
  --muted2:  rgba(255,255,255,.32);
  --border:  rgba(255,255,255,.1);
  --border2: rgba(255,255,255,.2);
  --bg:    #0a1f10;
  --bg2:   #0e2916;
  --panel: #13301b;
  --card:  #193d22;
  --serif: 'Cormorant', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --gutter: clamp(1.6rem, 7vw, 5.5rem);
  --max:    1120px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--sans); background:var(--bg); color:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased }
/* Ambient light — subtle top-center glow on every page */
body::before {
  content:''; position:fixed; top:0; left:0; right:0; height:100vh;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(98,188,36,.07) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
a { text-decoration:none; color:inherit }
ul { list-style:none }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; color:inherit }
address { font-style:normal }
img { display:block; max-width:100% }

/* ── CURSOR ── */

/* ── NAV ── */
#nav {
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s;
}
.nav-logo  { display:flex; align-items:center; gap:.6rem }
.nav-logo-mark { width:34px; height:34px; flex-shrink:0 }
.nav-logo-img  { height:32px; width:auto; display:block; object-fit:contain }
.nav-logo-img--footer { height:28px; filter: var(--logo-filter, none) }
.nav-wordmark  { font-family:var(--sans); font-weight:600; font-size:1.1rem; letter-spacing:.04em; color:var(--white) }
.nav-links { display:flex; gap:2.2rem }
.nav-link  { font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color .2s; position:relative; padding-bottom:2px }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--lima); transition:width .3s }
.nav-link:hover, .nav-link.active { color:var(--white) }
.nav-link:hover::after, .nav-link.active::after { width:100% }
.nav-aside { display:flex; align-items:center; gap:1.1rem }
/* nav-time hidden */
.nav-time  { display:none }

/* ── Shared button arrow icon ── */
.btn-arrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.1em; height:1.1em; flex-shrink:0;
}

/* CTA button — pill radius, uniform arrow */
.cta-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.82rem 1.8rem; border-radius:100px;
  background:var(--grad-btn); color:var(--ink);
  box-shadow:0 4px 18px rgba(158,203,45,.22);
  transition:box-shadow .3s,filter .25s; cursor:pointer;
}
.cta-btn:hover { box-shadow:0 10px 30px rgba(158,203,45,.38); filter:brightness(1.06) }
.cta-btn.sm { padding:.66rem 1.4rem; font-size:.68rem }

/* Ghost button — same pill radius */
.ghost-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.66rem 1.4rem; border-radius:100px;
  border:1px solid var(--border2); color:var(--muted);
  transition:border-color .25s,color .25s; cursor:pointer;
}
.ghost-btn:hover { border-color:var(--lima); color:var(--lima) }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:6px }
.hamburger span { display:block; width:20px; height:1.5px; background:var(--white); border-radius:1px; transition:all .3s }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile overlay */
.mob-overlay { display:none; position:fixed; inset:0; z-index:99; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:2rem }
.mob-overlay.open { display:flex }
.mob-x { position:absolute; top:1rem; right:var(--gutter); font-size:1.6rem; color:var(--muted); transition:color .2s; cursor:pointer; background:none; border:none; padding:1rem; line-height:1; -webkit-tap-highlight-color:transparent; touch-action:manipulation; z-index:101 }
.mob-x:hover { color:var(--white) }
.mob-overlay a { font-family:var(--sans); font-weight:300; font-size:2.2rem; color:var(--white); transition:color .2s }
.mob-overlay a:hover, .mob-cta-link { color:var(--lima) }


/* ═══════════════════════════════════
   HERO — Hark Capital scroll-driven
   Wrap = 250vh, sticky = 100vh
   Phase 1 (p=0–0.4): headline solo bottom-left
   Phase 2 (p=0.4–1): headline sube, sub + stats entran
═══════════════════════════════════ */

/* Glass nav on scroll */
#nav.solid {
  background: rgba(10,30,16,.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-color: rgba(168,216,50,.12);
}

#hero-wrap { position:relative; height:250vh }
.hero-spacer { height:250vh; pointer-events:none; visibility:hidden }

.hero-sticky {
  position:sticky; top:0; width:100%; height:100vh;
  overflow:hidden;
  background: linear-gradient(150deg,#0e3d20 0%,#061812 55%,#0a2e18 100%);
  display:flex; flex-direction:column;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 70% at var(--mx,65%) var(--my,42%), rgba(110,200,60,.52) 0%, rgba(62,160,30,.18) 40%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 80% 15%, rgba(168,216,50,.22) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 20% 80%, rgba(30,104,48,.35) 0%, transparent 60%);
}
.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.particle {
  position:absolute; border-radius:50%; background:var(--lima); opacity:0;
  animation:pfx var(--d,8s) var(--dl,0s) ease-in-out infinite;
}
@keyframes pfx {
  0%   { transform:translateY(0) scale(1); opacity:0 }
  12%  { opacity:var(--op,.18) }
  88%  { opacity:var(--op,.18) }
  100% { transform:translateY(var(--ty,-160px)) translateX(var(--tx,20px)) scale(.3); opacity:0 }
}

/* ── Headline block — bottom-left, rises on scroll ── */
.hero-headline-block {
  position:absolute; z-index:2;
  left: var(--gutter);
  right: 8%;                     /* extends wider, Hark style */
  bottom: clamp(4rem, 8vh, 7rem);
  will-change: transform;
}
.hero-h1 {
  font-family: var(--sans); font-weight: 300;    /* LIGHT — Hark style */
  font-size: clamp(4rem, 8.5vw, 8.8rem);
  line-height: 1.01; letter-spacing: -.03em; color: var(--white);
}
.hero-h1 em { color:var(--lima); font-style:normal }   /* no italic, just color accent */

/* ── Floating subtitle — bottom-right, no panel background ── */
.hero-bottom-panel {
  position: absolute; z-index:2;
  bottom: clamp(4rem, 8vh, 7rem);
  right: var(--gutter);
  left: auto;
  width: clamp(280px, 32vw, 440px);
  background: none;
  border: none;
  opacity: 0; transform: translateY(14px);
  will-change: opacity, transform;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-bottom-panel::before { display:none }
.hero-bottom-inner {
  padding: 0;
  display: block;
}

/* Stats — hidden in this layout */
.hbp-stats { display: none }

/* Subtitle — right float */
.hbp-sub {
  border-left: none;
  padding-left: 0;
  opacity: 1; transform: none;    /* parent handles fade */
  transition: none;
}
.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.72; color: rgba(255,255,255,.62);
  font-weight: 400;
}

/* ── Scroll hint arrow ── */
.hero-scroll-hint {
  position:absolute; z-index:3; right:2.5rem; bottom:3.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.3);
  animation:hshBounce 2.2s ease-in-out infinite;
  transition:opacity .4s;
}
.hero-scroll-hint.hidden { opacity:0; pointer-events:none }
.hsh-line { width:1px; height:36px; background:rgba(255,255,255,.18) }
.hero-scroll-hint svg { width:14px; height:14px }
@keyframes hshBounce {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(7px) }
}

/* story-label kept for reuse elsewhere */
.story-label {
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lima); margin-bottom:2rem; display:flex; align-items:center; gap:.8rem;
}
.story-label::before { content:''; display:inline-block; width:30px; height:1px; background:var(--grad-btn) }


/* ═══════════════════════════════════
   DESAFÍOS — sticky parallax scroll
   Intro blanco (igual al referente) + foto full-bleed + cards en pares
═══════════════════════════════════ */
#desafios { background:#ffffff }

/* ── Intro header — fondo blanco, texto centrado, igual al referente ── */
.desafios-intro {
  background: #ffffff;
  text-align: center;
  padding: clamp(5rem,10vw,9rem) var(--gutter) clamp(3.5rem,6vw,6rem);
}
.dsc-label {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .65rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(7,21,13,.4); margin-bottom: 1.8rem;
}
.dsc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--lima-mid);
  display: inline-block;
}
.dsc-h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink); max-width: 820px; margin: 0 auto;
}
.dsc-h2 em { color: var(--lima-mid); font-style: normal }

/* ── Parallax wrap — 400vh total, scrollRoom = 300vh ── */
#desafios-wrap { position:relative; height:400vh; background:#000 }
.dsc-sticky { position:sticky; top:0; width:100%; height:100vh; overflow:hidden }
.dsc-bg-img { position:absolute; inset:0; z-index:0; will-change:transform; transform-origin:center center }
.dsc-bg-img img { width:100%; height:100%; object-fit:cover; object-position:center 25% }

/* Very light overlay — photo reads clearly like reference */
.dsc-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.02)  0%,
    rgba(0,0,0,.00) 30%,
    rgba(0,0,0,.12) 72%,
    rgba(0,0,0,.45) 100%
  );
}
.dsc-cards { position:absolute; inset:0; z-index:10; pointer-events:none }
.dsc-cards > * { pointer-events:auto }

/* ── Cards — dimensions matching reference ── */
.fc-card {
  position: absolute;
  width: clamp(280px, 30vw, 440px);
  padding: 2.2rem 2.4rem 2.6rem;
  border-radius: 16px;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

/* Brand gradient */
.fc-brand {
  background: linear-gradient(135deg, #9ecb2d 0%, #4a8c1a 45%, #1a5c28 75%, #0b3018 100%);
  box-shadow: 0 12px 48px rgba(11,48,24,.5);
}
/* White */
.fc-light {
  background: #ffffff;
  box-shadow: 0 12px 48px rgba(0,0,0,.16);
}

/* Icon — plain 22px, generous gap below */
.fc-ico { width:22px; height:22px; margin-bottom:2.4rem; flex-shrink:0 }
.fc-ico svg { width:22px; height:22px; display:block }
.fc-brand .fc-ico svg { stroke: rgba(255,255,255,.7) }
.fc-light .fc-ico svg { stroke: rgba(7,21,13,.38) }

/* Text */
.fc-body { display:flex; flex-direction:column; gap:.6rem }
.fc-card h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15; margin: 0;
}
.fc-card p  { font-size: .87rem; line-height: 1.65; margin: 0 }
.fc-brand h3 { color: #ffffff }
.fc-brand p  { color: rgba(255,255,255,.7) }
.fc-light h3 { color: #0d1a0f }
.fc-light p  { color: rgba(13,26,15,.48) }

.dsc-spacer { height:300vh; pointer-events:none }


/* ═══════════════════════════════════
   MARQUEE STRIPS
═══════════════════════════════════ */
.mq-strip { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.95rem 0 }
.mq-strip.mq-dark   { background:var(--panel) }
.mq-strip.mq-accent { background:var(--grad-btn); border-color:transparent }
.mq-track { display:flex; white-space:nowrap; animation:ticker 32s linear infinite }
.mq-track:hover { animation-play-state:paused }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-item { display:inline-flex; align-items:center; gap:1.1rem; padding:0 2rem; flex-shrink:0; font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase }
.mq-strip.mq-dark   .mq-item { color:var(--muted2) }
.mq-strip.mq-accent .mq-item { color:rgba(7,21,13,.5) }
.mq-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.mq-strip.mq-dark   .mq-dot { background:var(--lima) }
.mq-strip.mq-accent .mq-dot { background:rgba(7,21,13,.32) }


/* ═══════════════════════════════════
   SOLUCIÓN — accordion fondo blanco
═══════════════════════════════════ */
.sol-section { max-width:100%; padding:0; background:#ffffff; border-top:none }
.sol-layout { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:start; padding:0 var(--gutter) }

/* Left sticky */
.sol-left { position:sticky; top:80px; padding:clamp(4rem,8vw,7rem) 3rem clamp(4rem,8vw,7rem) 0; max-width:480px }
.sol-left .section-label { margin-bottom:1.2rem; color:var(--lima-mid) }
.sol-left .section-label::before { background:var(--grad-btn) }
.sol-left h2 { font-family:var(--sans); font-size:clamp(2.4rem,4vw,3.8rem); font-weight:300; line-height:1.06; letter-spacing:-.03em; color:var(--ink); margin-bottom:1.6rem }
.sol-left h2 em { color:var(--lima-mid); font-style:italic }
.sol-tagline { font-size:.9rem; line-height:1.72; color:rgba(7,21,13,.55); max-width:360px }
.sol-tagline em { color:var(--lima-mid); font-style:italic }

/* Right accordion */
.sol-right { border-left:1px solid rgba(7,21,13,.1); padding:clamp(4rem,8vw,7rem) 0 }
.acc-item { border-bottom:1px solid rgba(7,21,13,.1); overflow:hidden }
.acc-item:first-child { border-top:1px solid rgba(7,21,13,.1) }

/* Trigger */
.acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.9rem 2.4rem; cursor:pointer; background:transparent; border:none; text-align:left;
  position:relative; overflow:hidden; transition:color .3s;
}
.acc-trigger::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,#9ecb2d 0%,#4a8c1a 40%,#1a5c28 70%,#0b3018 100%);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.acc-trigger.hov-grad::before,
.acc-item.acc-open .acc-trigger::before { transform:translateY(0) }
.acc-title, .acc-icon { position:relative; z-index:1 }
.acc-title { font-family:var(--sans); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem); letter-spacing:-.02em; color:var(--ink); line-height:1.15; transition:color .3s }
.acc-trigger.hov-grad .acc-title,
.acc-item.acc-open .acc-title { color:#ffffff }
.acc-trigger:focus-visible { outline:2px solid var(--lima); outline-offset:-2px }

/* Icon — plain cross, no circle */
.acc-icon { width:28px; height:28px; flex-shrink:0; position:relative; transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
.acc-icon span { position:absolute; background:var(--ink); border-radius:2px; transition:transform .35s,background .3s }
.acc-icon span:nth-child(1) { width:20px; height:1.8px; top:50%; left:50%; transform:translate(-50%,-50%) }
.acc-icon span:nth-child(2) { width:1.8px; height:20px; top:50%; left:50%; transform:translate(-50%,-50%) }
.acc-trigger.hov-grad .acc-icon span,
.acc-item.acc-open .acc-icon span { background:#ffffff }
.acc-item.acc-open .acc-icon { transform:rotate(45deg) }

/* Body */
.acc-body { max-height:0; overflow:hidden; opacity:0; transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s ease }
.acc-body p { padding:.4rem 2.4rem 2.4rem; font-size:.96rem; line-height:1.72; color:rgba(7,21,13,.52); max-width:520px }
.acc-item.acc-open .acc-body { max-height:200px; opacity:1 }
.acc-item.acc-open .acc-body p { color:rgba(7,21,13,.58) }


/* ═══════════════════════════════════
   PROCESO
═══════════════════════════════════ */
#servicios {
  background: var(--bg2);
  background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(98,188,36,.1) 0%, transparent 65%);
  max-width:100%; padding:clamp(5rem,9vw,8rem) var(--gutter)
}
#servicios .section-intro, #servicios .process-row { max-width:var(--max); margin-left:auto; margin-right:auto }
#servicios .section-intro { margin-bottom:3rem }
.process-row { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:6px; overflow:hidden }
.proc-step { padding:2.4rem 2rem; border-right:1px solid var(--border); position:relative; overflow:hidden; transition:background .25s; cursor:default }
.proc-step:last-child { border-right:none }
.proc-step::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--grad-btn); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,1,.36,1) }
.proc-step:hover { background:rgba(255,255,255,.02) }
.proc-step:hover::after { transform:scaleX(1) }
.proc-n { font-family:var(--sans); font-size:2.8rem; font-weight:800; background:var(--grad-btn); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:.5; line-height:1; margin-bottom:1.3rem; display:block }
.proc-step h3 { font-size:.9rem; margin-bottom:.4rem; color:var(--white) }
.proc-step p  { font-size:.8rem; color:rgba(255,255,255,.48); line-height:1.65 }


/* ═══════════════════════════════════
   QUOTE — scroll-driven bg transition
   verde oscuro → blanco crema
═══════════════════════════════════ */
#quote-sec {
  position: relative;
  height: 180vh;          /* room to scroll through */
}
.quote-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  /* JS drives: background-color via --qprog */
  background-color: #0e2916; /* start color — JS overrides */
  transition: none;
}
/* Ambient radial glow — peaks in the middle of the scroll */
.quote-sticky::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(98,188,36,1) 0%, transparent 65%);
  opacity: var(--glow-op, .18);
  transition: opacity .05s;
}
.quote-wrap {
  max-width:var(--max); margin:0 auto; width:100%;
  padding: 0 var(--gutter);
  display:grid; grid-template-columns:200px 1fr; gap:4rem; align-items:center;
  position:relative; z-index:1;
}
.qa-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center }
.qa-inner svg { width:80px; height:80px; border-radius:50% }
.qa-label strong { display:block; font-size:.82rem; font-weight:600; color:var(--white); transition:color .1s }
.qa-label span   { font-size:.68rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; display:block; transition:color .1s }
.big-quote::before { content:'\201C'; font-family:var(--sans); font-size:6rem; font-weight:800; color:rgba(158,203,45,.2); line-height:.7; display:block; margin-bottom:.5rem; transition:color .1s }
.big-quote p { font-family:var(--sans); font-style:italic; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:300; line-height:1.3; letter-spacing:-.02em; color:var(--white); transition:color .1s }
.big-quote p em { color:var(--lima); font-style:italic }


/* ═══════════════════════════════════
   EQUIPO — open layout, sin recuadro (estilo referente)
═══════════════════════════════════ */
.team-section {
  background: #f5f4f0;
  padding: clamp(5rem,9vw,8rem) var(--gutter);
}
.team-section .section-intro {
  max-width: var(--max); margin: 0 auto 4rem; padding: 0 var(--gutter);
}
.team-section .section-label { color: var(--lima-mid) }
.team-section .section-label::before { background: var(--grad-btn) }
.team-section h2 { color: var(--ink) }
.team-section h2 em { color: var(--lima-mid); font-style:italic }

/* Grid — dos columnas, sin fondo ni sombra */
.tm-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,7vw,7rem);
  align-items: start;
}

/* Card — sin fondo, sin border-radius, sin sombra */
.tm-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Photo — centrada, foto recortada circular-ish con glow como referente */
.tm-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.tm-glow {
  position: absolute;
  width: 300px; height: 320px;
  border-radius: 50%;
  filter: blur(55px); opacity: .65;
  top: 50%; left: 50%; transform: translate(-50%,-46%);
  z-index: 0; pointer-events: none;
}
.tm-glow-lima   { background: radial-gradient(ellipse,#9ecb2d 0%,#4a8c1a 50%,transparent 75%) }
.tm-glow-forest { background: radial-gradient(ellipse,#5aaa1e 0%,#1a5c28 50%,transparent 75%) }

.tm-photo {
  position: relative; z-index: 1;
  width: 220px; height: 270px;
  border-radius: 12px; overflow: hidden;
}
.tm-photo img { width:100%; height:100%; object-fit:cover; object-position:top center }
.tm-photo-placeholder svg { width:100%; height:100% }

/* Info — texto abierto, sin padding de card */
.tm-info { display: flex; flex-direction: column; gap: .6rem }

.tm-name {
  font-family: var(--sans); font-weight: 600;
  font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(7,21,13,.38);
  margin-bottom: .1rem;
}
.tm-role {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(1.3rem,2vw,1.8rem);
  color: var(--ink); line-height: 1.15;
  margin-bottom: .5rem;
}
.tm-bio {
  font-size: .9rem; line-height: 1.74;
  color: rgba(7,21,13,.48); margin-bottom: 1.4rem;
}

/* CTA — pill button, gradiente ARTIS */
.tm-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  align-self: flex-start;
  background: var(--grad-btn); color: var(--ink);
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .88rem 1.9rem; border-radius: 100px;
  box-shadow: 0 6px 24px rgba(90,170,30,.25);
  transition: box-shadow .3s, filter .25s;
}
.tm-cta:hover { box-shadow: 0 14px 36px rgba(90,170,30,.38); filter: brightness(1.06) }

/* Responsive */
@media(max-width:760px){ .tm-grid{grid-template-columns:1fr; gap:3.5rem} }


/* ═══════════════════════════════════
   CONTACTO + FOOTER — scroll-driven
   blanco crema → verde profundo ARTIS
═══════════════════════════════════ */
#cf-wrap {
  position: relative;
  height: 320vh;
}
.cf-sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  background-color: #f5f4f0;
  transition: none;
  overflow: hidden;
}
.cf-spacer { display: none }  /* height driven by #cf-wrap alone */

/* Radial glow layer — brightens as bg goes dark */
.cf-sticky::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(98,188,36,1) 0%, transparent 65%);
  opacity: var(--cf-glow, 0);
  transition: opacity .05s;
}

/* contacto inside the sticky */
#contacto {
  position: relative; z-index: 1;
  max-width:100%; padding:clamp(5rem,9vw,8rem) var(--gutter);
}
.contact-outer { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:start }
.contact-info-col h2 { font-family:var(--sans); font-size:clamp(2.4rem,5vw,4.2rem); font-weight:300; line-height:1.06; letter-spacing:-.03em; color:var(--ink); margin-bottom:1.2rem; transition:color .05s }
.contact-info-col h2 em { color:var(--lima-mid); font-style:italic }
.ci-sub   { margin-bottom:2rem; font-size:.92rem; color:rgba(8,26,13,.5); transition:color .05s }
.ci-block { display:flex; flex-direction:column; gap:.95rem }
.ci-row   { display:flex; align-items:center; gap:.85rem }
.ci-icon  { width:36px; height:36px; border-radius:8px; flex-shrink:0; background:rgba(8,26,13,.06); border:1px solid rgba(8,26,13,.12); display:flex; align-items:center; justify-content:center; color:var(--lima-mid); transition:background .05s,border-color .05s,color .05s }
.ci-row span, .ci-row a { font-size:.84rem; color:rgba(8,26,13,.55); transition:color .05s }
.ci-row a:hover { color:var(--lima-mid) }

/* footer inside the sticky */
#footer {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(168,216,50,.12);
  padding: 3.5rem var(--gutter) 2rem;
  transition: border-color .05s;
}
.foot-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem }
.foot-brand { display:flex; flex-direction:column; gap:.6rem }
.foot-tag   { font-family:var(--sans); font-style:italic; font-size:.84rem; color:rgba(8,26,13,.38); margin-top:.2rem; transition:color .05s }
.foot-address p { font-size:.78rem; color:rgba(8,26,13,.38); line-height:1.65; transition:color .05s }
.foot-contact { display:flex; flex-direction:column; gap:.55rem }
.foot-contact a { font-size:.78rem; color:rgba(8,26,13,.38); transition:color .2s }
.foot-contact a:hover { color:var(--lima-mid) }
.foot-copy-row { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; margin-top:.5rem; border-top:1px solid rgba(8,26,13,.1); transition:border-color .05s }
.foot-copy-row > span { font-size:.68rem; color:rgba(8,26,13,.3); transition:color .05s }
.foot-legal { display:flex; gap:1.4rem }
.foot-legal a { font-size:.68rem; color:rgba(8,26,13,.3); transition:color .2s }
.foot-legal a:hover { color:var(--lima-mid) }

/* Wizard — dark card stays dark always */
.wizard-card { background:var(--panel); border:1px solid var(--border2); border-radius:8px; overflow:hidden; box-shadow:0 20px 56px rgba(0,0,0,.28) }
.wiz-top { padding:1.6rem 2rem 1.2rem; border-bottom:1px solid var(--border) }
.wiz-title { font-family:var(--sans); font-size:1.2rem; font-weight:700; color:var(--white); margin-bottom:.25rem }
.wiz-sub   { font-size:.7rem; color:var(--muted2) }
.wiz-prog-bar  { height:2px; background:var(--border) }
.wiz-prog-fill { height:100%; background:var(--grad-btn); transition:width .45s cubic-bezier(.22,1,.36,1) }
.wiz-tabs { display:flex; border-bottom:1px solid var(--border) }
.wtab { flex:1; padding:.8rem .5rem; text-align:center; border-right:1px solid var(--border); cursor:default; transition:all .3s }
.wtab:last-child { border-right:none }
.wtn { display:block; font-family:var(--sans); font-size:1.2rem; font-weight:700; color:rgba(255,255,255,.07); line-height:1; margin-bottom:.2rem; transition:color .3s }
.wtl { font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); transition:color .3s }
.wtab.active .wtn, .wtab.active .wtl { color:var(--lima) }
.wtab.done   .wtn, .wtab.done   .wtl { color:rgba(168,216,50,.4) }
.wiz-body { padding:1.8rem 2rem 2rem }
.wstep { display:none } .wstep.active { display:block }
.wlabel { font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-bottom:1.1rem }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:1.6rem }
.opt  { padding:.95rem 1rem; border:1px solid var(--border); border-radius:5px; background:rgba(255,255,255,.02); cursor:pointer; display:flex; align-items:center; gap:.7rem; transition:border-color .2s,background .2s,transform .2s }
.opt:hover  { border-color:var(--border2); background:rgba(255,255,255,.04); transform:translateY(-1px) }
.opt.sel    { border-color:var(--lima); background:rgba(168,216,50,.1) }
.on { font-family:var(--sans); font-size:.9rem; font-weight:700; color:rgba(255,255,255,.1); min-width:24px; line-height:1; transition:color .2s }
.ot { font-size:.78rem; font-weight:500; color:rgba(255,255,255,.5); transition:color .2s }
.opt.sel .on { color:var(--lima) } .opt.sel .ot { color:var(--white) }
.fg { margin-bottom:.9rem }
.fg label { display:block; font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:.4rem }
.fg input, .fg select { width:100%; padding:.68rem .95rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:4px; font-family:var(--sans); font-size:.86rem; color:var(--white); outline:none; transition:border-color .2s,background .2s,box-shadow .2s }
.fg input::placeholder { color:rgba(255,255,255,.14) }
.fg select option { background:var(--card) }
.fg input:focus, .fg select:focus { border-color:var(--lima); background:rgba(168,216,50,.04); box-shadow:0 0 0 3px rgba(168,216,50,.1) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.wfoot { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border) }
.wpct  { font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--muted2) }
.wbtns { display:flex; gap:.6rem }
.wiz-ok { display:none; text-align:center; padding:2.8rem 2rem }
.wiz-ok-icon { font-size:2.6rem; margin-bottom:.8rem }
.wiz-ok h3 { font-family:var(--sans); font-size:1.4rem; font-weight:700; color:var(--white); margin-bottom:.5rem }
.wiz-ok p  { font-size:.86rem; color:var(--muted) }


/* ═══════════════════════════════════
   HELPERS
═══════════════════════════════════ */
.section-label { font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--lima); margin-bottom:1rem; display:flex; align-items:center; gap:.8rem }
.section-label::before { content:''; display:inline-block; width:26px; height:1px; background:var(--grad-btn) }
section h2 { font-family:var(--sans); font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.06; letter-spacing:-.03em; color:var(--white) }
section h2 em { color:var(--lima); font-style:italic }
.section-intro { margin-bottom:3.5rem }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease }
.reveal.in { opacity:1; transform:none }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}


/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:960px){
  .nav-links,.nav-time{display:none}
  .hamburger{display:flex}
  .process-row{grid-template-columns:repeat(2,1fr)}
  .proc-step:nth-child(2){border-right:none}
  .proc-step:nth-child(3){border-top:1px solid var(--border)}
  .quote-wrap{grid-template-columns:1fr;gap:2rem}
  #quote-sec{height:auto}
  .quote-sticky{position:relative;height:auto;padding:clamp(4rem,9vw,7rem) 0;background-color:#0e2916 !important}
  .contact-outer{grid-template-columns:1fr}
  #cf-wrap{height:auto}
  .cf-sticky{position:relative;background-color:#f5f4f0 !important}
  #footer{background-color:#0a1f10 !important}
  .cf-spacer{display:none}
  .foot-inner{grid-template-columns:1fr 1fr}
  .hero-stats-inner{gap:2.5rem}
  .acc-trigger{padding:1.5rem var(--gutter)}
  .acc-body p{padding:.4rem var(--gutter) 2rem}
  .acc-title{font-size:clamp(1.2rem,4vw,1.6rem)}
  .fc-card{width:clamp(170px,34vw,230px);padding:1.2rem 1.3rem}
  .fc-wide{width:clamp(200px,40vw,270px)}
}
@media(max-width:860px){
  .sol-layout{grid-template-columns:1fr;padding:0}
  .sol-left{position:static;padding:clamp(3rem,7vw,5rem) var(--gutter) 2rem;max-width:100%}
  .sol-right{border-left:none;border-top:1px solid rgba(7,21,13,.1)}
  .tm-content,.tm-content-alt{grid-template-columns:1fr;gap:2.5rem}
  .tm-content-alt .tm-photo-wrap{order:-1}
  .tm-photo-wrap{justify-content:flex-start}
  .tm-mq-track{font-size:clamp(3rem,14vw,6rem)}
}
@media(max-width:640px){
  /* ── HERO ── */
  #hero-wrap { height:100vh }
  .hero-spacer { display:none }
  .hero-headline-block {
    right: var(--gutter);
    bottom: clamp(9rem,16vh,12rem);
  }
  .hero-h1 { font-size: clamp(2.6rem,12vw,3.8rem); line-height:1.04 }
  .hero-bottom-panel {
    opacity:1 !important; transform:translateY(0) !important;
    left:var(--gutter); right:var(--gutter);
    bottom: clamp(2.5rem,5vh,4rem);
    width:auto;
  }
  .hbp-sub { display:block }
  .hero-sub { font-size: clamp(.92rem,3.8vw,1.05rem) }

  /* ── PARALLAX DESAFÍOS — fullscreen on mobile ── */
  #desafios-wrap { height:auto }
  .dsc-sticky {
    position:relative; height:100svh; min-height:100vw;
    overflow:hidden;
  }
  .dsc-bg-img {
    position:absolute; inset:0;
    height:100%; width:100%;
  }
  .dsc-bg-img img {
    width:100%; height:100%; object-fit:cover;
    object-position:center center;
    transform:none !important;
  }
  .dsc-overlay { position:absolute }
  .dsc-spacer { height:0 }

  /* Cards — horizontal scroll gallery */
  .dsc-sticky { overflow:visible }
  .dsc-cards {
    position: relative; z-index: 10;
    display: flex;
    flex-direction: row;
    gap: .85rem;
    padding: 1.6rem var(--gutter) 1.8rem;
    background: var(--bg2);
    overflow-x: auto;
    overflow-y: visible;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }
  .dsc-cards::-webkit-scrollbar { display: none }

  .fc-card {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    /* show ~1.1 cards = peek of next */
    width: 76vw !important;
    min-width: 260px !important;
    max-width: 320px !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    transform: none !important;
    opacity: 0;
    transition: opacity .45s cubic-bezier(.22,1,.36,1);
  }
  .fc-card.mob-in { opacity: 1 !important }
  /* Fallback */
  .fc-card:not(.mob-in) { animation: fcFallback 0s .6s forwards }
  @keyframes fcFallback { to { opacity: 1 } }

  /* Scroll dots indicator */
  .dsc-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 0 1.2rem;
    background: var(--bg2);
  }
  .dsc-scroll-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(168,216,50,.25);
    transition: background .3s, transform .3s;
  }
  .dsc-scroll-dot.active {
    background: var(--lima);
    transform: scale(1.4);
  }
  /* Desafíos intro text sizing */
  .dsc-h2 { font-size:clamp(2rem,9vw,3rem) }

  /* ── PROCESO ── */
  .process-row{grid-template-columns:1fr}
  .proc-step{border-right:none !important;border-bottom:1px solid var(--border) !important}
  .proc-step:last-child{border-bottom:none !important}

  /* ── FORMULARIO ── */
  .opts{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}

  /* ── FOOTER ── */
  .foot-inner{grid-template-columns:1fr}
  .hero-stats-inner{flex-wrap:wrap;gap:1.8rem}

  /* ── EQUIPO ── */
  .tm-photo{width:160px;height:200px}
  .tm-glow{width:190px;height:210px}



  /* ── SECTION LABEL ── */
  .section-label { font-size:.6rem }

  /* ── REVEAL ANIMATIONS — snappier on touch ── */
  .reveal {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .reveal.in { opacity:1; transform:none }
  .rd1{transition-delay:.08s}
  .rd2{transition-delay:.16s}
  .rd3{transition-delay:.24s}
  .rd4{transition-delay:.32s}

  /* ── PROC-STEP tap feedback ── */
  .proc-step { transition: background .2s }
  .proc-step:active { background:rgba(255,255,255,.04) }

  /* ── ACCORDION ── */
  .acc-trigger { padding:1.4rem var(--gutter) }
  .acc-title { font-size:clamp(1.1rem,4.5vw,1.5rem) }

  /* ── MARQUEE — slightly slower on mobile for readability ── */
  .mq-track { animation-duration:28s }

  /* ── SCROLL HINT ── */
  .hero-scroll-hint { right:1.4rem; bottom:2rem }
}


/* ═══════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════ */
.ck-banner {
  position: fixed;
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  width: min(680px, calc(100vw - 2rem));
  z-index: 9000;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s;
  opacity: 0;
}
.ck-banner.ck-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.ck-banner[hidden] { display: none }

.ck-inner {
  background: var(--panel);
  border: 1px solid rgba(168,216,50,.18);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(168,216,50,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Top row */
.ck-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}
.ck-icon { color: var(--lima); margin-top: .15rem; flex-shrink: 0 }
.ck-title { font-size: .92rem; font-weight: 700; color: var(--white); margin-bottom: .3rem }
.ck-sub { font-size: .78rem; color: var(--muted2); line-height: 1.65 }
.ck-sub a { color: var(--lima); text-decoration: none }
.ck-sub a:hover { text-decoration: underline }
.ck-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.3); padding: .2rem;
  transition: color .2s; flex-shrink: 0; margin-top: .1rem;
}
.ck-close:hover { color: var(--white) }

/* Toggles */
.ck-toggles {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 1.4rem;
}
.ck-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: background .2s;
}
.ck-toggle-row:last-child { border-bottom: none }
.ck-toggle-row:hover { background: rgba(255,255,255,.03) }
.ck-toggle-info { display: flex; flex-direction: column; gap: .2rem }
.ck-toggle-name { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8) }
.ck-toggle-desc { font-size: .72rem; color: var(--muted2); line-height: 1.5; max-width: 44ch }

/* Toggle switch */
.ck-toggle {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  cursor: pointer; transition: background .25s, border-color .25s;
  padding: 0;
}
.ck-toggle[aria-checked="true"] {
  background: var(--lima-mid);
  border-color: var(--lima);
}
.ck-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s;
  pointer-events: none;
}
.ck-toggle[aria-checked="true"] .ck-thumb {
  transform: translateX(18px);
  background: var(--white);
}
.ck-toggle--locked {
  background: rgba(168,216,50,.12);
  border-color: rgba(168,216,50,.2);
  cursor: default; pointer-events: none;
  width: auto; height: auto;
  padding: .25rem .7rem;
  display: flex; align-items: center;
}
.ck-locked-label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lima); white-space: nowrap }

/* Actions */
.ck-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap }
.ck-btn-primary {
  padding: .65rem 1.3rem; border-radius: 100px;
  background: var(--grad-btn); border: none; cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
  transition: filter .2s, transform .15s;
}
.ck-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px) }
.ck-btn-secondary {
  padding: .65rem 1.2rem; border-radius: 100px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.55);
  transition: border-color .2s, color .2s, background .2s;
}
.ck-btn-secondary:hover { border-color: rgba(255,255,255,.25); color: var(--white); background: rgba(255,255,255,.08) }

@media(max-width:480px) {
  .ck-top { grid-template-columns: auto 1fr auto }
  .ck-actions { flex-direction: column }
  .ck-btn-primary, .ck-btn-secondary { width: 100%; text-align: center }
}

/* ── FOOTER always rendered on deep green ────────────────── */
/* The cf-sticky scroll transition ends at #0a1f10 when the
   user reaches the footer. This rule ensures the footer text
   colors are always white-spectrum regardless of JS timing. */
#footer .foot-inner,
#footer .foot-copy-row { position: relative; z-index: 2 }

/* Force footer text to white when bg is dark (overrides cfTick inline) */
#footer .nav-wordmark { color: var(--white) !important }
#footer .foot-tag,
#footer .foot-address p,
#footer .foot-contact a,
#footer .foot-copy-row > span,
#footer .foot-legal a { color: rgba(255,255,255,.32) !important }
#footer .foot-contact a:hover,
#footer .foot-legal a:hover { color: var(--lima) !important }
#footer .foot-copy-row { border-top-color: rgba(255,255,255,.1) !important }
#footer { border-top-color: rgba(168,216,50,.15) !important }

/* Guarantee the sticky ends at deep green regardless of scroll position */
#cf-wrap::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 0;
}

/* Scroll hint dots — desktop: hidden */
.dsc-scroll-hint { display: none }


/* ═══════════════════════════════════════════════════════
   ARTIS GLOBAL · index.css
═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --lima:      #a8d832;
  --lima-mid:  #62bc24;
  --lima-deep: #1e6830;
  --forest:    #0e3a1e;
  --ink:       #081a0d;
  --grad-brand: linear-gradient(135deg,#a8d832 0%,#52a01a 40%,#1e6830 70%,#0e3a1e 100%);
  --grad-btn:   linear-gradient(135deg,#a8d832 0%,#62bc24 100%);
  --grad-hero:  linear-gradient(150deg,#0e3d20 0%,#061812 55%,#0a2e18 100%);
  --white:   #ffffff;
  --muted:   rgba(255,255,255,.6);
  --muted2:  rgba(255,255,255,.32);
  --border:  rgba(255,255,255,.1);
  --border2: rgba(255,255,255,.2);
  --bg:    #0a1f10;
  --bg2:   #0e2916;
  --panel: #13301b;
  --card:  #193d22;
  --serif: 'Cormorant', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --gutter: clamp(1.6rem, 7vw, 5.5rem);
  --max:    1120px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--sans); background:var(--bg); color:var(--white); overflow-x:clip; -webkit-font-smoothing:antialiased }
/* Ambient light — subtle top-center glow on every page */
body::before {
  content:''; position:fixed; top:0; left:0; right:0; height:100vh;
  background: radial-gradient(ellipse 100% 60% at 50% -10%, rgba(98,188,36,.07) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
a { text-decoration:none; color:inherit }
ul { list-style:none }
button { font-family:var(--sans); cursor:pointer; border:none; background:none; color:inherit }
address { font-style:normal }
img { display:block; max-width:100% }

/* ── CURSOR ── */

/* ── NAV ── */
#nav {
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s;
}
.nav-logo  { display:flex; align-items:center; gap:.6rem }
.nav-logo-mark { width:34px; height:34px; flex-shrink:0 }
.nav-logo-img  { height:32px; width:auto; display:block; object-fit:contain }
.nav-logo-img--footer { height:28px; filter: var(--logo-filter, none) }
.nav-wordmark  { font-family:var(--sans); font-weight:600; font-size:1.1rem; letter-spacing:.04em; color:var(--white) }
.nav-links { display:flex; gap:2.2rem }
.nav-link  { font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color .2s; position:relative; padding-bottom:2px }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--lima); transition:width .3s }
.nav-link:hover, .nav-link.active { color:var(--white) }
.nav-link:hover::after, .nav-link.active::after { width:100% }
.nav-aside { display:flex; align-items:center; gap:1.1rem }
/* nav-time hidden */
.nav-time  { display:none }

/* ── Shared button arrow icon ── */
.btn-arrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.1em; height:1.1em; flex-shrink:0;
}

/* CTA button — pill radius, uniform arrow */
.cta-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.82rem 1.8rem; border-radius:100px;
  background:var(--grad-btn); color:var(--ink);
  box-shadow:0 4px 18px rgba(158,203,45,.22);
  transition:box-shadow .3s,filter .25s; cursor:pointer;
}
.cta-btn:hover { box-shadow:0 10px 30px rgba(158,203,45,.38); filter:brightness(1.06) }
.cta-btn.sm { padding:.66rem 1.4rem; font-size:.68rem }

/* Ghost button — same pill radius */
.ghost-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:.66rem 1.4rem; border-radius:100px;
  border:1px solid var(--border2); color:var(--muted);
  transition:border-color .25s,color .25s; cursor:pointer;
}
.ghost-btn:hover { border-color:var(--lima); color:var(--lima) }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:6px }
.hamburger span { display:block; width:20px; height:1.5px; background:var(--white); border-radius:1px; transition:all .3s }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile overlay */
.mob-overlay { display:none; position:fixed; inset:0; z-index:99; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:2rem }
.mob-overlay.open { display:flex }
.mob-x { position:absolute; top:1rem; right:var(--gutter); font-size:1.6rem; color:var(--muted); transition:color .2s; cursor:pointer; background:none; border:none; padding:1rem; line-height:1; -webkit-tap-highlight-color:transparent; touch-action:manipulation; z-index:101 }
.mob-x:hover { color:var(--white) }
.mob-overlay a { font-family:var(--sans); font-weight:300; font-size:2.2rem; color:var(--white); transition:color .2s }
.mob-overlay a:hover, .mob-cta-link { color:var(--lima) }


/* ═══════════════════════════════════
   HERO — Hark Capital scroll-driven
   Wrap = 250vh, sticky = 100vh
   Phase 1 (p=0–0.4): headline solo bottom-left
   Phase 2 (p=0.4–1): headline sube, sub + stats entran
═══════════════════════════════════ */

/* Glass nav on scroll */
#nav.solid {
  background: rgba(10,30,16,.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-color: rgba(168,216,50,.12);
}

#hero-wrap { position:relative; height:250vh }
.hero-spacer { height:250vh; pointer-events:none; visibility:hidden }

.hero-sticky {
  position:sticky; top:0; width:100%; height:100vh;
  overflow:hidden;
  background: linear-gradient(150deg,#0e3d20 0%,#061812 55%,#0a2e18 100%);
  display:flex; flex-direction:column;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 70% at var(--mx,65%) var(--my,42%), rgba(110,200,60,.52) 0%, rgba(62,160,30,.18) 40%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 80% 15%, rgba(168,216,50,.22) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 20% 80%, rgba(30,104,48,.35) 0%, transparent 60%);
}
.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.particle {
  position:absolute; border-radius:50%; background:var(--lima); opacity:0;
  animation:pfx var(--d,8s) var(--dl,0s) ease-in-out infinite;
}
@keyframes pfx {
  0%   { transform:translateY(0) scale(1); opacity:0 }
  12%  { opacity:var(--op,.18) }
  88%  { opacity:var(--op,.18) }
  100% { transform:translateY(var(--ty,-160px)) translateX(var(--tx,20px)) scale(.3); opacity:0 }
}

/* ── Headline block — bottom-left, rises on scroll ── */
.hero-headline-block {
  position:absolute; z-index:2;
  left: var(--gutter);
  right: 8%;                     /* extends wider, Hark style */
  bottom: clamp(4rem, 8vh, 7rem);
  will-change: transform;
}
.hero-h1 {
  font-family: var(--sans); font-weight: 300;    /* LIGHT — Hark style */
  font-size: clamp(4rem, 8.5vw, 8.8rem);
  line-height: 1.01; letter-spacing: -.03em; color: var(--white);
}
.hero-h1 em { color:var(--lima); font-style:normal }   /* no italic, just color accent */

/* ── Floating subtitle — bottom-right, no panel background ── */
.hero-bottom-panel {
  position: absolute; z-index:2;
  bottom: clamp(4rem, 8vh, 7rem);
  right: var(--gutter);
  left: auto;
  width: clamp(280px, 32vw, 440px);
  background: none;
  border: none;
  opacity: 0; transform: translateY(14px);
  will-change: opacity, transform;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-bottom-panel::before { display:none }
.hero-bottom-inner {
  padding: 0;
  display: block;
}

/* Stats — hidden in this layout */
.hbp-stats { display: none }

/* Subtitle — right float */
.hbp-sub {
  border-left: none;
  padding-left: 0;
  opacity: 1; transform: none;    /* parent handles fade */
  transition: none;
}
.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.72; color: rgba(255,255,255,.62);
  font-weight: 400;
}

/* ── Scroll hint arrow ── */
.hero-scroll-hint {
  position:absolute; z-index:3; right:2.5rem; bottom:3.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.3);
  animation:hshBounce 2.2s ease-in-out infinite;
  transition:opacity .4s;
}
.hero-scroll-hint.hidden { opacity:0; pointer-events:none }
.hsh-line { width:1px; height:36px; background:rgba(255,255,255,.18) }
.hero-scroll-hint svg { width:14px; height:14px }
@keyframes hshBounce {
  0%,100% { transform:translateY(0) }
  50%      { transform:translateY(7px) }
}

/* story-label kept for reuse elsewhere */
.story-label {
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lima); margin-bottom:2rem; display:flex; align-items:center; gap:.8rem;
}
.story-label::before { content:''; display:inline-block; width:30px; height:1px; background:var(--grad-btn) }


/* ═══════════════════════════════════
   DESAFÍOS — sticky parallax scroll
   Intro blanco (igual al referente) + foto full-bleed + cards en pares
═══════════════════════════════════ */
#desafios { background:#ffffff }

/* ── Intro header — fondo blanco, texto centrado, igual al referente ── */
.desafios-intro {
  background: #ffffff;
  text-align: center;
  padding: clamp(5rem,10vw,9rem) var(--gutter) clamp(3.5rem,6vw,6rem);
}
.dsc-label {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .65rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(7,21,13,.4); margin-bottom: 1.8rem;
}
.dsc-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--lima-mid);
  display: inline-block;
}
.dsc-h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink); max-width: 820px; margin: 0 auto;
}
.dsc-h2 em { color: var(--lima-mid); font-style: normal }

/* ── Parallax wrap — 400vh total, scrollRoom = 300vh ── */
#desafios-wrap { position:relative; height:400vh; background:#000 }
.dsc-sticky { position:sticky; top:0; width:100%; height:100vh; overflow:hidden }
.dsc-bg-img { position:absolute; inset:0; z-index:0; will-change:transform; transform-origin:center center }
.dsc-bg-img img { width:100%; height:100%; object-fit:cover; object-position:center 25% }

/* Very light overlay — photo reads clearly like reference */
.dsc-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.02)  0%,
    rgba(0,0,0,.00) 30%,
    rgba(0,0,0,.12) 72%,
    rgba(0,0,0,.45) 100%
  );
}
.dsc-cards { position:absolute; inset:0; z-index:10; pointer-events:none }
.dsc-cards > * { pointer-events:auto }

/* ── Cards — dimensions matching reference ── */
.fc-card {
  position: absolute;
  width: clamp(280px, 30vw, 440px);
  padding: 2.2rem 2.4rem 2.6rem;
  border-radius: 16px;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

/* Brand gradient */
.fc-brand {
  background: linear-gradient(135deg, #9ecb2d 0%, #4a8c1a 45%, #1a5c28 75%, #0b3018 100%);
  box-shadow: 0 12px 48px rgba(11,48,24,.5);
}
/* White */
.fc-light {
  background: #ffffff;
  box-shadow: 0 12px 48px rgba(0,0,0,.16);
}

/* Icon — plain 22px, generous gap below */
.fc-ico { width:22px; height:22px; margin-bottom:2.4rem; flex-shrink:0 }
.fc-ico svg { width:22px; height:22px; display:block }
.fc-brand .fc-ico svg { stroke: rgba(255,255,255,.7) }
.fc-light .fc-ico svg { stroke: rgba(7,21,13,.38) }

/* Text */
.fc-body { display:flex; flex-direction:column; gap:.6rem }
.fc-card h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15; margin: 0;
}
.fc-card p  { font-size: .87rem; line-height: 1.65; margin: 0 }
.fc-brand h3 { color: #ffffff }
.fc-brand p  { color: rgba(255,255,255,.7) }
.fc-light h3 { color: #0d1a0f }
.fc-light p  { color: rgba(13,26,15,.48) }

.dsc-spacer { height:300vh; pointer-events:none }


/* ═══════════════════════════════════
   MARQUEE STRIPS
═══════════════════════════════════ */
.mq-strip { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.95rem 0 }
.mq-strip.mq-dark   { background:var(--panel) }
.mq-strip.mq-accent { background:var(--grad-btn); border-color:transparent }
.mq-track { display:flex; white-space:nowrap; animation:ticker 32s linear infinite }
.mq-track:hover { animation-play-state:paused }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-item { display:inline-flex; align-items:center; gap:1.1rem; padding:0 2rem; flex-shrink:0; font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase }
.mq-strip.mq-dark   .mq-item { color:var(--muted2) }
.mq-strip.mq-accent .mq-item { color:rgba(7,21,13,.5) }
.mq-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.mq-strip.mq-dark   .mq-dot { background:var(--lima) }
.mq-strip.mq-accent .mq-dot { background:rgba(7,21,13,.32) }


/* ═══════════════════════════════════
   SOLUCIÓN — accordion fondo blanco
═══════════════════════════════════ */
.sol-section { max-width:100%; padding:0; background:#ffffff; border-top:none }
.sol-layout { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:start; padding:0 var(--gutter) }

/* Left sticky */
.sol-left { position:sticky; top:80px; padding:clamp(4rem,8vw,7rem) 3rem clamp(4rem,8vw,7rem) 0; max-width:480px }
.sol-left .section-label { margin-bottom:1.2rem; color:var(--lima-mid) }
.sol-left .section-label::before { background:var(--grad-btn) }
.sol-left h2 { font-family:var(--sans); font-size:clamp(2.4rem,4vw,3.8rem); font-weight:300; line-height:1.06; letter-spacing:-.03em; color:var(--ink); margin-bottom:1.6rem }
.sol-left h2 em { color:var(--lima-mid); font-style:italic }
.sol-tagline { font-size:.9rem; line-height:1.72; color:rgba(7,21,13,.55); max-width:360px }
.sol-tagline em { color:var(--lima-mid); font-style:italic }

/* Right accordion */
.sol-right { border-left:1px solid rgba(7,21,13,.1); padding:clamp(4rem,8vw,7rem) 0 }
.acc-item { border-bottom:1px solid rgba(7,21,13,.1); overflow:hidden }
.acc-item:first-child { border-top:1px solid rgba(7,21,13,.1) }

/* Trigger */
.acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.9rem 2.4rem; cursor:pointer; background:transparent; border:none; text-align:left;
  position:relative; overflow:hidden; transition:color .3s;
}
.acc-trigger::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,#9ecb2d 0%,#4a8c1a 40%,#1a5c28 70%,#0b3018 100%);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  z-index:0;
}
.acc-trigger.hov-grad::before,
.acc-item.acc-open .acc-trigger::before { transform:translateY(0) }
.acc-title, .acc-icon { position:relative; z-index:1 }
.acc-title { font-family:var(--sans); font-weight:400; font-size:clamp(1.3rem,2.2vw,1.9rem); letter-spacing:-.02em; color:var(--ink); line-height:1.15; transition:color .3s }
.acc-trigger.hov-grad .acc-title,
.acc-item.acc-open .acc-title { color:#ffffff }
.acc-trigger:focus-visible { outline:2px solid var(--lima); outline-offset:-2px }

/* Icon — plain cross, no circle */
.acc-icon { width:28px; height:28px; flex-shrink:0; position:relative; transition:transform .4s cubic-bezier(.34,1.56,.64,1) }
.acc-icon span { position:absolute; background:var(--ink); border-radius:2px; transition:transform .35s,background .3s }
.acc-icon span:nth-child(1) { width:20px; height:1.8px; top:50%; left:50%; transform:translate(-50%,-50%) }
.acc-icon span:nth-child(2) { width:1.8px; height:20px; top:50%; left:50%; transform:translate(-50%,-50%) }
.acc-trigger.hov-grad .acc-icon span,
.acc-item.acc-open .acc-icon span { background:#ffffff }
.acc-item.acc-open .acc-icon { transform:rotate(45deg) }

/* Body */
.acc-body { max-height:0; overflow:hidden; opacity:0; transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s ease }
.acc-body p { padding:.4rem 2.4rem 2.4rem; font-size:.96rem; line-height:1.72; color:rgba(7,21,13,.52); max-width:520px }
.acc-item.acc-open .acc-body { max-height:200px; opacity:1 }
.acc-item.acc-open .acc-body p { color:rgba(7,21,13,.58) }


/* ═══════════════════════════════════
   PROCESO
═══════════════════════════════════ */
#servicios {
  background: var(--bg2);
  background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(98,188,36,.1) 0%, transparent 65%);
  max-width:100%; padding:clamp(5rem,9vw,8rem) var(--gutter)
}
#servicios .section-intro, #servicios .process-row { max-width:var(--max); margin-left:auto; margin-right:auto }
#servicios .section-intro { margin-bottom:3rem }
.process-row { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:6px; overflow:hidden }
.proc-step { padding:2.4rem 2rem; border-right:1px solid var(--border); position:relative; overflow:hidden; transition:background .25s; cursor:default }
.proc-step:last-child { border-right:none }
.proc-step::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--grad-btn); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.22,1,.36,1) }
.proc-step:hover { background:rgba(255,255,255,.02) }
.proc-step:hover::after { transform:scaleX(1) }
.proc-n { font-family:var(--sans); font-size:2.8rem; font-weight:800; background:var(--grad-btn); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:.5; line-height:1; margin-bottom:1.3rem; display:block }
.proc-step h3 { font-size:.9rem; margin-bottom:.4rem; color:var(--white) }
.proc-step p  { font-size:.8rem; color:rgba(255,255,255,.48); line-height:1.65 }


/* ═══════════════════════════════════
   QUOTE — scroll-driven bg transition
   verde oscuro → blanco crema
═══════════════════════════════════ */
#quote-sec {
  position: relative;
  height: 180vh;          /* room to scroll through */
}
.quote-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  /* JS drives: background-color via --qprog */
  background-color: #0e2916; /* start color — JS overrides */
  transition: none;
}
/* Ambient radial glow — peaks in the middle of the scroll */
.quote-sticky::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(98,188,36,1) 0%, transparent 65%);
  opacity: var(--glow-op, .18);
  transition: opacity .05s;
}
.quote-wrap {
  max-width:var(--max); margin:0 auto; width:100%;
  padding: 0 var(--gutter);
  display:grid; grid-template-columns:200px 1fr; gap:4rem; align-items:center;
  position:relative; z-index:1;
}
.qa-inner { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center }
.qa-inner svg { width:80px; height:80px; border-radius:50% }
.qa-label strong { display:block; font-size:.82rem; font-weight:600; color:var(--white); transition:color .1s }
.qa-label span   { font-size:.68rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; display:block; transition:color .1s }
.big-quote::before { content:'\201C'; font-family:var(--sans); font-size:6rem; font-weight:800; color:rgba(158,203,45,.2); line-height:.7; display:block; margin-bottom:.5rem; transition:color .1s }
.big-quote p { font-family:var(--sans); font-style:italic; font-size:clamp(1.6rem,3vw,2.6rem); font-weight:300; line-height:1.3; letter-spacing:-.02em; color:var(--white); transition:color .1s }
.big-quote p em { color:var(--lima); font-style:italic }


/* ═══════════════════════════════════
   EQUIPO — open layout, sin recuadro (estilo referente)
═══════════════════════════════════ */
.team-section {
  background: #f5f4f0;
  padding: clamp(5rem,9vw,8rem) var(--gutter);
}
.team-section .section-intro {
  max-width: var(--max); margin: 0 auto 4rem; padding: 0 var(--gutter);
}
.team-section .section-label { color: var(--lima-mid) }
.team-section .section-label::before { background: var(--grad-btn) }
.team-section h2 { color: var(--ink) }
.team-section h2 em { color: var(--lima-mid); font-style:italic }

/* Grid — dos columnas, sin fondo ni sombra */
.tm-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,7vw,7rem);
  align-items: start;
}

/* Card — sin fondo, sin border-radius, sin sombra */
.tm-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Photo — centrada, foto recortada circular-ish con glow como referente */
.tm-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.tm-glow {
  position: absolute;
  width: 300px; height: 320px;
  border-radius: 50%;
  filter: blur(55px); opacity: .65;
  top: 50%; left: 50%; transform: translate(-50%,-46%);
  z-index: 0; pointer-events: none;
}
.tm-glow-lima   { background: radial-gradient(ellipse,#9ecb2d 0%,#4a8c1a 50%,transparent 75%) }
.tm-glow-forest { background: radial-gradient(ellipse,#5aaa1e 0%,#1a5c28 50%,transparent 75%) }

.tm-photo {
  position: relative; z-index: 1;
  width: 220px; height: 270px;
  border-radius: 12px; overflow: hidden;
}
.tm-photo img { width:100%; height:100%; object-fit:cover; object-position:top center }
.tm-photo-placeholder svg { width:100%; height:100% }

/* Info — texto abierto, sin padding de card */
.tm-info { display: flex; flex-direction: column; gap: .6rem }

.tm-name {
  font-family: var(--sans); font-weight: 600;
  font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(7,21,13,.38);
  margin-bottom: .1rem;
}
.tm-role {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(1.3rem,2vw,1.8rem);
  color: var(--ink); line-height: 1.15;
  margin-bottom: .5rem;
}
.tm-bio {
  font-size: .9rem; line-height: 1.74;
  color: rgba(7,21,13,.48); margin-bottom: 1.4rem;
}

/* CTA — pill button, gradiente ARTIS */
.tm-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  align-self: flex-start;
  background: var(--grad-btn); color: var(--ink);
  font-family: var(--sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .88rem 1.9rem; border-radius: 100px;
  box-shadow: 0 6px 24px rgba(90,170,30,.25);
  transition: box-shadow .3s, filter .25s;
}
.tm-cta:hover { box-shadow: 0 14px 36px rgba(90,170,30,.38); filter: brightness(1.06) }

/* Responsive */
@media(max-width:760px){ .tm-grid{grid-template-columns:1fr; gap:3.5rem} }


/* ═══════════════════════════════════
   CONTACTO + FOOTER — scroll-driven
   blanco crema → verde profundo ARTIS
═══════════════════════════════════ */
#cf-wrap {
  position: relative;
  height: 320vh;
}
.cf-sticky {
  position: sticky; top: 0;
  min-height: 100vh;
  background-color: #f5f4f0;
  transition: none;
  overflow: hidden;
}
.cf-spacer { display: none }  /* height driven by #cf-wrap alone */

/* Radial glow layer — brightens as bg goes dark */
.cf-sticky::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(98,188,36,1) 0%, transparent 65%);
  opacity: var(--cf-glow, 0);
  transition: opacity .05s;
}

/* contacto inside the sticky */
#contacto {
  position: relative; z-index: 1;
  max-width:100%; padding:clamp(5rem,9vw,8rem) var(--gutter);
}
.contact-outer { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:start }
.contact-info-col h2 { font-family:var(--sans); font-size:clamp(2.4rem,5vw,4.2rem); font-weight:300; line-height:1.06; letter-spacing:-.03em; color:var(--ink); margin-bottom:1.2rem; transition:color .05s }
.contact-info-col h2 em { color:var(--lima-mid); font-style:italic }
.ci-sub   { margin-bottom:2rem; font-size:.92rem; color:rgba(8,26,13,.5); transition:color .05s }
.ci-block { display:flex; flex-direction:column; gap:.95rem }
.ci-row   { display:flex; align-items:center; gap:.85rem }
.ci-icon  { width:36px; height:36px; border-radius:8px; flex-shrink:0; background:rgba(8,26,13,.06); border:1px solid rgba(8,26,13,.12); display:flex; align-items:center; justify-content:center; color:var(--lima-mid); transition:background .05s,border-color .05s,color .05s }
.ci-row span, .ci-row a { font-size:.84rem; color:rgba(8,26,13,.55); transition:color .05s }
.ci-row a:hover { color:var(--lima-mid) }

/* footer inside the sticky */
#footer {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(168,216,50,.12);
  padding: 3.5rem var(--gutter) 2rem;
  transition: border-color .05s;
}
.foot-inner { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem }
.foot-brand { display:flex; flex-direction:column; gap:.6rem }
.foot-tag   { font-family:var(--sans); font-style:italic; font-size:.84rem; color:rgba(8,26,13,.38); margin-top:.2rem; transition:color .05s }
.foot-address p { font-size:.78rem; color:rgba(8,26,13,.38); line-height:1.65; transition:color .05s }
.foot-contact { display:flex; flex-direction:column; gap:.55rem }
.foot-contact a { font-size:.78rem; color:rgba(8,26,13,.38); transition:color .2s }
.foot-contact a:hover { color:var(--lima-mid) }
.foot-copy-row { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; margin-top:.5rem; border-top:1px solid rgba(8,26,13,.1); transition:border-color .05s }
.foot-copy-row > span { font-size:.68rem; color:rgba(8,26,13,.3); transition:color .05s }
.foot-legal { display:flex; gap:1.4rem }
.foot-legal a { font-size:.68rem; color:rgba(8,26,13,.3); transition:color .2s }
.foot-legal a:hover { color:var(--lima-mid) }

/* Wizard — dark card stays dark always */
.wizard-card { background:var(--panel); border:1px solid var(--border2); border-radius:8px; overflow:hidden; box-shadow:0 20px 56px rgba(0,0,0,.28) }
.wiz-top { padding:1.6rem 2rem 1.2rem; border-bottom:1px solid var(--border) }
.wiz-title { font-family:var(--sans); font-size:1.2rem; font-weight:700; color:var(--white); margin-bottom:.25rem }
.wiz-sub   { font-size:.7rem; color:var(--muted2) }
.wiz-prog-bar  { height:2px; background:var(--border) }
.wiz-prog-fill { height:100%; background:var(--grad-btn); transition:width .45s cubic-bezier(.22,1,.36,1) }
.wiz-tabs { display:flex; border-bottom:1px solid var(--border) }
.wtab { flex:1; padding:.8rem .5rem; text-align:center; border-right:1px solid var(--border); cursor:default; transition:all .3s }
.wtab:last-child { border-right:none }
.wtn { display:block; font-family:var(--sans); font-size:1.2rem; font-weight:700; color:rgba(255,255,255,.07); line-height:1; margin-bottom:.2rem; transition:color .3s }
.wtl { font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); transition:color .3s }
.wtab.active .wtn, .wtab.active .wtl { color:var(--lima) }
.wtab.done   .wtn, .wtab.done   .wtl { color:rgba(168,216,50,.4) }
.wiz-body { padding:1.8rem 2rem 2rem }
.wstep { display:none } .wstep.active { display:block }
.wlabel { font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-bottom:1.1rem }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:1.6rem }
.opt  { padding:.95rem 1rem; border:1px solid var(--border); border-radius:5px; background:rgba(255,255,255,.02); cursor:pointer; display:flex; align-items:center; gap:.7rem; transition:border-color .2s,background .2s,transform .2s }
.opt:hover  { border-color:var(--border2); background:rgba(255,255,255,.04); transform:translateY(-1px) }
.opt.sel    { border-color:var(--lima); background:rgba(168,216,50,.1) }
.on { font-family:var(--sans); font-size:.9rem; font-weight:700; color:rgba(255,255,255,.1); min-width:24px; line-height:1; transition:color .2s }
.ot { font-size:.78rem; font-weight:500; color:rgba(255,255,255,.5); transition:color .2s }
.opt.sel .on { color:var(--lima) } .opt.sel .ot { color:var(--white) }
.fg { margin-bottom:.9rem }
.fg label { display:block; font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:.4rem }
.fg input, .fg select { width:100%; padding:.68rem .95rem; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:4px; font-family:var(--sans); font-size:.86rem; color:var(--white); outline:none; transition:border-color .2s,background .2s,box-shadow .2s }
.fg input::placeholder { color:rgba(255,255,255,.14) }
.fg select option { background:var(--card) }
.fg input:focus, .fg select:focus { border-color:var(--lima); background:rgba(168,216,50,.04); box-shadow:0 0 0 3px rgba(168,216,50,.1) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.wfoot { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--border) }
.wpct  { font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--muted2) }
.wbtns { display:flex; gap:.6rem }
.wiz-ok { display:none; text-align:center; padding:2.8rem 2rem }
.wiz-ok-icon { font-size:2.6rem; margin-bottom:.8rem }
.wiz-ok h3 { font-family:var(--sans); font-size:1.4rem; font-weight:700; color:var(--white); margin-bottom:.5rem }
.wiz-ok p  { font-size:.86rem; color:var(--muted) }


/* ═══════════════════════════════════
   HELPERS
═══════════════════════════════════ */
.section-label { font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--lima); margin-bottom:1rem; display:flex; align-items:center; gap:.8rem }
.section-label::before { content:''; display:inline-block; width:26px; height:1px; background:var(--grad-btn) }
section h2 { font-family:var(--sans); font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.06; letter-spacing:-.03em; color:var(--white) }
section h2 em { color:var(--lima); font-style:italic }
.section-intro { margin-bottom:3.5rem }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease }
.reveal.in { opacity:1; transform:none }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}


/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:960px){
  .nav-links,.nav-time{display:none}
  .hamburger{display:flex}
  .process-row{grid-template-columns:repeat(2,1fr)}
  .proc-step:nth-child(2){border-right:none}
  .proc-step:nth-child(3){border-top:1px solid var(--border)}
  .quote-wrap{grid-template-columns:1fr;gap:2rem}
  #quote-sec{height:auto}
  .quote-sticky{position:relative;height:auto;padding:clamp(4rem,9vw,7rem) 0;background-color:#0e2916 !important}
  .contact-outer{grid-template-columns:1fr}
  #cf-wrap{height:auto}
  .cf-sticky{position:relative;background-color:#f5f4f0 !important}
  #footer{background-color:#0a1f10 !important}
  .cf-spacer{display:none}
  .foot-inner{grid-template-columns:1fr 1fr}
  .hero-stats-inner{gap:2.5rem}
  .acc-trigger{padding:1.5rem var(--gutter)}
  .acc-body p{padding:.4rem var(--gutter) 2rem}
  .acc-title{font-size:clamp(1.2rem,4vw,1.6rem)}
  .fc-card{width:clamp(170px,34vw,230px);padding:1.2rem 1.3rem}
  .fc-wide{width:clamp(200px,40vw,270px)}
}
@media(max-width:860px){
  .sol-layout{grid-template-columns:1fr;padding:0}
  .sol-left{position:static;padding:clamp(3rem,7vw,5rem) var(--gutter) 2rem;max-width:100%}
  .sol-right{border-left:none;border-top:1px solid rgba(7,21,13,.1)}
  .tm-content,.tm-content-alt{grid-template-columns:1fr;gap:2.5rem}
  .tm-content-alt .tm-photo-wrap{order:-1}
  .tm-photo-wrap{justify-content:flex-start}
  .tm-mq-track{font-size:clamp(3rem,14vw,6rem)}
}
@media(max-width:640px){
  /* ── HERO ── */
  #hero-wrap { height:100vh }
  .hero-spacer { display:none }
  .hero-headline-block {
    right: var(--gutter);
    bottom: clamp(9rem,16vh,12rem);
  }
  .hero-h1 { font-size: clamp(2.6rem,12vw,3.8rem); line-height:1.04 }
  .hero-bottom-panel {
    opacity:1 !important; transform:translateY(0) !important;
    left:var(--gutter); right:var(--gutter);
    bottom: clamp(2.5rem,5vh,4rem);
    width:auto;
  }
  .hbp-sub { display:block }
  .hero-sub { font-size: clamp(.92rem,3.8vw,1.05rem) }

  /* ── PARALLAX DESAFÍOS — fullscreen on mobile ── */
  #desafios-wrap { height:auto }
  .dsc-sticky {
    position:relative; height:100svh; min-height:100vw;
    overflow:hidden;
  }
  .dsc-bg-img {
    position:absolute; inset:0;
    height:100%; width:100%;
  }
  .dsc-bg-img img {
    width:100%; height:100%; object-fit:cover;
    object-position:center center;
    transform:none !important;
  }
  .dsc-overlay { position:absolute }
  .dsc-spacer { height:0 }

  /* Cards — horizontal scroll gallery */
  .dsc-sticky { overflow:visible }
  .dsc-bg-img { overflow:hidden }
  .dsc-cards {
    position: relative; z-index: 10;
    display: flex;
    flex-direction: row;
    gap: .85rem;
    padding: 1.6rem var(--gutter) 1.8rem;
    background: var(--bg2);
    overflow-x: auto;
    overflow-y: visible;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
  }
  .dsc-cards::-webkit-scrollbar { display: none }

  .fc-card {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    /* show ~1.1 cards = peek of next */
    width: 76vw !important;
    min-width: 260px !important;
    max-width: 320px !important;
    flex-shrink: 0;
    scroll-snap-align: start;
    transform: none !important;
    opacity: 0;
    transition: opacity .45s cubic-bezier(.22,1,.36,1);
  }
  .fc-card.mob-in { opacity: 1 !important }
  /* Fallback */
  .fc-card:not(.mob-in) { animation: fcFallback 0s .6s forwards }
  @keyframes fcFallback { to { opacity: 1 } }

  /* Scroll dots indicator */
  .dsc-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 0 1.2rem;
    background: var(--bg2);
  }
  .dsc-scroll-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(168,216,50,.25);
    transition: background .3s, transform .3s;
  }
  .dsc-scroll-dot.active {
    background: var(--lima);
    transform: scale(1.4);
  }
  /* Desafíos intro text sizing */
  .dsc-h2 { font-size:clamp(2rem,9vw,3rem) }

  /* ── PROCESO ── */
  .process-row{grid-template-columns:1fr}
  .proc-step{border-right:none !important;border-bottom:1px solid var(--border) !important}
  .proc-step:last-child{border-bottom:none !important}

  /* ── FORMULARIO ── */
  .opts{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}

  /* ── FOOTER ── */
  .foot-inner{grid-template-columns:1fr}
  .hero-stats-inner{flex-wrap:wrap;gap:1.8rem}

  /* ── EQUIPO ── */
  .tm-photo{width:160px;height:200px}
  .tm-glow{width:190px;height:210px}



  /* ── SECTION LABEL ── */
  .section-label { font-size:.6rem }

  /* ── REVEAL ANIMATIONS — snappier on touch ── */
  .reveal {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .reveal.in { opacity:1; transform:none }
  .rd1{transition-delay:.08s}
  .rd2{transition-delay:.16s}
  .rd3{transition-delay:.24s}
  .rd4{transition-delay:.32s}

  /* ── PROC-STEP tap feedback ── */
  .proc-step { transition: background .2s }
  .proc-step:active { background:rgba(255,255,255,.04) }

  /* ── ACCORDION ── */
  .acc-trigger { padding:1.4rem var(--gutter) }
  .acc-title { font-size:clamp(1.1rem,4.5vw,1.5rem) }

  /* ── MARQUEE — slightly slower on mobile for readability ── */
  .mq-track { animation-duration:28s }

  /* ── SCROLL HINT ── */
  .hero-scroll-hint { right:1.4rem; bottom:2rem }
}


/* ═══════════════════════════════════
   COOKIE BANNER
═══════════════════════════════════ */
.ck-banner {
  position: fixed;
  bottom: clamp(1rem, 2.5vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2rem));
  width: min(680px, calc(100vw - 2rem));
  z-index: 9000;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s;
  opacity: 0;
}
.ck-banner.ck-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.ck-banner[hidden] { display: none }

.ck-inner {
  background: var(--panel);
  border: 1px solid rgba(168,216,50,.18);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(168,216,50,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Top row */
.ck-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}
.ck-icon { color: var(--lima); margin-top: .15rem; flex-shrink: 0 }
.ck-title { font-size: .92rem; font-weight: 700; color: var(--white); margin-bottom: .3rem }
.ck-sub { font-size: .78rem; color: var(--muted2); line-height: 1.65 }
.ck-sub a { color: var(--lima); text-decoration: none }
.ck-sub a:hover { text-decoration: underline }
.ck-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.3); padding: .2rem;
  transition: color .2s; flex-shrink: 0; margin-top: .1rem;
}
.ck-close:hover { color: var(--white) }

/* Toggles */
.ck-toggles {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 1.4rem;
}
.ck-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: background .2s;
}
.ck-toggle-row:last-child { border-bottom: none }
.ck-toggle-row:hover { background: rgba(255,255,255,.03) }
.ck-toggle-info { display: flex; flex-direction: column; gap: .2rem }
.ck-toggle-name { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8) }
.ck-toggle-desc { font-size: .72rem; color: var(--muted2); line-height: 1.5; max-width: 44ch }

/* Toggle switch */
.ck-toggle {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  cursor: pointer; transition: background .25s, border-color .25s;
  padding: 0;
}
.ck-toggle[aria-checked="true"] {
  background: var(--lima-mid);
  border-color: var(--lima);
}
.ck-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .25s;
  pointer-events: none;
}
.ck-toggle[aria-checked="true"] .ck-thumb {
  transform: translateX(18px);
  background: var(--white);
}
.ck-toggle--locked {
  background: rgba(168,216,50,.12);
  border-color: rgba(168,216,50,.2);
  cursor: default; pointer-events: none;
  width: auto; height: auto;
  padding: .25rem .7rem;
  display: flex; align-items: center;
}
.ck-locked-label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lima); white-space: nowrap }

/* Actions */
.ck-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap }
.ck-btn-primary {
  padding: .65rem 1.3rem; border-radius: 100px;
  background: var(--grad-btn); border: none; cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  color: var(--ink); letter-spacing: .02em;
  transition: filter .2s, transform .15s;
}
.ck-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px) }
.ck-btn-secondary {
  padding: .65rem 1.2rem; border-radius: 100px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  color: rgba(255,255,255,.55);
  transition: border-color .2s, color .2s, background .2s;
}
.ck-btn-secondary:hover { border-color: rgba(255,255,255,.25); color: var(--white); background: rgba(255,255,255,.08) }

@media(max-width:480px) {
  .ck-top { grid-template-columns: auto 1fr auto }
  .ck-actions { flex-direction: column }
  .ck-btn-primary, .ck-btn-secondary { width: 100%; text-align: center }
}

/* ── FOOTER always rendered on deep green ────────────────── */
/* The cf-sticky scroll transition ends at #0a1f10 when the
   user reaches the footer. This rule ensures the footer text
   colors are always white-spectrum regardless of JS timing. */
#footer .foot-inner,
#footer .foot-copy-row { position: relative; z-index: 2 }

/* Force footer text to white when bg is dark (overrides cfTick inline) */
#footer .nav-wordmark { color: var(--white) !important }
#footer .foot-tag,
#footer .foot-address p,
#footer .foot-contact a,
#footer .foot-copy-row > span,
#footer .foot-legal a { color: rgba(255,255,255,.32) !important }
#footer .foot-contact a:hover,
#footer .foot-legal a:hover { color: var(--lima) !important }
#footer .foot-copy-row { border-top-color: rgba(255,255,255,.1) !important }
#footer { border-top-color: rgba(168,216,50,.15) !important }

/* Guarantee the sticky ends at deep green regardless of scroll position */
#cf-wrap::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 0;
}

/* Scroll hint dots — desktop: hidden */
.dsc-scroll-hint { display: none }
/* ── Brand logo lockup (isotipo + wordmark IvyEpic) ── */
.nav-logo-full { height: 48px; width: auto; display: block }
.nav-logo-full--footer { height: 56px }
@media(max-width:640px){
  .nav-logo-full { height: 40px }
  .nav-logo-full--footer { height: 48px }
}

/* ── HERO HOME con foto (pantalla LED) + texto que aparece al hacer scroll ── */
.home-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.home-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,26,13,.4) 0%,rgba(8,26,13,.12) 32%,rgba(8,26,13,.6) 76%,rgba(8,26,13,.93) 100%)}
/* la foto es el fondo: ocultamos el degradado y las partículas */
#heroSticky .hero-bg, #heroSticky .hero-particles{display:none}
/* el titular arranca oculto y aparece con el scroll (lo controla heroTick); en móvil siempre visible */
.hero-headline-block{opacity:0}
.hero-headline-block .hero-h1{text-shadow:0 2px 28px rgba(0,0,0,.55)}
.hero-sub{text-shadow:0 1px 16px rgba(0,0,0,.6)}
@media(max-width:640px){ .hero-headline-block{opacity:1} }

/* ── Hero ahora es solo la imagen (sin recorrido largo) ── */
#hero-wrap{height:100vh}
.hero-spacer{display:none}

/* ── STATEMENT: el texto se ilumina con el scroll ── */
.statement{position:relative;height:220vh;background:var(--bg)}
.statement-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 var(--gutter)}
.statement-text{max-width:1000px;margin:0 auto;font-family:var(--sans);font-weight:300;font-size:clamp(1.9rem,5vw,4.2rem);line-height:1.22;letter-spacing:-.02em}
.statement-text .w{color:rgba(255,255,255,var(--o,.12));transition:color .12s linear}
.statement-text .w.lima{color:rgba(168,216,50,var(--o,.12))}
@media(max-width:640px){ .statement{height:200vh} .statement-text{font-size:clamp(1.6rem,7.5vw,2.5rem)} }
@media(prefers-reduced-motion:reduce){
  .statement{height:auto}
  .statement-sticky{position:static;height:auto;padding:clamp(4rem,10vw,7rem) var(--gutter)}
  .statement-text .w{color:#fff!important}
  .statement-text .w.lima{color:var(--lima)!important}
}

/* ── Footer mejorado (home) ── */
.foot-desc{margin-top:.7rem;max-width:36ch;font-size:.78rem;line-height:1.7}
.foot-col{display:flex;flex-direction:column;gap:.55rem}
.foot-col-t{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem}
.foot-col a{font-size:.8rem;transition:color .2s;width:fit-content}
.foot-col .foot-address{margin-bottom:.2rem}
.foot-col .foot-address p{font-size:.8rem;line-height:1.6}
#footer .foot-desc{color:rgba(255,255,255,.4)!important}
#footer .foot-col-t{color:var(--lima)!important;opacity:.85}
#footer .foot-col a{color:rgba(255,255,255,.6)!important}
#footer .foot-col a:hover{color:var(--lima)!important}
#footer .foot-col .foot-address p{color:rgba(255,255,255,.42)!important}


/* ═══════════════════════════════════════════════════════════
   CAPA MÓVIL INTERACTIVA · mobile-first  (2026-07)
   Barra de progreso · barra de acción · feedback táctil · safe-area
═══════════════════════════════════════════════════════════ */

/* ── Barra de progreso de lectura (todos los tamaños) ── */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#a8d832,#4a8c1a);
  z-index:9500; pointer-events:none;
  will-change:transform;
  transition:transform .08s linear;
}

/* ── Barra de acción móvil (oculta en desktop) ── */
.m-actionbar{ display:none }

@media(max-width:760px){
  .m-actionbar{
    display:flex; gap:.6rem;
    position:fixed; left:0; right:0; bottom:0; z-index:8000;
    padding:.7rem clamp(.9rem,4vw,1.3rem);
    padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(8,26,13,.72);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid rgba(168,216,50,.18);
    transform:translateY(130%);
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  .m-actionbar.show{ transform:translateY(0) }

  .mab-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:52px; border-radius:14px;
    font-family:inherit; font-size:.95rem; font-weight:600; letter-spacing:.01em;
    text-decoration:none; cursor:pointer;
    transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mab-btn:active{ transform:scale(.955) }

  .mab-wa{
    flex:0 0 auto; width:52px; padding:0;
    color:#eafcd6; background:rgba(37,211,102,.16);
    border:1px solid rgba(37,211,102,.45);
  }
  .mab-wa span{ display:none }               /* solo icono para ahorrar espacio */
  .mab-wa:active{ background:rgba(37,211,102,.28) }

  .mab-cta{
    color:#08210d;
    background:linear-gradient(135deg,#c5ee4e 0%,#9ecb2d 45%,#6fae1e 100%);
    box-shadow:0 8px 26px rgba(120,180,40,.4);
  }

  /* El banner de cookies sube para no chocar con la barra */
  body.actionbar-on .ck-banner.ck-visible{
    bottom:calc(64px + env(safe-area-inset-bottom));
  }
}

/* Pantallas muy angostas: mostrar también el texto de WhatsApp */
@media(max-width:380px){
  .mab-cta{ font-size:.88rem }
}

/* ── Feedback táctil general (solo dispositivos táctiles) ── */
@media(hover:none){
  .cta-btn, .ghost-btn, .nav-logo, .mob-cta-link,
  .acc-trigger, .proc-step, .fc-card,
  .foot-col a, .ci-item, .opt, .ck-btn-primary, .ck-btn-secondary{
    -webkit-tap-highlight-color:transparent;
  }
  .cta-btn:active, .ck-btn-primary:active, .mob-cta-link:active{ transform:scale(.96) }
  .fc-card:active{ transform:scale(.98) }
  .acc-trigger:active{ background:rgba(255,255,255,.03) }
  .foot-col a:active{ opacity:.6 }
}

/* ── Evitar el zoom automático de iOS al enfocar inputs ── */
@media(max-width:760px){
  input, select, textarea{ font-size:16px !important }
  /* Objetivos táctiles cómodos */
  .nav-link, .foot-col a, .mob-overlay a{ min-height:44px; display:flex; align-items:center }
  .mob-overlay a{ justify-content:center }
  /* El banner de cookies respeta el notch inferior */
  .ck-banner{ bottom:calc(env(safe-area-inset-bottom) + .8rem) }
}

/* ── Respeta la preferencia de menos movimiento ── */
@media(prefers-reduced-motion:reduce){
  .scroll-progress{ transition:none }
  .m-actionbar{ transition:none }
}


/* ═══════════════════════════════════════════════════════════
   AJUSTES MÓVILES · header, menú, Desafíos  (2026-07 · fix)
═══════════════════════════════════════════════════════════ */

/* El menú desplegable cubre TODO (incluido el nav) → una sola X, cierra bien */
.mob-overlay{ z-index:9600 }

@media(max-width:760px){
  /* Header: logo a la izquierda, menú a la derecha, sin el botón verde
     (el CTA vive en la barra de acción inferior) */
  #nav{ justify-content:space-between }
  #nav .cta-btn{ display:none !important }
  .nav-aside{ position:static; gap:0 }
  /* Hero: enfocar el recorte en el logo de ARTIS de la pantalla LED */
  .home-hero-photo{ object-position:31% center }
}

@media(max-width:640px){
  /* Desafíos: la imagen del electrocardiograma es el fondo y las cards
     flotan encima → sección integrada, sin costura entre bloques */
  #desafios-wrap{ background:#0b2114 }
  .dsc-sticky{ height:auto !important; min-height:0 !important; overflow:hidden !important }
  .dsc-bg-img{ position:absolute !important; inset:0 !important;
               height:100% !important; width:100% !important; overflow:hidden }
  .dsc-bg-img img{ height:100% !important; width:100% !important;
                   object-fit:cover; object-position:center }
  .dsc-overlay{ position:absolute !important; inset:0; z-index:1;
    background:linear-gradient(180deg,
      rgba(9,28,17,.74) 0%, rgba(9,28,17,.40) 45%, rgba(9,28,17,.82) 100%) }
  .dsc-cards{ background:transparent !important }
  .dsc-scroll-hint{ background:transparent !important }
}


/* ═══════════════════════════════════════════════════════════
   MENÚ MÓVIL REDISEÑADO  (2026-07)
═══════════════════════════════════════════════════════════ */
.mob-overlay{
  z-index:9600;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(168,216,50,.10) 0%, rgba(168,216,50,0) 55%),
    var(--bg);
  align-items:stretch; justify-content:flex-start;
  padding:1.1rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom));
  gap:0;
}
/* Cabecera del menú: logo + cerrar */
.mob-head{ display:flex; align-items:center; justify-content:space-between; min-height:44px }
.mob-logo img{ height:38px; width:auto; display:block }
.mob-x{
  position:static; padding:.5rem; margin:-.5rem -.4rem -.5rem 0;
  color:var(--white); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:10px;
  -webkit-tap-highlight-color:transparent; transition:background .2s, transform .15s;
}
.mob-x:active{ transform:scale(.9); background:rgba(255,255,255,.06) }
/* Lista de navegación */
.mob-nav{ display:flex; flex-direction:column; margin-top:auto; margin-bottom:auto }
.mob-nav a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--sans);
  font-weight:500; font-size:clamp(2rem,9.5vw,2.9rem); line-height:1.2;
  color:var(--white); letter-spacing:-.01em;
  padding:.35rem 0; border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-tap-highlight-color:transparent;
  /* estado inicial para la animación de entrada */
  opacity:0; transform:translateY(22px);
}
.mob-nav a:first-child{ border-top:1px solid rgba(255,255,255,.07) }
.mob-num{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; color:var(--lima); transform:translateY(-.5em);
}
.mob-nav a:active{ color:var(--lima) }
/* Entrada escalonada al abrir */
.mob-overlay.open .mob-nav a{
  opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.mob-overlay.open .mob-nav a:nth-child(1){ transition-delay:.10s }
.mob-overlay.open .mob-nav a:nth-child(2){ transition-delay:.17s }
.mob-overlay.open .mob-nav a:nth-child(3){ transition-delay:.24s }
.mob-overlay.open .mob-nav a:nth-child(4){ transition-delay:.31s }
/* Pie del menú */
.mob-foot{ display:flex; flex-direction:column; gap:1.1rem;
  opacity:0; transform:translateY(16px) }
.mob-overlay.open .mob-foot{
  opacity:1; transform:none;
  transition:opacity .55s ease .4s, transform .55s ease .4s;
}
.mob-foot .mob-cta-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:54px; border-radius:14px;
  font-family:var(--sans); font-weight:600; font-size:1rem; color:#08210d !important;
  background:linear-gradient(135deg,#c5ee4e 0%,#9ecb2d 45%,#6fae1e 100%);
  box-shadow:0 10px 30px rgba(120,180,40,.32);
}
.mob-foot .mob-cta-link:active{ transform:scale(.97) }
.mob-foot-links{ display:flex; gap:1.6rem; justify-content:center }
.mob-foot-links a{
  font-family:var(--sans); font-size:.82rem; font-weight:400;
  letter-spacing:.02em; color:rgba(255,255,255,.55) !important;
}
.mob-foot-links a:active{ color:var(--lima) !important }
@media(prefers-reduced-motion:reduce){
  .mob-nav a, .mob-foot{ opacity:1 !important; transform:none !important; transition:none !important }
}


/* ═══════════════════════════════════════════════════════════
   ANIMACIÓN DE CARGA (preloader)
═══════════════════════════════════════════════════════════ */
.preloader{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:#081a0d;
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none }
.pre-inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem }
.pre-logo{
  width:72px; height:72px; display:block;
  animation:prefloat 1.6s ease-in-out infinite;
}
@keyframes prefloat{
  0%,100%{ transform:translateY(0) scale(1); opacity:.9 }
  50%{ transform:translateY(-6px) scale(1.04); opacity:1 }
}
.pre-bar{
  width:132px; height:3px; border-radius:3px;
  background:rgba(168,216,50,.18); overflow:hidden;
}
.pre-bar span{
  display:block; width:40%; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#a8d832,#4a8c1a);
  animation:preload 1.15s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes preload{
  0%{ transform:translateX(-120%) }
  100%{ transform:translateX(360%) }
}
@media(prefers-reduced-motion:reduce){
  .pre-logo,.pre-bar span{ animation:none }
}