/* ═══════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --obsidian:#0A0A0A;
  --obsidian-2:#0F0F0E;
  --bone:#F2EEE5;
  --bone-dim:#B4B2A9;
  --g900:#2C2C2A;
  --g700:#444441;
  --g500:#6B6760;
  --g300:#B4B2A9;
  --chalk:#D8D3C6;
  --rule:#181816;
  --rule-mid:#232321;
  --font-sans:'Poppins',sans-serif;
  --font-serif:'Lora',Georgia,serif;
  --nav-h:72px;
  --max-w:1280px;
  --px:clamp(24px,5vw,80px);
  --radius-sm:2px;
  --radius-md:6px;
  --radius-pill:100px;
}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body{background:var(--obsidian);color:var(--bone);font-family:var(--font-sans);overflow-x:clip;cursor:none}
a{text-decoration:none;color:inherit}

/* ═══════════════════════════════════
   SCROLL PROGRESS
═══════════════════════════════════ */
#sp{
  position:fixed;top:0;left:0;height:1px;width:0%;z-index:9999;
  background:linear-gradient(90deg,var(--g700),var(--bone),var(--g700));
  transition:width .04s linear;
  pointer-events:none;
}

/* ═══════════════════════════════════
   CURSOR
═══════════════════════════════════ */
#cur{
  position:fixed;width:6px;height:6px;background:var(--bone);border-radius:50%;
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .3s,height .3s,background .3s;
  mix-blend-mode:difference;
}
#ring{
  position:fixed;width:32px;height:32px;border:0.5px solid rgba(242,238,229,.28);
  border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);
  transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),
    border-color .3s,border-radius .4s;
}
#cur.h{width:10px;height:10px}
#ring.h{width:52px;height:52px;border-color:rgba(242,238,229,.5)}
#ring.sq{border-radius:3px;width:58px;height:26px}

/* ═══════════════════════════════════
   GRAIN
═══════════════════════════════════ */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  animation:grain .5s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}
  20%{transform:translate(2%,3%)}30%{transform:translate(-1%,2%)}
  40%{transform:translate(3%,-1%)}50%{transform:translate(-2%,1%)}
  60%{transform:translate(1%,-3%)}70%{transform:translate(-3%,2%)}
  80%{transform:translate(2%,-2%)}90%{transform:translate(-1%,3%)}
}

/* ═══════════════════════════════════
   GRID LINES
═══════════════════════════════════ */
.gl{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  display:grid;grid-template-columns:var(--px) 1fr 1fr 1fr 1fr var(--px);
}
.gl span{border-right:.5px solid var(--rule);opacity:0;animation:fi 2s ease forwards}
.gl span:first-child{border-left:.5px solid var(--rule)}
.gl span:nth-child(1){animation-delay:1s}.gl span:nth-child(2){animation-delay:1.1s}
.gl span:nth-child(3){animation-delay:1.2s}.gl span:nth-child(4){animation-delay:1.3s}
.gl span:nth-child(5){animation-delay:1.4s}.gl span:nth-child(6){animation-delay:1.5s}

/* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--px);
  border: .5px solid transparent;
  will-change: transform, border-radius, background, box-shadow;
}
nav .nl { transition: font-size 0.8s ease; }
nav .ncb { transition: border-radius 0.8s cubic-bezier(.16,1,.3,1), padding 0.8s ease, font-size 0.6s ease; }
nav.floating .ncb { padding: 7px 16px; font-size: 12px; border-radius: 100px; }

.nl{font-family:var(--font-sans);font-weight:700;font-size:20px;flex-shrink:0;white-space:nowrap;
  letter-spacing:-.04em;color:var(--bone);opacity:0;
  animation:fd .6s ease forwards .1s;text-decoration:none}
.nr{display:flex;align-items:center;gap:36px;flex-shrink:0;white-space:nowrap;opacity:0;animation:fd .6s ease forwards .2s;justify-content:center;}
.nk{font-family:var(--font-sans);font-weight:400;font-size:13px;white-space:nowrap;
  color:var(--g300);transition:color .25s;position:relative}
.nk::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:.5px;
  background:var(--bone);transition:width .35s cubic-bezier(.16,1,.3,1)}
.nk:hover{color:var(--bone)}.nk:hover::after{width:100%}
.ncb{font-family:var(--font-sans);font-weight:500;font-size:13px;white-space:nowrap;
  color:var(--obsidian);background:var(--bone);padding:9px 20px;
  border-radius:2px;display:inline-block;transition:opacity .2s,transform .2s}
.ncb:hover{opacity:.88;transform:translateY(-1px)}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero{
  position:relative;
  overflow:hidden;min-height:100vh;display:flex;align-items:center;
  padding:var(--nav-h) var(--px) 0;z-index:2;overflow:hidden;
}
.hi{
  width:100%;max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:1fr 340px;gap:80px;
  align-items:center;padding:80px 0;
}

/* eyebrow */
.ey{display:flex;align-items:center;gap:12px;margin-bottom:44px;
  opacity:0;animation:fu .7s ease forwards .35s}
.eyd{width:5px;height:5px;border-radius:50%;background:var(--bone);
  opacity:.35;flex-shrink:0;animation:pulse 3s ease-in-out infinite 2.5s}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.5)}}
.eyt{font-family:var(--font-serif);font-style:italic;font-size:14px;
  color:var(--g500);letter-spacing:.01em}

/* headline */
.hl{font-family:var(--font-sans);font-weight:300;
  font-size:clamp(48px,6.5vw,88px);line-height:.95;letter-spacing:-.025em;margin-bottom:40px}
.hr{display:block;overflow:visible;padding-bottom:0.18em}
.hr span{display:block;transform:translateY(110%);
  animation:su 1s cubic-bezier(.16,1,.3,1) forwards}
.hr:nth-child(1) span{animation-delay:.5s;color:var(--bone)}
.hr:nth-child(2) span{animation-delay:.68s;color:var(--g700)}

/* divider */
.hd{display:flex;align-items:center;gap:16px;margin-bottom:32px;
  opacity:0;animation:fu .6s ease forwards .95s}
.hdl{height:.5px;background:linear-gradient(90deg,var(--chalk),transparent);
  width:0;animation:xl .8s ease forwards 1.1s}
@keyframes xl{to{width:48px}}
.hdt{font-family:var(--font-sans);font-weight:400;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g500)}

/* subheadline */

.sh strong{color:var(--bone);font-weight:500}

/* cta */
.cw{display:flex;flex-direction:column;gap:20px;
  opacity:0;animation:fu .7s ease forwards 1.15s}
.bp{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;
  font-family:var(--font-sans);font-weight:500;font-size:15px;letter-spacing:-.01em;
  color:var(--obsidian);background:var(--bone);padding:18px 28px;border-radius:2px;
  border:none;cursor:none;width:fit-content;min-width:unset;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.16,1,.3,1);will-change:transform;
}
.bp::before{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-20deg);
}
.bp:hover::before{animation:sh .6s ease forwards}
@keyframes sh{from{left:-100%}to{left:150%}}
.bt{position:relative;z-index:1}
.bi{
  position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  background:rgba(10,10,10,.1);display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:transform .35s cubic-bezier(.16,1,.3,1);flex-shrink:0;
}
.bp:hover .bi{transform:translateX(5px)}
.cn{font-family:var(--font-sans);font-weight:300;font-size:12px;
  color:var(--g500);padding-left:2px}
.cn span{color:var(--g300)}

/* "Sin perder" — línea de valor bajo el titular */
.hero-noperder {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--g500);
  line-height: 1.65;
  margin-bottom: 48px;
  max-width: 480px;
  letter-spacing: -.01em;
}
.hero-br { display: inline; }
@media(max-width:640px){ .hero-br { display: none; } }

/* ═══════════════════════════════════
   FRANJA DE MÉTRICAS
═══════════════════════════════════ */
.hero-metrics-strip {
  background: var(--obsidian-2);
  border-top: .5px solid var(--rule-mid);
  border-bottom: .5px solid var(--rule-mid);
  position: relative;
  z-index: 2;
}
.hms-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.hms-item {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: background .25s ease;
  border-right: .5px solid var(--rule-mid);
}
.hms-item:last-child { border-right: none; }
.hms-item:hover { background: rgba(242,238,229,.018); }
.hms-val {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 3.8vw, 56px);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--bone);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.hms-unit {
  font-size: .4em;
  color: var(--g500);
  font-weight: 300;
  letter-spacing: 0;
}
.hms-desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--g500);
  line-height: 1.45;
  max-width: 180px;
}

@media(max-width:900px){
  .hms-inner { grid-template-columns: 1fr 1fr; }
  .hms-item { padding: 28px 24px; border-right: none; border-bottom: .5px solid var(--rule-mid); }
  .hms-item:nth-child(odd) { border-right: .5px solid var(--rule-mid); }
  .hms-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media(max-width:480px){
  .hms-val { font-size: clamp(28px, 9vw, 44px); }
}

/* ═══════════════════════════════════
   STATS CARD
═══════════════════════════════════ */
.hr2{opacity:0;animation:fu .8s ease forwards 1.25s}
.sc2{
  position:relative;border:.5px solid var(--rule-mid);
  border-radius:var(--radius-md);overflow:visible;background:var(--obsidian-2);
}
.sc2::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(242,238,229,.1),transparent);z-index:1;
}

/* corner marks */
.cm{position:absolute;width:10px;height:10px;z-index:2;opacity:0;animation:fi .5s ease forwards}
.cm::before,.cm::after{content:'';position:absolute;background:var(--chalk)}
.cm::before{width:.5px;height:100%}.cm::after{width:100%;height:.5px}
.tl{top:-4px;left:-4px;animation-delay:1.6s}
.tr{top:-4px;right:-4px;animation-delay:1.7s}
.bl{bottom:-4px;left:-4px;animation-delay:1.8s}
.br2{bottom:-4px;right:-4px;animation-delay:1.9s}
.tr::before{right:0}.tr::after{right:0}
.bl::before{bottom:0}.bl::after{bottom:0}
.br2::before{right:0;bottom:0}.br2::after{right:0;bottom:0}

/* stat items */
.si{
  padding:26px 28px;border-bottom:.5px solid var(--rule-mid);
  position:relative;overflow:hidden;transition:background .35s;
}
.si:last-child{border-bottom:none}
.si::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1.5px;
  background:var(--bone);transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.si:hover::before{transform:scaleY(1)}
.si::after{
  content:attr(data-w);position:absolute;right:-6px;bottom:-10px;
  font-family:var(--font-sans);font-weight:700;font-size:68px;
  letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:.5px var(--rule-mid);
  line-height:1;opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s cubic-bezier(.16,1,.3,1),
    -webkit-text-stroke .4s;
  pointer-events:none;user-select:none;
}
.si:hover{background:rgba(242,238,229,.018)}
.si:hover::after{opacity:1;transform:translateY(0);
  -webkit-text-stroke:.5px rgba(242,238,229,.055)}
.sl{font-family:var(--font-sans);font-weight:400;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g500);
  margin-bottom:8px;display:block}
.sv{font-family:var(--font-sans);font-weight:300;font-size:40px;
  letter-spacing:-.04em;line-height:1;color:var(--bone);
  display:block;margin-bottom:5px;position:relative;z-index:1}
.sd{font-family:var(--font-sans);font-weight:300;font-size:11px;
  color:var(--g500);line-height:1.45;display:block;position:relative;z-index:1}

/* ═══════════════════════════════════
   SCROLL INDICATOR
═══════════════════════════════════ */
.sci{
  position:absolute;bottom:36px;left:var(--px);
  display:flex;align-items:center;gap:14px;z-index:2;
  opacity:0;animation:fi .8s ease forwards 1.8s;
}
.scl{width:40px;height:.5px;background:var(--rule-mid);position:relative;overflow:hidden}
.scl::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:var(--chalk);animation:sp 2.8s ease-in-out infinite 2.2s;
}
@keyframes sp{0%{left:-100%}45%{left:100%}100%{left:100%}}
.sct{font-family:var(--font-sans);font-weight:300;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--g700)}

/* deco */
.db{
  position:absolute;right:var(--px);bottom:-20px;
  font-family:var(--font-sans);font-weight:700;
  font-size:clamp(160px,22vw,300px);letter-spacing:-.06em;line-height:.85;
  color:transparent;-webkit-text-stroke:.5px var(--rule-mid);
  pointer-events:none;user-select:none;z-index:0;
  opacity:0;animation:fi 1.6s ease forwards 1.5s;will-change:transform;
}

/* ═══════════════════════════════════
   KEYFRAMES
═══════════════════════════════════ */
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fd{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes su{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ═══════════════════════════════════
   RESPONSIVE — MOBILE FIRST COMPLETO
═══════════════════════════════════ */

/* ── Hamburger button (oculto en desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px -10px -10px 0;
  z-index: 110;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--bone);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile drawer ── */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,10,10,.97);
  z-index: 105;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.nav-drawer.open {
  opacity: 1;
  pointer-events: all;
}
.nav-drawer-link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -.03em;
  color: var(--g500);
  text-decoration: none;
  padding: 16px 32px;
  display: block;
  width: 100%;
  text-align: center;
  transition: color .25s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-drawer-link:hover, .nav-drawer-link:active { color: var(--bone); }
.nav-drawer-cta {
  margin-top: 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--obsidian);
  background: var(--bone);
  padding: 16px 36px;
  border-radius: 2px;
  text-decoration: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════
   1024px
════════════ */
@media(max-width:1024px){
  .hi { grid-template-columns: 1fr; gap: 56px; }
  .hr2 { max-width: 500px; }
  .sc2 { display: grid; grid-template-columns: 1fr 1fr; }
  .si:nth-child(odd) { border-right: .5px solid var(--rule-mid); }
  .si:nth-child(5) { border-bottom: none; }
  .db { display: none; }

  /* Proceso: sidebar sticky → tabs horizontales */
  .pr-body {
    grid-template-columns: 1fr;
    padding: 0 0 80px;
  }
  .pr-sidebar {
    position: static;
    padding: 24px clamp(24px,5vw,80px) 0;
  }
  .pr-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pr-nav::-webkit-scrollbar { display: none; }
  .pr-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
  }
  .pr-nav-item.active {
    border-left: none;
    border-bottom-color: var(--chalk);
  }
  .pr-nav-item-num { display: none; }
  .pr-progress { display: none; }
  .pr-content { padding: 24px clamp(24px,5vw,80px) 0; }
}

/* ════════════
   768px
════════════ */
@media(max-width:768px){
  .ft-top-inner { grid-template-columns: 1fr; gap: 48px; }
  .ft-info-block { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gar-pillars { flex-direction: column; gap: 20px; }
  .gar-pillar { flex-direction: row; gap: 16px; padding: 0; }
  .gar-pillar-sep { display: none; }
  .tech-grid { grid-template-columns: 1fr 1fr; }
  .tech-pos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════
   640px  (mobile principal)
════════════ */
@media(max-width:640px){
  :root { --nav-h: 60px; --px: 20px; }

  /* Nav */
  .nr { display: none; }
  .ncb { display: none; }
  .nav-hamburger { display: flex; }
  .nav-drawer { display: flex; }

  /* Hero */
  .hi { padding: 48px 0 72px; gap: 40px; }
  .bp { width: 100%; justify-content: space-between; }
  .sc2 { grid-template-columns: 1fr; }
  .si:nth-child(odd) { border-right: none; }
  .si:nth-child(3) { border-bottom: .5px solid var(--rule-mid); }
  .migration-tags { gap: 6px; }
  .mtag { font-size: 11px; padding: 4px 10px; }

  /* Casos */
  .cases-header { flex-direction: column; align-items: flex-start; gap: 16px; padding: 56px var(--px) 32px; }
  .cases-count { font-size: 12px; }
  .case-card { width: 240px; height: 320px; }

  /* Heridas */
  .hd-section { padding: 80px var(--px); }
  .hd-header { margin-bottom: 48px; }
  .hd-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .hd-chart-wrap { height: 160px; }

  /* Transformación */
  .tr-section { padding: 80px var(--px); }
  .tr-grid { grid-template-columns: 1fr !important; }
  .tr-header { margin-bottom: 48px; }
  .tr-col:first-child { border-right: none; border-bottom: .5px solid rgba(242,238,229,.06); padding-bottom: 48px; }
  .tr-col { padding: 48px 0; }
  .tr-section::before { display: none; }

  /* Proceso */
  .pr-section { padding: 0; }
  .pr-body { padding: 0 0 64px; }
  .pr-sidebar { padding: 20px var(--px) 0; }
  .pr-nav { gap: 2px; }
  .pr-nav-item { font-size: 11px; padding: 6px 12px; }
  .pr-content { padding: 20px var(--px) 0; }
  .pr-step { flex-direction: column !important; gap: 24px; }
  .pr-graphic { min-height: 200px; }

  /* Garantía */
  .gar-section { padding: 80px var(--px) 100px; text-align: left; }
  .gar-eyebrow { justify-content: flex-start; }
  .gar-pillars { flex-direction: row; gap: 0; justify-content: space-between; }
  .gar-pillar { flex-direction: column; align-items: center; gap: 8px; padding: 0 8px; flex: 1; text-align: center; }
  .gar-pillar-sep { display: block; width: .5px; height: 40px; align-self: center; }
  .gar-pillar-text { font-size: 11px; white-space: normal; }
  .gar-cta { width: 100%; justify-content: center; }
  .gar-bg-word { font-size: 28vw; bottom: -20px; }

  /* Tech */
  .tech-section { padding: 80px var(--px); }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-pos-grid { grid-template-columns: 1fr 1fr; }
  .tech-card { padding: 18px 20px; }
  .tech-note { align-items: flex-start; gap: 8px; }

  /* FAQ */
  .faq-section { padding: 80px var(--px); }
  .faq-q { font-size: 14px; padding: 18px 0; }

  /* Footer */
  .ft-top { padding: 64px var(--px) 48px; }
  .ft-top-inner { grid-template-columns: 1fr; gap: 40px; }
  .ft-info-block { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ft-cta-title { font-size: clamp(28px, 8vw, 40px); }
  .ft-cta-btn { width: 100%; justify-content: center; }
  .ft-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px var(--px); }
  .ft-wordmark { font-size: 18vw; }

  /* Decorativos */
  .gl { display: none; }
  #cur, #ring { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
  .sci { display: none; }
}

/* ════════════
   375px
════════════ */
@media(max-width:375px){
  .ft-info-block { grid-template-columns: 1fr; }
  .tech-pos-grid { grid-template-columns: 1fr; }
  .gar-cta-text { font-size: 13px; }
  .pr-nav-item { font-size: 10px; padding: 5px 9px; }
  .case-card { width: 200px; height: 280px; }
}



.spb-inner{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border:.5px solid rgba(242,238,229,.1);
  border-top:none;
  border-radius:0 0 3px 3px;
  background:rgba(242,238,229,.03);
  transition:border-color .3s,background .3s;
}
.spb-inner:hover{border-color:rgba(242,238,229,.2);background:rgba(242,238,229,.06)}
.spb-icon{width:26px;height:26px;flex-shrink:0;border-radius:2px}
.spb-text{display:flex;flex-direction:column;gap:2px}
.spb-top{font-family:var(--font-sans);font-weight:300;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--g500);line-height:1}
.spb-mid{font-family:var(--font-sans);font-weight:500;font-size:12px;
  color:var(--bone);line-height:1.2}



/* ── Shopify Partner Badge ── */
.spb{margin-top:12px;opacity:0;animation:fu .7s ease forwards 1.4s}
.spb-inner{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;width:100%;
  border:.5px solid rgba(242,238,229,.12);
  border-radius:3px;
  background:rgba(242,238,229,.04);
  transition:border-color .3s,background .3s;
}
.spb-inner:hover{border-color:rgba(242,238,229,.22);background:rgba(242,238,229,.07)}
.spb-icon-wrap{
  width:32px;height:32px;flex-shrink:0;
  background:#F2EEE5;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  padding:4px;
}
.spb-logo{width:100%;height:100%;object-fit:contain;display:block}
.spb-text{display:flex;flex-direction:column;gap:2px}
.spb-top{font-family:var(--font-sans);font-weight:300;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--g500);line-height:1}
.spb-mid{font-family:var(--font-sans);font-weight:500;font-size:13px;
  color:var(--bone);line-height:1.2;letter-spacing:-.01em}







/* ═══════════════════════════════════
   CASES CAROUSEL
═══════════════════════════════════ */
.cases-section {
  position: relative;
  z-index: 2;
  background: #0A0A0A;
  overflow: hidden;
}

.cases-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 100px var(--px) 64px;
}

.cases-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--g500);
  margin-bottom: 8px;
  display: block;
}

.cases-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: -.02em;
  color: var(--bone);
  line-height: 1;
}

.cases-count {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--g500);
  padding-bottom: 4px;
}

/* Wrapper — clip sin cortar border-radius */
.cases-track-wrap {
  position: relative;
  overflow: hidden;
  padding: 0 0 64px 0;
  cursor: grab;
  user-select: none;
}

.cases-track-wrap:active { cursor: grabbing; }

/* Fade derecho */
.cases-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100px;
  background: linear-gradient(-90deg, var(--obsidian), transparent);
  z-index: 2;
  pointer-events: none;
}

/* Track — flex sin gap, posicionado por JS */
.cases-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  gap: 12px;
  padding-left: var(--px);
}

/* Tarjeta */
.case-card {
  flex-shrink: 0;
  width: 300px;
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--g900);
  position: relative;
}

.case-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px;
}


@media (max-width: 640px) {
  .cases-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 56px var(--px) 32px;
  }
  .cases-count {
    font-size: 12px;
  }
}

.hl-serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
}



/* ── Constellation background ── */
#constellation {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  animation: fi 2s ease forwards 0.4s;
}

/* ── Migration tags ── */
.migration-wrap {
  margin-bottom: 52px;
  opacity: 0;
  animation: fu .7s ease forwards 1.05s;
}

.migration-intro {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--g300);
  margin-bottom: 20px;
}

.migration-intro strong {
  color: var(--bone);
  font-weight: 500;
}

.migration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: var(--g300);
  background: rgba(242,238,229,0.05);
  border: 0.5px solid rgba(242,238,229,0.12);
  border-radius: 100px;
  padding: 5px 12px;
  letter-spacing: 0.01em;
  transition: border-color .25s, color .25s;
}

.mtag:hover {
  border-color: rgba(242,238,229,0.28);
  color: var(--bone);
}

.mtag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bone);
  opacity: 0.45;
  flex-shrink: 0;
}


/* ═══════════════════════════════════
   SECCIÓN HERIDAS
═══════════════════════════════════ */
.hd-section {
  position: relative;
  z-index: 2;
  background: #F2EEE5;
  padding: 120px clamp(24px,5vw,80px) 120px;
}

.hd-header {
  margin-bottom: 72px;
}

.hd-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--g500);
  display: block;
  margin-bottom: 16px;
}

.hd-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--obsidian);
  margin-bottom: 18px;
}


.hd-title-u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--g500);
}

.hd-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--g500);
  max-width: 520px;
}

/* ── Grid ── */
.hd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Card ── */
.hd-card {
  background: var(--obsidian);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .8s cubic-bezier(.16,1,.3,1),
              box-shadow .35s ease;
}
.hd-card.vis { opacity: 1; transform: translateY(0); }
.hd-card:nth-child(2) { transition-delay: .1s; }
.hd-card:nth-child(3) { transition-delay: .2s; }
.hd-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,.28); }

/* ── Badge — propio encima del chart-wrap, nunca sobre el canvas ── */
.hd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 14px 0;
  padding: 5px 11px;
  background: rgba(15,15,14,.9);
  border: .5px solid rgba(242,238,229,.1);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g300);
  width: fit-content;
}
.hd-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--chalk);
  flex-shrink: 0;
  animation: hdPulse 2.4s ease-in-out infinite;
}
@keyframes hdPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.5); }
}

/* ── Chart wrap — solo el canvas dentro ── */
.hd-chart-wrap {
  height: 196px;
  background: #0C0C0A;
  border-top: .5px solid rgba(242,238,229,.05);
  border-bottom: .5px solid rgba(242,238,229,.05);
  margin-top: 10px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.hd-chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Body ── */
.hd-body {
  padding: 22px 24px 0;
  flex: 1;
}
.hd-num {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g700);
  margin-bottom: 10px;
  display: block;
}
.hd-card-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--bone);
  margin: 0;
}
.hd-card-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ── Toggle ── */
.hd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 24px;
  margin-top: 18px;
  border: none;
  border-top: .5px solid rgba(242,238,229,.07);
  background: none;
  width: 100%;
  cursor: pointer;
  gap: 10px;
  flex-shrink: 0;
}
.hd-toggle-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g700);
  transition: color .25s;
}
.hd-toggle:hover .hd-toggle-lbl { color: var(--g300); }
.hd-toggle-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: .5px solid rgba(242,238,229,.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--g500);
  line-height: 1;
  transition: transform .45s cubic-bezier(.16,1,.3,1), color .25s;
}
.hd-toggle.open .hd-toggle-icon {
  transform: rotate(180deg);
  color: var(--bone);
}

/* ── Desc desplegable hacia abajo ── */
.hd-desc {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.16,1,.3,1),
              padding .4s ease;
  padding: 0 24px;
}
.hd-desc.open {
  max-height: 180px;
  padding: 0 24px 22px;
}
.hd-desc p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.72;
  color: var(--g500);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hd-section { padding: 80px clamp(24px,5vw,80px); }
  .hd-header  { margin-bottom: 48px; }
}


/* ═══════════════════════════════════
   SECCIÓN TRANSFORMACIÓN
═══════════════════════════════════ */
.tr-section {
  position: relative;
  z-index: 2;
  background: var(--obsidian);
  padding: 100px clamp(24px,5vw,80px) 120px;
  overflow: hidden;
}
.tr-section::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: .5px;
  background: linear-gradient(to bottom, transparent, rgba(242,238,229,.05) 20%, rgba(242,238,229,.05) 80%, transparent);
  pointer-events: none;
}
.tr-header { text-align: center; margin-bottom: 96px; }
.tr-eyebrow { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--g500); display: block; margin-bottom: 20px; }
.tr-title { font-family: var(--font-sans); font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1.0; letter-spacing: -.035em; color: var(--bone); margin: 0; }
.tr-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--chalk); }
.tr-subtitle { font-family: var(--font-sans); font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--g500); margin-top: 18px; }
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1100px; margin: 0 auto; }
.tr-col { padding: 56px 48px; position: relative; }
.tr-col:first-child { border-right: .5px solid rgba(242,238,229,.06); }
.tr-col-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--g700); margin-bottom: 14px; }
.tr-col-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--chalk); opacity: .5; }
.tr-col-title { font-family: var(--font-sans); font-weight: 300; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; line-height: 1.1; color: var(--bone); margin-bottom: 0; }
.tr-col-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--chalk); }
.tr-toggle-wrap { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; }
.tr-toggle-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: .5px solid rgba(242,238,229,.14); border-radius: var(--radius-pill); background: none; cursor: pointer; font-family: var(--font-sans); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--g700); transition: border-color .3s, color .3s, background .3s; -webkit-tap-highlight-color: transparent; }
.tr-toggle-btn:hover { border-color: rgba(242,238,229,.3); color: var(--g300); }
.tr-toggle-btn.active { background: rgba(242,238,229,.06); border-color: rgba(242,238,229,.22); color: var(--bone); }
.tr-toggle-dot { width: 5px; height: 5px; border-radius: 50%; }
.tr-toggle-btn.active .tr-toggle-dot { background: var(--chalk); }
.tr-toggle-btn:not(.active) .tr-toggle-dot { background: var(--g700); }
.tr-panels { position: relative; margin-top: 32px; overflow: hidden; transition: height .5s cubic-bezier(.16,1,.3,1); }
.tr-panel { transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.tr-panel--hidden { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; }
.tr-panel--after.tr-panel--hidden { transform: translateY(24px); }
.tr-panel--before.tr-panel--hidden { transform: translateY(-24px); }
.tr-panel--after:not(.tr-panel--hidden) { transform: translateY(0); }
.tr-panel--before:not(.tr-panel--hidden) { transform: translateY(0); }
.tr-items { display: flex; flex-direction: column; }
.tr-item { display: flex; gap: 20px; padding: 20px 0; border-top: .5px solid rgba(242,238,229,.06); opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.tr-item:last-child { border-bottom: .5px solid rgba(242,238,229,.06); }
.tr-item.vis { opacity: 1; transform: translateY(0); }
.tr-item-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.tr-item-icon svg { width: 18px; height: 18px; }
.tr-item-body { flex: 1; }
.tr-item-title { font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: -.01em; color: var(--bone); margin-bottom: 5px; line-height: 1.3; }
.tr-item-desc { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.65; color: var(--g500); }
.tr-item-meta { font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: .08em; color: var(--chalk); opacity: .7; margin-top: 6px; display: block; }
.tr-panel--before .tr-item-title { color: var(--g500); }
.tr-panel--before .tr-item-desc { color: var(--g700); }
.tr-panel--before .tr-item-meta { display: none; }
.tr-panel--before .tr-item-title::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .5px; background: rgba(107,103,96,.35); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.tr-panel--before .tr-item-title { position: relative; }
.tr-panel--before.revealed .tr-item-title::after { transform: scaleX(1); }
@media (max-width: 900px) { .tr-grid { grid-template-columns: 1fr; } .tr-section::before { display: none; } .tr-col:first-child { border-right: none; border-bottom: .5px solid rgba(242,238,229,.06); } .tr-col { padding: 48px 0; } }
@media (max-width: 640px) { .tr-section { padding: 80px clamp(24px,5vw,80px); } .tr-header { margin-bottom: 64px; } }


/* ═══════════════════════════════════
   SECCIÓN PROCESO
═══════════════════════════════════ */
.pr-section {
  position: relative;
  z-index: 2;
  background: #F2EEE5;
  /* NUNCA overflow:hidden/clip/auto aquí — rompe sticky */
}

/* Header con el mismo padding horizontal de la web */
.pr-header {
  padding: 100px clamp(24px,5vw,80px) 80px;
}
.pr-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--g500);
  display: block;
  margin-bottom: 18px;
}
.pr-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--obsidian);
  margin-bottom: 16px;
}
.pr-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.pr-subtitle {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--g500);
  max-width: 480px;
}
.pr-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 20px;
  background: var(--obsidian);
  border-radius: var(--radius-pill);
}
.pr-stat-num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -.04em;
  color: var(--bone);
}
.pr-stat-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--g500);
  line-height: 1.4;
}

/*
  LAYOUT CLAVE:
  - pr-body es un grid de 2 columnas con padding horizontal = margen de la web
  - pr-sidebar: position sticky + align-self:start (THE pattern que funciona)
  - pr-steps: columna derecha normal
  - NINGÚN overflow en .pr-body ni .pr-section
*/
.pr-body {
  display: grid;
  grid-template-columns: clamp(180px,20vw,260px) 1fr;
  column-gap: 48px;
  padding: 0 clamp(24px,5vw,80px) 120px;
  /* align-items:start es OBLIGATORIO para sticky en grid */
  align-items: start;
}

/* El sidebar es el que hace sticky directamente */
.pr-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 108px; /* altura del nav (72px) + 36px margen */
  align-self: start; /* redundante pero explícito */
  /* SIN height, SIN overflow */
}

.pr-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pr-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .25s, opacity .25s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.pr-nav-item.active {
  background: var(--obsidian);
}
.pr-nav-item:not(.active) {
  opacity: .4;
}
.pr-nav-item:not(.active):hover {
  opacity: .65;
  background: rgba(10,10,10,.05);
}
.pr-nav-num {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--g500);
  flex-shrink: 0;
  min-width: 20px;
}
.pr-nav-item.active .pr-nav-num { color: rgba(242,238,229,.45); }
.pr-nav-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -.01em;
  color: var(--obsidian);
  flex: 1;
}
.pr-nav-item.active .pr-nav-name { color: var(--bone); }
.pr-nav-days {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--g500);
  white-space: nowrap;
  flex-shrink: 0;
}
.pr-nav-item.active .pr-nav-days { color: rgba(242,238,229,.4); }

.pr-progress-wrap {
  margin: 14px 12px 0;
  height: 1.5px;
  background: rgba(10,10,10,.1);
  border-radius: 2px;
  overflow: hidden;
}
.pr-progress-bar {
  height: 100%;
  background: var(--obsidian);
  border-radius: 2px;
  width: 20%;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}

/* Columna de contenido */
.pr-steps {
  border-left: .5px solid rgba(10,10,10,.1);
  padding-left: 48px;
}
.pr-step {
  padding: 60px 0;
  border-bottom: .5px solid rgba(10,10,10,.07);
}
.pr-step:first-child { padding-top: 0; }
.pr-step:last-child { border-bottom: none; }

.pr-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 16px;
}
.pr-step-tag-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--obsidian);
  opacity: .5;
}
.pr-step-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--obsidian);
  margin-bottom: 12px;
}
.pr-step-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.pr-step-desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--g500);
  max-width: 520px;
  margin-bottom: 28px;
}
.pr-who {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pr-who-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
}
.pr-who-badge.us { background: var(--obsidian); color: var(--bone); }
.pr-who-badge.them {
  background: rgba(10,10,10,.06);
  color: var(--g500);
  border: .5px solid rgba(10,10,10,.12);
}

/* ═══════════════════════════════════
   GRÁFICOS PROCESO — versión dinámica
═══════════════════════════════════ */
.pr-graphic { background: var(--obsidian); border-radius: var(--radius-md); overflow: hidden; }

/* ── G1 — Diagnóstico: métricas con contador animado ── */
.pr-g1 { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(242,238,229,.06); }
.pr-g1-card {
  background: var(--obsidian);
  padding: 22px 24px 20px;
  position: relative;
  overflow: hidden;
  transition: background .35s ease;
}
.pr-g1-card:hover { background: rgba(242,238,229,.03); }
.pr-g1-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--chalk);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.pr-step.active .pr-g1-card::before { transform: scaleX(var(--fill-scale, 0)); }
.pr-step.seen .pr-g1-card::before { transform: scaleX(var(--fill-scale, 0)); }
.pr-g1-card:nth-child(1)::before { --fill-scale: .78; transition-delay: .1s; }
.pr-g1-card:nth-child(2)::before { --fill-scale: .22; transition-delay: .25s; }
.pr-g1-card:nth-child(3)::before { --fill-scale: .45; transition-delay: .4s; }
.pr-g1-card:nth-child(4)::before { --fill-scale: .55; transition-delay: .55s; }
.pr-g1-label {
  font-family: var(--font-sans); font-size: 9px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--g700);
  margin-bottom: 10px; display: block;
}
.pr-g1-val {
  font-family: var(--font-sans); font-weight: 300; font-size: 30px;
  letter-spacing: -.04em; color: var(--bone); display: block;
  margin-bottom: 4px; line-height: 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.pr-step.active .pr-g1-val { opacity: 1; transform: translateY(0); }
.pr-step.seen .pr-g1-val { opacity: 1; transform: translateY(0); }
.pr-g1-card:nth-child(1) .pr-g1-val { transition-delay: .05s; }
.pr-g1-card:nth-child(2) .pr-g1-val { transition-delay: .2s; }
.pr-g1-card:nth-child(3) .pr-g1-val { transition-delay: .35s; }
.pr-g1-card:nth-child(4) .pr-g1-val { transition-delay: .5s; }
.pr-g1-sub {
  font-family: var(--font-sans); font-size: 11px; color: var(--g700);
  opacity: 0; transition: opacity .5s ease .3s;
}
.pr-step.active .pr-g1-sub { opacity: 1; }
.pr-step.seen .pr-g1-sub { opacity: 1; }

/* ── G2 — Propuesta: filas con reveal secuencial ── */
.pr-g2 { padding: 0; }
.pr-g2-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  border-bottom: .5px solid rgba(242,238,229,.05);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateX(-16px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), background .3s;
}
.pr-g2-row:last-child { border-bottom: none; }
.pr-g2-row:hover { background: rgba(242,238,229,.025); }
.pr-step.active .pr-g2-row { opacity: 1; transform: translateX(0); }
.pr-step.seen .pr-g2-row { opacity: 1; transform: translateX(0); }
.pr-step.active .pr-g2-row:nth-child(1) { transition-delay: .05s; }
.pr-step.active .pr-g2-row:nth-child(2) { transition-delay: .15s; }
.pr-step.active .pr-g2-row:nth-child(3) { transition-delay: .25s; }
.pr-step.active .pr-g2-row:nth-child(4) { transition-delay: .35s; }
.pr-g2-row.highlight {
  background: rgba(212,206,196,.04);
}
.pr-g2-row.highlight::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--chalk);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s cubic-bezier(.16,1,.3,1) .4s;
}
.pr-step.active .pr-g2-row.highlight::before { transform: scaleY(1); }
.pr-step.seen .pr-g2-row.highlight::before { transform: scaleY(1); }
.pr-g2-num {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; color: var(--g700); flex-shrink: 0; min-width: 20px;
}
.pr-g2-text { font-family: var(--font-sans); font-size: 13px; color: var(--bone); flex: 1; }
.pr-g2-row.highlight .pr-g2-text { color: var(--chalk); }
.pr-g2-val {
  font-family: var(--font-sans); font-size: 13px; font-weight: 400;
  color: var(--chalk); white-space: nowrap; letter-spacing: -.01em;
}
.pr-g2-row:not(.highlight) .pr-g2-val { color: var(--g500); font-size: 12px; }

/* ── G3 — Migración: barras que crecen con porcentaje vivo ── */
.pr-g3 { padding: 24px 28px 20px; }
.pr-g3-item { margin-bottom: 20px; }
.pr-g3-item:last-of-type { margin-bottom: 0; }
.pr-g3-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.pr-g3-label {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g700);
}
.pr-g3-pct {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  color: var(--chalk); opacity: 0;
  transition: opacity .4s ease;
}
.pr-step.active .pr-g3-pct { opacity: 1; }
.pr-step.seen .pr-g3-pct { opacity: 1; }
.pr-g3-track {
  height: 2px; background: rgba(242,238,229,.08);
  border-radius: 2px; overflow: hidden; position: relative;
}
.pr-g3-fill {
  height: 100%; border-radius: 2px; width: 0;
  background: var(--chalk);
  transition: width 1.6s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.pr-g3-fill::after {
  content: '';
  position: absolute; right: 0; top: -2px;
  width: 4px; height: 6px;
  background: var(--bone);
  border-radius: 1px;
  opacity: 0;
  transition: opacity .3s ease;
}
.pr-step.active .pr-g3-fill { width: 100%; }
.pr-step.seen .pr-g3-fill { width: 100%; }
.pr-step.active .pr-g3-fill::after { opacity: 1; }
.pr-step.seen .pr-g3-fill::after { opacity: 1; }
.pr-g3-item:nth-child(1) .pr-g3-fill { transition-delay: .05s; }
.pr-g3-item:nth-child(2) .pr-g3-fill { transition-delay: .25s; }
.pr-g3-item:nth-child(3) .pr-g3-fill { transition-delay: .45s; }
.pr-g3-item:nth-child(4) .pr-g3-fill { transition-delay: .65s; }
.pr-g3-you {
  margin-top: 20px; padding: 14px 16px;
  background: rgba(242,238,229,.03); border: .5px solid rgba(242,238,229,.08);
  border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease .9s, transform .6s cubic-bezier(.16,1,.3,1) .9s;
}
.pr-step.active .pr-g3-you { opacity: 1; transform: translateY(0); }
.pr-step.seen .pr-g3-you { opacity: 1; transform: translateY(0); }
.pr-g3-you-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(242,238,229,.06); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 14px;
}
.pr-g3-you-text { font-family: var(--font-sans); font-size: 13px; color: var(--g500); line-height: 1.5; }
.pr-g3-you-text strong { color: var(--bone); font-weight: 400; }

/* ── G4 — Lanzamiento: checklist con tick animado ── */
.pr-g4 { padding: 24px 28px; }
.pr-g4-title {
  font-family: var(--font-sans); font-weight: 300; font-size: 15px;
  color: var(--bone); margin-bottom: 20px; letter-spacing: -.01em;
}
.pr-g4-checks { display: flex; flex-direction: column; gap: 10px; }
.pr-g4-check {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: .5px solid rgba(242,238,229,.07);
  border-radius: var(--radius-md);
  background: rgba(242,238,229,.025);
  opacity: 0; transform: translateX(-12px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), background .3s;
}
.pr-g4-check:hover { background: rgba(242,238,229,.045); }
.pr-step.active .pr-g4-check { opacity: 1; transform: translateX(0); }
.pr-step.seen .pr-g4-check { opacity: 1; transform: translateX(0); }
.pr-step.active .pr-g4-check:nth-child(1) { transition-delay: .05s; }
.pr-step.active .pr-g4-check:nth-child(2) { transition-delay: .15s; }
.pr-step.active .pr-g4-check:nth-child(3) { transition-delay: .25s; }
.pr-step.active .pr-g4-check:nth-child(4) { transition-delay: .35s; }
.pr-g4-tick {
  width: 20px; height: 20px; border-radius: 50%;
  border: .5px solid rgba(242,238,229,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 10px; color: var(--chalk);
  background: rgba(212,206,196,.08);
}
.pr-g4-check-text {
  font-family: var(--font-sans); font-size: 13px; color: var(--bone); flex: 1;
}

/* ── G5 — Acompañamiento: items con pulso en dot ── */
.pr-g5 { padding: 20px 24px; display: flex; flex-direction: column; gap: 0; }
.pr-g5-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0;
  border-bottom: .5px solid rgba(242,238,229,.05);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.pr-g5-item:last-child { border-bottom: none; }
.pr-step.active .pr-g5-item { opacity: 1; transform: translateY(0); }
.pr-step.seen .pr-g5-item { opacity: 1; transform: translateY(0); }
.pr-step.active .pr-g5-item:nth-child(1) { transition-delay: .05s; }
.pr-step.active .pr-g5-item:nth-child(2) { transition-delay: .18s; }
.pr-step.active .pr-g5-item:nth-child(3) { transition-delay: .31s; }
.pr-g5-dot-wrap { position: relative; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pr-g5-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  position: relative; z-index: 1;
}
.pr-g5-dot.on { background: var(--chalk); }
.pr-g5-dot.mid { background: rgba(212,206,196,.35); }
.pr-g5-dot.on::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(212,206,196,.2);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0; }
}
.pr-g5-body { flex: 1; }
.pr-g5-text { font-family: var(--font-sans); font-size: 13px; color: var(--bone); display: block; margin-bottom: 2px; }
.pr-g5-time {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; color: var(--g700);
  background: rgba(242,238,229,.05);
  border: .5px solid rgba(242,238,229,.08);
  border-radius: var(--radius-pill);
  padding: 2px 9px; white-space: nowrap;
  display: inline-block;
}

@media (max-width: 860px) {
  .pr-body {
    grid-template-columns: 1fr;
    padding-top: 0;
  }
  .pr-sidebar {
    position: relative;
    top: 0;
    padding-bottom: 32px;
  }
  .pr-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .pr-steps { border-left: none; padding-left: 0; border-top: .5px solid rgba(10,10,10,.1); padding-top: 40px; }
}
/* ═══════════════════════════════════
   SECCIÓN GARANTÍA
═══════════════════════════════════ */
.gar-section {
  position: relative;
  background: var(--obsidian);
  padding: 140px clamp(24px,5vw,80px) 160px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.gar-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  width: 100%;
}

/* Eyebrow centrado con líneas */
.gar-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 52px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.gar-section.vis .gar-eyebrow { opacity: 1; transform: translateY(0); }

.gar-eyebrow-line {
  height: .5px;
  width: 48px;
  background: linear-gradient(90deg, transparent, rgba(216,211,198,.35));
}
.gar-eyebrow-line:last-child {
  background: linear-gradient(90deg, rgba(216,211,198,.35), transparent);
}
.gar-eyebrow-text {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g500);
}

/* Título principal */
.gar-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 36px;
}

.gar-line {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(52px, 8vw, 108px);
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--bone);
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.gar-line em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--chalk);
}
.gar-line--sub {
  font-size: clamp(28px, 4vw, 52px);
  color: var(--g500);
  margin-top: 8px;
  letter-spacing: -.025em;
}

.gar-section.vis .gar-line[data-delay="0"] { opacity: 1; transform: translateY(0); transition-delay: .1s; }
.gar-section.vis .gar-line[data-delay="1"] { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.gar-section.vis .gar-line[data-delay="2"] { opacity: 1; transform: translateY(0); transition-delay: .34s; }

/* Descripción */
.gar-desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--g500);
  max-width: 480px;
  margin: 0 auto 52px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease .5s, transform .7s cubic-bezier(.16,1,.3,1) .5s;
}
.gar-section.vis .gar-desc { opacity: 1; transform: translateY(0); }

/* Tres pilares */
.gar-pillars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease .62s, transform .7s cubic-bezier(.16,1,.3,1) .62s;
}
.gar-section.vis .gar-pillars { opacity: 1; transform: translateY(0); }

.gar-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
}
.gar-pillar-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: .5px solid rgba(242,238,229,.12);
  background: rgba(242,238,229,.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--chalk);
  transition: border-color .3s, background .3s;
}
.gar-pillar:hover .gar-pillar-icon {
  border-color: rgba(242,238,229,.28);
  background: rgba(242,238,229,.08);
}
.gar-pillar-icon svg { width: 16px; height: 16px; }
.gar-pillar-text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--g500);
  white-space: nowrap;
  letter-spacing: -.01em;
  transition: color .3s;
}
.gar-pillar:hover .gar-pillar-text { color: var(--g300); }

.gar-pillar-sep {
  width: .5px;
  height: 32px;
  background: rgba(242,238,229,.08);
  flex-shrink: 0;
}

/* CTA */
.gar-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 32px;
  background: var(--bone);
  color: var(--obsidian);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease .74s, transform .7s cubic-bezier(.16,1,.3,1) .74s,
              box-shadow .3s ease;
}
.gar-section.vis .gar-cta { opacity: 1; transform: translateY(0); }
.gar-cta:hover { box-shadow: 0 8px 32px rgba(242,238,229,.15); }
.gar-cta::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
}
.gar-cta:hover::before { animation: garShimmer .6s ease forwards; }
@keyframes garShimmer { from{left:-100%} to{left:180%} }
.gar-cta-text { position: relative; z-index: 1; }
.gar-cta-arrow {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(10,10,10,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.gar-cta:hover .gar-cta-arrow { transform: translateX(4px); }

/* Palabra decorativa de fondo */
.gar-bg-word {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(120px, 18vw, 240px);
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: .5px rgba(242,238,229,.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .gar-section { padding: 100px clamp(24px,5vw,80px) 120px; }
  .gar-pillar { padding: 0 20px; }
  .gar-pillar-text { font-size: 11px; white-space: normal; text-align: center; max-width: 80px; }
}
/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.ft {
  background: #050504;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* ── Top block ── */
.ft-top {
  padding: 100px clamp(24px,5vw,80px) 80px;
  border-bottom: .5px solid rgba(242,238,229,.06);
}
.ft-top-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* CTA block */
.ft-cta-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g700);
  margin-bottom: 20px;
}
.ft-cta-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--bone);
  margin-bottom: 16px;
}
.ft-cta-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--chalk);
}
.ft-cta-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--g500);
  margin-bottom: 36px;
}
.ft-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--bone);
  color: var(--obsidian);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.ft-cta-btn:hover { box-shadow: 0 8px 32px rgba(242,238,229,.12); }
.ft-cta-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-20deg);
}
.ft-cta-btn:hover::before { animation: ftShimmer .6s ease forwards; }
@keyframes ftShimmer { from{left:-100%} to{left:180%} }
.ft-cta-btn-arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(10,10,10,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.ft-cta-btn:hover .ft-cta-btn-arrow { transform: translateX(4px); }

/* Info columns */
.ft-info-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 8px;
}
.ft-info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-col-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g700);
  margin-bottom: 4px;
}
.ft-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--g500);
  text-decoration: none;
  transition: color .25s ease;
  width: fit-content;
}
.ft-link:hover { color: var(--bone); }
.ft-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--g500);
  line-height: 1.5;
}
.ft-text--muted { color: var(--g700); }
.ft-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 5px 12px;
  border: .5px solid rgba(242,238,229,.1);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  color: var(--g500);
  width: fit-content;
}
.ft-partner-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3D9960;
  flex-shrink: 0;
  animation: ftDotPulse 2.4s ease-in-out infinite;
}
@keyframes ftDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}

/* ── Wordmark gigante ── */
.ft-wordmark-wrap {
  padding: 0;
  overflow: hidden;
  line-height: 1;
  width: 100%;
}
.ft-wordmark {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 120px;
  letter-spacing: -.04em;
  line-height: .88;
  color: rgba(242,238,229,.07);
  -webkit-text-stroke: 1px rgba(242,238,229,.18);
  user-select: none;
  transition: color .4s ease, -webkit-text-stroke .4s ease;
  cursor: default;
  white-space: nowrap;
  padding: 0;
}
.ft-wordmark-wrap:hover .ft-wordmark {
  color: rgba(242,238,229,.11);
  -webkit-text-stroke: 1px rgba(242,238,229,.32);
}

/* ── Bottom bar ── */
.ft-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px clamp(24px,5vw,80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: .5px solid rgba(242,238,229,.05);
}
.ft-copy {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--g700);
}
.ft-bottom-links {
  display: flex;
  gap: 24px;
}
.ft-bottom-link {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--g700);
  text-decoration: none;
  transition: color .25s;
}
.ft-bottom-link:hover { color: var(--g500); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .ft-top-inner { grid-template-columns: 1fr; gap: 56px; }
  .ft-info-block { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ft-top { padding: 80px clamp(24px,5vw,80px) 64px; }
  .ft-info-block { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .ft-wordmark { font-size: clamp(60px, 18vw, 140px); }
}
/* ═══════════════════════════════════
   COMPATIBILIDAD TECNOLÓGICA
═══════════════════════════════════ */
.tech-section {
  background: #F2EEE5;
  padding: 120px clamp(24px,5vw,80px) 120px;
  position: relative;
  z-index: 2;
}
.tech-inner { max-width: var(--max-w); margin: 0 auto; }

.tech-header { margin-bottom: 64px; }
.tech-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--g500);
  display: block;
  margin-bottom: 16px;
}
.tech-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--obsidian);
  margin-bottom: 14px;
}
.tech-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.tech-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--g500);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(10,10,10,.08);
  border: 1px solid rgba(10,10,10,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 28px;
}
.tech-card {
  background: #F2EEE5;
  padding: 24px 28px;
  transition: background .25s ease;
  position: relative;
}
.tech-card:hover { background: rgba(10,10,10,.03); }
.tech-card--highlight {
  background: var(--obsidian);
}
.tech-card--highlight:hover { background: #111; }

.tech-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tech-check {
  font-size: 12px;
  font-weight: 600;
  color: var(--obsidian);
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(10,10,10,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.tech-check--green {
  background: rgba(61,153,96,.15);
  color: #3D9960;
}
.tech-card--highlight .tech-check {
  background: rgba(242,238,229,.1);
  color: var(--chalk);
}
.tech-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--obsidian);
  letter-spacing: -.01em;
}
.tech-card--highlight .tech-name { color: var(--bone); }
.tech-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--g500);
  line-height: 1.6;
}
.tech-card--highlight .tech-desc { color: var(--g700); }

.tech-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--g500);
  padding: 16px 22px;
  border: .5px solid rgba(10,10,10,.1);
  border-radius: var(--radius-md);
  margin-bottom: 72px;
  line-height: 1.6;
}
.tech-note-icon { color: var(--obsidian); font-size: 14px; flex-shrink: 0; margin-top: 1px; }

.tech-pos-header { margin-bottom: 32px; margin-top: 16px; }
.tech-pos-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--obsidian);
  margin-bottom: 10px;
}
.tech-pos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: rgba(10,10,10,.08);
  border: 1px solid rgba(10,10,10,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}
.tech-pos-card {
  background: #F2EEE5;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background .25s ease;
}
.tech-pos-card:hover { background: rgba(10,10,10,.03); }
.tech-pos-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--obsidian);
  letter-spacing: -.01em;
}
.tech-pos-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--g500);
  letter-spacing: .04em;
}

@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr 1fr; } .tech-pos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .tech-grid { grid-template-columns: 1fr; } .tech-pos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
.faq-section {
  background: var(--obsidian);
  padding: 120px clamp(24px,5vw,80px) 120px;
  position: relative;
  z-index: 2;
}
.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}
.faq-header { margin-bottom: 64px; }
.faq-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--g500);
  display: block;
  margin-bottom: 16px;
}
.faq-title {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--bone);
}
.faq-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--chalk);
}

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  border-top: .5px solid rgba(242,238,229,.08);
}
.faq-item:last-child { border-bottom: .5px solid rgba(242,238,229,.08); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -.01em;
  line-height: 1.4;
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.faq-q:hover { color: var(--chalk); }

.faq-icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--g700);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .4s cubic-bezier(.16,1,.3,1), color .25s;
  width: 24px;
  text-align: center;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  color: var(--chalk);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.16,1,.3,1), padding .4s ease;
  padding: 0;
}
.faq-item.open .faq-a {
  max-height: 300px;
  padding-bottom: 22px;
}
.faq-a p {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--g500);
  max-width: 620px;
}