/* PBL Group · pbl.group · colaboradores y equipos · draft v03
   Dark Editorial PBL: charcoal #141414 · Inter · rojo #ED225C, una sola familia de acento (≤3 %), rojo como texto solo ≥24 px / ≥19 px bold.
   Texto a la izquierda (Playbook Web D3). Motion: Emil Kowalski + Vercel WIG (transform/opacity/clip-path, ease-out, interrumpible, reduced-motion). */

@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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"; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #141414; --bg-2: #181818; --card: #1c1c1c; --card-2: #212121;
  --hi: #f5f3ef; --body: #c9c7c3; --meta: #9d9a95;
  --line: rgba(245, 243, 239, .13); --line-2: rgba(245, 243, 239, .07);
  --red: #ed225c; --red-soft: rgba(237, 34, 92, .13); --red-glow: rgba(237, 34, 92, .09);
  --g: clamp(20px, 5vw, 72px); --wrap: 1320px; --hdr: 72px; --r: 16px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-io: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --sec: clamp(64px, 7.5vw, 116px);
  --shadow: 0 1px 0 rgba(245,243,239,.04) inset, 0 20px 60px -30px rgba(0,0,0,.8);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
body { background: var(--bg); color: var(--body); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; touch-action: manipulation; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(a, button, input, textarea, label) { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--red); color: var(--hi); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3, h4 { color: var(--hi); font-weight: 700; text-wrap: balance; }
h1 { letter-spacing: -.045em; line-height: .96; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); letter-spacing: -.035em; line-height: 1.02; scroll-margin-top: calc(var(--hdr) + 16px); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); letter-spacing: -.02em; line-height: 1.15; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.25; }
p { text-wrap: pretty; }
em { font-style: normal; color: var(--red); }
b, strong { color: var(--hi); font-weight: 600; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--g), env(safe-area-inset-left)) max(var(--g), env(safe-area-inset-right)); }
.sec { padding-block: var(--sec); position: relative; isolation: isolate; }
.conv, .contact, .about, .trust, .coord, .door { overflow: clip; }
html { overflow-x: clip; }
.sec__head { display: grid; gap: 20px; max-width: 900px; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--body); max-width: 60ch; }
.subt { font-size: clamp(1.08rem, 1.5vw, 1.35rem); color: var(--meta); line-height: 1.35; margin-top: 12px; }
.mini { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--meta); }
.note { margin-top: 28px; font-size: .95rem; color: var(--meta); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--hi); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: transform 200ms var(--ease-out); }
.skip:focus { transform: translateY(76px); }

/* ---------- progreso de lectura ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- halos (drift lento, aprobado jul-2026) ---------- */
.glow { position: absolute; z-index: -1; width: min(900px, 90vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--red-glow), transparent 70%); pointer-events: none; animation: drift 22s var(--ease-io) infinite alternate; }
.glow--hero { right: -20%; bottom: -30%; }
.glow--conv { left: -30%; top: 10%; animation-duration: 26s; }
.glow--contact { right: -25%; top: -10%; animation-duration: 24s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, -6%, 0) scale(1.12); } }

/* ---------- botones (presión .97 · hover dentro de paleta) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: .98rem; letter-spacing: -.005em; white-space: nowrap; transition: transform 220ms var(--ease-out), background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 260ms ease; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.04rem; }
.btn--red { background: var(--red); color: var(--hi); border: 1.5px solid var(--red); }
.btn--line { border: 1.5px solid var(--line); color: var(--hi); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 220ms var(--ease-out); }
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--hi); font-weight: 600; }
.tlink svg { width: 18px; height: 18px; color: var(--red); transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: scale(1.045); }
  .btn--red:hover { box-shadow: 0 14px 34px -14px rgba(237,34,92,.7); }
  .btn--line:hover { background: var(--red); border-color: var(--red); color: var(--hi); box-shadow: 0 14px 34px -14px rgba(237,34,92,.7); }
  .btn:hover svg { transform: translateX(3px); }
  .btn[download]:hover svg { transform: translateY(2px); }
  .tlink:hover svg { transform: translateY(3px); }
}
.btn:active { transform: scale(.97); transition-duration: 120ms; }

/* ---------- header: se oculta al bajar, vuelve al subir ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); border-bottom: 1px solid transparent; transition: background-color 240ms ease, border-color 240ms ease, transform 360ms var(--ease-drawer); }
.hdr.is-solid, .menu-open .hdr { background: rgba(20, 20, 20, .96); border-bottom-color: var(--line-2); }
.hdr.is-away:not(:focus-within) { transform: translateY(-100%); }
.menu-open .hdr { transform: none; }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 26px; }
.hdr__logo { display: flex; align-items: center; min-height: 44px; }
.hdr__logo svg { height: 28px; width: auto; }
.hdr__nav { display: flex; gap: 28px; margin-left: auto; }
.hdr__nav a { font-size: .93rem; color: var(--body); position: relative; padding: 12px 0; transition: color 200ms ease; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hdr__nav a:hover { color: var(--hi); } .hdr__nav a:hover::after { transform: scaleX(1); } }
.hdr__nav a.is-here { color: var(--hi); }
.hdr__nav a.is-here::after { transform: scaleX(1); }
.hdr__lang { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--meta); border: 1px solid var(--line); border-radius: 999px; min-height: 44px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; transition: color 200ms ease, border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .hdr__lang:hover { color: var(--hi); border-color: var(--hi); } }
.hdr__cta { min-height: 44px; padding: 0 20px 0 16px; font-size: .92rem; }
.hdr__menu { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); align-items: center; justify-content: center; margin-left: auto; transition: transform 160ms var(--ease-out); }
.hdr__menu:active { transform: scale(.94); }
.hdr__menu span { position: relative; width: 18px; height: 1.5px; background: var(--hi); transition: background-color 200ms ease; }
.hdr__menu span::before, .hdr__menu span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--hi); transition: transform 260ms var(--ease-out); }
.hdr__menu span::before { transform: translateY(-6px); } .hdr__menu span::after { transform: translateY(6px); }
.menu-open .hdr__menu span { background: transparent; }
.menu-open .hdr__menu span::before { transform: rotate(45deg); } .menu-open .hdr__menu span::after { transform: rotate(-45deg); }
.sheet { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: var(--bg); padding: 24px var(--g) 40px; display: flex; flex-direction: column; overscroll-behavior: contain; overflow-y: auto; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 180ms ease, transform 260ms var(--ease-out); }
.menu-open .sheet { opacity: 1; transform: none; pointer-events: auto; }
.sheet a:not(.btn):not(.hdr__lang) { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--hi); padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.sheet .btn { margin-top: 26px; align-self: flex-start; }
.sheet .hdr__lang { align-self: flex-start; margin-top: 16px; }
@media (max-width: 1180px) { .hdr__nav, .hdr__in > .hdr__cta, .hdr__in > .hdr__lang { display: none; } .hdr__menu { display: inline-flex; } }
@media (min-width: 1181px) { .sheet { display: none; } }

/* ---------- HERO: imágenes en transición + zoom lento (sin controles) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--hdr) + 48px) 0 clamp(36px, 5vw, 64px); overflow: hidden; isolation: isolate; }
.hero__slides { position: absolute; inset: 0; z-index: -3; background: var(--bg); }
.hs { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--ease-io); }
.hs.is-on { opacity: 1; }
.hs picture, .hs img { width: 100%; height: 100%; }
.hs img { object-fit: cover; object-position: 60% 50%; transform: scale(1.02); }
.js .hs.is-on img, .js .hs.is-leaving img { animation: kb 8600ms linear forwards; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.hero.is-paused .hs img { animation-play-state: paused; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(20,20,20,.92) 0%, rgba(20,20,20,.78) 26%, rgba(20,20,20,.4) 52%, rgba(20,20,20,.12) 78%, rgba(20,20,20,.18) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,.55) 22%, rgba(20,20,20,0) 48%), linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(20,20,20,0) 20%); }
.hero__in { display: grid; }
.hero__txt { max-width: 980px; }
.hero h1 { font-size: clamp(3rem, 7.2vw, 6.6rem); }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln__in { display: block; }
.hero__sub { font-size: clamp(1.25rem, 2.3vw, 2.05rem); color: var(--hi); opacity: .72; letter-spacing: -.02em; line-height: 1.2; margin-top: 18px; }
.hero__lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--body); max-width: 44ch; margin-top: 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 32px; }
@media (max-width: 760px) {
  .hero { padding-bottom: 28px; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,.86) 34%, rgba(20,20,20,.4) 62%, rgba(20,20,20,.5) 100%); }
  .hero__ctas .btn { width: 100%; }
}

/* ---------- Quiénes somos ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about .lead { margin-top: 26px; }
.about__media { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 72px); }
.pillar { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 30px 28px 32px; box-shadow: var(--shadow); overflow: hidden; }
.pillar h3 { margin-top: 26px; }
.pillar p { margin-top: 10px; color: var(--body); }
.ic { width: 52px; height: 52px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); color: var(--red); display: grid; place-items: center; transition: transform 260ms var(--ease-out), border-color 220ms ease; }
.ic svg { width: 24px; height: 24px; }
@media (max-width: 1000px) { .about__grid { grid-template-columns: minmax(0, 1fr); } .about__media { aspect-ratio: 4 / 3; } .pillars { grid-template-columns: minmax(0, 1fr); } }

/* luz que sigue al cursor (spotlight) · solo punteros finos */
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(245,243,239,.07), transparent 60%); transition: opacity 260ms ease; }
@media (hover: hover) and (pointer: fine) { .spot:hover::before { opacity: 1; } .spot:hover .ic { transform: translateY(-3px); border-color: rgba(237,34,92,.45); } .spot { transition: transform 320ms var(--ease-out), border-color 220ms ease; } .spot:hover { transform: translateY(-4px); border-color: var(--line); } }

/* ---------- De muchos proveedores a uno: animación ligada al scroll (--p 0→1, sin clics) ---------- */
.conv__head { display: grid; gap: 20px; max-width: 900px; }
.conv__track { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.js .conv__track { height: 210svh; }
.conv__pin { display: grid; align-items: center; }
.js .conv__pin { position: sticky; top: 0; height: 100svh; }
.conv__box { --p: 1; width: min(100%, calc((100svh - 230px) * 2.1)); margin-inline: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(18px, 2.6vw, 34px); box-shadow: var(--shadow); }
.js .conv__box { --p: 0; }
.conv__stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 7; }
.conv__ring, .conv__frame, .conv__pbl { position: absolute; left: 50%; top: 50%; }
.conv__ring { width: 22cqw; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--line); display: grid; place-items: center; transform: translate(-50%, -50%) scale(calc(1 - var(--p) * .25)); opacity: clamp(0, calc(1 - var(--p) * 1.8), 1); }
.conv__ring span { font-size: clamp(1.2rem, 2.4cqw, 1.8rem); font-weight: 700; color: var(--hi); letter-spacing: -.02em; }
.conv__frame { width: 92cqw; aspect-ratio: 16 / 6.2; border-radius: 22px; border: 1px solid rgba(237,34,92,.45); background: rgba(237,34,92,.05); transform: translate(-50%, -50%) scale(calc(.9 + var(--p) * .1)); opacity: clamp(0, calc(var(--p) * 2.2 - .6), 1); }
.conv__pbl { display: grid; justify-items: center; gap: 8px; transform: translate(-50%, calc(-50% - 10cqw)) scale(calc(.86 + var(--p) * .14)); opacity: clamp(0, calc(var(--p) * 2.4 - 1), 1); }
.conv__pbl svg { width: 11cqw; height: auto; }
.conv__pbl small { font-size: clamp(.8125rem, 1.4cqw, 1rem); color: var(--meta); font-weight: 600; }
.cchip { --q: clamp(0, calc((var(--p) - var(--c) * .05) / .72), 1); position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--hi); font-size: clamp(.82rem, 1.5cqw, 1rem); font-weight: 600; white-space: nowrap; box-shadow: 0 16px 40px -24px rgba(0,0,0,.9);
  transform: translate(calc(-50% + (var(--x0) + (var(--x1) - var(--x0)) * var(--q)) * 1cqw), calc(-50% + (var(--y0) + (var(--y1) - var(--y0)) * var(--q)) * 1cqw)) rotate(calc(var(--r0) * (1 - var(--q)) * 1deg)); }
.cchip svg { width: 18px; height: 18px; color: var(--red); flex: none; }
.cchip:nth-of-type(1) { --x0: -34; --y0: -13; --r0: -5; --x1: -29; --y1: 1; }
.cchip:nth-of-type(2) { --x0: 31; --y0: -15; --r0: 4; --x1: 29; --y1: 1; }
.cchip:nth-of-type(3) { --x0: -38; --y0: 10; --r0: 3; --x1: -29; --y1: 11; }
.cchip:nth-of-type(4) { --x0: 36; --y0: 9; --r0: -4; --x1: 29; --y1: 11; }
.cchip:nth-of-type(5) { --x0: -17; --y0: 17; --r0: -2; --x1: 0; --y1: 1; }
.cchip:nth-of-type(6) { --x0: 16; --y0: 18; --r0: 3; --x1: 0; --y1: 11; }
.conv__cap { display: grid; margin-top: 14px; min-height: 3.2em; }
.conv__cap span { grid-area: 1 / 1; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--hi); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.conv__c1 { opacity: clamp(0, calc(1 - var(--p) * 2.4), 1); }
.conv__c2 { opacity: clamp(0, calc(var(--p) * 2.4 - 1.3), 1); }
.conv__for { color: var(--meta); max-width: 70ch; margin-top: 8px; }
@media (max-width: 760px) {
  .js .conv__track { height: 190svh; }
  .conv__stage { aspect-ratio: 1 / 1.05; }
  .cchip { padding: 10px 14px 10px 12px; font-size: .86rem; }
  .conv__ring { width: 24cqw; }
  .conv__frame { width: 96cqw; aspect-ratio: 1 / 1; border-radius: 20px; }
  .conv__pbl { transform: translate(-50%, calc(-50% - 30cqw)) scale(calc(.86 + var(--p) * .14)); }
  .conv__pbl svg { width: 22cqw; }
  .cchip:nth-of-type(1) { --x0: -22; --y0: -38; --x1: -22; --y1: -10; }
  .cchip:nth-of-type(2) { --x0: 22; --y0: -27; --x1: 22; --y1: -10; }
  .cchip:nth-of-type(3) { --x0: -24; --y0: 30; --x1: -22; --y1: 22; }
  .cchip:nth-of-type(4) { --x0: 22; --y0: 39; --x1: 22; --y1: 22; }
  .cchip:nth-of-type(5) { --x0: -31; --y0: -3; --x1: -22; --y1: 6; }
  .cchip:nth-of-type(6) { --x0: 31; --y0: 8; --x1: 22; --y1: 6; }
}

/* ---------- control segmentado (pastilla que se desliza) ---------- */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); margin-top: 36px; max-width: 100%; }
.seg__pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: var(--hi); transition: transform 380ms var(--ease-drawer), width 380ms var(--ease-drawer); }
.seg__b { position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: .95rem; font-weight: 600; color: var(--body); white-space: nowrap; transition: color 260ms ease; }
.seg__b[aria-selected="true"] { color: var(--bg); }
.seg--sm .seg__b { padding: 0 18px; font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .seg__b:not([aria-selected="true"]):hover { color: var(--hi); } }
@media (max-width: 560px) { .seg { display: grid; width: 100%; } .seg__b { padding: 0 8px; font-size: .86rem; white-space: normal; line-height: 1.15; } }

/* ---------- Soluciones: scroll narrativo (la foto fija cambia con cada bloque) ---------- */
.sx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); margin-top: clamp(24px, 3vw, 40px); }
.sxm { position: sticky; top: 12svh; height: 76svh; }
.sxm__frame { position: relative; height: 100%; overflow: hidden; border-radius: 4px; }
.sxm__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, var(--bg) 0%, rgba(20,20,20,.7) 9%, rgba(20,20,20,.22) 28%, rgba(20,20,20,0) 52%), linear-gradient(0deg, rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 24%); }
.sxm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 800ms var(--ease-out), transform 1600ms var(--ease-out); }
.sxm img.is-on { opacity: 1; transform: scale(1); }
.sxm__count { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: flex; gap: 8px; }
.sxm__count i { width: 26px; height: 3px; background: rgba(245,243,239,.28); transform-origin: left; transition: background-color 300ms ease, transform 360ms var(--ease-out); }
.sxm__count i.is-on { background: var(--red); transform: scaleX(1.6); margin-right: 16px; }
.sxa { min-height: 84svh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; }
.sxa h3 { font-size: clamp(2rem, 3.8vw, 3.3rem); letter-spacing: -.035em; line-height: 1.02; }
.sxa .body { margin-top: 22px; font-size: 1.06rem; max-width: 52ch; }
.sxa__img { display: none; }
.mini { margin-top: 30px; }
.rows { list-style: none; margin-top: 12px; max-width: 520px; }
.rows li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line); color: var(--hi); font-size: 1.02rem; line-height: 1.35; }
.rows li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--red); }
@keyframes imgIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
  .sx { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 36px; }
  .sxm { display: none; }
  .sxa { min-height: 0; padding-block: 0 64px; }
  .sxa:last-child { padding-bottom: 0; }
  .sxa__img { display: block; aspect-ratio: 4 / 3; margin-bottom: 24px; border-radius: 4px; }
}

/* ---------- Frase eje (banda con foto y profundidad) ---------- */
.stmt-sec { position: relative; min-height: 84svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.stmt__media { position: absolute; inset: 0; z-index: -2; }
.stmt__media img { width: 100%; height: 100%; object-fit: cover; }
.stmt__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(20,20,20,.86) 30%, rgba(20,20,20,.55) 62%, rgba(20,20,20,.35) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,0) 30%), linear-gradient(180deg, var(--bg) 0%, rgba(20,20,20,0) 30%); }
@media (max-width: 760px) { .stmt-sec { min-height: 78svh; } .stmt__media::after { background: linear-gradient(180deg, var(--bg) 0%, rgba(20,20,20,.5) 24%, rgba(20,20,20,.62) 72%, var(--bg) 100%); } }
.stmt__txt { font-size: clamp(2.4rem, 6vw, 5.6rem); font-weight: 700; color: var(--hi); letter-spacing: -.045em; line-height: 1; max-width: 13ch; text-wrap: balance; }
.sw { opacity: var(--o, 1); transition: opacity 160ms linear; }
.js .sw { --o: .16; }

/* ---------- Tres escenarios (recorrido) ---------- */
.epanels { margin-top: clamp(28px, 4vw, 44px); }
.epanel[hidden] { display: none; }
.epanel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.epanel__img { position: relative; min-height: 100%; }
.epanel__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.epanel__txt { padding: clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0; }
.epanel__txt h3 { max-width: 26ch; }
.journey { list-style: none; position: relative; margin-top: 28px; display: grid; gap: 4px; }
.journey::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1.5px; background: var(--line); }
.journey li { position: relative; padding: 12px 0 12px 40px; }
.journey li::before { content: ""; position: absolute; left: 1px; top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid var(--red); }
.journey h4 { color: var(--hi); }
.journey p { margin-top: 4px; font-size: .96rem; color: var(--body); line-height: 1.5; }
.js .epanel.is-on .epanel__img img { animation: imgIn 900ms var(--ease-out) both; }
.js .epanel.is-on .journey li { animation: up 560ms var(--ease-out) both; animation-delay: calc(120ms + var(--k) * 80ms); }
.js .epanel.is-on .journey::before { animation: drawY 900ms var(--ease-io) both; transform-origin: top; }
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 1000px) { .epanel { grid-template-columns: minmax(0, 1fr); } .epanel__txt { padding: 0 24px 28px; } }

/* ---------- Lo que coordinamos (bento) ---------- */
.bento { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 17vw, 240px); gap: 14px; margin-top: clamp(40px, 5vw, 60px); }
.bcell { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; overflow: hidden; box-shadow: var(--shadow); }
.bcell__t { font-size: clamp(1.02rem, 1.3vw, 1.15rem); font-weight: 600; color: var(--hi); letter-spacing: -.01em; line-height: 1.3; }
.bimg { border-radius: var(--r); overflow: hidden; background: var(--card); }
.bimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bimg:hover img { transform: scale(1.05); } }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); } .bimg { aspect-ratio: 1; } }
.js .bento .rv, .js .bento .rv-img { transform: translateY(56px) scale(.95); clip-path: none; transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .bento .is-in { transform: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .bento > li { opacity: 1; transform: none; transition: none; animation: cellIn linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .bento > li:nth-child(4n+2), .bento > li:nth-child(4n+4) { --dy: 120px; }
    @keyframes cellIn { from { opacity: 0; transform: translateY(var(--dy, 64px)) scale(.94); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- Construimos contigo ---------- */
.build__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.build .lead { margin-top: 24px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 52px; position: relative; }
.steps::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 1.5px; background: var(--red); transform: scaleX(var(--p, 1)); transform-origin: left; }
.js .steps::before { --p: 0; transition: transform 1400ms var(--ease-io); }
.js .steps.is-in::before { --p: 1; }
.steps li { position: relative; padding-top: 32px; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--red); }
.steps b { display: block; font-size: 1.08rem; letter-spacing: -.01em; }
.steps span { display: block; margin-top: 6px; font-size: .92rem; color: var(--meta); line-height: 1.45; }
.build__media { aspect-ratio: 4 / 5; border-radius: 4px; }
@media (max-width: 1000px) { .build__grid { grid-template-columns: minmax(0, 1fr); } .build__media { aspect-ratio: 4 / 3; order: -1; } .steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .steps::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1.5px; height: auto; transform: scaleY(var(--p, 1)); transform-origin: top; } .steps li { padding: 0 0 24px 38px; } .steps li::before { top: 3px; } }

/* ---------- foto con borde difuminado + zoom ligado al scroll ---------- */
.fx { position: relative; overflow: hidden; }
.fx img { width: 100%; height: 100%; object-fit: cover; }
.fx::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, rgba(20,20,20,.6) 10%, rgba(20,20,20,.2) 30%, rgba(20,20,20,0) 55%), linear-gradient(0deg, rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 34%), linear-gradient(180deg, rgba(20,20,20,.3) 0%, rgba(20,20,20,0) 18%); }
.fx--r::after { background: linear-gradient(270deg, var(--bg) 0%, rgba(20,20,20,.6) 10%, rgba(20,20,20,.2) 30%, rgba(20,20,20,0) 55%), linear-gradient(0deg, rgba(20,20,20,.75) 0%, rgba(20,20,20,0) 38%), linear-gradient(180deg, rgba(20,20,20,.3) 0%, rgba(20,20,20,0) 18%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx img, .stmt__media img, .bimg img, .epanel__img img { animation: sz linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes sz { from { transform: scale(1.12); } to { transform: scale(1); } }
  }
}
@media (max-width: 1000px) { .fx::after, .fx--r::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,.3) 30%, rgba(20,20,20,0) 55%); } }

/* ---------- Confianza: membresías + carrusel de logos ---------- */
.members { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 32px; }
.members span { color: var(--meta); }
.members img { height: 64px; width: auto; opacity: .92; }
.trust .mini { margin-top: 48px; }
.marquee { display: flex; overflow: hidden; margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { list-style: none; display: flex; flex: none; gap: 16px; padding-right: 16px; animation: mq 38s linear infinite; }
.marquee__row li { width: clamp(180px, 18vw, 240px); height: clamp(110px, 10vw, 140px); border: 1px solid var(--line); border-radius: var(--r); display: grid; place-items: center; background: var(--bg-2); }
.marquee__row img { max-width: 56%; max-height: 34%; width: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee__row { animation-play-state: paused; } }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- puerta directivos y clientes: pleca de acento + foto que entra difuminada ---------- */
.door { position: relative; isolation: isolate; border-block: 1px solid var(--line-2); padding-block: clamp(80px, 10vw, 144px); }
.door__media { position: absolute; inset: 0 0 0 auto; width: 62%; z-index: -1; }
.door__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.door__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgba(20,20,20,.82) 26%, rgba(20,20,20,.3) 64%, rgba(20,20,20,.5) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,0) 34%), linear-gradient(180deg, var(--bg) 0%, rgba(20,20,20,0) 34%); }
.door__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.door__txt { position: relative; padding-left: clamp(22px, 2.4vw, 34px); max-width: 720px; }
.door__txt::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--red); transform: scaleY(1); transform-origin: top; }
.js .door__txt::before { transform: scaleY(0); transition: transform 1100ms var(--ease-io) 200ms; }
.js .door__txt.is-in::before { transform: scaleY(1); }
.door h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); letter-spacing: -.03em; }
.door p { color: var(--body); margin-top: 14px; max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.15rem); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .door__media img { animation: doorIn linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; } @keyframes doorIn { from { opacity: 0; transform: scale(1.1); } to { opacity: .5; transform: none; } } } }
@media (max-width: 760px) { .door__media { width: 100%; } .door__media img { opacity: .32; } .door__media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,.6) 40%, rgba(20,20,20,.75) 100%); } }

/* ---------- Contacto + formulario (acción principal) ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.contact .lead { margin-top: 24px; }
.contact__links { display: grid; margin-top: 30px; font-size: 1.15rem; color: var(--hi); }
.contact__links a { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; background: linear-gradient(var(--red), var(--red)) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size 280ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .contact__links a:hover { background-size: 100% 1.5px; } }
.form { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f { display: grid; gap: 8px; align-content: start; }
.f--full { grid-column: 1 / -1; }
.f label, .f legend { font-size: .9rem; color: var(--body); font-weight: 500; }
.f label i, .f legend i { font-style: normal; color: var(--meta); font-weight: 400; }
.f input, .f textarea { width: 100%; min-height: 52px; background: var(--bg); color: var(--hi); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 16px; transition: border-color 200ms ease, background-color 200ms ease; }
.f textarea { min-height: 104px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--meta); opacity: .8; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--red); background: #161616; }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.f.is-bad input { border-color: var(--red); animation: nudge 320ms var(--ease-out); }
@keyframes nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
fieldset.f { border: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; color: var(--body); transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 160ms var(--ease-out); pointer-events: none; }
.chip input:checked + span { border-color: var(--red); color: var(--hi); background: var(--red-soft); }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.form__foot p { font-size: .85rem; color: var(--meta); max-width: 40ch; line-height: 1.45; }
.form__msg { min-height: 1.4em; margin-top: 12px; font-size: .95rem; color: var(--hi); }
.form__dl { margin-top: 6px; font-size: .9rem; color: var(--meta); }
.form__dl a { display: inline-flex; align-items: center; min-height: 48px; color: var(--hi); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.btn.is-busy .btn__label { filter: blur(2px); opacity: .7; transition: filter 200ms ease, opacity 200ms ease; }
.form__done { position: absolute; inset: 0; border-radius: 24px; background: var(--card); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 44px); opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
.form.is-done .form__done { opacity: 1; transform: none; pointer-events: auto; }
.form__done svg { width: 56px; height: 56px; color: var(--red); }
.form__done h3 { margin-top: 20px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.form__done p { margin-top: 12px; }
@media (max-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form__grid { grid-template-columns: minmax(0, 1fr); } .form__foot .btn { width: 100%; } }

/* ---------- fondos difuminados (decorativos, entran muy sutil) ---------- */
.amb { position: absolute; z-index: -2; pointer-events: none; }
.amb img { width: 100%; height: 100%; object-fit: cover; }
.amb--about { left: -8%; bottom: -6%; width: 70%; height: 80%; opacity: .2; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.amb--coord { right: -10%; top: -4%; width: 62%; height: 78%; opacity: .16; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); }
.amb--contact { inset: 0; opacity: .26; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%); }
.amb--contact::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.2) 0%, rgba(20,20,20,.55) 50%, rgba(20,20,20,.85) 100%); }
.js .amb img { opacity: 0; transform: scale(1.08); transition: opacity 1800ms ease, transform 2600ms var(--ease-out); }
.js .amb.is-in img { opacity: 1; transform: none; }
@media (max-width: 760px) { .amb--about, .amb--coord { width: 120%; } }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line-2); padding-block: 56px max(40px, env(safe-area-inset-bottom)); }
.ftr__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; }
.ftr__logo { display: inline-block; padding-block: 4px; }
.ftr__logo svg { height: 60px; width: auto; display: block; }
.ftr__claim { margin-top: 18px; color: var(--meta); max-width: 36ch; }
.ftr__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 26px; font-size: .95rem; }
.ftr__links a { color: var(--body); min-height: 44px; display: inline-flex; align-items: center; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ftr__links a:hover { color: var(--hi); } }
.ftr__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: .85rem; color: var(--meta); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .ftr__in { grid-template-columns: minmax(0, 1fr); } .ftr__links { justify-content: flex-start; } }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: flex; align-items: center; }
.nf .hdr__logo { margin-bottom: 48px; }
.nf h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.nf p { margin-top: 18px; max-width: 44ch; }
.nf .btn { margin-top: 32px; }

/* ---------- reveals (ocultos solo con JS; failsafe en app.js) ---------- */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity 800ms var(--ease-out), transform 950ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js h2.rv { transform: translateY(42px); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv-img { clip-path: inset(8% 8% 8% 8% round 4px); opacity: 0; transition: clip-path 1100ms var(--ease-io), opacity 700ms ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv-img.is-in { clip-path: inset(0 0 0 0 round 4px); opacity: 1; }
.js .hero .ln__in { animation: lnIn 860ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 90ms); }
.js .hero .hx { animation: hxIn 700ms var(--ease-out) both; animation-delay: calc(320ms + var(--i, 0) * 80ms); }
@keyframes lnIn { from { transform: translateY(106%); } to { transform: none; } }
@keyframes hxIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- celular: menos trabajo de GPU (sin grano SVG ni halos animados) y entradas más ágiles ---------- */
@media (max-width: 760px), (pointer: coarse) {
  body::after { display: none; }
  .glow { animation: none; }
}
@media (max-width: 760px) {
  .js .rv { transform: translateY(18px); transition-duration: 520ms, 600ms; transition-delay: calc(var(--i, 0) * 45ms); }
  .js h2.rv { transform: translateY(22px); }
  .js .rv-img { transition-duration: 800ms, 500ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .rv, .js .rv-img, .js .hero .ln__in, .js .hero .hx, .js .amb img { opacity: 1; transform: none; clip-path: none; }
  .js .conv__track { height: auto; } .js .conv__pin { position: static; height: auto; } .js .conv__box { --p: 1; }
  .js .door__txt::before { transform: none; }
  .js .sw { --o: 1; }
  .marquee { overflow-x: auto; } .marquee__row[aria-hidden] { display: none; }
  .glow { display: none; }
}