/* Tipografías propias (antes venían de Google Fonts: dos conexiones externas en cadena que frenaban la carga) */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* AMPLIFIA v2 — capítulos inmersivos. Poco texto, mucha escala, un movimiento a la vez. */
:root {
  --ink: #070707;
  --paper: #efece5;
  --lime: #d7f24a;
  --olive: #43590a;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(22px, 4.4vw, 76px);
  --r: clamp(22px, 3vw, 46px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: var(--sans); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--paper); background: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografía ---------- */
.mega, .xl, .lg { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; font-synthesis: none; }
.mega { font-size: clamp(60px, 13.5vw, 270px); line-height: 0.86; }
.xl { font-size: clamp(42px, 7.6vw, 148px); line-height: 0.92; }
.lg { font-size: clamp(30px, 3.6vw, 64px); line-height: 0.98; letter-spacing: -0.015em; }
em { font-style: italic; color: var(--lime); }
.tiny { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; opacity: 0.72; }
.sub { font-size: clamp(15px, 1.25vw, 20px); line-height: 1.5; max-width: 40ch; opacity: 0.8; }
.w-mask { padding-top: 0.14em; margin-top: -0.14em; padding-bottom: 0.34em; margin-bottom: -0.34em; }   /* máscara de SplitText sin cortar los rabitos */
.js .split { visibility: hidden; }
.js .split.is-split { visibility: visible; }

/* ---------- estructura de escenas ---------- */
.track { position: relative; height: calc(var(--len) * 100vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate; }
.bgv { position: absolute; inset: 0; overflow: hidden; }
.bgv img, .bgv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgv video { opacity: 0; transition: opacity 1.1s ease; }
.bgv video.is-ready { opacity: 1; }
.shade { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(7,7,7,0.05), rgba(7,7,7,0.6)), linear-gradient(180deg, rgba(7,7,7,0.45), rgba(7,7,7,0.1) 40%, rgba(7,7,7,0.6)); }
.shade-strong { background: linear-gradient(180deg, rgba(7,7,7,0.6), rgba(7,7,7,0.35) 45%, rgba(7,7,7,0.7)); }
.shade-hero { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(7,7,7,0.05), rgba(7,7,7,0.55)), linear-gradient(180deg, rgba(7,7,7,0.5), rgba(7,7,7,0.05) 45%, rgba(7,7,7,0.7)); }
.scene-top { position: absolute; top: clamp(84px, 12vh, 120px); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; z-index: 3; }
.count b { font-weight: 500; }

/* láminas de color que suben sobre la escena anterior */
.sheet { position: relative; z-index: 5; margin-top: calc(var(--r) * -1); border-radius: var(--r) var(--r) 0 0; background: var(--ink); color: var(--paper); }
.sheet.paper { background: var(--paper); color: var(--ink); }
.paper em { color: var(--olive); }
.paper .tiny { opacity: 0.6; }

/* ---------- cabecera, menú, riel ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: clamp(14px, 1.8vw, 26px) var(--pad); color: var(--paper); transition: color 0.5s var(--ease); pointer-events: none; }
.hdr > * { pointer-events: auto; }
html[data-hdr="light"] .hdr { color: var(--ink); }
.menu-open .hdr { color: var(--paper) !important; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 26px; }
.brand svg { width: 22px; height: 26px; overflow: visible; }
.bar { fill: currentColor; }
.stripe { fill: var(--lime); transition: fill 0.5s var(--ease); }
html[data-hdr="light"] .stripe { fill: var(--olive); }
.menu-open .stripe { fill: var(--lime) !important; }
.menu-btn { position: relative; display: flex; align-items: center; gap: 14px; height: 44px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.menu-btn .mb-close { display: none; }
.menu-open .menu-btn .mb-open { display: none; }
.menu-open .menu-btn .mb-close { display: inline; }
.menu-btn i { display: block; width: 30px; height: 1px; background: currentColor; position: relative; }
.menu-btn i::after { content: ""; position: absolute; left: 8px; top: 6px; width: 22px; height: 1px; background: currentColor; transition: transform 0.4s var(--ease), left 0.4s var(--ease), width 0.4s var(--ease), top 0.4s var(--ease); }
.menu-open .menu-btn i { transform: rotate(45deg); }
.menu-open .menu-btn i::after { left: 0; width: 30px; top: 0; transform: rotate(-90deg); }
.menu { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.9s var(--ease), visibility 0s 0.9s; }
.menu-open .menu { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path 0.9s var(--ease), visibility 0s; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: baseline; gap: 22px; font-family: var(--serif); font-size: clamp(38px, 7.4vw, 110px); line-height: 1.02; padding: 2px 0; opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), color 0.4s; }
.menu-links a span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; opacity: 0.5; min-width: 28px; }
.menu-links a:hover { color: var(--lime); }
.menu-open .menu-links a { opacity: 1; transform: none; }
.menu-open .menu-links a:nth-child(1) { transition-delay: 0.25s; } .menu-open .menu-links a:nth-child(2) { transition-delay: 0.31s; } .menu-open .menu-links a:nth-child(3) { transition-delay: 0.37s; } .menu-open .menu-links a:nth-child(4) { transition-delay: 0.43s; } .menu-open .menu-links a:nth-child(5) { transition-delay: 0.49s; } .menu-open .menu-links a:nth-child(6) { transition-delay: 0.55s; } .menu-open .menu-links a:nth-child(7) { transition-delay: 0.61s; }
.menu-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(20px, 5vh, 46px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 30px; font-size: 14px; opacity: 0.7; }
.rail { position: fixed; left: var(--pad); bottom: clamp(18px, 3vh, 32px); z-index: 60; display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--paper); pointer-events: none; transition: color 0.5s var(--ease), opacity 0.5s; }
html[data-hdr="light"] .rail { color: var(--ink); }
.rail i { display: block; width: 44px; height: 1px; background: currentColor; opacity: 0.5; }
.rail span { opacity: 0.75; }
.menu-open .rail { opacity: 0; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }

/* ---------- carga ---------- */
.pre { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 26px; }
.js .pre { display: flex; }
.pre-mark { width: 54px; height: 64px; overflow: visible; color: var(--paper); }
.pre-mark .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.pre-count { position: absolute; left: var(--pad); bottom: clamp(20px, 5vh, 46px); font-family: var(--serif); font-size: clamp(56px, 9vw, 150px); line-height: 0.8; display: flex; align-items: flex-start; }
.pre-count span { font-size: 0.32em; margin: 0.1em 0 0 0.12em; opacity: 0.6; }

/* ---------- 01 inicio ---------- */
.hero .stage { background: var(--ink); }
.hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(12px, 2vh, 24px); padding: 0 var(--pad); }
.hero-word { font-size: clamp(60px, 17vw, 330px); text-transform: uppercase; letter-spacing: 0.005em; overflow: hidden; padding: 0.05em 0.02em 0.02em; }
.hero-word .ch { display: inline-block; will-change: transform; }
.hero-tag { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.3vw, 40px); opacity: 0.92; }
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.75; }
.hero-scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(239,236,229,0), rgba(239,236,229,0.9)); }

/* ---------- 02 manifiesto ---------- */
.manif .stage { display: flex; align-items: center; padding: 0 var(--pad); background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(215,242,74,0.10), transparent 70%), var(--ink); }
.manif-text { max-width: 15.5em; }
.manif-text .w { opacity: 0.13; }

/* ---------- 03 problema / 06 roadmap: una frase por vez ---------- */
.ph-list, .rd-steps { position: absolute; inset: 0; z-index: 2; }
.ph-item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.4vh, 36px); padding: 0 var(--pad); }
.ph-item h2 { max-width: 12.5em; }
.ph-item .sub { opacity: 0; }

/* ---------- 04 qué hacemos: paneles que se abren ---------- */
.pn { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.pn-media { will-change: transform; }
.pn-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(14px, 2.4vh, 28px); padding: 0 var(--pad) clamp(70px, 12vh, 130px); }
.pn-copy .xl { max-width: 13em; }

/* ---------- 05 frentes: recorrido horizontal ---------- */
.hz .stage { display: flex; align-items: center; }
.hz-track { display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 40px); padding: 0 var(--pad); will-change: transform; height: min(74vh, 780px); margin-top: 6vh; flex: none; width: max-content; }
.hz-intro { flex: none; width: min(46vw, 760px); display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-right: 4vw; }
.card { position: relative; flex: none; width: clamp(290px, 31vw, 560px); border-radius: 6px; overflow: hidden; background: #101010; }
.card-img { position: absolute; inset: 0; overflow: hidden; }
.card-img img { max-width: none; position: absolute; top: 0; left: -14%; width: 128%; height: 100%; object-fit: cover; opacity: 0.85; }
.card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0.25), rgba(7,7,7,0.85)); }
.card-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(20px, 2.2vw, 36px); }
.card-body ul { display: grid; margin-top: 8px; }
.card-body li { font-size: clamp(13px, 1vw, 16px); opacity: 0.78; padding: 8px 0; border-top: 1px solid rgba(239,236,229,0.16); }
.hz-end { flex: none; width: 4vw; }
.hz-bar { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(22px, 4.4vh, 44px); height: 1px; background: rgba(239,236,229,0.2); z-index: 3; }
.hz-bar i { display: block; height: 2px; margin-top: -0.5px; background: var(--lime); transform: scaleX(0); transform-origin: left; }

/* ---------- 06 roadmap ---------- */
.rd-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); gap: clamp(10px, 2vh, 22px); }
.rd-num { font-family: var(--serif); font-size: clamp(120px, 26vw, 520px); line-height: 0.7; color: transparent; -webkit-text-stroke: 1px rgba(215,242,74,0.55); position: absolute; right: var(--pad); top: 50%; letter-spacing: -0.04em; }
.rd-step h2 { position: relative; z-index: 1; }
.rd-lines { position: relative; z-index: 1; display: flex; gap: clamp(24px, 6vw, 110px); flex-wrap: wrap; margin-top: clamp(18px, 4vh, 44px); }
.rd-lines p { max-width: 26ch; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.45; border-top: 1px solid rgba(239,236,229,0.25); padding-top: 14px; }
.rd-lines b { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 10px; }
.rd-foot { position: absolute; z-index: 3; left: var(--pad); bottom: clamp(70px, 11vh, 110px); opacity: 0; }
.rd-line { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: clamp(30px, 6vh, 56px); height: 1px; background: rgba(239,236,229,0.22); display: flex; justify-content: space-between; }
.rd-line i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.rd-line b { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(239,236,229,0.6); margin-top: -4.5px; }

/* ---------- 07 nosotros ---------- */
.us { padding: clamp(110px, 16vh, 190px) var(--pad) clamp(70px, 12vh, 140px); }
.us-head { display: grid; gap: 22px; margin-bottom: clamp(70px, 12vh, 150px); }
.person { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 6vw, 130px); align-items: center; margin-bottom: clamp(70px, 14vh, 170px); }
.person.rev { grid-template-columns: 6fr 5fr; }
.person.rev .ph { order: 2; }
.ph { position: relative; overflow: hidden; aspect-ratio: 4 / 4.9; background: #d8d4cb; }
.ph img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 16%; will-change: transform; }
.person-copy { display: grid; gap: 22px; align-content: center; }
.role { opacity: 0.6; max-width: 34ch; }
.bio { max-width: 42ch; }

/* ---------- 08 proyectos ---------- */
.pj { padding: clamp(110px, 16vh, 190px) 0 0; overflow: hidden; }
.pj-head { padding: 0 var(--pad); margin-bottom: clamp(30px, 6vh, 70px); }
.pj-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 30px; padding: clamp(34px, 7vh, 80px) var(--pad); border-top: 1px solid rgba(239,236,229,0.18); overflow: hidden; }
.pj-row:last-child { border-bottom: 1px solid rgba(239,236,229,0.18); }
.pj-bg { position: absolute; inset: 0; z-index: 0; clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--ease); }
.pj-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transform: scale(1.15); transition: transform 1.4s var(--ease); }
.pj-bg::after { content: ""; position: absolute; inset: 0; background: rgba(7,7,7,0.45); }
.pj-row > *:not(.pj-bg) { position: relative; z-index: 1; }
.pj-tag { grid-column: 1 / -1; }
.pj-title { grid-column: 1; }
.pj-desc { grid-column: 1; opacity: 0.75; max-width: 40ch; }
.pj-go { grid-column: 2; grid-row: 2 / 4; align-self: end; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.pj-go i { font-style: normal; display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; transition: background 0.4s, color 0.4s, transform 0.5s var(--ease); }
@media (any-hover: hover) {
  .pj-row:hover .pj-bg { clip-path: inset(0 0 0 0); }
  .pj-row:hover .pj-bg img { transform: scale(1); }
  .pj-row:hover .pj-go i { background: var(--lime); color: var(--ink); transform: rotate(45deg); }
}

/* ---------- 09 empresas ---------- */
.mq { padding: clamp(80px, 14vh, 160px) 0; overflow: hidden; background: var(--ink); position: relative; z-index: 4; }
.mq-label { display: block; padding: 0 var(--pad); margin-bottom: clamp(24px, 5vh, 56px); }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-set { display: flex; align-items: center; flex: none; }
.mq-set span { font-family: var(--serif); font-size: clamp(56px, 9.6vw, 190px); line-height: 1; white-space: nowrap; padding: 0 0.12em; }
.mq-set i { display: block; width: clamp(14px, 1.6vw, 26px); height: clamp(14px, 1.6vw, 26px); border-radius: 50%; background: var(--lime); flex: none; margin: 0 0.4em; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 10 preguntas ---------- */
.faq { padding: clamp(110px, 16vh, 190px) var(--pad); display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(28px, 6vw, 120px); align-items: start; }
.faq-side { position: sticky; top: clamp(100px, 16vh, 160px); display: grid; gap: 22px; }
.qa { border-top: 1px solid rgba(7,7,7,0.18); }
.qa:last-child { border-bottom: 1px solid rgba(7,7,7,0.18); }
.qa > button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding: clamp(18px, 2.6vh, 26px) 0; font-family: var(--serif); font-size: clamp(22px, 2vw, 32px); line-height: 1.15; }
.qa i { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid rgba(7,7,7,0.25); border-radius: 50%; transition: background 0.4s var(--ease), transform 0.5s var(--ease); }
.qa i::before, .qa i::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.qa i::before { width: 12px; height: 1px; margin: -0.5px 0 0 -6px; }
.qa i::after { width: 1px; height: 12px; margin: -6px 0 0 -0.5px; transition: opacity 0.3s; }
.qa.is-open i { transform: rotate(90deg); background: var(--lime); border-color: var(--lime); }
.qa.is-open i::after { opacity: 0; }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; min-height: 0; }
.qa-a p { padding: 0 60px clamp(20px, 3vh, 30px) 0; max-width: 60ch; opacity: 0.7; font-size: clamp(15px, 1.2vw, 18px); }

/* ---------- 11 contacto ---------- */
.ct { overflow: hidden; }
.ct-bg { z-index: 0; }
.ct-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 120px); align-items: end; padding: clamp(120px, 20vh, 240px) var(--pad) clamp(50px, 9vh, 100px); min-height: 100vh; }
.ct-left { display: grid; gap: 24px; align-content: end; }
.ct-direct { display: grid; gap: 6px; margin-top: 10px; }
.ct-direct a { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 36px); width: fit-content; border-bottom: 1px solid rgba(239,236,229,0.25); transition: border-color 0.4s; }
.ct-direct a:hover { border-color: var(--lime); }
.cf { display: grid; gap: 22px; }
.cf-field { display: grid; gap: 4px; }
.cf-field label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; font-weight: 500; }
.cf-field input, .cf-field textarea { width: 100%; padding: 10px 0; font: inherit; font-size: clamp(17px, 1.4vw, 21px); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(239,236,229,0.3); border-radius: 0; outline: none; transition: border-color 0.4s; resize: none; }
.cf-field input:focus, .cf-field textarea:focus { border-color: var(--lime); }
.cf-field.is-error input, .cf-field.is-error textarea { border-color: #ff8a6b; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; padding: 16px 30px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 500; transition: background 0.4s var(--ease), transform 0.5s var(--ease); }
.btn:hover { background: var(--paper); transform: translateY(-2px); }
.cf-mail { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; opacity: 0.7; }
.cf-mail:hover { opacity: 1; }
.cf-note { min-height: 1.4em; font-size: 14px; color: var(--lime); }
.cf-note.is-error { color: #ff8a6b; }
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding: 0 var(--pad) clamp(24px, 4vh, 40px); font-size: 13px; opacity: 0.7; }
.foot nav { display: flex; gap: 8px 26px; flex-wrap: wrap; }

.wa { position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 3vh, 28px); z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.35); opacity: 0; transform: scale(0.85); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.menu-open .wa { opacity: 0 !important; pointer-events: none; }
.wa svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .hdr { padding-top: 10px; padding-bottom: 10px; }
  .rail { display: none; }
  .mega { font-size: clamp(50px, 17vw, 120px); }
  .xl { font-size: clamp(38px, 11.4vw, 84px); }
  .hero-word { font-size: clamp(46px, 17.5vw, 130px); }
  .rd-num { font-size: 46vw; top: 26%; right: 4vw; }
  .rd-lines { flex-direction: column; gap: 18px; }
  .rd-foot { bottom: 84px; }
  .hz-track { height: 66vh; margin-top: 8vh; }
  .hz-intro { width: 78vw; }
  .card { width: 74vw; }
  .person, .person.rev { grid-template-columns: 1fr; gap: 26px; }
  .person.rev .ph { order: 0; }
  .faq { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .qa-a p { padding-right: 0; }
  .ct-inner { grid-template-columns: 1fr; align-items: start; }
  .pj-row { grid-template-columns: 1fr; }
  .pj-go { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .wa { width: 52px; height: 52px; }
}
@media (any-hover: none) { .pj-bg { clip-path: inset(0 0 0 0); } .pj-bg img { opacity: 0.35; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
}

/* fondos negros con un brillo sutil (sin video) */
.ambient { position: absolute; inset: 0; pointer-events: none; }
.a1 { background: radial-gradient(ellipse 60% 55% at 78% 88%, rgba(215,242,74,0.16), transparent 70%); }
.a2 { background: radial-gradient(ellipse 55% 60% at 18% 20%, rgba(215,242,74,0.13), transparent 70%); }
.a3 { background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(215,242,74,0.18), transparent 72%); }
.a4 { background: radial-gradient(ellipse 50% 60% at 90% 30%, rgba(215,242,74,0.14), transparent 70%); }
.a5 { background: radial-gradient(ellipse 65% 55% at 30% 85%, rgba(215,242,74,0.15), transparent 70%); }
.card-img::after { background: linear-gradient(180deg, rgba(7,7,7,0), rgba(7,7,7,0.5)); }
.card { border: 1px solid rgba(239,236,229,0.12); background: #0b0b0b; }
.hero-cta { margin-top: clamp(10px, 2vh, 22px); }
.cta { position: relative; z-index: 5; overflow: hidden; margin-top: calc(var(--r) * -1); border-radius: var(--r) var(--r) 0 0; background: var(--ink); padding: clamp(120px, 20vh, 240px) var(--pad); display: grid; gap: 26px; justify-items: start; }
.cta > *:not(.ambient) { position: relative; z-index: 1; }
.cta .btn { margin-top: 8px; }
.pn:nth-child(2) { background: #0c0e07; } .pn:nth-child(3) { background: #0a0d0b; } .pn:nth-child(4) { background: #10130a; }
.pn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(215,242,74,0.55); z-index: 3; }

/* ---------- sin scroll obligatorio: todo el texto visible al llegar ---------- */
.manif-in { min-height: 100vh; display: flex; align-items: center; padding: 0 var(--pad); background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(215,242,74,0.10), transparent 70%), var(--ink); position: relative; z-index: 4; }
.cap-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 86px); line-height: 0.95; letter-spacing: -0.02em; }
.caps { position: relative; z-index: 4; background: var(--ink); }
.caps-in { min-height: 100vh; padding: clamp(96px, 13vh, 130px) var(--pad) clamp(28px, 5vh, 56px); display: flex; flex-direction: column; gap: 22px; }
.cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 24px); min-height: 60vh; }
.col { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(22px, 2.4vw, 40px); background: #0a0a0a; border: 1px solid rgba(239,236,229,0.12); border-radius: 6px; }
.col > *:not(.ambient) { position: relative; z-index: 1; }
.caps-close { padding: clamp(60px, 12vh, 150px) var(--pad); display: grid; gap: 20px; max-width: 1500px; }
.fr { position: relative; z-index: 4; background: var(--ink); }
.fr-in { min-height: 100vh; padding: clamp(96px, 13vh, 130px) var(--pad) clamp(30px, 6vh, 70px); display: flex; flex-direction: column; gap: clamp(20px, 3vh, 34px); }
.fr-head { display: grid; gap: 10px; }
.fr-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 24px); }
.fr .card { position: relative; overflow: hidden; width: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(18px, 1.8vw, 30px); border-radius: 6px; }
.fr .card > *:not(.ambient) { position: relative; z-index: 1; }
.fr .card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 44px); line-height: 1; letter-spacing: -0.015em; }
.fr .card ul { display: grid; margin-top: 6px; }
.fr .card li { font-size: clamp(12.5px, 0.95vw, 15px); opacity: 0.78; padding: 6px 0; border-top: 1px solid rgba(239,236,229,0.14); }
.rm { position: relative; z-index: 4; background: var(--ink); }
.rm-in { min-height: 100vh; padding: clamp(96px, 13vh, 130px) var(--pad) clamp(30px, 6vh, 70px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.rm-head { display: grid; gap: 10px; }
.rm-wrap { position: relative; }
.rm-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(239,236,229,0.2); }
.rm-line i { display: block; height: 2px; margin-top: -0.5px; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.rm-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 36px); }
.rm-col { position: relative; padding-top: 34px; display: grid; gap: 14px; align-content: start; }
.rm-col::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--lime); }
.rm-num { font-family: var(--serif); font-size: clamp(60px, 8vw, 150px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(215,242,74,0.6); }
.rm-col p { font-size: clamp(14px, 1.1vw, 18px); line-height: 1.45; border-top: 1px solid rgba(239,236,229,0.2); padding-top: 12px; }
.rm-col b { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 8px; }
.rm-foot { opacity: 0.7; }
@media (max-width: 860px) {
  .cols, .fr-grid, .rm-cols { grid-template-columns: 1fr; }
  .col { min-height: 42vh; }
  .rm-line, .rm-col::before { display: none; }
  .rm-col { padding-top: 22px; padding-bottom: 22px; border-top: 1px solid rgba(239,236,229,0.16); }
}

/* ---------- ronda 2 ---------- */
.card-img .ambient { position: absolute; inset: 0; }
.card-img { background: #0b0b0b; }
.card { border: 1px solid rgba(239,236,229,0.12); }

/* retratos más chicos */
.person { grid-template-columns: min(28vw, 400px) 1fr; justify-content: start; gap: clamp(28px, 6vw, 120px); }
.person.rev { grid-template-columns: 1fr min(28vw, 400px); }
.person .ph { aspect-ratio: 4 / 4.6; width: 100%; }
@media (max-width: 860px) {
  .person, .person.rev { grid-template-columns: 1fr; }
  .person .ph { max-width: 300px; }
  .person.rev .ph { order: 0; }
}

/* roadmap animado */
.rm-col::before { transform: scale(0); transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.5, 1); box-shadow: 0 0 0 0 rgba(215,242,74,0); }
.rm-col.on::before { transform: scale(1); animation: rmPulse 2.4s ease-out 0.6s 2; }
.rm-col.on .rm-num { -webkit-text-stroke-color: rgba(215,242,74,0.95); }
.rm-num { transition: -webkit-text-stroke-color 1s ease; }
.rm-line i { position: relative; box-shadow: 0 0 14px rgba(215,242,74,0.55); }
.rm-line i::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px 4px rgba(215,242,74,0.7); }
@keyframes rmPulse { 0% { box-shadow: 0 0 0 0 rgba(215,242,74,0.6); } 100% { box-shadow: 0 0 0 22px rgba(215,242,74,0); } }

/* empresas: anillo 3D (el original) */
.trust { position: relative; z-index: 4; background: var(--ink); padding: clamp(90px, 14vh, 150px) 0 clamp(50px, 9vh, 100px); overflow: hidden; }
.trust-head { padding: 0 var(--pad); }
.c3d { position: relative; margin-top: 3vh; }
.c3d-stage { --c3d-w: min(300px, 24vw); --c3d-h: calc(var(--c3d-w) * 0.62); position: relative; height: min(64vh, 560px); perspective: 1500px; perspective-origin: 50% 30%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.c3d-stage.is-dragging { cursor: grabbing; }
.c3d-stage.is-off .c3d-ring { visibility: hidden; }
.c3d-ring { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.c3d-card, .c3d-back { position: absolute; left: calc(var(--c3d-w) / -2); top: calc(var(--c3d-h) / -2); width: var(--c3d-w); height: var(--c3d-h); margin: 0; box-sizing: border-box; border-radius: 20px; border: 3px solid rgba(255,255,255,0.09); background-color: #070707; background-image: linear-gradient(180deg, #151515 0%, #070707 64%); box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.06) inset; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; transition: border-color 0.6s ease, box-shadow 0.6s ease; will-change: transform, opacity; }
.c3d-card::before, .c3d-back::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.08) 50%, transparent 64%); pointer-events: none; }
.c3d-card.is-front { border-color: rgba(215,242,74,0.55); box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 40px rgba(215,242,74,0.18), 0 2px 0 rgba(255,255,255,0.06) inset; }
.c3d-name { position: relative; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 34px); line-height: 1.05; text-align: center; padding: 0 12%; letter-spacing: -0.01em; }
.c3d-back svg { width: 20%; height: auto; overflow: visible; opacity: 0.6; }
.c3d-back .cb-bar { fill: rgba(255,255,255,0.85); }
.c3d-back .cb-stripe { fill: var(--lime); }
.c3d-floor { position: absolute; left: 50%; bottom: 4%; width: min(78%, 980px); height: 22%; translate: -50% 0; background: radial-gradient(50% 50% at 50% 50%, rgba(215,242,74,0.2), transparent 72%); filter: blur(6px); pointer-events: none; }
.c3d-hint { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 1vh 0 0; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); transition: opacity 0.6s ease; }
.c3d-hint i { width: 34px; height: 1px; background: rgba(215,242,74,0.7); }
.c3d-hint.is-hidden { opacity: 0; }
@media (max-width: 860px) { .c3d-stage { --c3d-w: min(184px, 50vw); height: 370px; perspective: 880px; } }

/* retratos: la cara completa (las fotos son horizontales) */
.person { grid-template-columns: min(36vw, 500px) 1fr; }
.person.rev { grid-template-columns: 1fr min(36vw, 500px); }
.person .ph { aspect-ratio: 5 / 4; }
.ph img { top: 0; height: 100%; object-position: var(--fx, 50%) 6%; }
@media (max-width: 860px) { .person .ph { max-width: 100%; } }

/* ---------- El problema: cinco filas, todo a la vista ---------- */
.prob { position: relative; z-index: 4; background: var(--ink); overflow: hidden; }
.prob-in { position: relative; min-height: 100vh; padding: clamp(96px, 13vh, 130px) var(--pad) clamp(30px, 6vh, 70px); display: flex; flex-direction: column; gap: clamp(16px, 3vh, 34px); }
.prob-head { display: flex; justify-content: space-between; }
.pr-list { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pr-row { position: relative; display: grid; grid-template-columns: clamp(44px, 5vw, 90px) minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 44px); align-items: center; padding: clamp(18px, 3.4vh, 36px) 0; transition: opacity 0.5s var(--ease); }
.pr-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(239,236,229,0.2); transform-origin: left; }
.pr-row:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(239,236,229,0.2); }
.pr-n { font-size: 11px; letter-spacing: 0.22em; opacity: 0.55; font-weight: 500; }
.pr-t { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 66px); line-height: 0.98; letter-spacing: -0.02em; transition: color 0.5s var(--ease), transform 0.6s var(--ease); }
.pr-s { font-size: clamp(14px, 1.15vw, 19px); line-height: 1.5; opacity: 0.7; max-width: 34ch; transition: opacity 0.5s var(--ease); }
@media (any-hover: hover) {
  .pr-list:hover .pr-row { opacity: 0.32; }
  .pr-list .pr-row:hover { opacity: 1; }
  .pr-row:hover .pr-t { color: var(--lime); font-style: italic; transform: translateX(14px); }
  .pr-row:hover .pr-s { opacity: 0.95; }
}
@media (max-width: 860px) {
  .prob-in { min-height: 0; }
  .pr-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Qué hacemos: los tres módulos integrados (un solo bloque) ---------- */
.cols { position: relative; gap: 0; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(239,236,229,0.14); border-radius: 8px; }
.cols .col { background: transparent; border: 0; border-radius: 0; }
.cols .col + .col { border-left: 1px solid rgba(239,236,229,0.10); }
.cols-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 55% at 16% 100%, rgba(215,242,74,0.16), transparent 70%),
              radial-gradient(ellipse 34% 55% at 50% 100%, rgba(215,242,74,0.22), transparent 70%),
              radial-gradient(ellipse 34% 55% at 84% 100%, rgba(215,242,74,0.16), transparent 70%),
              radial-gradient(ellipse 60% 30% at 50% 0%, rgba(215,242,74,0.08), transparent 70%); }
.cols-link { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--lime) 20%, var(--lime) 80%, transparent); box-shadow: 0 0 16px rgba(215,242,74,0.5); transform-origin: 50% 50%; z-index: 2; }
.cols-node { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--lime); z-index: 3; box-shadow: 0 0 0 0 rgba(215,242,74,0.6); animation: nodePulse 2.8s ease-out infinite; }
.cols-node.n1 { left: 33.333%; } .cols-node.n2 { left: 66.666%; animation-delay: 1.4s; }
@keyframes nodePulse { 0% { box-shadow: 0 0 0 0 rgba(215,242,74,0.55); } 100% { box-shadow: 0 0 0 20px rgba(215,242,74,0); } }
@media (max-width: 860px) {
  .cols .col + .col { border-left: 0; border-top: 1px solid rgba(239,236,229,0.10); }
  .cols-node { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cols-node { animation: none; } }

/* ---------- Quiénes somos: los dos contenedores negros con "+" (como la página anterior) ---------- */
.us { padding: clamp(110px, 16vh, 190px) var(--pad) clamp(70px, 12vh, 140px); background: var(--ink); color: var(--paper); }
.us em { color: var(--lime); }
.who-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 7vh, 80px); }
.who-close { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.7vw, 26px); line-height: 1.4; opacity: 0.78; max-width: 32em; }
.who-stage { position: relative; }
.who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); height: clamp(430px, 64vh, 660px); }
.who-card { position: relative; box-sizing: border-box; padding: clamp(20px, 3vh, 34px) clamp(22px, 2.2vw, 36px); border-radius: 20px; border: 3px solid rgba(255,255,255,0.09); background-color: #070707; background-image: linear-gradient(180deg, #131313 0%, #070707 62%); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.05) inset; }
.who-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 10%; z-index: -2; transition: transform 1.4s var(--ease); }
.who-img-base { filter: grayscale(1) brightness(0.78) contrast(1.06); }
.who-img-color { clip-path: inset(0 0 0 100%); }
.who-card:hover .who-img { transform: scale(1.03); }
@media (max-width: 860px), (any-hover: none) { .who-img-base { display: none; } .who-img-color { clip-path: none; } }
.who-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,6,6,0.97) 0%, rgba(6,6,6,0.78) 26%, rgba(6,6,6,0.2) 56%, rgba(6,6,6,0.3) 100%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,6,6,0.55) 100%); }
.who-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.who-card h3 { margin: 1vh 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.015em; }
.who-card p { margin: 0.8vh 0 0; font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; opacity: 0.86; }
.who-hot { position: absolute; display: flex; align-items: center; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; z-index: 4; }
.who-hot.is-card { right: clamp(20px, 2vw, 32px); top: clamp(20px, 3.2vh, 32px); flex-direction: row-reverse; }
.hot-plus { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); border: 1px solid var(--lime); transition: background 0.4s ease, transform 0.4s ease; animation: hotPulse 2.8s ease-out infinite; }
.hot-plus::before, .hot-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--lime); border-radius: 2px; transition: background 0.4s ease; }
.hot-plus::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.hot-plus::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.who-hot:hover .hot-plus { background: var(--lime); transform: scale(1.08); }
.who-hot:hover .hot-plus::before, .who-hot:hover .hot-plus::after { background: var(--ink); }
@keyframes hotPulse { 0% { box-shadow: 0 0 0 0 rgba(215,242,74,0.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(215,242,74,0); } }
.who-hot span { display: block; margin: 0 12px; padding: 11px 18px; border-radius: 999px; background: rgba(8,8,8,0.9); border: 1px solid rgba(255,255,255,0.16); font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color 0.4s ease; }
.who-hot:hover span { border-color: var(--lime); }
.who-hot:focus-visible { outline: 1px dashed var(--lime); outline-offset: 6px; border-radius: 999px; }
.who-detail { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(240px, 5fr) 8fr; gap: clamp(20px, 3vw, 44px); box-sizing: border-box; padding: clamp(18px, 3vh, 34px); border-radius: 20px; border: 3px solid rgba(215,242,74,0.45); background-color: #070707; background-image: linear-gradient(180deg, #131313 0%, #070707 62%); box-shadow: 0 30px 70px rgba(0,0,0,0.7); overflow: hidden; }
.who-detail[hidden] { display: none; }
.wd-photo { position: relative; border-radius: 14px; overflow: hidden; min-height: 0; }
.wd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%; }
.wd-body { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-right: 48px; }
.wd-tag, .wd-block em { font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.wd-body h3 { margin: 1vh 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 60px); line-height: 1.02; }
.wd-role { margin: 1vh 0 0; font-size: clamp(14px, 1.2vw, 17px); font-weight: 500; opacity: 0.86; }
.wd-intro { margin: 2vh 0 0; max-width: 40em; font-size: clamp(13.5px, 1.1vw, 16px); line-height: 1.55; opacity: 0.82; }
.wd-block { margin-top: 2.4vh; }
.wd-block[hidden] { display: none; }
.wd-block em { display: block; margin-bottom: 1vh; }
.wd-block ul { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-block li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); font-size: clamp(12.5px, 0.95vw, 14.5px); opacity: 0.92; }
.wd-block p { font-size: clamp(13.5px, 1.05vw, 16px); line-height: 1.5; opacity: 0.86; }
.who-x { position: absolute; top: clamp(14px, 2.4vh, 24px); right: clamp(14px, 2vw, 26px); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(8,8,8,0.8); cursor: pointer; z-index: 2; transition: border-color 0.3s ease, background 0.3s ease; }
.who-x:hover { border-color: var(--lime); background: var(--lime); }
.who-x i::before, .who-x i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #fff; border-radius: 2px; }
.who-x i::before { transform: rotate(45deg); } .who-x i::after { transform: rotate(-45deg); }
.who-x:hover i::before, .who-x:hover i::after { background: var(--ink); }
.has-panel .wa { opacity: 0 !important; pointer-events: none; }
@media (max-width: 860px) {
  .who-head { grid-template-columns: 1fr; }
  .who-cards { grid-template-columns: 1fr; height: auto; }
  .who-card { height: 380px; padding: 22px; }
  .who-hot.is-card span { display: none; }
  .who-hot.is-card { right: 18px; top: 18px; }
  .who-detail { position: fixed; inset: 12px; z-index: 300; grid-template-columns: 1fr; grid-template-rows: 200px 1fr; gap: 16px; overflow-y: auto; }
  .wd-body { padding-right: 0; justify-content: flex-start; }
}

/* ---------- verde lima en títulos + letras que no se cortan ---------- */
.faq-side h2, .ct-left h2 { color: var(--lime); }

/* la máscara de cada palabra deja aire abajo (rabitos de g, p, y, q) y arriba (tildes) */
.mk { padding-top: 0.12em; margin-top: -0.12em; padding-bottom: 0.3em; margin-bottom: -0.3em; }
.hero-word { padding-bottom: 0.08em; }
.cap-title, .pr-t, .who-card h3, .wd-body h3, .fr .card h3, .card-body h3 { padding-bottom: 0.06em; }

/* ---------- más aire entre líneas: nada de letras que se corten ---------- */
.mega { line-height: 0.98; }
.xl { line-height: 1.04; }
.lg { line-height: 1.08; }
.cap-title { line-height: 1.06; }
.pr-t { line-height: 1.06; }
.who-card h3, .wd-body h3 { line-height: 1.1; }
.fr .card h3, .card-body h3 { line-height: 1.1; }
.hero-word { line-height: 1; padding-bottom: 0.12em; }
.w-mask { padding-top: 0.14em; margin-top: -0.14em; padding-bottom: 0.34em; margin-bottom: -0.34em; }
.qa > button { line-height: 1.25; }
/* títulos en verde lima sobre fondo claro: un borde oscuro fino para que se lean */
.paper .faq-side h2, .faq.paper .faq-side h2 { color: var(--lime); text-shadow: 0 0 1px rgba(7,7,7,0.55), 0 2px 12px rgba(7,7,7,0.22); }

/* sin máscaras: los títulos no recortan nada; margen extra por si algún contenedor recorta */
.w-mask { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
.xl, .mega, .lg, .cap-title, .pr-t { padding-bottom: 0.12em; overflow: visible; }
.hero-word { padding-bottom: 0.14em; }
.pr-row, .col, .manif-in, .caps-close, .cta, .faq-side, .ct-left, .us-head { overflow: visible; }
.cols, .who-card { overflow: hidden; }

/* Preguntas: título en verde lima con contorno oscuro muy sutil; los círculos "+" también en verde */
.faq.paper .faq-side h2 { color: var(--lime); -webkit-text-stroke: 0.9px rgba(7,7,7,0.85); paint-order: stroke fill; text-shadow: none; }
.faq .qa i { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.faq .qa.is-open i { background: var(--ink); border-color: var(--ink); color: var(--lime); }

/* ---------- Barra superior de la página anterior: píldora con logo, navegación y botón ---------- */
.hdr { inset: auto; top: 16px; left: 50%; transform: translateX(-50%); width: min(1180px, 92vw); height: 66px; padding: 0 8px 0 26px; gap: 26px; justify-content: flex-start;
  background: var(--ink); color: #fff; border: 1px solid rgba(150,148,138,0.35); border-radius: 999px; pointer-events: auto;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease); }
html[data-hdr="light"] .hdr { background: var(--paper); color: var(--ink); border-color: rgba(7,7,7,0.16); }
.menu-open .hdr { background: var(--ink) !important; color: #fff !important; border-color: rgba(150,148,138,0.35) !important; }
.brand { flex-shrink: 0; font-style: italic; font-size: 22px; }
.brand svg { width: 30px; height: 35px; }
.nav { flex: 1; justify-content: center; gap: clamp(16px, 2.1vw, 34px); font-size: 13px; letter-spacing: 0.06em; }
.nav a { white-space: nowrap; opacity: 0.85; transition: opacity 0.2s ease, color 0.3s ease; }
.nav a::after { display: none; }
.nav a:hover { opacity: 1; }
.nav a.is-on { opacity: 1; color: var(--lime); }
html[data-hdr="light"] .nav a.is-on { color: var(--olive); }
.menu-open .nav a.is-on { color: var(--lime); }
.nav-cta { flex-shrink: 0; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 14px 24px; border-radius: 999px; transition: background 0.2s ease; }
.nav-cta:hover { background: #e4f76b; }
.menu-btn { display: none; }
@media (max-width: 1180px) and (min-width: 861px) { .nav { gap: 18px; font-size: 12px; letter-spacing: 0.04em; } }
@media (max-width: 1040px) and (min-width: 861px) { .nav-cta { display: none; } }
@media (max-width: 860px) {
  .hdr { width: 92vw; height: 58px; padding: 0 6px 0 20px; top: 12px; justify-content: space-between; }
  .nav, .nav-cta { display: none; }
  .menu-btn { display: flex; }
  .brand svg { width: 24px; height: 28px; }
}

/* ---------- Redes con los íconos oficiales ---------- */
.social { position: fixed; z-index: 85; display: flex; gap: 8px; }
.social a, .menu-social a, .foot-social a { display: block; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.45); transition: transform 0.3s var(--ease), box-shadow 0.3s ease; }
.social a:hover, .menu-social a:hover, .foot-social a:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 26px rgba(0,0,0,0.55); }
.social svg, .menu-social svg, .foot-social svg { display: block; width: 100%; height: 100%; }
@media (min-width: 1500px) { .social { top: 30px; right: clamp(16px, 2vw, 28px); } }
@media (max-width: 1499px) and (min-width: 861px) {
  .social { flex-direction: column; right: calc(clamp(16px, 2vw, 28px) + 13px); bottom: calc(clamp(16px, 3vh, 28px) + 68px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s var(--ease); }
  .social.is-on { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 860px) { .social { display: none; } }
.menu-open .social, .has-panel .social { opacity: 0 !important; pointer-events: none; }
.menu-social { display: none; }
@media (max-width: 860px) { .menu-social { display: flex; gap: 14px; position: absolute; left: var(--pad); bottom: calc(clamp(20px, 5vh, 46px) + 64px); } .menu-social a { width: 38px; height: 38px; } }
.foot-social { display: flex; gap: 10px; }
.foot-social a { width: 30px; height: 30px; opacity: 1; }

/* navegación de la barra: en fila */
.nav { display: flex; align-items: center; }

/* Preguntas frecuentes: fondo negro, todo el texto en blanco, solo los "+" en verde */
.faq { background: var(--ink); color: var(--paper); }
.faq .faq-side h2 { color: var(--paper); -webkit-text-stroke: 0; text-shadow: none; }
.faq .qa { border-top-color: rgba(239,236,229,0.2); }
.faq .qa:last-child { border-bottom-color: rgba(239,236,229,0.2); }
.faq .qa i, .faq .qa.is-open i { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.faq .tiny { opacity: 0.72; }

/* Empresas: video de luz con partículas de fondo */
.trust-bg { z-index: 0; }
.trust-bg img { opacity: 0.9; }
.trust-bg .shade { background: linear-gradient(180deg, #070707 0%, rgba(7,7,7,0.35) 22%, rgba(7,7,7,0.25) 60%, #070707 100%); }
.trust-head, .c3d { position: relative; z-index: 2; }
@media (max-width: 860px) { .nav, .nav-cta { display: none; } }

.hdr { width: min(1120px, 92vw); }
@media (max-width: 860px) { .hdr { width: 92vw; } }

/* Roadmap: luz que va y viene por la línea + "Procesos" / "Personas" en verde y más grandes */
.rm-spark { position: absolute; left: 0; top: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 10px 3px #d7f24a, 0 0 30px 10px rgba(215,242,74,0.55); z-index: 3; will-change: left; }
.rm-spark::before, .rm-spark::after { content: ""; position: absolute; top: 6px; height: 2px; width: 90px; }
.rm-spark::before { right: 100%; background: linear-gradient(90deg, rgba(215,242,74,0), rgba(215,242,74,0.9)); }
.rm-spark::after { left: 100%; background: linear-gradient(90deg, rgba(215,242,74,0.9), rgba(215,242,74,0)); }
.rm-col b { color: var(--lime); font-size: 15px; letter-spacing: 0.2em; opacity: 1; margin-bottom: 10px; }
.rm-col p { font-size: clamp(15px, 1.2vw, 19px); }

/* Preguntas: texto más chico para que las nueve entren en una sola pantalla */
.faq { padding-top: clamp(96px, 13vh, 120px); padding-bottom: clamp(28px, 5vh, 56px); min-height: 100vh; align-items: center; }
.faq .qa > button { font-size: clamp(16px, 1.45vw, 23px); padding: clamp(9px, 1.5vh, 15px) 0; line-height: 1.2; gap: 18px; }
.faq .qa i { width: 28px; height: 28px; }
.faq .qa i::before { width: 10px; margin: -0.5px 0 0 -5px; }
.faq .qa i::after { height: 10px; margin: -5px 0 0 -0.5px; }
.faq .faq-side h2 { font-size: clamp(38px, 5.6vw, 100px); }
.faq .qa-a p { font-size: clamp(14px, 1.05vw, 16px); padding-bottom: 14px; }
@media (max-width: 1499px) and (min-width: 861px) { .faq { padding-right: calc(var(--pad) + 46px); } }

/* Redes siempre arriba: en notebooks la barra se hace lugar y los íconos van a su derecha, más chicos */
@media (min-width: 1500px) { .social { top: 34px; } }
@media (max-width: 1499px) and (min-width: 861px) {
  .hdr { left: 16px; transform: none; width: calc(100vw - 32px - 104px); }
  .social { flex-direction: row; gap: 7px; top: 36px; right: 16px; bottom: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .social a { width: 27px; height: 27px; border-radius: 7px; }
  .nav { gap: clamp(12px, 1.3vw, 22px); font-size: 12px; letter-spacing: 0.04em; }
  .nav-cta { padding: 12px 18px; font-size: 12.5px; }
  .brand { font-size: 20px; }
  .hdr { gap: 16px; padding-left: 20px; }
}
@media (max-width: 1240px) and (min-width: 861px) { .nav-cta { display: none; } }
.menu-open .social { opacity: 0 !important; pointer-events: none !important; }

/* ---------- Empresas: fluidez (menos peso por cuadro) ---------- */
.trust-bg { contain: strict; transform: translateZ(0); }
.trust-bg video { will-change: auto; }
.c3d-card, .c3d-back { box-shadow: none; }
.c3d-card.is-front { box-shadow: 0 0 26px rgba(215,242,74,0.22); }
.c3d-floor { filter: none; }
.c3d-card { transition: border-color 0.5s ease; }

/* ---------- Texto en negrita nítido (Inter 600 real, no sintetizado) ---------- */
.nav-cta, .btn { font-weight: 600; -webkit-font-smoothing: subpixel-antialiased; text-rendering: geometricPrecision; color: #000; }
.nav-cta { letter-spacing: 0.01em; }

/* ---------- Roadmap: energía que corre por el cable ---------- */
.rm-spark { width: 20px; height: 20px; margin-left: -10px; top: -9px; background: #fff;
  box-shadow: 0 0 12px 4px #fff, 0 0 26px 9px #d7f24a, 0 0 60px 20px rgba(215,242,74,0.55); }
.rm-spark::before, .rm-spark::after { top: 9px; width: 170px; height: 3px; border-radius: 3px; }
.rm-spark::before { background: linear-gradient(90deg, rgba(215,242,74,0), rgba(215,242,74,0.95)); }
.rm-spark::after { background: linear-gradient(90deg, rgba(215,242,74,0.95), rgba(215,242,74,0)); }
.rm-col::before { transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1), box-shadow 0.35s ease, background 0.35s ease; }
.rm-col.hit::before { transform: scale(2.2); background: #fff; box-shadow: 0 0 0 6px rgba(215,242,74,0.55), 0 0 26px 10px rgba(215,242,74,0.9); animation: none; }

/* ---------- Preguntas: filas de tarjetas en movimiento (título libre a la izquierda) ---------- */
.faq { grid-template-columns: minmax(280px, 0.8fr) 1.7fr; overflow: hidden; }
.fq-rows { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 22px); min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.fq-row { overflow: hidden; }
.fq-track { display: flex; width: max-content; animation: fqL var(--dur, 60s) linear infinite; will-change: transform; }
.fq-row[data-dir="right"] .fq-track { animation-name: fqR; }
.fq-set { display: flex; flex: none; gap: clamp(14px, 1.4vw, 22px); padding-right: clamp(14px, 1.4vw, 22px); }
.fq-rows:hover .fq-track { animation-play-state: paused; }
@keyframes fqL { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes fqR { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
.fq-card { position: relative; flex: none; width: clamp(270px, 21vw, 370px); padding: clamp(16px, 1.6vw, 24px); display: flex; flex-direction: column; gap: 10px;
  background: #0c0c0c; border: 1px solid rgba(239,236,229,0.14); border-radius: 12px; transition: border-color 0.4s ease, transform 0.5s var(--ease); }
.fq-card:hover { border-color: rgba(215,242,74,0.6); transform: translateY(-3px); }
.fq-n { font-size: 11px; letter-spacing: 0.22em; color: var(--lime); font-weight: 500; }
.fq-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.12; letter-spacing: -0.01em; }
.fq-card p { font-size: clamp(13px, 0.95vw, 15px); line-height: 1.5; opacity: 0.74; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .fq-card { width: 78vw; } }
@media (prefers-reduced-motion: reduce) { .fq-track { animation: none; } .fq-row { overflow-x: auto; } }
@media (max-width: 1499px) and (min-width: 861px) { .faq { padding-right: var(--pad); } }
@media (min-width: 861px) and (max-height: 840px) {
  .fq-card { padding: 14px 16px; gap: 6px; width: clamp(250px, 19vw, 330px); }
  .fq-card h3 { font-size: clamp(16px, 1.35vw, 21px); }
  .fq-card p { font-size: 12.5px; line-height: 1.42; }
  .faq { padding-top: 92px; }
}

/* Preguntas: tarjetas más chicas (que no llenen toda la pantalla) */
.fq-rows { gap: clamp(10px, 1.6vh, 16px); }
.fq-set { gap: 14px; padding-right: 14px; }
.fq-card { width: clamp(220px, 15.5vw, 290px); padding: 14px 16px; gap: 6px; border-radius: 10px; }
.fq-n { font-size: 10px; }
.fq-card h3 { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.15; }
.fq-card p { font-size: clamp(11.5px, 0.8vw, 13px); line-height: 1.42; }
@media (min-width: 861px) and (max-height: 840px) { .fq-card { width: clamp(210px, 15vw, 260px); padding: 12px 14px; } .fq-card p { font-size: 11.5px; } .fq-card h3 { font-size: clamp(14px, 1.05vw, 17px); } }
@media (max-width: 860px) { .fq-card { width: 64vw; } }

/* Roadmap: el destello en los nodos, mucho más tenue (no distrae de la lectura) */
.rm-col.hit::before { transform: scale(1.45); background: var(--lime); box-shadow: 0 0 0 3px rgba(215,242,74,0.18), 0 0 10px 2px rgba(215,242,74,0.35); animation: none; }

/* Preguntas: el título de cada tarjeta en el verde lima de la página */
.fq-card h3 { color: var(--lime); }

/* Qué hacemos · Procesos: imagen de fondo en la columna */
.col > .col-img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.col-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 42% 50%; will-change: transform; }
.col-img::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,7,0.10) 0%, rgba(7,7,7,0.10) 35%, rgba(7,7,7,0.72) 68%, rgba(7,7,7,0.94) 100%); }

/* ---------- Preguntas: movimiento lo más fluido posible ----------
   - sin máscara sobre las filas (obligaba a recomponer todo en cada cuadro): los bordes se difuminan con dos
     degradados fijos por encima
   - la animación desplaza la fila en píxeles exactos (medidos con JS), sin porcentajes ni medios píxeles
   - cada fila es su propia capa de GPU y está aislada (contain), y se pausa cuando no está a la vista */
.fq-rows { -webkit-mask-image: none; mask-image: none; position: relative; }
.fq-rows::before, .fq-rows::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 3; pointer-events: none; }
.fq-rows::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(7,7,7,0)); }
.fq-rows::after { right: 0; background: linear-gradient(270deg, var(--ink), rgba(7,7,7,0)); }
.fq-row { contain: layout paint; isolation: isolate; }
.fq-track { will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0);
  animation: fqL var(--dur, 60s) linear infinite; }
.fq-row[data-dir="right"] .fq-track { animation-name: fqR; }
@keyframes fqL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--shift, -33.3333%), 0, 0); } }
@keyframes fqR { from { transform: translate3d(var(--shift, -33.3333%), 0, 0); } to { transform: translate3d(0, 0, 0); } }
.fq-card { contain: layout paint style; }
.faq.is-off .fq-track { animation-play-state: paused; }

/* ---------- Preguntas: lupa (la tarjeta se agranda al pasar el mouse / tocarla) ---------- */
.fq-zoom { position: fixed; z-index: 130; left: 0; top: 0; width: clamp(360px, 27vw, 470px); padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; gap: 12px;
  background: #101010; border: 1px solid rgba(215,242,74,0.65); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 40px rgba(215,242,74,0.14);
  opacity: 0; visibility: hidden; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.fq-zoom.is-on { visibility: visible; }
.fq-zoom .fq-n { font-size: 11px; }
.fq-zoom h3 { font-family: var(--serif); font-weight: 400; color: var(--lime); font-size: clamp(24px, 1.9vw, 32px); line-height: 1.12; letter-spacing: -0.01em; }
.fq-zoom p { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; opacity: 0.92; }
.fq-card { cursor: zoom-in; }
.fq-rows:hover .fq-track { animation-play-state: paused; }

/* ---------- Qué hacemos: los dos nodos pasan a ser signos "+" concéntricos que parpadean ---------- */
.cols-node { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(7,7,7,0.85); border: 1px solid rgba(215,242,74,0.6); border-radius: 50%; box-shadow: none;
  animation: plusRing 2.6s ease-out infinite; }
.cols-node::before, .cols-node::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--lime); border-radius: 1px; animation: plusBlink 1.5s ease-in-out infinite; }
.cols-node::before { width: 12px; height: 2px; margin: -1px 0 0 -6px; }
.cols-node::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; }
.cols-node.n2, .cols-node.n2::before, .cols-node.n2::after { animation-delay: 0.75s; }
@keyframes plusRing { 0% { box-shadow: 0 0 0 0 rgba(215,242,74,0.55), 0 0 0 0 rgba(215,242,74,0.35); } 70% { box-shadow: 0 0 0 12px rgba(215,242,74,0), 0 0 0 24px rgba(215,242,74,0); } 100% { box-shadow: 0 0 0 12px rgba(215,242,74,0), 0 0 0 24px rgba(215,242,74,0); } }
@keyframes plusBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .cols-node, .cols-node::before, .cols-node::after { animation: none; } }

/* Preguntas: el marco se ilumina completo (los cuatro lados); la fila ya no recorta el borde de arriba */
.fq-row { padding: 5px 0; }
.fq-card:hover { transform: none; border-color: var(--lime); box-shadow: 0 0 0 1px rgba(215,242,74,0.55), 0 0 22px rgba(215,242,74,0.22); }

/* ---------- Compatibilidad Safari (macOS / iOS) ---------- */
body { overflow-x: hidden; overflow-x: clip; }                       /* Safari < 16 no conoce "clip" */
html { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.fq-track, .c3d-card, .c3d-back, .who-card { -webkit-backface-visibility: hidden; }
.manif-in, .caps-in, .fr-in, .rm-in, .prob-in, .faq, .ct-inner { min-height: 100vh; min-height: 100svh; }
.hdr { top: max(16px, env(safe-area-inset-top)); }
@media (max-width: 860px) { .hdr { top: max(12px, env(safe-area-inset-top)); } .menu-social, .menu-foot { padding-bottom: env(safe-area-inset-bottom); } }
.hero-word, .fq-card, .fq-zoom, .who-card { -webkit-text-size-adjust: 100%; }
button { -webkit-appearance: none; appearance: none; border-radius: 0; }
input, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; font-size: 16px; }   /* 16px evita el zoom automático de iOS al enfocar */

/* Inteligencia: la foto de servidores, encuadrada al centro; el resto del degradado ya lo pone .col-img::after */


/* Proyectos: descripciones más largas y claras */
.pj-desc { max-width: 52ch; line-height: 1.5; }
.pj-desc em { font-style: italic; color: var(--lime); }



/* Inicio: AMPLIFIA en blanco neón (brillo propio) */
.hero-word { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 22px rgba(255,255,255,0.65), 0 0 60px rgba(215,242,74,0.45), 0 0 120px rgba(215,242,74,0.25); animation: neonHum 4.5s ease-in-out infinite; }
@keyframes neonHum { 0%, 100% { text-shadow: 0 0 6px rgba(255,255,255,0.95), 0 0 22px rgba(255,255,255,0.65), 0 0 60px rgba(215,242,74,0.45), 0 0 120px rgba(215,242,74,0.25); } 50% { text-shadow: 0 0 8px #fff, 0 0 30px rgba(255,255,255,0.8), 0 0 80px rgba(215,242,74,0.6), 0 0 150px rgba(215,242,74,0.35); } }
@media (max-width: 860px), (prefers-reduced-motion: reduce) { .hero-word { animation: none; text-shadow: 0 0 5px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.55), 0 0 44px rgba(215,242,74,0.4); } }

/* manifiesto y "Juntas": de nuevo alineadas a la izquierda */
.manif-in { justify-content: flex-start; text-align: left; }
.manif-text { margin: 0; text-align: left; }
.caps-close { margin: 0; text-align: left; justify-items: start; }

/* Rendimiento: brillo neón estático y liviano (sin animar el texto gigante), sin cambiar el espaciado al scrollear */
.hero-word { animation: none !important; text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 36px rgba(215,242,74,0.5); }
.hero-media, .hero-copy { will-change: transform; }
.shade-hero { will-change: auto; }

.col:nth-of-type(3) .col-img img { object-position: 46% 50%; }

/* ---------- Ampli: el guía (ejecutivo chiquito de traje verde neón) ---------- */
.ampli { position: fixed; left: clamp(14px, 1.6vw, 26px); bottom: clamp(14px, 2.6vh, 26px); z-index: 75; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.ampli-btn { pointer-events: auto; width: clamp(46px, 3.6vw, 60px); flex: none; cursor: pointer; transform-origin: 50% 100%; animation: ampliBob 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); }
.ampli-btn svg { display: block; width: 100%; height: auto; overflow: visible; }
.ampli-btn:hover { animation-play-state: paused; transform: translateY(-4px) scale(1.06); }
@keyframes ampliBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ampli-bubble { position: relative; max-width: min(300px, 62vw); padding: 11px 15px; margin-bottom: 26px; background: #f5f5f0; color: #0a0a0a; border-radius: 14px 14px 14px 4px;
  font-size: 13.5px; line-height: 1.4; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateY(8px) scale(0.96); transform-origin: 0 100%; transition: opacity 0.35s ease, transform 0.35s var(--ease); pointer-events: none; }
.ampli-bubble b { color: #43590a; font-weight: 600; }
.ampli-bubble.is-on { opacity: 1; transform: none; }
.rail { left: calc(var(--pad) + 74px); }
@media (max-width: 860px) { .ampli { left: 10px; bottom: 12px; } .ampli-btn { width: 40px; } .ampli-bubble { display: none; } }
.menu-open .ampli, .has-panel .ampli { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ampli-btn { animation: none; } }
.vfreeze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }

/* ---------- Ampli v2: ejecutivo de traje verde que camina entre secciones ---------- */
.ampli { left: 0; bottom: clamp(10px, 2vh, 22px); gap: 0; align-items: flex-end; will-change: transform; }
.ampli-btn { width: clamp(62px, 5.4vw, 92px); animation: none; transform: none; }
.ampli-btn svg { width: 100%; overflow: visible; }
.ampli-btn:hover { transform: none; }
.ampli-btn .a-legL, .ampli-btn .a-legR, .ampli-btn .a-armL, .ampli-btn .a-armR { transform-box: fill-box; transform-origin: 50% 0; }
.ampli-btn svg { animation: ampliIdle 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ampliIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ampli.is-walking .ampli-btn svg { animation: ampliStep 0.42s ease-in-out infinite; }
.ampli.is-walking .a-legL, .ampli.is-walking .a-armR { animation: swingA 0.42s ease-in-out infinite; }
.ampli.is-walking .a-legR, .ampli.is-walking .a-armL { animation: swingB 0.42s ease-in-out infinite; }
@keyframes ampliStep { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes swingA { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes swingB { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
.ampli.face-left .ampli-btn svg { transform: scaleX(-1); }
.ampli.face-left.is-walking .ampli-btn svg { animation: none; }
.ampli-bubble { position: absolute; bottom: 100%; left: 0; margin: 0 0 8px; white-space: normal; width: max-content; }
.ampli.on-right .ampli-bubble { left: auto; right: 0; border-radius: 14px 14px 4px 14px; transform-origin: 100% 100%; }
.ampli-panel { position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; width: min(320px, 78vw); padding: 18px 20px; background: #101010; border: 1px solid rgba(215,242,74,0.55); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.96); transform-origin: 0 100%; transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0s 0.3s; pointer-events: none; }
.ampli.on-right .ampli-panel { left: auto; right: 0; transform-origin: 100% 100%; }
.ampli.is-open .ampli-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; }
.ampli.is-open .ampli-bubble { opacity: 0 !important; }
.ampli-t { font-size: 14px; line-height: 1.5; margin: 8px 0 14px; opacity: 0.88; }
.ampli-cta { padding: 12px 20px; font-size: 13px; }
.ampli-x { position: absolute; top: 8px; right: 12px; font-size: 22px; line-height: 1; opacity: 0.7; }
.ampli-x:hover { opacity: 1; color: var(--lime); }
.rail { left: var(--pad); }
@media (max-width: 860px) { .ampli-btn { width: 46px; } .ampli-panel { width: min(300px, 86vw); } .ampli-bubble { display: none; } }
@media (prefers-reduced-motion: reduce) { .ampli-btn svg, .ampli.is-walking * { animation: none !important; } }

/* Etiquetas de sección (El problema, Qué hacemos, Juntas…): más grandes, mismo gris */
.tiny { font-size: clamp(13px, 1.1vw, 17px); letter-spacing: 0.18em; opacity: 0.78; }
.caps-in > .tiny, .prob-head .tiny, .fr-head .tiny, .rm-head .tiny, .caps-close .tiny, .us-head .tiny, .pj-head .tiny, .mq-label, .faq-side .tiny, .ct-left .tiny { font-size: clamp(15px, 1.35vw, 21px); }
.fq-n, .who-tag, .wd-tag, .rm-col b { font-size: revert-layer; }
.fq-n { font-size: 11px; } .who-tag { font-size: 12px; }

/* Ampli realista: proporciones de adulto (alto y angosto); zapatos claros para verse sobre negro */
.ampli-btn { width: clamp(50px, 4.2vw, 74px); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(215,242,74,0.18)); }
@media (max-width: 860px) { .ampli-btn { width: 40px; } }
.ampli.is-walking .a-legL, .ampli.is-walking .a-armR { animation-name: swingA; }
@keyframes swingA { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes swingB { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-9deg); } }

/* Ampli = chip de IA verde neón (sobrio, premium) */
.ampli-btn { width: clamp(58px, 4.6vw, 84px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)); }
.ampli-btn svg { animation: ampliIdle 3.4s ease-in-out infinite; }
.ampli .a-glow { animation: chipGlow 2.6s ease-in-out infinite; }
@keyframes chipGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ampli.is-walking .ampli-btn svg { animation: ampliStep 0.5s ease-in-out infinite; }
.ampli.face-left .ampli-btn svg, .ampli.face-left.is-walking .ampli-btn svg { transform: none; }
.a-eye, .a-pupil { transition: transform 0.08s linear; }
@media (max-width: 860px) { .ampli-btn { width: 46px; } }
@media (prefers-reduced-motion: reduce) { .ampli .a-glow { animation: none; } }

.a-ia { filter: drop-shadow(0 0 5px rgba(215,242,74,0.9)); animation: iaPulse 2.6s ease-in-out infinite; }
@keyframes iaPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a-ia { animation: none; } }

/* Ampli: más chico, oculto en el home */
.ampli-btn { width: clamp(36px, 2.9vw, 52px); }
.ampli { transition: opacity 0.5s ease; }
.ampli.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 860px) { .ampli-btn { width: 36px; } }

/* Ampli = orbe de cristal negro con núcleo de luz verde neón */
.ampli-btn { width: clamp(38px, 3.1vw, 56px); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.o-core { transform-box: fill-box; transform-origin: 50% 50%; animation: coreBreath 2.8s ease-in-out infinite; }
.o-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: ringSpin 14s linear infinite; }
@keyframes coreBreath { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.ampli.is-walking .ampli-btn svg { animation: orbStretch 0.9s ease-in-out infinite; }
@keyframes orbStretch { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.9, 1.1); } }
.a-pupil { transition: transform 0.15s ease-out; }
@media (prefers-reduced-motion: reduce) { .o-core, .o-ring { animation: none; } }

/* Orbe de cristal con alma verde en movimiento */
.ampli-btn { width: clamp(46px, 3.8vw, 64px); }
.o-s1, .o-s2, .o-s3 { transform-box: view-box; transform-origin: 60px 60px; }
.o-s1 { animation: soulA 6s linear infinite; }
.o-s2 { animation: soulB 8.5s linear infinite; }
.o-s3 { animation: soulA 11s linear infinite reverse; }
@keyframes soulA { to { transform: rotate(360deg); } }
@keyframes soulB { to { transform: rotate(-360deg); } }
.o-core { transform-box: fill-box; transform-origin: 50% 50%; animation: coreBeat 2.4s ease-in-out infinite; }
@keyframes coreBeat { 0%, 100% { transform: scale(0.85); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }
.ampli.is-walking .o-s1 { animation-duration: 1.8s; } .ampli.is-walking .o-s2 { animation-duration: 2.4s; } .ampli.is-walking .o-s3 { animation-duration: 3s; }
.a-pupil.o-soul { transition: transform 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .o-s1, .o-s2, .o-s3, .o-core { animation: none; } }

/* Ampli = logo de Amplifia con efectos: barras que laten como ecualizador, franja verde que brilla, halo */
.ampli-btn { width: clamp(38px, 3.1vw, 54px); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); }
.ampli-btn svg { animation: ampliIdle 3.4s ease-in-out infinite; }
.l-b { transform-box: fill-box; transform-origin: 50% 100%; animation: eq 1.9s ease-in-out infinite; }
.l-b1 { animation-delay: -0.2s; } .l-b2 { animation-delay: -0.8s; } .l-b3 { animation-delay: -1.3s; } .l-b4 { animation-delay: -0.5s; }
@keyframes eq { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(0.82); } 70% { transform: scaleY(1.06); } }
.l-stripe-glow { animation: stripeGlow 2.2s ease-in-out infinite; }
@keyframes stripeGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.ampli.is-walking .l-b { animation-duration: 0.6s; }
.ampli.is-walking .ampli-btn svg { animation: orbStretch 0.9s ease-in-out infinite; }
.ampli.is-speaking .l-b, .ampli:has(.ampli-bubble.is-on) .l-b { animation-duration: 0.7s; }
.a-pupil.l-mark { transition: transform 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .l-b, .l-stripe-glow { animation: none; } }

/* Ampli: arrastrable; el globo y el panel se abren hacia abajo cuando está arriba */
.ampli-btn { -webkit-user-select: none; user-select: none; }
.ampli.tip-below .ampli-bubble, .ampli.tip-below .ampli-panel { bottom: auto; top: 100%; margin: 8px 0 0; }
.ampli.tip-below .ampli-bubble { border-radius: 4px 14px 14px 14px; transform-origin: 0 0; }
.ampli.tip-below.on-right .ampli-bubble { border-radius: 14px 4px 14px 14px; transform-origin: 100% 0; }
.ampli.tip-below .ampli-panel { transform-origin: 0 0; }
.ampli.tip-below.on-right .ampli-panel { transform-origin: 100% 0; }
.ampli-btn, .ampli-btn * { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
.ampli-bubble, .ampli-panel { translate: 0 0; }
@media (max-width: 860px) { .ampli-btn { margin: 0 6px; } }

/* Globo de Ampli: oscuro con borde verde; el nombre y lo importante en el verde de la página */
.ampli-bubble { background: #0d0d0d; color: #f2efe9; border: 1px solid rgba(215,242,74,0.6); max-width: min(340px, 70vw); font-size: 14px; box-shadow: 0 12px 34px rgba(0,0,0,0.65), 0 0 22px rgba(215,242,74,0.12); }
.ampli-bubble b { color: var(--lime); font-weight: 600; }
.ampli-panel .tiny { color: var(--lime); opacity: 1; }

/* Pantalla de carga: logo grande */
.pre-mark { width: clamp(150px, 18vw, 300px); height: auto; }
@media (max-width: 860px) { .pre-mark { width: 46vw; } }
.ampli-bubble { max-width: min(340px, calc(100vw - 28px)); }
.ampli-panel { width: min(320px, calc(100vw - 28px)); }

/* ---------- Portada liviana ----------
   AMPLIFIA entra como un solo bloque, con un brillo de neón con desenfoque pesado. Si ese bloque
   no está en su propia capa de video (will-change: transform), el navegador tiene que repintar el
   desenfoque a mano en cada cuadro mientras se mueve — eso era el "bugueado" al entrar. Queda
   promovido mientras sube y se libera solo apenas termina (ver v2.js). */
.hero-word { text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 34px rgba(215,242,74,0.45); will-change: transform, opacity; }
.lowtier .hero-word { text-shadow: 0 0 6px rgba(255,255,255,0.85), 0 0 18px rgba(215,242,74,0.4); }
.lowtier .shade-hero, .novideo .shade-hero { background: linear-gradient(180deg, rgba(7,7,7,0.55), rgba(7,7,7,0.25) 45%, rgba(7,7,7,0.7)); }
.novideo #heroMedia video, .novideo .vfreeze { display: none !important; }
#heroMedia { contain: paint; }
.hero-copy { contain: layout style; }

/* ---------- Ampli liviano: oculto = sin animaciones; en reposo casi sin costo ---------- */
.ampli.is-hidden { display: none !important; }
.ampli .l-b, .ampli .l-stripe-glow, .ampli .a-glow { animation: none; }
.ampli.is-walking .l-b, .ampli.speaking .l-b { animation: eq 0.8s ease-in-out infinite; }
.ampli.is-walking .l-stripe-glow, .ampli.speaking .l-stripe-glow { animation: stripeGlow 1.4s ease-in-out infinite; }
.ampli .l-stripe-glow { opacity: 0.7; }
.ampli-btn svg { animation: none; }
.ampli.is-walking .ampli-btn svg { animation: orbStretch 0.9s ease-in-out infinite; }
.ampli-btn { will-change: transform; }

/* Frentes: degradado oscuro extra detrás del texto (para que se lea sobre cualquier foto) sin apagar el resto de la imagen */
.card-body { z-index: 2; isolation: isolate; }
.card-body::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,7,0) 0%, rgba(7,7,7,0.15) 35%, rgba(7,7,7,0.72) 62%, rgba(7,7,7,0.96) 100%); }
.card-img::after { background: linear-gradient(180deg, rgba(7,7,7,0.12), rgba(7,7,7,0.5)); }

/* Sombra sutil y elegante debajo de cada letra y número, en las tarjetas con foto de fondo
   (Frentes y Qué hacemos): se lee bien sin importar qué tan clara sea la zona de la imagen */
.card-body, .col:not(.cols-glow) { text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.55); }
.card-body .tiny, .col .tiny { text-shadow: 0 1px 3px rgba(0,0,0,0.75); }

/* Mejora continua: que la flecha no se corte (menos zoom, encuadre hacia arriba) */
.card-img img.fit-top { left: 0; width: 100%; object-position: 50% 12%; opacity: 0.85; }

/* Empresas: logos reales sobre una placa blanca (los logos son de fondo transparente, pensados para fondo claro) */
.c3d-card.has-logo { padding: 0; }
.c3d-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 7%; background: #fff; border-radius: 17px; }
.c3d-badge img { width: 100%; height: 100%; object-fit: contain; }

/* Chat de Ampli */
.ampli-panel { width: min(350px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 10px; }
.ac-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 2px 0; margin-top: 4px; scrollbar-width: thin; scrollbar-color: rgba(215,242,74,0.4) transparent; }
.ac-m { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-m.bot { align-self: flex-start; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-bottom-left-radius: 4px; }
.ac-m.me { align-self: flex-end; background: var(--lime); color: #0a0a0a; border-bottom-right-radius: 4px; }
.ac-m.typing { opacity: 0.6; }
.ac-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-sugg button { font-size: 12.5px; padding: 6px 11px; border: 1px solid rgba(215,242,74,0.45); border-radius: 999px; color: #f2efe9; transition: background 0.2s ease, color 0.2s ease; }
.ac-sugg button:hover { background: var(--lime); color: #0a0a0a; }
.ac-sugg.is-gone { display: none; }
.ac-form { display: flex; gap: 8px; }
.ac-form input { flex: 1; min-width: 0; padding: 10px 14px; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; color: #f2efe9; font: inherit; font-size: 14px; outline: none; }
.ac-form input:focus { border-color: var(--lime); }
.ac-form button { width: 40px; flex: none; border-radius: 50%; background: var(--lime); color: #0a0a0a; font-size: 18px; line-height: 1; }
.ampli-cta { align-self: flex-start; padding: 9px 16px; font-size: 12px; }
@media (max-width: 860px) { .ac-form input { font-size: 16px; } }

/* Invitación sutil a conversar con Ampli: aviso, pulso suave y etiqueta que se retira sola */
.ampli-btn { position: relative; }
.ampli-dot { position: absolute; top: 6%; right: 2%; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px #0a0a0a, 0 0 8px rgba(215,242,74,0.55); pointer-events: none; }
.ampli-pulse { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; margin: 0; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(215,242,74,0.5); opacity: 0; pointer-events: none; animation: ampliPulse 9s ease-out 4s infinite; }
@keyframes ampliPulse { 0% { transform: scale(0.75); opacity: 0; } 4% { opacity: 0.5; } 18% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
.ampli-hint { position: absolute; top: 50%; translate: 0 -50%; white-space: nowrap; padding: 6px 12px; font-size: 12px; letter-spacing: 0.02em; color: rgba(242,239,233,0.9); background: rgba(13,13,13,0.86); border: 1px solid rgba(215,242,74,0.28); border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; }
.ampli.on-right .ampli-hint { right: 100%; margin-right: 8px; }
.ampli:not(.on-right) .ampli-hint { left: 100%; margin-left: 8px; }
.ampli.hint-on:not(.is-open):not(.speaking) .ampli-hint { opacity: 1; }
.ampli.seen .ampli-pulse, .ampli.seen .ampli-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .ampli-pulse { animation: none; } }
@media (max-width: 860px), (hover: none) and (any-hover: none) { .ampli.hint-on:not(.is-open) .ampli-hint { opacity: 1; } }
.ampli-panel { height: clamp(400px, calc(100vh - 240px), 600px); }

/* Frentes: sin fotos; símbolo blanco sobre el título y títulos en el verde de la marca */
.card { background: radial-gradient(120% 70% at 85% 0%, rgba(215,242,74,0.07), transparent 60%), #0b0b0b; }
.card-body::before { display: none; }
.card-icon { width: clamp(54px, 4.8vw, 76px); height: auto; color: #fff; flex: none; margin-bottom: clamp(4px, 1vh, 12px); }
.card-body h3 { color: var(--lime); }
.card-body h3 { min-height: 2.2em; }
.ac-sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-sugg button { text-align: center; padding: 8px 10px; line-height: 1.25; }
/* Símbolos de Frentes: ocupan todo el espacio libre entre el tope de la tarjeta y el título, centrados, con trazo fino constante */
.card-icon { flex: 1 1 0; min-height: 0; width: 100%; height: auto; margin: clamp(8px, 1.6vh, 20px) 0 clamp(6px, 1.2vh, 16px); stroke-width: 2px; }
.card-icon * { vector-effect: non-scaling-stroke; }

/* ===== Fondo tipo malla suave (manchas del verde lima que se funden sobre el negro) =====
   Cada sección pinta su propia malla y todas se apagan a negro antes de tocar el borde: no hay costuras entre secciones.
   Es estático (sin capas fijas ni filtros), así que no pesa al scrollear. */
:root { --bgsub: radial-gradient(ellipse 52% 38% at 20% 32%, rgba(215,242,74,0.17), transparent 74%),
                 radial-gradient(ellipse 56% 38% at 80% 64%, rgba(215,242,74,0.22), transparent 74%),
                 radial-gradient(ellipse 40% 28% at 52% 50%, rgba(160,200,40,0.09), transparent 74%),
                 #070707; }
.stage, .manif .stage, .manif-in, .prob, .caps, .fr, .rm, .cta, .trust, .us, .pj, .faq, .ct, .mq, .sheet:not(.paper), .pn { background: var(--bgsub); }
.hero .stage { background: var(--ink); }
/* brillos lima de cada sección: se desvanecen antes de tocar el borde (sin corte visible entre secciones) */
.a1 { background: radial-gradient(ellipse 36% 30% at 78% 62%, rgba(215,242,74,0.15), transparent 100%); }
.a2 { background: radial-gradient(ellipse 34% 30% at 22% 34%, rgba(215,242,74,0.13), transparent 100%); }
.a3 { background: radial-gradient(ellipse 40% 28% at 50% 66%, rgba(215,242,74,0.16), transparent 100%); }
.a4 { background: radial-gradient(ellipse 34% 32% at 86% 36%, rgba(215,242,74,0.13), transparent 100%); }
.a5 { background: radial-gradient(ellipse 36% 30% at 30% 62%, rgba(215,242,74,0.14), transparent 100%); }

/* ===== El problema: cinco paneles verticales; uno se abre solo y crece en horizontal ===== */
.sg-hint { font-size: clamp(14px, 1.1vw, 17px); opacity: 0.62; margin-top: calc(clamp(16px, 3vh, 34px) * -0.4); }
.sg-row { --open-w: min(440px, 36vw); flex: 1; display: flex; gap: clamp(8px, 0.9vw, 14px); height: min(58vh, 540px); max-height: 60vh; align-self: stretch; }
.sg { position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; border-radius: 20px; border: 3px solid rgba(255,255,255,0.09); background-color: #070707; background-image: linear-gradient(180deg, #131313 0%, #070707 62%); box-shadow: 0 22px 46px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.05) inset; overflow: hidden; cursor: pointer; outline: none; transition: flex-grow 0.85s var(--ease), border-color 0.6s ease; }
.sg.is-open { flex-grow: 4.4; border-color: rgba(215,242,74,0.5); cursor: default; }
.sg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 55% at 50% 118%, rgba(215,242,74,0.2), transparent 70%); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.sg.is-open::after { opacity: 1; }
.sg:focus-visible { border-color: var(--lime); }
.sg-num { position: absolute; top: clamp(16px, 2.6vh, 26px); left: 0; right: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 3vh, 30px); color: var(--lime); transition: left 0.6s ease; }
.sg.is-open .sg-num { left: clamp(22px, 2vw, 32px); right: auto; text-align: left; }
.sg-vt { position: absolute; left: 50%; bottom: clamp(18px, 3vh, 30px); translate: -50% 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: clamp(14px, 1.5vw, 19px); font-weight: 500; letter-spacing: 0.01em; color: rgba(239,236,229,0.85); transition: opacity 0.4s ease, color 0.5s ease; }
.sg:hover .sg-vt { color: var(--lime); }
.sg.is-open .sg-vt { opacity: 0; }
.sg-open { position: absolute; left: 0; top: 0; bottom: 0; width: var(--open-w); display: flex; align-items: flex-end; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.sg.is-open .sg-open { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.35s, visibility 0s; }
.sg-inner { width: 100%; box-sizing: border-box; padding: clamp(22px, 2vw, 32px); }
.sg-ic { display: block; width: clamp(96px, 10vw, 150px); height: auto; color: #fff; margin-bottom: clamp(16px, 3.4vh, 32px); stroke-width: 2px; }
.sg-ic * { vector-effect: non-scaling-stroke; }
.sg-inner h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 48px); line-height: 1.06; letter-spacing: -0.015em; color: var(--lime); padding-bottom: 0.06em; }
.sg-inner p { margin-top: 1.6vh; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; color: rgba(239,236,229,0.86); max-width: 30ch; }
@media (max-width: 860px) {
  .sg-hint { margin-top: 0; }
  .sg-row { flex-direction: column; height: auto; max-height: none; gap: 10px; flex: none; }
  .sg { flex: none; }
  .sg.is-open { flex-grow: 0; }
  .sg-num { position: static; display: inline-block; text-align: left; width: 44px; padding: 16px 0 16px 20px; font-size: 20px; }
  .sg.is-open .sg-num { left: auto; padding-left: 20px; }
  .sg-vt { position: absolute; left: 70px; right: 18px; top: 0; bottom: auto; height: 62px; translate: none; transform: none; writing-mode: horizontal-tb; display: flex; align-items: center; white-space: normal; font-size: 16px; line-height: 1.2; color: #fff; }
  .sg.is-open .sg-vt { opacity: 1; color: var(--lime); }
  .sg-open { position: static; width: auto; opacity: 1; visibility: visible; display: grid; align-items: stretch; grid-template-rows: 0fr; transition: grid-template-rows 0.55s ease; }
  .sg.is-open .sg-open { grid-template-rows: 1fr; transition: grid-template-rows 0.55s ease; }
  .sg-inner { overflow: hidden; min-height: 0; padding: 0 20px; display: flex; align-items: center; gap: 16px; }
  .sg.is-open .sg-inner { padding: 4px 20px 22px; }
  .sg-ic { width: 54px; margin: 0; flex: none; }
  .sg-inner h3 { display: none; }
  .sg-inner p { margin: 0; font-size: 15px; max-width: none; }
}

/* El problema: contenido del panel abierto centrado; texto blanco más amplio */
.sg { --open-w: min(540px, 44vw); }
.sg-row { --open-w: min(540px, 44vw); }
.sg-open { left: 50%; translate: -50% 0; align-items: center; justify-content: center; }
.sg-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(28px, 4vh, 44px) clamp(24px, 2.4vw, 40px); }
.sg-ic { margin: 0 auto clamp(18px, 3.6vh, 34px); }
.sg-inner h3 { font-size: clamp(30px, 3.2vw, 52px); }
.sg-inner p { margin-inline: auto; margin-top: clamp(14px, 2.4vh, 26px); font-size: clamp(17px, 1.6vw, 24px); line-height: 1.55; max-width: 34ch; color: rgba(239,236,229,0.92); }
@media (max-width: 860px) {
  .sg-open { left: auto; translate: none; align-items: stretch; justify-content: stretch; }
  .sg-inner { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 20px; }
  .sg.is-open .sg-inner { padding: 6px 20px 26px; }
  .sg-ic { width: 76px; margin: 0 auto; }
  .sg-inner p { font-size: 17px; line-height: 1.5; max-width: 28ch; }
}

/* El problema: sin números; títulos verticales en verde lima, del mayor tamaño posible en una sola línea (los mide v2.js) */
.sg-num { display: none; }
.sg-row { height: min(66vh, 600px); max-height: 66vh; }
.sg-vt { top: 50%; bottom: auto; translate: -50% -50%; color: var(--lime); font-size: clamp(20px, 2vw, 30px); line-height: 1; font-weight: 500; letter-spacing: 0; }
.sg:hover .sg-vt { color: var(--lime); }
@media (max-width: 860px) {
  .sg-row { height: auto; max-height: none; }
  .sg-vt { left: 20px; right: 18px; top: 0; translate: none; font-size: 19px; line-height: 1.2; color: var(--lime); }
  .sg.is-open .sg-vt { color: var(--lime); }
}
@media (max-width: 860px) { .sg::before { content: ""; display: block; height: 66px; } .sg-vt { height: 66px; } }
@media (max-width: 860px) { .sg-vt { left: 18px; justify-content: center; text-align: center; } }

/* Frentes: borde verde fino y barrido circular de luz (anillo enmascarado con un cono que gira; solo transform) */
.card { border: 1px solid rgba(215,242,74,0.3); }
.card .ring { position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.card .ring b { position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 240deg, rgba(215,242,74,0.35) 305deg, #d7f24a 352deg, transparent 360deg); will-change: transform; }

/* El problema: títulos en blanco y un toque sutil de verde en cada contenedor */
.sg-vt, .sg:hover .sg-vt { color: #fff; }
.sg { border-color: rgba(215,242,74,0.24); background-image: radial-gradient(110% 42% at 50% 112%, rgba(215,242,74,0.16), transparent 72%), radial-gradient(70% 30% at 50% -6%, rgba(215,242,74,0.07), transparent 70%), linear-gradient(180deg, #131313 0%, #070707 62%); }
.sg.is-open { border-color: rgba(215,242,74,0.5); }
@media (max-width: 860px) { .sg-vt, .sg.is-open .sg-vt { color: #fff; } }
/* Frentes: símbolos más grandes (tarjeta un poco más alta y menos aire alrededor del símbolo) */
.hz-track { height: min(78vh, 820px); margin-top: 4vh; }
.card-icon { margin: clamp(2px, 0.6vh, 8px) 0 clamp(2px, 0.6vh, 8px); }
@media (max-width: 860px) { .hz-track { height: 66vh; margin-top: 8vh; } }

/* El problema: símbolo gigante de fondo, etiqueta que lleva al frente que lo resuelve y línea de avance */
.sg-wm { position: absolute; right: -9%; top: 50%; translate: 0 -50%; height: 108%; width: auto; aspect-ratio: 1; color: #fff; stroke-width: 1.5px; opacity: 0; pointer-events: none; transition: opacity 0.9s ease 0.25s; }
.sg-wm * { vector-effect: non-scaling-stroke; }
.sg.is-open .sg-wm { opacity: 0.085; }
.sg-open, .sg-inner { position: relative; z-index: 2; }
.sg-open { position: absolute; }
.sg-ic { display: none; }
.sg-go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(20px, 3.4vh, 36px); padding: 10px 18px; border: 1px solid rgba(215,242,74,0.55); border-radius: 999px; font-size: clamp(13px, 1vw, 15px); color: rgba(239,236,229,0.9); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.sg-go span { opacity: 0.7; }
.sg-go b { font-weight: 600; color: var(--lime); transition: color 0.3s ease; }
.sg-go i { font-style: normal; color: var(--lime); transition: transform 0.3s ease, color 0.3s ease; }
.sg-go:hover { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.sg-go:hover b, .sg-go:hover i { color: #0a0a0a; }
.sg-go:hover i { transform: translateX(4px); }
.sg-prog { position: absolute; left: clamp(22px, 2vw, 32px); right: clamp(22px, 2vw, 32px); bottom: clamp(16px, 2.4vh, 26px); height: 2px; border-radius: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; z-index: 2; }
.sg.is-open .sg-prog { opacity: 0.9; }
.sg-prog.run { animation: sgProg 3.6s linear forwards; }
@keyframes sgProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 860px) {
  .sg-wm, .sg-prog { display: none; }
  .sg-ic { display: block; }
  .sg-go { margin-top: 4px; flex-wrap: wrap; justify-content: center; text-align: center; }
  .sg-inner { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .sg-prog.run { animation: none; transform: scaleX(1); } }
.sg.is-open .sg-wm { opacity: 0.12; }
.sg-inner h3 { text-wrap: balance; }
@media (max-width: 860px) { .sg-open { position: static; left: auto; translate: none; } }
/* Frentes: títulos centrados en cada contenedor */
.card-body h3 { text-align: center; }
/* El problema: el símbolo vuelve a verse blanco y nítido arriba del título (se quita el fondo tenue) */
.sg-wm { display: none; }
.sg-ic { display: block; width: clamp(88px, 8.6vw, 132px); margin: 0 auto clamp(14px, 2.6vh, 26px); }
.sg-go { margin-top: clamp(16px, 2.6vh, 28px); }
.sg-ic { width: clamp(112px, 11vw, 160px); }

/* El problema (paneles cerrados): símbolo blanco con halo verde, filete fino hacia el título y una luz distinta en cada panel */
.sg-wm { display: block; position: absolute; left: 50%; top: clamp(20px, 3.4vh, 32px); right: auto; translate: -50% 0; width: clamp(46px, 4.2vw, 64px); height: auto; aspect-ratio: 1; color: #fff; stroke-width: 1.7px; opacity: 1; z-index: 2; transition: opacity 0.3s ease; }
.sg.is-open .sg-wm, .sg.is-open .sg-halo, .sg.is-open .sg-tick { opacity: 0; }
.sg-halo { position: absolute; left: 50%; top: clamp(8px, 1.8vh, 20px); width: clamp(110px, 10vw, 150px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(215,242,74,0.22), transparent 66%); pointer-events: none; transition: opacity 0.3s ease, transform 0.5s var(--ease); }
.sg-tick { position: absolute; left: 50%; top: calc(clamp(20px, 3.4vh, 32px) + clamp(46px, 4.2vw, 64px) + 14px); width: 1px; height: 30px; background: linear-gradient(rgba(215,242,74,0.9), rgba(215,242,74,0)); pointer-events: none; transition: opacity 0.3s ease; }
.sg-vt { top: calc(50% + 62px); }
.sg:not(.is-open):hover { border-color: rgba(215,242,74,0.55); }
.sg:not(.is-open):hover .sg-halo { transform: scale(1.15); }
.sg:nth-child(2) { background-image: radial-gradient(110% 42% at 20% 112%, rgba(215,242,74,0.16), transparent 72%), radial-gradient(70% 30% at 50% -6%, rgba(215,242,74,0.07), transparent 70%), linear-gradient(180deg, #131313 0%, #070707 62%); }
.sg:nth-child(3) { background-image: radial-gradient(110% 42% at 80% 112%, rgba(215,242,74,0.16), transparent 72%), radial-gradient(70% 30% at 50% -6%, rgba(215,242,74,0.07), transparent 70%), linear-gradient(180deg, #131313 0%, #070707 62%); }
.sg:nth-child(4) { background-image: radial-gradient(110% 42% at 30% 112%, rgba(215,242,74,0.16), transparent 72%), radial-gradient(70% 30% at 50% -6%, rgba(215,242,74,0.07), transparent 70%), linear-gradient(180deg, #131313 0%, #070707 62%); }
@media (max-width: 860px) {
  .sg-halo, .sg-tick { display: none; }
  .sg-wm { display: block; left: 20px; top: 16px; translate: none; width: 34px; }
  .sg.is-open .sg-wm { opacity: 0; }
  .sg-vt { top: 0; left: 64px; right: 18px; }
}
@media (max-width: 860px) { .sg.is-open .sg-vt { left: 18px; } .sg-inner .sg-ic { width: 88px; } }

/* Frentes, versión premium: símbolo bicolor (blanco + detalle en el verde de la marca) con halo, separador fino y marcas de esquina */
.card-icon { filter: drop-shadow(0 0 12px rgba(215,242,74,0.16)); }
.card-icon .ac { stroke: var(--lime); }
.card-body::before { display: block; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 34% at 50% 26%, rgba(215,242,74,0.10), transparent 72%); }
.card-rule { position: relative; display: block; flex: none; align-self: center; width: min(62%, 220px); height: 1px; margin: clamp(2px, 0.8vh, 10px) 0 clamp(6px, 1.2vh, 14px); background: linear-gradient(90deg, transparent, rgba(215,242,74,0.65) 50%, transparent); }
.card-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: #0b0b0b; border: 1px solid var(--lime); box-shadow: 0 0 10px rgba(215,242,74,0.5); }
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.7;
  background:
    linear-gradient(var(--lime), var(--lime)) left 16px top 16px / 16px 1px no-repeat,
    linear-gradient(var(--lime), var(--lime)) left 16px top 16px / 1px 16px no-repeat,
    linear-gradient(var(--lime), var(--lime)) right 16px bottom 16px / 16px 1px no-repeat,
    linear-gradient(var(--lime), var(--lime)) right 16px bottom 16px / 1px 16px no-repeat; }
.hero-tag { text-wrap: balance; }

/* Manifiesto: frase más larga, tamaño ajustado para que entre completa en la pantalla */
.manif-text { font-size: clamp(30px, 4.9vw, 100px); line-height: 1.02; max-width: 19.5em; }
@media (max-width: 860px) { .manif-text { font-size: clamp(30px, 8.4vw, 46px); max-width: none; } }

/* Cuándo necesitas Amplifia: símbolos más grandes y texto de descripción más amplio */
.sg-row { --wm: clamp(64px, 5.6vw, 88px); }
.sg-wm { width: var(--wm); }
.sg-halo { width: calc(var(--wm) * 2.3); }
.sg-tick { top: calc(clamp(20px, 3.4vh, 32px) + var(--wm) + 12px); }
.sg-vt { top: calc(50% + var(--wm) * 0.75); }
.sg-inner .sg-ic { width: clamp(150px, 15vw, 220px); margin-bottom: clamp(16px, 3vh, 30px); }
.sg-inner p { max-width: 44ch; font-size: clamp(16px, 1.45vw, 22px); }
@media (max-width: 860px) {
  .sg-wm { width: 50px; left: 16px; top: 12px; }
  .sg-vt { left: 78px; }
  .sg::before { height: 74px; }
  .sg-vt { height: 74px; }
  .sg-inner .sg-ic { width: 120px; }
  .sg-inner p { max-width: 30ch; font-size: 16.5px; }
}

/* Cuándo necesitas Amplifia: título vertical anclado abajo, ocupa todo el espacio libre bajo el filete */
.sg-row { height: min(72vh, 640px); max-height: 72vh; }
.sg-vt { top: auto; bottom: clamp(20px, 3vh, 30px); translate: -50% 0; }
@media (max-width: 860px) { .sg-row { height: auto; max-height: none; } .sg-vt { top: 0; bottom: auto; translate: none; } }
.hero-kicker { text-wrap: balance; max-width: 92vw; text-align: center; margin-inline: auto; }

/* Frentes: frase de posicionamiento bajo el título */
.hz-sub { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 34px); line-height: 1.25; color: rgba(239,236,229,0.82); max-width: 20em; margin-top: clamp(4px, 1vh, 14px); }
.hz-sub { text-wrap: balance; max-width: 17em; }

/* Manifiesto: rótulo, frase y tres puntos (procesos, personas, tecnología) que se unen con una línea */
.mf-wrap { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 4.4vh, 46px); }
.mf-label { display: flex; align-items: center; gap: 14px; }
.mf-label::before { content: ""; width: 34px; height: 1px; background: var(--lime); }
.manif-text { font-size: clamp(30px, 4.4vw, 92px); }
.manif-text em { transition: text-shadow 1.2s ease; }
.manif-text.is-linked em { text-shadow: 0 0 34px rgba(215,242,74,0.5), 0 0 10px rgba(215,242,74,0.25); }
.mf-net { --p: 0; position: relative; width: min(100%, 980px); display: flex; justify-content: space-between; align-items: flex-start; padding-top: 6px; }
.mf-net::before, .mf-net::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 1px; }
.mf-net::before { background: repeating-linear-gradient(90deg, rgba(239,236,229,0.32) 0 6px, transparent 6px 12px); }
.mf-net::after { background: var(--lime); box-shadow: 0 0 12px rgba(215,242,74,0.6); transform: scaleX(var(--p)); transform-origin: left; }
.mf-n { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; font-size: clamp(11px, 0.95vw, 14px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(239,236,229,0.5); transition: color 0.6s ease; }
.mf-n:nth-child(2) { align-items: center; }
.mf-n:nth-child(3) { align-items: flex-end; }
.mf-n i { display: block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(239,236,229,0.55); background: #070707; transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; }
.mf-n.on { color: #fff; }
.mf-n.on i { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 16px rgba(215,242,74,0.65); }
@media (max-width: 860px) { .manif-text { font-size: clamp(30px, 8.2vw, 46px); } .mf-n { font-size: 10.5px; letter-spacing: 0.16em; } }

/* Manifiesto centrado y con tres nodos con símbolo: Procesos, Personas y Tecnología */
.manif-in { justify-content: center; text-align: center; }
.manif-text { margin: 0 auto; text-align: center; max-width: 19em; }
.mf-wrap { align-items: center; text-align: center; }
.mf-label::after { content: ""; width: 34px; height: 1px; background: var(--lime); }
.mf-net { width: min(100%, 780px); display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0; margin-top: clamp(4px, 1.2vh, 14px); }
.mf-net::before, .mf-net::after { left: 16.667%; right: 16.667%; top: 26px; }
.mf-n, .mf-n:nth-child(2), .mf-n:nth-child(3) { align-items: center; gap: 16px; font-size: clamp(11px, 0.95vw, 14px); }
.mf-n i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(239,236,229,0.4); background: #070707; color: rgba(239,236,229,0.7); transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease; }
.mf-n i svg { width: 26px; height: 26px; }
.mf-n b { font-weight: 500; }
.mf-n.on i { background: #0d1206; border-color: var(--lime); color: var(--lime); box-shadow: 0 0 22px rgba(215,242,74,0.35), inset 0 0 12px rgba(215,242,74,0.12); }
@media (max-width: 860px) { .mf-net { width: 100%; } .mf-n i { width: 46px; height: 46px; } .mf-n i svg { width: 22px; height: 22px; } .mf-net::before, .mf-net::after { top: 22px; } .mf-n { font-size: 10px; letter-spacing: 0.14em; gap: 12px; } }
.mf-n b { display: block; line-height: 1.5; min-height: 1.5em; }
@media (max-width: 860px) { .mf-n, .mf-n:nth-child(2), .mf-n:nth-child(3) { gap: 12px; font-size: 10px; } }

/* Manifiesto: los filetes del rótulo crecen desde el centro y la línea punteada aparece con los nodos */
.mf-label::before { transform: scaleX(var(--lw, 1)); transform-origin: right; }
.mf-label::after { transform: scaleX(var(--lw, 1)); transform-origin: left; }
.mf-net::before { opacity: var(--bo, 1); }

/* ===== Fluidez: paneles con fondo barato (el degradado no depende del ancho, así no se repinta mientras crece) ===== */
.sg-row .sg:nth-child(n) { background-image: none; background-color: #0c0c0c; box-shadow: none; transition: flex-grow 0.7s var(--ease), border-color 0.5s ease; }
.sg-row .sg::after { inset: auto; left: 50%; bottom: 0; width: var(--open-w); height: 62%; translate: -50% 0; background: radial-gradient(70% 90% at 50% 100%, rgba(215,242,74,0.2), transparent 72%); opacity: 0.5; will-change: opacity; }
.sg-row .sg.is-open::after { opacity: 1; }
.lowtier .sg-prog, .lowtier .sg-halo { display: none; }
/* Qué hacemos y Quiénes somos: los pulsos animaban sombras (se repintan en cada cuadro); ahora son estáticos y solo parpadea la opacidad */
.cols-node { animation: none; box-shadow: 0 0 0 6px rgba(215,242,74,0.16), 0 0 18px rgba(215,242,74,0.35); }
.hot-plus { animation: none; box-shadow: 0 0 0 6px rgba(215,242,74,0.14); }
/* Cuándo necesitas Amplifia: sección fija (sin rotación, sin símbolos animados ni barra de avance); el panel cambia casi al instante */
.sg-prog { display: none !important; }
.sg-row .sg:nth-child(n) { transition: flex-grow 0.22s ease-out, border-color 0.2s ease; }
.sg-row .sg::after { transition: opacity 0.2s ease; }

/* Cuándo necesitas Amplifia: sin ningún movimiento; el panel cambia al instante */
.sg-row .sg:nth-child(n), .sg-row .sg::after, .sg-row .sg *, .sg-halo { transition: none !important; animation: none !important; }

/* Panel abierto: borde verde más vivo con resplandor fijo y un destello único de medio segundo (solo opacidad; sin animaciones continuas) */
.sg-row .sg.is-open:nth-child(n) { border-color: rgba(215,242,74,0.9); box-shadow: 0 0 0 1px rgba(215,242,74,0.28), 0 0 26px rgba(215,242,74,0.26), inset 0 0 34px rgba(215,242,74,0.06); }
@keyframes sgFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 861px) {
  .sg.is-open::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 70px rgba(215,242,74,0.3), inset 0 0 14px rgba(215,242,74,0.45); animation: sgFlash 0.6s ease-out 1 both !important; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .sg.is-open::before { animation: none !important; opacity: 0; } }

/* Qué hacemos: resumen arriba y tres contenedores verticales chicos, centrados, sin fotos */
.caps-in { align-items: center; text-align: center; justify-content: center; }
.caps-intro { max-width: 34em; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 40px); line-height: 1.22; color: rgba(239,236,229,0.92); margin: 0 auto; }
.cols { flex: none; width: min(100%, 1080px); min-height: 0; height: min(52vh, 470px); grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); background: none; border: 0; border-radius: 0; overflow: visible; margin-top: clamp(8px, 2vh, 24px); }
.cols .col, .cols .col + .col { position: relative; align-items: center; justify-content: center; text-align: center; gap: 18px; min-height: 0; padding: clamp(22px, 2.4vw, 38px); border: 1px solid rgba(215,242,74,0.34); border-radius: 20px; background: radial-gradient(90% 46% at 50% 108%, rgba(215,242,74,0.16), transparent 72%), #0b0b0b; }
.cols .col .cap-title { color: var(--lime); font-size: clamp(34px, 3.6vw, 60px); }
.cols .col .sub { max-width: 24ch; margin: 0 auto; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.55; color: rgba(239,236,229,0.86); opacity: 1; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; height: auto; } .cols .col, .cols .col + .col { padding: 26px 22px; } .cols .col .sub { max-width: 30ch; } }
@media (min-width: 861px) { .cols .col, .cols .col + .col { justify-content: flex-start; padding-top: clamp(48px, 9vh, 90px); } }

/* Qué hacemos v3: tarjetas separadas por un "+" verde, símbolo bicolor, halo, filete con rombo y luz que sigue al cursor (solo escritorio) */
.cols { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; gap: 0; width: min(100%, 1180px); align-items: stretch; }
.cols .col.qh-card { --mx: 50%; --my: 100%; position: relative; overflow: hidden; justify-content: flex-start; padding: clamp(28px, 4.6vh, 46px) clamp(22px, 2vw, 34px) clamp(24px, 4vh, 40px); border: 1px solid rgba(215,242,74,0.38); border-radius: 22px; background: #0b0b0b; transition: border-color 0.3s ease; }
.qh-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(215,242,74,0.16), transparent 62%); opacity: 0.55; transition: opacity 0.3s ease; }
.qh-card:hover { border-color: rgba(215,242,74,0.85); }
.qh-card:hover::before { opacity: 1; }
.qh-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.7; background: linear-gradient(var(--lime), var(--lime)) left 14px top 14px / 14px 1px no-repeat, linear-gradient(var(--lime), var(--lime)) left 14px top 14px / 1px 14px no-repeat, linear-gradient(var(--lime), var(--lime)) right 14px bottom 14px / 14px 1px no-repeat, linear-gradient(var(--lime), var(--lime)) right 14px bottom 14px / 1px 14px no-repeat; }
.qh-card > * { position: relative; z-index: 1; }
.qh-halo { position: absolute !important; left: 50%; top: 4%; width: 62%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(215,242,74,0.2), transparent 66%); pointer-events: none; z-index: 0 !important; }
.qh-ic { display: block; width: clamp(96px, 9vw, 140px); height: auto; color: #fff; margin: 0 auto; filter: drop-shadow(0 0 12px rgba(215,242,74,0.18)); }
.qh-ic .ac { stroke: var(--lime); }
.qh-rule { display: block; width: min(64%, 200px); height: 1px; margin: clamp(14px, 2.4vh, 24px) auto 0; background: linear-gradient(90deg, transparent, rgba(215,242,74,0.7) 50%, transparent); position: relative; }
.qh-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: #0b0b0b; border: 1px solid var(--lime); box-shadow: 0 0 10px rgba(215,242,74,0.5); }
.cols .qh-card .cap-title { margin-top: clamp(10px, 1.6vh, 18px); }
.qh-plus { position: relative; align-self: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(215,242,74,0.7); background: #0b0b0b; box-shadow: 0 0 0 6px rgba(215,242,74,0.12), 0 0 22px rgba(215,242,74,0.4); z-index: 2; }
.qh-plus::before, .qh-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--lime); border-radius: 1px; }
.qh-plus::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.qh-plus::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; width: 100%; }
  .cols .col.qh-card { min-height: 0; }
  .qh-plus { width: 34px; height: 34px; margin: 10px 0; }
  .qh-card::before { background: radial-gradient(360px circle at 50% 100%, rgba(215,242,74,0.16), transparent 62%); }
}
.qh-ic, .qh-rule, .qh-halo { flex: none; }
.cols { height: auto; min-height: 0; }
.cols .col.qh-card .cap-title { font-size: clamp(32px, 3.2vw, 54px); }

/* Qué hacemos v4 (lista de títulos grandes): el activo se llena de verde, los demás quedan en contorno; a la derecha el símbolo y el texto del activo. Sin animaciones continuas. */
#capsCols.qs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 70px); width: min(100%, 1180px); height: auto; min-height: 0; border: 0; background: none; text-align: left; margin-top: clamp(10px, 3vh, 34px); }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; }
.qs-item { position: relative; display: block; padding: clamp(10px, 2.2vh, 22px) 0; border-top: 1px solid rgba(239,236,229,0.14); cursor: pointer; outline: none; }
.qs-item:last-child { border-bottom: 1px solid rgba(239,236,229,0.14); }
.qs-item .cap-title { font-size: clamp(54px, 7.4vw, 128px); line-height: 1; padding: 0 0 0.06em; color: transparent; -webkit-text-stroke: 1px rgba(239,236,229,0.32); transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease; }
.qs-item:hover .cap-title { -webkit-text-stroke-color: rgba(215,242,74,0.75); }
.qs-item.is-on .cap-title { color: var(--lime); -webkit-text-stroke: 1px var(--lime); }
.qs-item::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(215,242,74,0.6); display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--lime); background: #0b0b0b; opacity: 0.55; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; }
.qs-item.is-on::after { opacity: 1; background: var(--lime); color: #0a0a0a; content: "\2192"; font-size: 18px; }
.qs-m { display: none; }
.qs-stage { position: relative; min-height: clamp(360px, 52vh, 480px); }
.qs-panel { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(215,242,74,0.5); border-radius: 22px; background: #0b0b0b; overflow: hidden; }
.qs-panel.is-on { display: flex; }
.qs-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7; background: linear-gradient(var(--lime), var(--lime)) left 14px top 14px / 14px 1px no-repeat, linear-gradient(var(--lime), var(--lime)) left 14px top 14px / 1px 14px no-repeat, linear-gradient(var(--lime), var(--lime)) right 14px bottom 14px / 14px 1px no-repeat, linear-gradient(var(--lime), var(--lime)) right 14px bottom 14px / 1px 14px no-repeat; }
.qs-halo { position: absolute; left: 50%; top: 6%; width: 70%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgba(215,242,74,0.22), transparent 66%); pointer-events: none; }
.qs-ic { position: relative; display: block; width: clamp(130px, 13vw, 200px); height: auto; color: #fff; filter: drop-shadow(0 0 14px rgba(215,242,74,0.2)); flex: none; }
.qs-ic .ac { stroke: var(--lime); }
.qs-rule { position: relative; display: block; width: min(60%, 220px); height: 1px; margin: clamp(18px, 3vh, 30px) 0 clamp(16px, 2.6vh, 26px); background: linear-gradient(90deg, transparent, rgba(215,242,74,0.7) 50%, transparent); flex: none; }
.qs-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: #0b0b0b; border: 1px solid var(--lime); box-shadow: 0 0 10px rgba(215,242,74,0.5); }
.qs-panel p { position: relative; margin: 0; max-width: 30ch; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.55; color: rgba(239,236,229,0.9); }
@media (max-width: 860px) {
  #capsCols.qs { grid-template-columns: 1fr; gap: 0; }
  .qs-stage { display: none; }
  .qs-item .cap-title { font-size: clamp(44px, 14vw, 72px); padding-right: 52px; }
  .qs-item::after { width: 34px; height: 34px; }
  .qs-item.is-on .qs-m { display: block; margin: 4px 52px 6px 0; font-size: 16px; line-height: 1.55; color: rgba(239,236,229,0.88); }
}

/* Qué hacemos v5: panel derecho tipo "dial" (anillos concéntricos), sin marco, esquinas ni rombo (ya no repite el diseño de Frentes) */
.qs-panel { border: 0 !important; background: none !important; border-radius: 0; overflow: visible; justify-content: flex-start; padding: 0; }
.qs-panel::after, .qs-halo, .qs-rule { display: none !important; }
.qs-panel::before { content: ""; position: absolute; left: 50%; top: 0; width: min(100%, 360px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; border: 1px solid rgba(215,242,74,0.5); box-shadow: 0 0 0 clamp(18px, 2.2vw, 30px) rgba(215,242,74,0.05), 0 0 0 clamp(19px, 2.2vw, 31px) rgba(215,242,74,0.22), inset 0 0 60px rgba(215,242,74,0.1); background: radial-gradient(circle, rgba(215,242,74,0.14), transparent 68%); pointer-events: none; }
.qs-ic { margin-top: clamp(64px, 8.6vw, 118px); width: clamp(120px, 12vw, 180px); }
.qs-panel p { margin-top: clamp(64px, 9vh, 96px); padding-left: 18px; text-align: left; max-width: 34ch; border-left: 2px solid var(--lime); }
.qs-stage { min-height: clamp(400px, 56vh, 520px); }
.qs-panel::before { width: 300px; box-shadow: inset 0 0 60px rgba(215,242,74,0.1); outline: 1px solid rgba(215,242,74,0.22); outline-offset: 22px; top: 22px; }
.qs-ic { width: 140px; margin-top: 102px; }
.qs-panel p { margin-top: 116px; }
.qs-stage { min-height: 560px; }
.qs-panel::before { width: 260px; top: 18px; outline-offset: 18px; }
.qs-ic { width: 120px; margin-top: 88px; }
.qs-panel p { margin-top: 92px; }
.qs-stage { min-height: 470px; }

/* Rótulo de "Qué hacemos": más grande y en blanco, como el de "¿Cuándo necesitas Amplifia?" */
.caps-in > .tiny { font-size: clamp(18px, 1.7vw, 27px); letter-spacing: 0.24em; color: #fff; opacity: 1; font-weight: 500; }
.caps-in > .tiny::before, .caps-in > .tiny::after { content: ""; display: inline-block; width: clamp(24px, 3vw, 44px); height: 1px; background: var(--lime); vertical-align: middle; margin: 0 clamp(12px, 1.4vw, 20px) 0.2em; }

/* Programas: Líderes Aumentados como oferta destacada y la plataforma como "en construcción" (sin animaciones continuas) */
.pj-head .tiny { color: #fff; }
.pg-main { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 90px); align-items: center; padding: clamp(34px, 7vh, 80px) var(--pad); border-top: 1px solid rgba(239,236,229,0.18); overflow: hidden; }
.pg-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 60% at 82% 60%, rgba(215,242,74,0.12), transparent 100%); }
.pg-main > *:not(.pg-glow) { position: relative; }
.pg-tag { display: block; font-size: clamp(11px, 0.95vw, 14px); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239,236,229,0.7); }
.pg-title { margin: clamp(10px, 1.6vh, 18px) 0 clamp(14px, 2.4vh, 24px); }
.pg-lead { max-width: 34em; font-size: clamp(16px, 1.45vw, 22px); line-height: 1.5; color: rgba(239,236,229,0.9); }
.pg-lead em { color: var(--lime); font-style: italic; }
.pg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(20px, 3.4vh, 34px); }
.pg-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239,236,229,0.85); border-bottom: 1px solid rgba(215,242,74,0.5); padding-bottom: 4px; transition: color 0.2s ease, border-color 0.2s ease; }
.pg-link:hover { color: var(--lime); border-color: var(--lime); }
.pg-link i { font-style: normal; }
.pg-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-facts li { display: grid; gap: 4px; padding: clamp(12px, 2vh, 18px) 0; border-top: 1px solid rgba(215,242,74,0.28); }
.pg-facts li:last-child { border-bottom: 1px solid rgba(215,242,74,0.28); }
.pg-facts b { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); }
.pg-facts span { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.4; color: rgba(239,236,229,0.92); }
.pg-soon { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 0 var(--pad) clamp(40px, 8vh, 90px); padding: clamp(22px, 3.4vh, 34px) clamp(22px, 2.6vw, 40px); border: 1px dashed rgba(215,242,74,0.45); border-radius: 20px; background: rgba(215,242,74,0.03); }
.pg-soon-copy { display: grid; gap: 10px; max-width: 46em; }
.pg-soon-title { font-size: clamp(28px, 2.8vw, 46px); }
.pg-soon p { color: rgba(239,236,229,0.78); line-height: 1.5; }
.pg-badge { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 7px 14px; border: 1px solid rgba(215,242,74,0.6); border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.pg-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(215,242,74,0.7); }
.pg-soon-btn { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border: 1px solid rgba(239,236,229,0.4); border-radius: 999px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.pg-soon-btn:hover { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.pg-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(4,4,4,0.82); }
.pg-modal[hidden] { display: none; }
.pg-modal-card { position: relative; width: min(520px, 100%); display: grid; gap: 16px; justify-items: start; padding: clamp(26px, 4vw, 44px); border: 1px solid rgba(215,242,74,0.55); border-radius: 22px; background: #0c0c0c; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.pg-modal-card p { color: rgba(239,236,229,0.86); line-height: 1.55; }
.pg-modal-x { position: absolute; top: 12px; right: 16px; font-size: 26px; line-height: 1; opacity: 0.7; }
.pg-modal-x:hover { opacity: 1; color: var(--lime); }
.pg-bar { width: 100%; height: 4px; border-radius: 4px; background: rgba(239,236,229,0.12); overflow: hidden; }
.pg-bar i { display: block; width: 60%; height: 100%; background: var(--lime); border-radius: 4px; }
@media (max-width: 860px) {
  .pg-main { grid-template-columns: 1fr; }
  .pg-soon { flex-direction: column; align-items: flex-start; }
  .pg-cta .btn { text-align: center; }
}

/* Líderes Aumentados: degradado blanco a verde lima que avanza (variable --gp, 0 a 1) */
.pg-title { --gp: 1; padding-bottom: 0.12em; background-image: linear-gradient(90deg, #d7f24a 0%, #d7f24a 50%, #ffffff 50%, #ffffff 100%); background-size: 260% 100%; background-position: calc((1 - var(--gp)) * 100%) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pg-title { background-image: linear-gradient(90deg, #d7f24a 0%, #d7f24a 42%, #ffffff 58%, #ffffff 100%); }

/* Carrusel: el brillo de cada tarjeta se actualiza unas 8 veces por segundo, sin transición (las transiciones se calculaban cuadro a cuadro) */
.c3d-card, .c3d-back { transition: border-color 0.5s ease; }

/* Frentes en celular: carrusel nativo con encastre (sin pin ni movimiento atado al scroll) */
.hz.hz-swipe { height: auto !important; }
.hz.hz-swipe .stage { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: stretch; padding: clamp(96px, 14vh, 120px) 0 clamp(56px, 8vh, 80px); }
.hz-swipe .hz-intro { width: auto; padding: 0 var(--pad); margin-bottom: 26px; gap: 14px; }
.hz-swipe .hz-track { width: auto; height: min(64vh, 540px); margin-top: 0; transform: none !important; will-change: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px var(--pad) 8px; gap: 14px; }
.hz-swipe .hz-track::-webkit-scrollbar { display: none; }
.hz-swipe .card { width: 80vw; max-width: 380px; scroll-snap-align: start; }
.hz-swipe .hz-end { width: 1px; }
.hz-swipe .hz-bar { position: relative; left: auto; right: auto; bottom: auto; margin: 22px var(--pad) 0; }
.hz-swipe .hz-intro::after { content: "Deslizá para ver los seis frentes  →"; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(239,236,229,0.6); }

/* Celular: tarjetas de Frentes con alto según su contenido (así la lista nunca queda cortada) */
.hz-swipe .hz-track { height: auto; align-items: stretch; }
.hz-swipe .card { height: auto; min-height: 0; }
.hz-swipe .card-body { position: relative; inset: auto; height: 100%; justify-content: flex-start; padding: 26px 22px 24px; }
.hz-swipe .card-icon { flex: none; height: clamp(96px, 26vw, 130px); width: 100%; margin: 6px 0 4px; }
.hz-swipe .card-body h3 { min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
/* Celular: el rótulo de las señales va solo; "Cinco señales" se oculta para que no se apriete */
@media (max-width: 860px) { .prob-head .tiny:last-child { display: none; } }

/* Qué hacemos: franja con resultados que lleva a la página de casos */
.qh-cases { width: min(100%, 1180px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; margin-top: clamp(22px, 4vh, 44px); padding: clamp(16px, 2.4vh, 22px) clamp(20px, 2.4vw, 34px); border: 1px solid rgba(215,242,74,0.45); border-radius: 999px; background: rgba(215,242,74,0.04); text-align: left; transition: background 0.25s ease, border-color 0.25s ease; }
.qh-cases-m { font-size: clamp(13px, 1vw, 15px); color: rgba(239,236,229,0.78); }
.qh-cases-m b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 30px); color: var(--lime); margin-right: 6px; }
.qh-cases-go { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-size: 14px; font-weight: 600; }
.qh-cases-go i { font-style: normal; transition: transform 0.25s ease; }
.qh-cases:hover { background: rgba(215,242,74,0.09); border-color: var(--lime); }
.qh-cases:hover .qh-cases-go i { transform: translateX(4px); }
@media (max-width: 860px) { .qh-cases { border-radius: 22px; flex-direction: column; align-items: flex-start; } .qh-cases-go { width: 100%; justify-content: center; } }

/* Casos (resumen en el inicio): cuatro tarjetas con el resultado principal, cada una lleva a su caso */
.qh-cases { display: none; }
.ks { position: relative; z-index: 4; background: var(--bgsub); }
.ks-in { padding: clamp(96px, 14vh, 140px) var(--pad) clamp(70px, 12vh, 130px); display: grid; gap: clamp(26px, 4.4vh, 46px); }
.ks-head { display: grid; gap: 14px; }
.ks-head .tiny { color: #fff; font-size: clamp(15px, 1.35vw, 21px); }
.ks-head h2 em { color: var(--lime); }
.ks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.ks-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: clamp(220px, 32vh, 300px); padding: clamp(20px, 2vw, 30px); border: 1px solid rgba(215,242,74,0.35); border-radius: 20px; background: radial-gradient(90% 60% at 50% 110%, rgba(215,242,74,0.12), transparent 70%), #0b0b0b; transition: border-color 0.25s ease, background-color 0.25s ease; }
.ks-card:hover { border-color: var(--lime); background-color: #10130a; }
.ks-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239,236,229,0.6); }
.ks-num { margin-top: auto; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.6vw, 62px); line-height: 1; color: var(--lime); }
.ks-lab { font-size: clamp(13px, 1vw, 15px); color: rgba(239,236,229,0.8); }
.ks-title { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(239,236,229,0.14); font-size: clamp(14px, 1.1vw, 16px); color: #fff; }
.ks-title i { font-style: normal; color: var(--lime); transition: transform 0.25s ease; }
.ks-card:hover .ks-title i { transform: translateX(4px); }
.ks-all { justify-self: start; display: inline-flex; gap: 12px; align-items: center; }
.ks-all i { font-style: normal; }
@media (max-width: 1100px) { .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ks-grid { grid-template-columns: 1fr; } .ks-card { min-height: 0; } .ks-all { justify-self: stretch; justify-content: center; } }
/* Barra superior en notebooks chicas (861-1240 px): links más compactos para que siempre entre el botón de diagnóstico */
@media (max-width: 1240px) and (min-width: 861px) {
  .nav-cta { display: inline-flex !important; padding: 11px 16px; font-size: 12px; }
  .nav { gap: clamp(10px, 1.15vw, 18px); font-size: 11.5px; letter-spacing: 0.02em; }
  .hdr { gap: 16px; padding-left: 20px; }
}
@media (max-width: 1000px) and (min-width: 861px) { .hdr .brand span { display: none; } .nav { gap: 11px; font-size: 11px; } }
.ks-num { white-space: nowrap; font-size: clamp(30px, 2.9vw, 54px); }
@media (max-width: 560px) { .ks-num { font-size: clamp(36px, 11vw, 52px); } }

/* Casos (inicio) v2: título del caso arriba, una línea de contexto, resultados rotulados y "Ver el caso" */
.ks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-card { min-height: 0; gap: 0; padding: clamp(22px, 2.2vw, 34px); }
.ks-card .ks-tag { width: fit-content; padding: 6px 12px; border: 1px solid rgba(215,242,74,0.4); border-radius: 999px; color: var(--lime); font-size: 10.5px; }
.ks-card .ks-title { display: block; margin: clamp(14px, 2vh, 20px) 0 8px; padding: 0; border: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 38px); line-height: 1.08; color: #fff; }
.ks-desc { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.5; color: rgba(239,236,229,0.72); }
.ks-mets { list-style: none; margin: clamp(16px, 2.4vh, 24px) 0 0; padding: 0; display: grid; }
.ks-mets li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(215,242,74,0.22); }
.ks-mets b { font-family: var(--serif); font-weight: 400; white-space: nowrap; font-size: clamp(30px, 2.6vw, 46px); line-height: 1.05; color: var(--lime); }
.ks-mets span { font-size: clamp(12.5px, 0.95vw, 14px); color: rgba(239,236,229,0.78); }
.ks-go { margin-top: auto; padding-top: clamp(16px, 2.4vh, 24px); display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.ks-go i { font-style: normal; color: var(--lime); transition: transform 0.25s ease; }
.ks-card:hover .ks-go i { transform: translateX(4px); }
@media (max-width: 1100px) { .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ks-grid { grid-template-columns: 1fr; } }
@media (min-width: 701px) { .ks-desc { min-height: 3em; } }
.ks-sub { font-size: clamp(15px, 1.3vw, 20px); color: rgba(239,236,229,0.78); }

/* Regreso desde casos: la pantalla de carga queda como un velo negro liso (sin logo) hasta posicionarse en la sección */
.quick .pre { display: flex !important; transition: opacity 0.4s ease; }
.quick .pre > * { display: none !important; }
.quick.quick-done .pre { opacity: 0; pointer-events: none; }

/* Casos en el inicio, versión simple: un número y una frase por caso, y un acceso claro a la página de casos */
.ks-simple { padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(60px, 10vh, 100px); gap: clamp(22px, 3.6vh, 36px); }
.ks-simple .ks-head h2 em { color: var(--lime); }
.ks-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(215,242,74,0.28); border-bottom: 1px solid rgba(215,242,74,0.28); }
.ks-it { display: grid; gap: 8px; align-content: start; padding: clamp(20px, 3.4vh, 34px) clamp(16px, 2vw, 32px); transition: background-color 0.25s ease; }
.ks-it + .ks-it { border-left: 1px solid rgba(239,236,229,0.12); }
.ks-it:first-child { padding-left: 0; }
.ks-it b { font-family: var(--serif); font-weight: 400; white-space: nowrap; font-size: clamp(44px, 4.6vw, 80px); line-height: 1; color: var(--lime); }
.ks-it span { max-width: 22ch; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.45; color: rgba(239,236,229,0.85); }
.ks-it:hover { background-color: rgba(215,242,74,0.04); }
.ks-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.ks-more span { font-size: clamp(14px, 1.1vw, 17px); color: rgba(239,236,229,0.75); }
.ks-more .btn { font-style: normal; display: inline-flex; gap: 12px; }
.ks-more .btn em { font-style: normal; color: inherit; transition: transform 0.25s ease; }
.ks-more:hover .btn em { transform: translateX(4px); }
@media (max-width: 760px) {
  .ks-row { grid-template-columns: 1fr; }
  .ks-it, .ks-it:first-child { padding: 18px 0; }
  .ks-it + .ks-it { border-left: 0; border-top: 1px solid rgba(239,236,229,0.12); }
  .ks-more .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .ks-it, .ks-it:first-child { grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 14px 0; }
  .ks-it b { font-size: clamp(30px, 9vw, 40px); min-width: 0; }
  .ks-it span { font-size: 14.5px; }
}

/* Trabajos realizados (inicio): cada trabajo es una historia corta (situación, qué hicimos, resultado) */
.ks-work { gap: clamp(22px, 3.6vh, 36px); padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(60px, 10vh, 100px); }
.ks-work .ks-head h2 em { color: var(--lime); }
.tw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.tw { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2vw, 32px); border: 1px solid rgba(239,236,229,0.14); border-radius: 20px; background: #0b0b0b; transition: border-color 0.25s ease; }
.tw:hover { border-color: rgba(215,242,74,0.7); }
.tw-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(239,236,229,0.6); }
.tw-t { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.08; color: #fff; }
.tw-story { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; color: rgba(239,236,229,0.78); }
.tw-res { margin-top: auto; padding: 14px 16px; border-left: 2px solid var(--lime); background: rgba(215,242,74,0.06); border-radius: 0 12px 12px 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: #fff; }
.tw-res span { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); }
.tw-res b { font-weight: 600; color: var(--lime); }
.tw-go { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239,236,229,0.85); }
.tw-go i { font-style: normal; color: var(--lime); display: inline-block; transition: transform 0.25s ease; }
.tw:hover .tw-go i { transform: translateX(4px); }
@media (max-width: 860px) { .tw-grid { grid-template-columns: 1fr; } .tw { gap: 10px; } }
@media (max-width: 1100px) and (min-width: 861px) { .tw { padding: 20px 18px; gap: 11px; } .tw-t { font-size: clamp(22px, 2.5vw, 28px); } .tw-story { font-size: 13.5px; } .tw-res { font-size: 14.5px; } .tw-go { padding: 9px 14px; font-size: 11px; } .tw-ic { width: 38px; height: 38px; } }

/* Trabajos realizados v2: tarjeta con luz superior, ícono, resultado destacado y botón */
.tw { position: relative; overflow: hidden; gap: 14px; border: 1px solid rgba(215,242,74,0.22); border-radius: 22px;
  background: radial-gradient(120% 55% at 0% 0%, rgba(215,242,74,0.10), transparent 60%), linear-gradient(180deg, #111 0%, #090909 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: border-color 0.3s ease, transform 0.35s var(--ease); }
.tw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--lime), rgba(215,242,74,0)); opacity: 0.8; }
.tw:hover { border-color: rgba(215,242,74,0.7); transform: translateY(-4px); }
.tw-top { display: flex; align-items: center; gap: 12px; }
.tw-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(215,242,74,0.55); background: rgba(215,242,74,0.06); color: var(--lime); }
.tw-ic svg { width: 22px; height: 22px; }
.tw-tag { color: rgba(239,236,229,0.7); }
.tw-t { font-size: clamp(28px, 2.4vw, 40px); margin-top: 4px; }
.tw-story { color: rgba(239,236,229,0.72); }
.tw-res { margin-top: auto; padding: 18px 0 0; border: 0; border-top: 1px solid rgba(215,242,74,0.3); background: none; border-radius: 0; font-size: clamp(16px, 1.25vw, 19px); }
.tw-res span { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tw-res span svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--lime); fill: none; stroke: #0a0a0a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; box-sizing: content-box; }
.tw-res b { font-family: var(--serif); font-weight: 400; font-size: 1.35em; line-height: 1; }
.tw-go { align-self: flex-start; margin-top: 4px; padding: 11px 18px; border: 1px solid rgba(239,236,229,0.3); border-radius: 999px; font-size: 12px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.tw:hover .tw-go { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.tw:hover .tw-go i { color: #0a0a0a; }
@media (prefers-reduced-motion: reduce) { .tw:hover { transform: none; } }

/* ===== Servicios: qué se puede contratar y qué se recibe ===== */
.svs { position: relative; z-index: 4; background: var(--bgsub); }
.svs-in { padding: clamp(96px, 14vh, 140px) var(--pad) clamp(70px, 11vh, 120px); display: grid; gap: clamp(28px, 4.6vh, 48px); }
.svs-head { display: grid; gap: 14px; max-width: 900px; }
.svs-head .tiny { color: #fff; font-size: clamp(15px, 1.35vw, 21px); }
.svs-head h2 em { color: var(--lime); }
.svs-sub { font-size: clamp(15px, 1.3vw, 20px); line-height: 1.55; color: rgba(239,236,229,0.8); max-width: 44em; }
.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-items: stretch; }
.sv { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(26px, 2.4vw, 38px); border: 1px solid rgba(239,236,229,0.14); border-radius: 24px;
  background: radial-gradient(110% 45% at 50% 0%, rgba(215,242,74,0.07), transparent 65%), linear-gradient(180deg, #111 0%, #080808 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); transition: border-color 0.3s ease, transform 0.35s var(--ease); }
.sv:hover { border-color: rgba(215,242,74,0.6); transform: translateY(-4px); }
.sv.is-feat { border-color: rgba(215,242,74,0.75); background: radial-gradient(110% 50% at 50% 0%, rgba(215,242,74,0.16), transparent 65%), linear-gradient(180deg, #13160b 0%, #080808 100%); box-shadow: 0 0 0 1px rgba(215,242,74,0.15), 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(215,242,74,0.08); }
.sv-badge { position: absolute; top: -13px; left: clamp(26px, 2.4vw, 38px); padding: 6px 14px; border-radius: 999px; background: var(--lime); color: #0a0a0a; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-top { display: flex; align-items: center; gap: 14px; }
.sv-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; border: 1px solid rgba(215,242,74,0.5); background: rgba(215,242,74,0.06); color: var(--lime); }
.sv-ic svg { width: 26px; height: 26px; }
.sv-t { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.4vw, 40px); line-height: 1.05; color: #fff; }
.sv-lead { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: rgba(239,236,229,0.92); }
.sv-for, .sv-get { display: grid; gap: 8px; }
.sv-for span, .sv-get > span { font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); }
.sv-for p { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.5; color: rgba(239,236,229,0.7); }
.sv-get { padding-top: 16px; border-top: 1px solid rgba(215,242,74,0.22); }
.sv-get ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.sv-get li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.45; color: rgba(239,236,229,0.9); }
.sv-ck { width: 18px; height: 18px; margin-top: 1px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: rgba(215,242,74,0.16); fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-cta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(239,236,229,0.3); font-size: 14px; font-weight: 500; color: #fff; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.sv-cta i { font-style: normal; transition: transform 0.25s ease; }
.sv-cta:hover, .sv.is-feat .sv-cta { background: var(--lime); border-color: var(--lime); color: #0a0a0a; }
.sv.is-feat .sv-cta:hover { background: #e4f76b; }
.sv-cta:hover i { transform: translateX(4px); }
@media (max-width: 1100px) and (min-width: 861px) { .sv { padding: 24px 20px; gap: 14px; } .sv-ic { width: 44px; height: 44px; } .sv-t { font-size: 26px; } }
@media (max-width: 860px) { .sv-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .sv:hover { transform: none; } }

/* ===== Por qué elegirnos (dentro de Quiénes somos) ===== */
.why { margin-top: clamp(40px, 7vh, 80px); display: grid; gap: clamp(20px, 3vh, 30px); }
.why-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(215,242,74,0.3); }
.why-head .tiny { color: #fff; font-size: clamp(15px, 1.35vw, 21px); }
.why-head p { font-size: clamp(14px, 1.1vw, 17px); color: rgba(239,236,229,0.7); }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 34px); }
.wy { display: grid; gap: 12px; align-content: start; }
.wy-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(215,242,74,0.5); color: var(--lime); background: radial-gradient(circle, rgba(215,242,74,0.12), transparent 70%); }
.wy-ic svg { width: 24px; height: 24px; }
.wy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; color: #fff; }
.wy p { font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.55; color: rgba(239,236,229,0.75); }
.wy p a { color: var(--lime); border-bottom: 1px solid rgba(215,242,74,0.5); }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .sv-top { min-height: calc(2 * 1.05 * clamp(26px, 2.4vw, 40px)); } }
@media (max-width: 560px) {
  .why-grid { gap: 22px; }
  .wy { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 6px; }
  .wy-ic { width: 44px; height: 44px; grid-row: span 2; }
  .wy h3 { font-size: 22px; align-self: center; }
  .wy p { grid-column: 2; }
}

/* Rótulos de sección unificados: mismo tamaño, blanco y con un filete verde delante (el hero y el manifiesto mantienen su estilo) */
section:not(#hero):not(#manifiesto) :is(.prob-head .tiny:first-child, .caps-in > .tiny, .ks-head .tiny, .hz-intro > .tiny, .rm-head .tiny, .svs-head .tiny, .cta > .tiny, .us-head .tiny, .pj-head .tiny, .trust-head .tiny, .faq-side .tiny, .ct-left .tiny) {
  font-size: clamp(15px, 1.35vw, 19px) !important; color: #fff !important; opacity: 1 !important; letter-spacing: 0.22em; }
section:not(#hero):not(#manifiesto):not(#que-hacemos) :is(.prob-head .tiny:first-child, .ks-head .tiny, .hz-intro > .tiny, .rm-head .tiny, .svs-head .tiny, .cta > .tiny, .us-head .tiny, .pj-head .tiny, .trust-head .tiny, .faq-side .tiny, .ct-left .tiny) { display: inline-flex; align-items: center; gap: 14px; }
section:not(#hero):not(#manifiesto):not(#que-hacemos) :is(.prob-head .tiny:first-child, .ks-head .tiny, .hz-intro > .tiny, .rm-head .tiny, .svs-head .tiny, .cta > .tiny, .us-head .tiny, .pj-head .tiny, .trust-head .tiny, .faq-side .tiny, .ct-left .tiny)::before { content: ""; width: 30px; height: 1px; background: var(--lime); flex: none; }
/* Celular: en ¿Cuándo necesitas Amplifia? los títulos de cada señal van en verde lima, como en la versión de computadora */
@media (max-width: 860px) {
  .sg-row .sg .sg-vt, .sg-row .sg.is-open .sg-vt { color: var(--lime) !important; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; font-weight: 400; }
}

/* Frentes en celular: indicadores de que se puede deslizar (puntos, botón de flecha y aviso animado) */
.hz-swipe .stage { position: relative; }
.hz-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hz-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(239,236,229,0.28); transition: width 0.3s ease, background 0.3s ease; }
.hz-dots i.on { width: 22px; background: var(--lime); }
.hz-next { position: absolute; right: 14px; top: calc(50% + 40px); z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #0a0a0a; font-size: 20px; box-shadow: 0 0 0 6px rgba(215,242,74,0.18), 0 8px 22px rgba(0,0,0,0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.hz-next span { display: block; animation: hzNudge 1.6s ease-in-out infinite; }
@keyframes hzNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.hz-next.is-end { opacity: 0; pointer-events: none; transform: scale(0.8); }
.hz-swiped .hz-next span { animation: none; }
.hz-swipe .hz-intro::after { content: "Deslizá hacia la derecha para ver los seis frentes  →"; color: var(--lime); }
.hz-swipe .hz-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .hz-next span { animation: none; } }

/* Servicios minimalistas: título, una línea y tres entregables cortos */
.sv { gap: 14px; }
.sv-lead { font-size: clamp(15px, 1.1vw, 17px); color: rgba(239,236,229,0.78); }
.sv-get ul { gap: 12px; }
.sv-get li { font-size: clamp(14.5px, 1.08vw, 16.5px); }

/* Preguntas v2: dos filas con tres preguntas distintas cada una (ninguna se ve repetida en pantalla) y número "01 / 06" */
.fq-card { width: var(--fqw, clamp(260px, 19vw, 340px)); }
.fq-n em { font-style: normal; color: rgba(239,236,229,0.45); }
.fq-card h3 { font-size: clamp(16px, 1.25vw, 21px); }
.fq-card p { font-size: clamp(12.5px, 0.88vw, 14px); }
@media (min-width: 861px) and (max-height: 840px) { .fq-card { width: var(--fqw, clamp(240px, 17vw, 300px)); } }
/* celular: carrusel nativo, una pregunta por vez, con puntos de avance */
.fq-swipe::before, .fq-swipe::after { display: none; }
.fq-swipe .fq-row { contain: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 calc(var(--pad) * -1); padding: 5px var(--pad); scroll-padding: 0 var(--pad); }
.fq-swipe .fq-row::-webkit-scrollbar { display: none; }
.fq-swipe .fq-set { gap: 12px; padding-right: var(--pad); }
.fq-swipe .fq-card { width: 82vw; scroll-snap-align: start; padding: 20px 20px 22px; gap: 10px; cursor: default; }
.fq-swipe .fq-card h3 { font-size: 22px; }
.fq-swipe .fq-card p { font-size: 15px; line-height: 1.5; opacity: 0.82; }
.fq-dots { margin-top: 14px; }
/* Preguntas: los bordes se desvanecen con una máscara sobre el contenedor (quieto), sin bloques oscuros encima del fondo */
.fq-rows::before, .fq-rows::after { display: none; }
.fq-rows:not(.fq-swipe) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* ===== Fluidez al entrar en "¿Cuándo necesitas Amplifia?" (sin cambios visuales) =====
   - la sombra de Ampli es una copia fija y desenfocada (antes: filtro recalculado en cada cuadro mientras habla)
   - el brillo de cada panel ya no pide capa propia (no se anima): la placa de video no arma una capa recortada por panel
   - el destello del panel abierto, al terminar, deja de ser una animación activa (antes quedaba como capa permanente) */
.ampli-btn.has-shadow { filter: none !important; }
.ampli-btn svg.ampli-shadow { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(6px) !important; filter: brightness(0) blur(6px); opacity: 0.6; pointer-events: none; animation: none !important; }
.ampli-shadow * { animation: none !important; transition: none !important; }
.ampli-btn.has-shadow > svg:not(.ampli-shadow) { position: relative; }
.sg-row .sg::after { will-change: auto; }
.sg.is-open::before { opacity: 0; }
@media (min-width: 861px) { .sg.is-open::before { animation: sgFlash 0.6s ease-out 1 backwards !important; } }

/* Metodología 4D: "Procesos" y "Personas" se nombran una sola vez, como franjas que cruzan las cuatro etapas.
   Las columnas comparten filas (subgrid) para que los textos de cada franja queden alineados. En celular, como antes. */
@media (min-width: 861px) {
  .rm-cols { grid-template-rows: repeat(6, auto); row-gap: 14px; }
  .rm-col { grid-row: 1 / span 6; grid-template-rows: subgrid; gap: 0; row-gap: 14px; }
  .rm-col > .rm-num { grid-row: 1; }
  .rm-col > .cap-title { grid-row: 2; }
  .rm-col > p:nth-of-type(1) { grid-row: 4; }
  .rm-col > p:nth-of-type(2) { grid-row: 6; }
  .rm-col p { border-top: 0; padding-top: 0; }
  .rm-col b { display: none; }
  .rm-band { grid-column: 1 / -1; display: flex; align-items: center; padding-top: 12px; border-top: 1px solid rgba(239,236,229,0.2); }
  .rb1 { grid-row: 3; } .rb2 { grid-row: 5; margin-top: 10px; }
  .rm-band span { font-weight: 500; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
}
@media (max-width: 860px) { .rm-band { display: none; } }
@media (min-width: 861px) { .rm-col:nth-child(1) { grid-column: 1; } .rm-col:nth-child(2) { grid-column: 2; } .rm-col:nth-child(3) { grid-column: 3; } .rm-col:nth-child(4) { grid-column: 4; } .rm-band { position: relative; z-index: 1; pointer-events: none; } }

/* Metodología 4D como matriz: etiquetas de las franjas centradas y divisiones verticales apenas visibles entre etapas */
.rm-cols { --rmg: clamp(16px, 2vw, 36px); column-gap: var(--rmg); }
.rm-vl { display: none; }
@media (min-width: 861px) {
  .rm-band { justify-content: center; }
  .rm-vl { display: block; justify-self: start; width: 1px; margin-left: calc(var(--rmg) / -2); background: rgba(239,236,229,0.08); pointer-events: none; }
}

/* Metodología 4D (propuesta elegida): cada texto en su tarjeta; "Procesos" y "Personas" centrados entre dos líneas verdes que se desvanecen */
.rm-vl { display: none !important; }
@media (min-width: 861px) {
  .rm-cols, .rm-col { row-gap: 0; }
  .rm-band { border-top: 0; padding: 26px 0 14px; gap: 18px; }
  .rb2 { margin-top: 6px; }
  .rm-band::before, .rm-band::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(215,242,74,0.35)); }
  .rm-band::after { background: linear-gradient(270deg, transparent, rgba(215,242,74,0.35)); }
  .rm-col > p { margin: 0; height: 100%; box-sizing: border-box; padding: 18px 20px 20px; background: rgba(255,255,255,0.028); border: 1px solid rgba(239,236,229,0.09); border-radius: 14px; }
}

/* Metodología 4D: en pantallas bajas (notebooks de 13-14") todo entra en una sola pantalla — tamaños atados también al alto */
@media (min-width: 861px) and (max-height: 920px) {
  .rm-in { padding-top: clamp(88px, 11.5vh, 117px); padding-bottom: clamp(20px, 3.4vh, 40px); gap: clamp(14px, 2.4vh, 30px); }
  .rm-head { gap: 6px; }
  .rm-num { font-size: min(8vw, 12vh); }
  .rm-col .cap-title { font-size: min(4.6vw, 7vh); }
  .rm-col { padding-top: clamp(24px, 3.4vh, 34px); }
  .rm-band { padding: clamp(14px, 2.6vh, 26px) 0 clamp(8px, 1.4vh, 14px); }
  .rb2 { margin-top: 2px; }
  .rm-col > p { padding: clamp(12px, 1.9vh, 18px) 20px clamp(12px, 2vh, 20px); font-size: min(clamp(15px, 1.2vw, 19px), 2.3vh); }
  .rm-foot { font-size: min(clamp(16px, 1.3vw, 20px), 2.4vh); }
}

/* Metodología 4D centrada: cada etapa (nodo, número, título y tarjetas) alineada sobre su propio eje, cierre centrado
   y el bloque equilibrado en el alto de la pantalla (no pegado a la barra superior) */
@media (min-width: 861px) {
  .rm-in { justify-content: center; gap: clamp(22px, 4.5vh, 52px); padding-top: clamp(104px, 13vh, 140px); }
  .rm-col { text-align: center; justify-items: center; }
  .rm-col::before { left: 50%; margin-left: -7.5px; }
  .rm-col > p { justify-self: stretch; }
  .rm-foot { align-self: center; text-align: center; max-width: none; }
}
@media (min-width: 861px) and (max-height: 820px) { .rm-in { gap: clamp(14px, 2.6vh, 24px); padding-top: 96px; } }

/* Contacto: dos WhatsApp (Andriy / Christian) en una misma línea */
.ct-wa { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 36px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; }
.ct-wa i { font-style: normal; opacity: 0.5; }
.ct-direct .ct-wa a { font-size: inherit; }
.mf-wa a { border-bottom: 1px solid rgba(239,236,229,0.25); }