/* =========================================================================
   VANTRA · Sistema de diseño v2
   Display: Righteous · Body: Raleway
   Paleta: amarillo #ECF247 · violeta #8F93FF · gris #434343 · mint #EBFFF6
   Base dark-forward. Estático, multipágina, sin build.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Raleway:wght@400;500;600;700;800&display=swap');

:root {
  /* Marca */
  --amarillo:      #ECF247;
  --amarillo-d:    #D2D82F;
  --violeta:       #8F93FF;
  --violeta-d:     #6E72E6;
  --gris:          #434343;
  --mint:          #EBFFF6;

  /* Superficies dark */
  --bg:            #141416;
  --bg-1:          #1A1A1D;
  --bg-2:          #202024;
  --bg-card:       #25252A;
  --bg-card-h:     #2D2D33;
  --line:          rgba(255,255,255,.08);
  --line-2:        rgba(255,255,255,.16);

  /* Texto */
  --hi:            #FFFFFF;
  --text:         #D4D4D8;
  --muted:        #9A9AA2;
  --faint:        #6B6B73;
  --on-light:      #2A2A2E;
  --on-light-soft: #56565E;

  /* Gradientes premium */
  --grad:          linear-gradient(135deg, var(--violeta), var(--amarillo));
  --grad-soft:     linear-gradient(135deg, rgba(143,147,255,.18), rgba(236,242,71,.14));

  /* Sistema */
  --radius:        16px;
  --radius-lg:     24px;
  --radius-pill:   999px;
  --maxw:          1200px;
  --gutter:        clamp(20px, 5vw, 72px);
  --ease:          cubic-bezier(.22,.61,.36,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);

  --f-display: 'Righteous', ui-sans-serif, system-ui, sans-serif;
  --f-body:    'Raleway', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,svg,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
::selection { background: var(--amarillo); color: #14140F; }

/* ---- Tipografía ---------------------------------------------------------- */
h1,h2,h3,h4 { color: var(--hi); line-height: 1.05; font-weight: 400; }
.display { font-family: var(--f-display); }
.h-hero { font-family: var(--f-display); font-size: clamp(2.7rem, 7.3vw, 6.5rem); line-height: .98; letter-spacing: -.01em; }
.h1 { font-family: var(--f-display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; }
.h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 2.85rem); line-height: 1.04; }
.h3 { font-family: var(--f-body); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.01em; color: var(--hi); }
.lead { font-size: clamp(1.05rem, 1.45vw, 1.3rem); color: var(--text); line-height: 1.6; font-weight: 400; }
p { font-size: 1rem; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--f-body); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--muted);
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--amarillo); box-shadow:0 0 12px var(--amarillo); }
.eyebrow.v::before { background:var(--violeta); box-shadow:0 0 12px var(--violeta); }
.hl { color: var(--amarillo); }
.hl-v { color: var(--violeta); }
.grad-text { background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted { color: var(--muted); }

/* ---- Layout -------------------------------------------------------------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section { padding-block: clamp(72px, 11vw, 150px); position: relative; overflow-x: clip; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 68px); }
.section-head .h2 { margin-top: 16px; }
.section-head > p { margin-top: 20px; color: var(--muted); font-size: 1.08rem; }
.center { text-align:center; margin-inline:auto; }

/* Secciones claras (mint) para respiro */
/* Secciones "panel": oscuro elevado con textura de puntos (reemplaza al mint) */
.light { background: linear-gradient(180deg, #17171c 0%, #121216 100%); position:relative; overflow:hidden; }
.light::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; z-index:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); }
.light::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); }
.light > .wrap { position:relative; z-index:1; }

/* Fondos técnicos (grid + mesh) */
.tech-bg::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 70%);
}
.tech-bg > * { position: relative; z-index: 1; }
.glow { position:absolute; border-radius:50%; filter: blur(100px); opacity:.42; pointer-events:none; z-index:0; }
.glow.y { background: radial-gradient(circle, rgba(236,242,71,.22), transparent 70%); opacity:.3; }
.glow.v { background: radial-gradient(circle, rgba(143,147,255,.6), transparent 70%); }

/* ---- Botones ------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:.6em; border-radius:var(--radius-pill); padding:.95em 1.6em;
  font-family:var(--f-body); font-weight:700; font-size:.95rem; letter-spacing:-.01em; border:1px solid transparent;
  transition: transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s; white-space:nowrap; }
.btn svg { width:1.05em; height:1.05em; flex-shrink:0; }
.btn-primary { background: var(--amarillo); color:#16160E; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(236,242,71,.32); }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--hi); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--amarillo); transform: translateY(-2px); }
.btn-lg { padding:1.05em 1.9em; font-size:1.02rem; }
.btn-block { width:100%; justify-content:center; }

/* =========================================================================
   DYNAMIC ISLAND NAV
   ========================================================================= */
.island {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: min(940px, calc(100% - 28px));
  transition: width .5s var(--ease), top .4s var(--ease);
}
.island-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 9px 9px 9px 20px;
  background: rgba(20,20,22,.66); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border:1px solid var(--line-2); border-radius: var(--radius-pill);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s;
}
.island.scrolled .island-bar { box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); background: rgba(16,16,18,.84); }
.island-brand { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.island-brand .b-mark { height:26px; width:auto; }
.island-brand .b-word { height:16px; width:auto; }
.foot-brand .island-brand .b-mark { height:30px; }
.foot-brand .island-brand .b-word { height:19px; }
.foot-brand .island-brand .b-logo { height:34px; width:auto; filter:brightness(0) invert(1); opacity:.92; }
.island-links { display:flex; align-items:center; gap:2px; position:relative; }
.island-links a { padding:.55em .9em; border-radius:var(--radius-pill); font-size:.9rem; font-weight:600; color:var(--text); transition:color .25s; position:relative; z-index:1; white-space:nowrap; }
.island-links a:hover, .island-links a.active { color: var(--hi); }
.island-pill { position:absolute; top:0; height:100%; border-radius:var(--radius-pill); background: rgba(255,255,255,.08); border:1px solid var(--line); z-index:0; transition: transform .45s var(--ease-spring), width .45s var(--ease-spring), opacity .3s; opacity:0; }
.island-cta { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.island-cta .btn { padding:.7em 1.25em; font-size:.88rem; }
.island-menu { display:none; width:42px; height:42px; border-radius:50%; background:var(--amarillo); color:#16160E; border:0; align-items:center; justify-content:center; flex-shrink:0; }
.island-menu svg { width:20px; height:20px; }

/* Switch de idioma (ES Argentina / EN Estados Unidos) */
.lang-switch { display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px; flex-shrink:0; }
.lang-opt { display:flex; align-items:center; gap:5px; padding:.32em .55em; border-radius:var(--radius-pill); font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--muted); transition:background .25s, color .25s; }
.lang-opt .flag { width:20px; height:14px; border-radius:3px; overflow:hidden; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.2); }
.lang-opt .flag svg { display:block; width:100%; height:100%; }
.lang-opt .lc { line-height:1; }
.lang-opt.active { background:rgba(255,255,255,.12); color:var(--hi); }
.lang-opt:not(.active) { opacity:.6; }
.lang-opt:not(.active):hover { color:var(--hi); opacity:1; }
@media (max-width: 380px){ .lang-opt .lc { display:none; } }

/* Has services dropdown */
.island-links .has-sub { position: static; }
.island-sub {
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(720px, 92vw); padding:16px; opacity:0; visibility:hidden; pointer-events:none;
  background: rgba(24,24,27,.92); backdrop-filter: blur(24px); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
/* puente invisible para no perder el hover al cruzar el gap */
.island-sub::before { content:""; position:absolute; left:0; right:0; top:-18px; height:20px; }
.island-links .has-sub:hover .island-sub, .island-sub:hover, .island-sub.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.island-sub a { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; }
.island-sub a:hover { background: rgba(255,255,255,.05); }
.island-sub .si { width:34px; height:34px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; background:rgba(143,147,255,.12); color:var(--violeta); }
.island-sub .si svg { width:18px; height:18px; }
.island-sub strong { display:block; color:var(--hi); font-size:.92rem; font-weight:700; }
.island-sub span { display:block; color:var(--muted); font-size:.78rem; margin-top:2px; line-height:1.4; }

@media (max-width: 940px){
  .island-links, .island-cta .btn-text { display:none; }
  .island-menu { display:flex; }
}

/* Mobile full overlay */
.m-overlay { position:fixed; inset:0; z-index:1001; background:rgba(10,10,12,.55);
  backdrop-filter:blur(26px) saturate(130%); -webkit-backdrop-filter:blur(26px) saturate(130%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:80px var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.m-overlay.open { opacity:1; visibility:visible; }
.m-overlay a { font-family:var(--f-display); font-size:clamp(2rem,9vw,3rem); color:var(--hi); padding:.26em 0; text-align:center; transition:color .25s, transform .25s; }
.m-overlay a:active, .m-overlay a:hover { color:var(--amarillo); transform:scale(1.04); }
.m-overlay.open a { animation: mfade .5s var(--ease) both; }
.m-overlay.open a:nth-child(2){animation-delay:.05s} .m-overlay.open a:nth-child(3){animation-delay:.1s} .m-overlay.open a:nth-child(4){animation-delay:.15s} .m-overlay.open a:nth-child(5){animation-delay:.2s} .m-overlay.open a:nth-child(6){animation-delay:.25s}
@keyframes mfade { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.m-overlay .m-close { position:absolute; top:18px; right:var(--gutter); width:46px; height:46px; border-radius:50%; background:rgba(40,40,46,.6); border:1px solid var(--line-2); color:var(--hi); display:grid; place-items:center; }
.m-overlay .m-cta { margin-top:30px; width:auto; padding-inline:2.2em; animation-delay:.3s !important; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(48px, 7vw, 90px); overflow:hidden; position:relative; }
.hero-glow-y { width:520px; height:520px; top:-120px; right:-80px; }
.hero-glow-v { width:480px; height:480px; bottom:-160px; left:-120px; }
.hero-inner { position:relative; z-index:2; }
.hero .eyebrow { margin-bottom: 26px; }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 28px; max-width: 52ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-strip { display:flex; gap:32px; flex-wrap:wrap; margin-top:54px; padding-top:30px; border-top:1px solid var(--line); }
.hero-strip .item .n { font-family:var(--f-display); font-size:1.9rem; color:var(--hi); line-height:1; }
.hero-strip .item .n .hl { color:var(--amarillo); }
.hero-strip .item .l { font-size:.82rem; color:var(--muted); margin-top:6px; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee-wrap { border-block:1px solid var(--line); padding-block:26px; background:var(--bg-1); overflow:hidden; }
.marquee-label { text-align:center; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:22px; }
.marquee { display:flex; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track { display:flex; gap:clamp(34px,5vw,72px); padding-right:clamp(34px,5vw,72px); align-items:center; animation: scroll 36s linear infinite; flex-shrink:0; will-change:transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family:var(--f-display); font-size:clamp(1.05rem,2vw,1.5rem); color:var(--faint); white-space:nowrap; transition:color .3s; }
.marquee-track .sep { color:var(--violeta); opacity:.5; }
.marquee-track span:hover { color:var(--text); }
@keyframes scroll { to { transform: translateX(-50%); } }
.svc-names .marquee-track span { color:var(--muted); }
.svc-names .marquee-track .sep { color:var(--violeta); opacity:.5; }

/* =========================================================================
   SERVICIOS GRID
   ========================================================================= */
.svc-grid { display:grid; grid-template-columns: repeat(12,1fr); gap:16px; }
.svc { grid-column: span 4; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding: clamp(26px,3vw,36px); display:flex; flex-direction:column; min-height:280px; position:relative; overflow:hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s; }
.svc:hover { border-color: var(--line-2); transform: translateY(-5px); background:var(--bg-card-h); }
.svc::after { content:""; position:absolute; inset:0; background:radial-gradient(460px 220px at 100% 0%, var(--grad-soft), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.svc:hover::after { opacity:1; }
.svc .ico { width:50px; height:50px; border-radius:13px; display:grid; place-items:center; background:rgba(143,147,255,.1); border:1px solid var(--line); color:var(--violeta); margin-bottom:auto; transition:background .35s, color .35s; }
.svc:hover .ico { background:var(--amarillo); color:#16160E; }
.svc .ico svg { width:25px; height:25px; }
.svc .num { position:absolute; top:clamp(26px,3vw,36px); right:clamp(26px,3vw,36px); font-family:var(--f-display); font-size:.95rem; color:var(--faint); }
.svc h3 { margin:26px 0 11px; }
.svc p { font-size:.96rem; color:var(--muted); line-height:1.6; }
.svc .more { margin-top:22px; font-size:.86rem; font-weight:700; color:var(--hi); display:inline-flex; align-items:center; gap:.6em; transition:color .3s; }
.svc .more svg { width:16px; height:16px; padding:6px; box-sizing:content-box; border:1px solid var(--line-2); border-radius:50%; color:var(--violeta); transition:transform .35s var(--ease-spring), background .3s, color .3s, border-color .3s; }
.svc:hover .more { color:var(--hi); }
.svc:hover .more svg { transform:translateX(3px); background:var(--amarillo); color:#16160E; border-color:var(--amarillo); }
.svc.banner { grid-column:1 / -1; flex-direction:row; align-items:center; min-height:auto; gap:clamp(22px,4vw,48px); }
.svc.banner .ico { margin-bottom:0; }
.svc.banner .banner-text { flex:1; }
.svc.banner h3 { margin:0 0 8px; }
.svc.banner p { max-width:64ch; }
.svc.banner .more { margin-top:0; white-space:nowrap; }
.svc.banner .num { top:18px; right:24px; }
@media (max-width: 880px){ .svc { grid-column: span 6; } }
@media (max-width: 620px){ .svc, .svc.banner { grid-column: span 12; } .svc.banner { flex-direction:column; align-items:flex-start; } }
@media (min-width: 881px){ .svc { grid-column: span 4; } }

/* =========================================================================
   MÉTODO (timeline)
   ========================================================================= */
.timeline { display:grid; grid-template-columns: repeat(5,1fr); gap:0; position:relative; }
.timeline::before { content:""; position:absolute; top:28px; left:6%; right:6%; height:2px; background:linear-gradient(90deg,var(--violeta),var(--amarillo)); opacity:.35; }
.phase { padding:0 14px; position:relative; }
.phase .node { width:56px; height:56px; border-radius:50%; background:var(--bg-2); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--f-display); color:var(--amarillo); position:relative; z-index:2; transition:background .35s, transform .35s, color .35s; }
.phase:hover .node { background:var(--amarillo); color:#16160E; transform:scale(1.08); }
.phase h3 { margin:22px 0 10px; font-size:1.18rem; }
.phase p { font-size:.92rem; color:var(--muted); }
@media (max-width: 880px){
  .timeline { grid-template-columns:1fr; gap:8px; }
  .timeline::before { top:0; bottom:0; left:27px; right:auto; width:2px; height:auto; background:linear-gradient(180deg,var(--violeta),var(--amarillo)); }
  .phase { display:grid; grid-template-columns:56px 1fr; column-gap:20px; row-gap:6px; padding:14px 0; align-items:start; }
  .phase .node { grid-column:1; grid-row:1 / span 2; }
  .phase h3 { grid-column:2; grid-row:1; margin:10px 0 0; }
  .phase p { grid-column:2; grid-row:2; }
}

/* =========================================================================
   MÉTRICAS / STATS
   ========================================================================= */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
@media (max-width:760px){ .stats { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .stats { grid-template-columns:1fr; gap:22px; } }
.stat .n { display:block; font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--hi); line-height:1; }
.stat .n .hl { color:var(--amarillo); }
.stat p, .stat .l { display:block; margin-top:12px; color:var(--muted); font-size:.95rem; line-height:1.5; }

/* =========================================================================
   CASOS
   ========================================================================= */
.cases { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:880px){ .cases { grid-template-columns:1fr; } }
.case { border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3vw,34px); min-height:300px;
  display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,var(--bg-card),var(--bg-1)); position:relative; overflow:hidden; transition:border-color .35s, transform .35s; }
.case:hover { border-color:var(--line-2); transform:translateY(-4px); }
.case.placeholder { border-style:dashed; border-color:var(--line-2); }
.case .badge { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violeta); font-weight:700; }
.case .metric { font-family:var(--f-display); font-size:clamp(2.2rem,4.4vw,3rem); color:var(--cream); margin-top:auto; line-height:1; }
.case .metric .hl { color:var(--violeta); }
.case .desc { color:var(--muted); font-size:.94rem; margin-top:12px; }
.case .soon { display:inline-flex; align-items:center; gap:.5em; margin-top:18px; font-size:.76rem; padding:.4em .85em; border:1px solid var(--line-2); border-radius:var(--radius-pill); color:var(--muted); width:max-content; }
.case .soon::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--violeta); }

/* =========================================================================
   BENTO (por qué Vantra)
   ========================================================================= */
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bento .cell { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px); transition:border-color .35s, transform .35s; }
.bento .cell:hover { border-color:var(--line-2); transform:translateY(-4px); }
.bento .cell.big { grid-column: span 2; grid-row: span 2; display:flex; flex-direction:column; justify-content:space-between; }
.bento .cell .ico { width:46px; height:46px; border-radius:12px; background:rgba(143,147,255,.1); color:var(--violeta); display:grid; place-items:center; margin-bottom:20px; }
.bento .cell .ico svg { width:24px; height:24px; }
.bento .cell h3 { font-family:var(--f-display); font-weight:400; font-size:1.2rem; line-height:1.15; margin-bottom:12px; }
.bento .cell p { color:var(--muted); font-size:.95rem; }
.bento .cell.big h3 { font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem); }
@media (max-width:880px){ .bento { grid-template-columns:1fr 1fr; } .bento .cell.big { grid-column:span 2; grid-row:auto; } }
@media (max-width:540px){ .bento { grid-template-columns:1fr; } .bento .cell.big { grid-column:auto; } }

/* =========================================================================
   STACK chips
   ========================================================================= */
.stack-grid { display:flex; flex-wrap:wrap; gap:12px; }
.chip { font-family:var(--f-body); border:1px solid var(--line); background:var(--bg-card); border-radius:var(--radius-pill); padding:.72em 1.2em; font-size:.9rem; font-weight:600; color:var(--text); transition:border-color .25s,color .25s,transform .25s; }
.chip:hover { border-color:var(--amarillo); color:var(--hi); transform:translateY(-2px); }

/* =========================================================================
   EQUIPO
   ========================================================================= */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:880px){ .team-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .team-grid { grid-template-columns:1fr 1fr; } }
.member { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-card); transition:border-color .35s,transform .35s; }
.member:hover { border-color:var(--line-2); transform:translateY(-5px); }
.member .photo { aspect-ratio:1/1.08; overflow:hidden; background:var(--bg-2); }
.member .photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); transition:filter .45s, transform .6s var(--ease); }
.member:hover .photo img { filter:grayscale(0); transform:scale(1.05); }
.member .info { padding:18px 20px 22px; position:relative; }
.member .info strong { display:block; color:var(--hi); font-weight:700; padding-right:38px; }
.member .info span { color:var(--violeta); font-size:.84rem; }
.member .ln { position:absolute; top:18px; right:18px; width:34px; height:34px; border:1px solid var(--line-2); border-radius:9px; display:grid; place-items:center; color:var(--text); transition:border-color .25s, color .25s, background .25s, transform .25s; }
.member .ln:hover { border-color:var(--violeta); color:#fff; background:var(--violeta); transform:translateY(-2px); }
.member .ln svg { width:16px; height:16px; }
.member.join { display:grid; place-items:center; text-align:center; background:var(--bg-1); border-style:dashed; }
.team-grid.three { grid-template-columns:repeat(3,1fr); max-width:920px; }
@media (max-width:780px){ .team-grid.three { grid-template-columns:1fr; max-width:420px; } }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list { border-top:1px solid var(--line); max-width:860px; }
.faq { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:26px 0; display:flex; justify-content:space-between; gap:20px; align-items:center;
  font-family:var(--f-body); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--hi); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { flex-shrink:0; width:30px; height:30px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; color:var(--amarillo); transition:transform .35s, background .35s; }
.faq[open] summary .pm { transform:rotate(45deg); background:var(--amarillo); color:#16160E; }
.faq .answer { padding:0 0 28px; color:var(--muted); max-width:72ch; line-height:1.7; }

/* =========================================================================
   CTA final
   ========================================================================= */
.cta-card { border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(44px,7vw,90px); text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(700px 380px at 50% 0%, rgba(143,147,255,.14), transparent 60%), var(--bg-card); }
.cta-card .glow { width:340px; height:340px; }
.cta-card h2 { font-size:clamp(2.2rem,6vw,4.2rem); position:relative; z-index:1; }
.cta-card p { color:var(--muted); margin:22px auto 0; max-width:52ch; position:relative; z-index:1; }
.cta-card .hero-actions { justify-content:center; position:relative; z-index:1; }

/* CTA final con formulario rápido (split) */
.cta-card.cta-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); text-align:left; align-items:center; }
.cta-split .cta-pitch { position:relative; z-index:1; }
.cta-split .cta-pitch h2 { font-size:clamp(1.9rem,3.8vw,3rem); margin-top:14px; }
.cta-split .cta-pitch p { margin:18px 0 0; color:var(--muted); max-width:44ch; }
.cta-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.cta-mini { margin-top:18px; font-size:.9rem; color:var(--muted); }
.cta-mini a { color:var(--amarillo); }
.cta-form { display:grid; gap:14px; position:relative; z-index:1; text-align:left;
  background:rgba(10,10,12,.55); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(22px,3vw,30px); backdrop-filter:blur(8px); }
@media (max-width:820px){
  .cta-card.cta-split { grid-template-columns:1fr; text-align:center; gap:32px; }
  .cta-split .cta-pitch p { margin-inline:auto; }
  .cta-actions { justify-content:center; }
  .cta-split .cta-mini { text-align:center; }
}

/* =========================================================================
   FORM
   ========================================================================= */
.form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form .full { grid-column:1/-1; }
.field label { display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.field input, .field select, .field textarea {
  width:100%; background:var(--bg-1); border:1px solid var(--line-2); border-radius:12px; padding:.9em 1em;
  font-family:var(--f-body); font-size:1rem; color:var(--hi); transition:border-color .25s, box-shadow .25s; }
.field textarea { min-height:120px; resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(236,242,71,.18); }
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }
/* ---- Custom select (dropdown propio, anclado al campo) ---- */
.cselect { position:relative; }
.cselect-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1em;
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:12px; padding:.9em 1em;
  font-family:var(--f-body); font-size:1rem; color:var(--hi); cursor:pointer; text-align:left; transition:border-color .2s, box-shadow .2s; }
.cselect-trigger:focus-visible { outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(236,242,71,.18); }
.cselect-trigger .cselect-value[data-empty] { color:var(--faint); }
.cselect-trigger svg { width:16px; height:16px; color:var(--muted); transition:transform .25s; flex-shrink:0; }
.cselect.open .cselect-trigger { border-color:var(--amarillo); }
.cselect.open .cselect-trigger svg { transform:rotate(180deg); }
.cselect-list { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40; margin:0; padding:6px; list-style:none;
  background:#1c1c20; border:1px solid var(--line-2); border-radius:12px; box-shadow:0 22px 54px rgba(0,0,0,.55);
  max-height:280px; overflow:auto; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.cselect.open .cselect-list { opacity:1; visibility:visible; transform:none; }
.cselect-list li { padding:.72em .9em; border-radius:8px; color:var(--text); cursor:pointer; font-size:.98rem; transition:background .15s, color .15s; }
.cselect-list li:hover, .cselect-list li[aria-selected="true"] { background:rgba(236,242,71,.14); color:#fff; }
.checks { display:grid; grid-template-columns:1fr 1fr; gap:13px 28px; }
.checks label { display:flex; align-items:center; gap:.6em; font-size:.95rem; cursor:pointer; color:var(--text); margin:0; text-transform:none; letter-spacing:0; transition:color .2s; }
.checks label:hover { color:var(--hi); }
.checks input { width:18px; height:18px; accent-color:var(--amarillo); flex-shrink:0; cursor:pointer; }
@media (max-width:680px){ .form { grid-template-columns:1fr; } }

/* ---- Contacto: form centrado ---- */
.contact-grid { max-width:720px; }
/* ---- Cierre con formulario completo ---- */
.cta-wrap { max-width:780px; }
.cta-form-card { margin-top:36px; background:rgba(10,10,12,.5); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(22px,3.4vw,40px); position:relative; z-index:1; text-align:left; }
/* estados del form */
.form-ok { grid-column:1/-1; text-align:center; padding:18px 6px; }
.form-ok-ic { width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--amarillo); color:#16160E; }
.form-ok-ic svg { width:30px; height:30px; }
.form-ok h3 { font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); }
.form-ok p { color:var(--muted); margin:12px auto 22px; max-width:42ch; }
.form-err { grid-column:1/-1; margin-top:12px; color:#ff8b8b; font-size:.92rem; text-align:center; }
.form-err a { color:var(--amarillo); }
@media (max-width:480px){ .checks { grid-template-columns:1fr; } }

/* =========================================================================
   PAGE HERO (subpáginas)
   ========================================================================= */
.page-hero { padding-top: clamp(140px,20vh,210px); padding-bottom: clamp(40px,6vw,72px); overflow:hidden; position:relative; }
.breadcrumb { display:flex; gap:.5em; align-items:center; font-size:.82rem; color:var(--muted); margin-bottom:24px; }
.breadcrumb a:hover { color:var(--amarillo); }
.breadcrumb .sep { color:var(--faint); }
.page-hero h1 { max-width:18ch; }
.page-hero .lead { margin-top:24px; max-width:60ch; }

/* prose for value-prop / legal */
.prose { max-width:760px; }
.prose p { color:var(--text); margin-bottom:20px; line-height:1.75; font-size:1.05rem; }
.prose h2 { margin:48px 0 18px; }
.prose h3 { margin:32px 0 12px; }
.prose ul { margin:0 0 22px; padding-left:0; list-style:none; }
.prose li { position:relative; padding-left:28px; margin-bottom:12px; color:var(--text); line-height:1.6; }
.prose li::before { content:""; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:var(--amarillo); }
.prose strong { color:var(--hi); font-weight:700; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top:1px solid var(--line); background:var(--bg-1); padding-block:clamp(60px,8vw,96px) 40px; position:relative; overflow:hidden; }
.site-footer .wrap { position:relative; z-index:1; }
.site-footer::after {
  content:"vantra"; position:absolute; left:50%; bottom:-.12em; transform:translateX(-50%);
  font-family:var(--f-display); font-size:clamp(7rem, 26vw, 24rem); line-height:.78; letter-spacing:-.02em;
  color:rgba(255,255,255,.035); pointer-events:none; z-index:0; white-space:nowrap; user-select:none;
}
@media (prefers-reduced-motion: no-preference){
  .site-footer::after { background:linear-gradient(180deg, rgba(236,242,71,.05), rgba(143,147,255,.02)); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.foot-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:820px){ .foot-grid { grid-template-columns:1fr 1fr; gap:32px 24px; } }
@media (max-width:480px){ .foot-grid { grid-template-columns:1fr 1fr; gap:28px 18px; } .foot-brand { grid-column:1/-1; } .site-footer { padding-block:48px 32px; } .site-footer::after{ font-size:30vw; bottom:-.06em; } }
.foot-grid h4 { font-family:var(--f-body); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:18px; }
.foot-grid a { display:block; padding:6px 0; color:var(--muted); font-size:.95rem; transition:color .2s; }
.foot-grid a:hover { color:var(--amarillo); }
.foot-brand .island-brand { margin-bottom:16px; }
.foot-brand p { color:var(--muted); font-size:.95rem; max-width:34ch; }
.foot-socials { display:flex; gap:10px; margin-top:18px; }
.foot-socials a { width:40px; height:40px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; color:var(--text); transition:border-color .25s,color .25s; padding:0; }
.foot-socials a:hover { border-color:var(--amarillo); color:var(--amarillo); }
.foot-socials svg { width:18px; height:18px; }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:60px; padding-top:28px; border-top:1px solid var(--line); color:var(--faint); font-size:.85rem; }
.foot-bottom a { color:var(--faint); }
.foot-bottom a:hover { color:var(--muted); }

/* =========================================================================
   REVEAL
   ========================================================================= */
.js [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in { opacity:1; transform:none; }
.js [data-reveal][data-delay="1"]{ transition-delay:.08s; }
.js [data-reveal][data-delay="2"]{ transition-delay:.16s; }
.js [data-reveal][data-delay="3"]{ transition-delay:.24s; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Cal.com inline embed ---- */
.cal-embed { height:720px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-2); background:var(--bg-card); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.cal-embed > div { width:100%; height:100%; }
@media (max-width:640px){ .cal-embed { height:600px; } }

/* ---- Barra de progreso de scroll (inmersiva) ---- */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:1100; background:linear-gradient(90deg,var(--violeta),var(--amarillo)); pointer-events:none; box-shadow:0 0 12px rgba(236,242,71,.4); }

/* ---- Compresión mobile: grids → carruseles con scroll-snap ---- */
@media (max-width:640px){
  section { padding-block: 58px; }
  .section-head { margin-bottom:30px; }
  .swipe-hint { display:flex; align-items:center; gap:.5em; font-size:.74rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
  .swipe-hint svg{ width:16px; height:16px; }

  .svc-grid, .bento, .team-grid {
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
    margin-inline:calc(var(--gutter)*-1); padding:4px var(--gutter) 14px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .svc-grid::-webkit-scrollbar, .bento::-webkit-scrollbar, .team-grid::-webkit-scrollbar { display:none; }
  .svc-grid .svc, .svc-grid .svc.banner { min-width:82%; scroll-snap-align:center; }
  .svc-grid .svc.banner { flex-direction:column; align-items:flex-start; }
  .bento .cell, .bento .cell.big { min-width:78%; scroll-snap-align:center; grid-column:auto; grid-row:auto; }
  .team-grid .member { min-width:62%; scroll-snap-align:center; }
}

/* =========================================================================
   TEXTURAS & DINAMISMO (v2.1)
   ========================================================================= */
/* Grano sutil global (no intercepta clicks) */
body::after {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){
  .glow { animation: floaty 16s var(--ease) infinite alternate; }
  .glow.v { animation-duration: 21s; animation-delay:-4s; }
}
@keyframes floaty { from { transform: translate(0,0) scale(1); } to { transform: translate(28px,-26px) scale(1.12); } }

/* Aurora animada para heros (capa decorativa detrás del contenido) */
.aurora { position:absolute; inset:-20% -10% auto -10%; height:120%; z-index:0; pointer-events:none; filter:blur(50px); opacity:.55;
  background:
    radial-gradient(42% 52% at 18% 28%, rgba(143,147,255,.42), transparent 62%),
    radial-gradient(30% 40% at 82% 22%, rgba(236,242,71,.12), transparent 62%),
    radial-gradient(44% 44% at 62% 82%, rgba(143,147,255,.28), transparent 62%);
  background-size:200% 200%; animation: aurora 24s ease infinite; }
@keyframes aurora { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion: reduce){ .aurora { animation:none; } }

/* Tira de logos de clientes (negros → blancos, marquee a doble) */
.logos-wrap { border-block:1px solid var(--line); padding-block:30px; background:var(--bg-1); overflow:hidden; position:relative; z-index:2; }
.logos-label { text-align:center; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:26px; }
.logos { display:flex; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos-track { display:flex; align-items:center; gap:clamp(40px,6vw,84px); padding-right:clamp(40px,6vw,84px); animation: scroll 44s linear infinite; flex-shrink:0; will-change:transform; }
.logos:hover .logos-track { animation-play-state:paused; }
.logos-track img { height:clamp(26px,3.4vw,38px); width:auto; filter:brightness(0) invert(1); opacity:.5; transition:opacity .3s, transform .3s; flex-shrink:0; }
.logos-track img:hover { opacity:1; transform:scale(1.06); }

/* Marquee inverso (segunda fila opcional) */
.marquee-track.rev { animation-direction: reverse; animation-duration: 40s; }

/* Tilt/realce de cards al pasar el mouse (potencia .svc/.cell ya existentes) */
@media (prefers-reduced-motion: no-preference){
  .svc, .case, .bento .cell, .member, .chip { will-change: transform; }
}

/* Línea divisoria con brillo */
.rule-glow { height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line-2),transparent); position:relative; }
.rule-glow::after { content:""; position:absolute; left:50%; top:-1px; width:120px; height:3px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--amarillo),transparent); filter:blur(2px); opacity:.6; }

/* ---- Nav: pill estático + hover prolijo (sin scroll-spy) ---- */
.island-pill { display:none; }
.island-links a:hover { background: rgba(255,255,255,.06); }
.island-links .has-sub > a::after { content:""; display:inline-block; width:6px; height:6px; margin-left:.45em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.6; transition:transform .3s; }
.island-links .has-sub:hover > a::after { transform:rotate(225deg) translateY(2px); }

/* ---- Carrusel de tecnología (logos a color) ---- */
.tech-rail-wrap { overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.tech-rail-wrap + .tech-rail-wrap { margin-top:14px; }
.tech-rail { display:flex; gap:14px; padding-right:14px; width:max-content; animation: scroll 42s linear infinite; will-change:transform; }
.tech-rail.rev { animation-direction:reverse; animation-duration:48s; }
.tech-rail-wrap:hover .tech-rail { animation-play-state:paused; }
.tech-chip { display:inline-flex; align-items:center; gap:12px; padding:15px 22px; background:var(--bg-card); border:1px solid var(--line); border-radius:14px; flex-shrink:0; transition:border-color .3s, transform .3s, background .3s; }
.tech-chip:hover { border-color:var(--line-2); transform:translateY(-3px); background:var(--bg-card-h); }
.tech-chip img { height:26px; width:26px; object-fit:contain; flex-shrink:0; }
.tech-chip span { font-family:var(--f-body); font-weight:600; font-size:.95rem; color:var(--text); white-space:nowrap; }

/* ---- Animaciones del Método (timeline) ---- */
@media (min-width: 881px) and (prefers-reduced-motion: no-preference){
  .js .timeline[data-reveal]::before { transform:scaleX(0); transform-origin:left; }
  .js .timeline[data-reveal].in::before { transform:scaleX(1); transition: transform 1.3s var(--ease) .15s; }
}
.phase .node { overflow:visible; }
.phase .node::after { content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--violeta); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .phase:hover .node::after { animation: pulsering 1.5s ease-out infinite; }
  .phase:hover .node { box-shadow:0 0 28px rgba(236,242,71,.35); }
}
@keyframes pulsering { 0%{opacity:.6; transform:scale(1)} 100%{opacity:0; transform:scale(1.55)} }

/* =========================================================================
   CASOS DE ÉXITO (hub filtrable + micro-landing)
   ========================================================================= */
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter { padding:.62em 1.2em; border:1px solid var(--line-2); border-radius:var(--radius-pill); background:transparent; color:var(--text); font-family:var(--f-body); font-weight:700; font-size:.88rem; cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .2s; }
.filter:hover { border-color:var(--violeta); color:#fff; transform:translateY(-1px); }
.filter.active { background:var(--amarillo); color:#16160E; border-color:var(--amarillo); }

.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .case-grid{ grid-template-columns:1fr; } }
.ccard { position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; border:1px solid var(--line); isolation:isolate; transition:transform .4s var(--ease), border-color .4s; }
.ccard:hover { transform:translateY(-6px); border-color:var(--line-2); }
.ccard .bg { position:absolute; inset:0; z-index:-2; background:var(--bg-2); }
.ccard .bg img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .7s var(--ease); }
.ccard:hover .bg img { transform:scale(1.06); }
.ccard::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(12,12,15,.12) 0%, rgba(12,12,15,.5) 48%, rgba(12,12,15,.94) 100%); }
.ccard .ctags { position:absolute; top:16px; left:16px; right:16px; z-index:2; display:flex; flex-wrap:wrap; gap:6px; }
.ccard .ctag { font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:.4em .7em; border-radius:var(--radius-pill); background:rgba(0,0,0,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22); color:#fff; }
.ccard .ctag.now { background:var(--amarillo); color:#16160E; border-color:transparent; }
.cd-tag.now { background:var(--amarillo); color:#16160E; border-color:transparent; }
.ccard h3 { font-family:var(--f-display); font-size:1.55rem; color:#fff; margin-top:14px; line-height:1; }
.ccard p { color:rgba(255,255,255,.82); font-size:.92rem; margin-top:10px; }
.ccard .cmore { margin-top:18px; display:inline-flex; align-items:center; gap:.55em; font-size:.84rem; font-weight:700; color:#fff; }
.ccard .cmore svg{ width:15px;height:15px; padding:6px; border:1px solid rgba(255,255,255,.32); border-radius:50%; transition:background .3s, color .3s, border-color .3s, transform .3s; }
.ccard:hover .cmore svg{ background:var(--amarillo); color:#16160E; border-color:var(--amarillo); transform:translateX(2px); }
.ccard.is-hidden { display:none; }
.ccard.logo-bg .bg { display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%, #232329, #15151a); }
.ccard.logo-bg .bg img { width:54%; height:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
.ccard.mono-bg .bg { display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%, #232329, #15151a); }
.ccard.mono-bg .bg span { font-family:var(--f-display); font-size:4rem; color:rgba(255,255,255,.12); }

/* Casos en mobile: 3 apiladas + el resto en carrusel horizontal (riel) */
.ccards-rail { display:none; }
.case-rail-hint { display:none; }
@media (max-width:600px){
  .case-grid { display:block; }
  .case-grid .ccard { width:100%; margin-bottom:16px; }
  .ccards-rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--gutter)*-1); padding:4px var(--gutter) 16px; scrollbar-width:none; }
  .ccards-rail::-webkit-scrollbar{ display:none; }
  .ccards-rail .ccard { flex:0 0 82%; min-width:82%; scroll-snap-align:center; margin-bottom:0; }
  .case-rail-hint { display:flex; align-items:center; gap:.5em; font-size:.74rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; margin:2px 0 12px; }
  .case-rail-hint svg{ width:16px; height:16px; }
}

/* Detalle (micro-landing) */
.case-detail { padding-top:clamp(120px,16vh,175px); }
.cd-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; }
.cd-back { display:inline-flex; align-items:center; gap:.5em; color:var(--muted); font-weight:600; }
.cd-back:hover { color:var(--amarillo); }
.cd-back svg{ width:18px;height:18px; }
.cd-head { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,5vw,60px); align-items:start; }
@media (max-width:860px){ .cd-head{ grid-template-columns:1fr; } }
.cd-eyebrow { color:var(--violeta); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }
.cd-name { font-family:var(--f-display); font-size:clamp(2.4rem,6.5vw,4.6rem); color:var(--hi); line-height:.98; margin-top:14px; }
.cd-tags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 26px; }
.cd-tag { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.45em .9em; border-radius:var(--radius-pill); background:rgba(143,147,255,.12); color:var(--violeta); border:1px solid var(--line); }
.cd-plan h2 { font-family:var(--f-body); font-weight:800; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.cd-plan p { color:var(--text); line-height:1.78; font-size:1.06rem; }
.cd-meta { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-card); padding:28px; }
.cd-meta dl { display:grid; gap:20px; margin:0; }
.cd-meta dt { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.cd-meta dd { margin:0; color:var(--hi); font-weight:600; font-size:.98rem; }
.cd-meta dd a { color:var(--amarillo); word-break:break-word; }
.cd-hero { margin:clamp(34px,5vw,58px) 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); position:relative; }
.cd-hero img { width:100%; display:block; }
.cd-hero.logo { aspect-ratio:16/7; display:grid; place-items:center; background:radial-gradient(120% 120% at 50% 0%, #232329, #14141a); }
.cd-hero.logo img { width:min(300px,42%); filter:brightness(0) invert(1); }
.cd-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; border-top:1px solid var(--line); padding-top:clamp(34px,4vw,52px); }
@media (max-width:680px){ .cd-metrics{ grid-template-columns:1fr; gap:18px; } }
.cd-metrics .m .v { font-family:var(--f-display); font-size:clamp(2.2rem,4.6vw,3.4rem); color:var(--hi); line-height:1; }
.cd-metrics .m .v .hl{ color:var(--amarillo); }
.cd-metrics .m p { color:var(--muted); margin-top:12px; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---- Tabla comparativa (Somos / No somos) ---- */
.compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-card); }
.compare { width:100%; min-width:560px; border-collapse:collapse; }
.compare th, .compare td { padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px); text-align:left; vertical-align:middle; }
.compare thead th { font-family:var(--f-body); font-weight:800; font-size:1.05rem; border-bottom:1px solid var(--line-2); }
.compare thead .c-somos { color:var(--hi); }
.compare thead .c-somos small { display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--violeta); margin-bottom:4px; }
.compare thead .c-no { color:var(--muted); }
.compare thead .c-no small { display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.compare tbody td { border-bottom:1px solid var(--line); font-size:.98rem; }
.compare tbody tr:last-child td { border-bottom:0; }
.compare td.somos { color:var(--hi); }
.compare td.no { color:var(--muted); }
.compare td.somos, .compare th.c-somos { background:rgba(143,147,255,.06); }
.compare .mk { display:inline-flex; align-items:center; gap:.6em; }
.compare .mk svg { width:18px; height:18px; flex-shrink:0; }
.compare td.somos .mk svg { color:var(--violeta); }
.compare td.no .mk svg { color:var(--faint); }
@media (prefers-reduced-motion:no-preference){ .compare tbody tr { transition:background .25s; } .compare tbody tr:hover td { background:rgba(255,255,255,.03); } .compare tbody tr:hover td.somos { background:rgba(143,147,255,.1); } }

/* ---- Carrusel de valores (color al pasar) ---- */
.val-rail-wrap { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.val-rail { display:flex; gap:16px; padding-right:16px; width:max-content; animation: scroll 50s linear infinite; will-change:transform; }
.val-rail-wrap:hover .val-rail { animation-play-state:paused; }
.val-card { width:300px; flex-shrink:0; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px; position:relative; overflow:hidden;
  transition:border-color .35s, transform .35s, background .35s; }
.val-card::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:var(--acc,var(--violeta)); transition:transform .4s var(--ease); }
.val-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb, var(--acc,var(--violeta)) 60%, transparent); background:var(--bg-card-h); }
.val-card:hover::before { transform:scaleX(1); }
.val-card .vn { font-family:var(--f-display); font-size:1.3rem; color:var(--faint); transition:color .35s; }
.val-card:hover .vn { color:var(--acc,var(--violeta)); }
.val-card h3 { margin:14px 0 10px; transition:color .35s; }
.val-card:hover h3 { color:var(--acc,var(--violeta)); }
.val-card p { color:var(--muted); font-size:.95rem; }
.val-card:nth-child(3n+1){ --acc:var(--violeta); }
.val-card:nth-child(3n+2){ --acc:var(--amarillo); }
.val-card:nth-child(3n+3){ --acc:var(--cream); }

/* ---- Nav móvil más prolijo ---- */
@media (max-width: 600px){
  .island { top:12px; width: calc(100% - 20px); }
  .island-bar { padding:8px 8px 8px 16px; }
  .island-cta .btn-primary { display:none; }       /* el CTA vive en el overlay */
  .island-brand { font-size:1.08rem; }
}
@media (max-width: 380px){ .island-brand span.dot { display:none; } }