/* ═══════════════════════════════════════════════════════════
   CREA — WEB · PREMIUM LAYER
   Profundidad · liquid glass · glows ambientales · micro-fx
   Carga ÚLTIMA. Eleva sin tocar el markup.
═══════════════════════════════════════════════════════════ */

:root {
  --pm-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --pm-sh-sm: 0 2px 6px rgba(16,24,52,0.05), 0 6px 20px rgba(16,24,52,0.06);
  --pm-sh-md: 0 4px 14px rgba(16,24,52,0.07), 0 14px 40px rgba(16,24,52,0.09);
  --pm-sh-lg: 0 10px 30px rgba(16,24,52,0.10), 0 30px 70px rgba(16,24,52,0.12);
  --pm-sh-dark: 0 10px 30px rgba(0,0,0,0.28), 0 36px 80px rgba(0,0,0,0.34);
  --pm-lit: inset 0 1px 0 rgba(255,255,255,0.9);
  --pm-lit-d: inset 0 1px 0 rgba(255,255,255,0.10);
  --pm-glow-navy: 0 0 0 1px rgba(27,47,110,0.06), 0 18px 50px rgba(27,47,110,0.22);
}

::selection { background: var(--navy); color: #fff; }
*:focus-visible { outline: 2px solid rgba(27,47,110,0.5); outline-offset: 3px; }

/* ━━━━━━━━━━ 1 · NAVBAR — LIQUID GLASS PILL FLOTANTE ━━━━━━━━━━ */
.nav {
  top: 18px !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  width: min(1180px, calc(100vw - 28px));
  border-radius: 100px !important;
  padding: 11px 12px 11px 26px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.30) !important;
  background: rgba(10,13,28,0.26) !important;
  backdrop-filter: blur(26px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.7) !important;
  box-shadow: var(--pm-lit-d), 0 10px 34px rgba(0,0,0,0.22) !important;
  transition: background .4s var(--pm-ease), box-shadow .4s var(--pm-ease),
              border-color .4s var(--pm-ease), padding .4s var(--pm-ease), top .4s var(--pm-ease) !important;
}
.nav.scrolled {
  top: 12px !important;
  background: rgba(250,248,244,0.78) !important;
  border-color: rgba(16,24,52,0.08) !important;
  border-top-color: rgba(255,255,255,0.9) !important;
  box-shadow: var(--pm-lit), 0 8px 30px rgba(16,24,52,0.14) !important;
}
.nav__right { gap: 26px; }
.nav__link { letter-spacing: 0.01em; }
.nav__cta { box-shadow: var(--pm-lit-d), 0 4px 14px rgba(0,0,0,0.18); }
@media (max-width: 860px) {
  .nav { width: calc(100vw - 22px); border-radius: 20px !important; padding: 12px 14px 12px 20px !important; }
}

/* ━━━━━━━━━━ 2 · BOTONES — shimmer + profundidad ━━━━━━━━━━ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(108deg, transparent 22%, rgba(255,255,255,0.28) 50%, transparent 78%);
  transform: translateX(-150%); transition: transform .7s var(--pm-ease);
}
.btn:hover::after { transform: translateX(150%); }
.btn > * { position: relative; z-index: 2; }
.btn--wa { box-shadow: var(--pm-lit-d), 0 8px 22px rgba(37,211,102,0.30); }
.btn--wa:hover { box-shadow: var(--pm-lit-d), 0 14px 34px rgba(37,211,102,0.40); }
.btn--light { box-shadow: var(--pm-lit), 0 8px 24px rgba(16,24,52,0.14); }

/* ━━━━━━━━━━ 3 · GLOWS AMBIENTALES POR SECCIÓN ━━━━━━━━━━ */
.combos, .metodo, .faq, .proyectos { position: relative; overflow: hidden; }
.combos::before, .metodo::before, .faq::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 760px; height: 560px; top: -180px; right: -160px; filter: blur(50px);
  background: radial-gradient(ellipse at center, rgba(27,47,110,0.10), transparent 68%);
}
.metodo::before { left: -180px; right: auto; top: auto; bottom: -200px;
  background: radial-gradient(ellipse at center, rgba(204,34,51,0.07), transparent 68%); }
.combos .wrap, .metodo .wrap, .faq .wrap { position: relative; z-index: 1; }
/* hairline lumínica en el borde superior de secciones claras */
.combos::after, .faq::after, .metodo::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(27,47,110,0.18), transparent);
}

/* dark sections: glow navy/red ambiental */
.servicios, .casos, .about { position: relative; overflow-x: clip; }
.servicios::before, .casos::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; top: -120px; right: -120px; filter: blur(60px);
  background: radial-gradient(circle, rgba(27,47,110,0.30), transparent 70%);
}
.casos::before { left: 8%; right: auto; top: 6%; }
.servicios .wrap, .casos .wrap { position: relative; z-index: 1; }

/* ━━━━━━━━━━ 4 · COMBOS — depth + star glow ━━━━━━━━━━ */
.combo {
  border-color: rgba(16,24,52,0.07) !important;
  box-shadow: var(--pm-lit), var(--pm-sh-sm) !important;
  transition: transform .4s var(--pm-ease), box-shadow .4s var(--pm-ease), border-color .4s !important;
}
.combo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 30%); opacity: .5;
}
.combo:hover { transform: translateY(-6px); box-shadow: var(--pm-lit), var(--pm-sh-lg) !important; border-color: rgba(27,47,110,0.16) !important; }
.combo--star {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), var(--pm-glow-navy), var(--pm-sh-dark) !important;
  background: linear-gradient(165deg, #21397f, var(--navy) 55%, var(--navy-deep)) !important;
}
.combo--star::after { background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 26%); opacity: 1; }
.combo--star:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 24px 60px rgba(27,47,110,0.40), var(--pm-sh-dark) !important; }
.combo__tag { box-shadow: 0 4px 14px rgba(204,34,51,0.30); }

/* ━━━━━━━━━━ 5 · CATEGORÍAS — number chip + depth ━━━━━━━━━━ */
.cat {
  border-color: rgba(16,24,52,0.07) !important;
  box-shadow: var(--pm-lit), var(--pm-sh-sm);
  transition: transform .3s var(--pm-ease), box-shadow .3s var(--pm-ease), border-color .3s !important;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--pm-lit), var(--pm-sh-md); border-color: rgba(27,47,110,0.18) !important; }
.cat__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 4px;
  background: rgba(27,47,110,0.07); color: var(--navy); font-weight: 600;
  transition: background .3s, color .3s;
}
.cat:hover .cat__n { background: var(--navy); color: #fff; }

/* ━━━━━━━━━━ 6 · PROYECTOS — ring + richer shadow ━━━━━━━━━━ */
.proj { box-shadow: var(--pm-sh-md); }
.proj::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.18);
}
.proj:hover { box-shadow: 0 36px 80px rgba(16,24,52,0.34); }

/* ━━━━━━━━━━ 7 · SERVICIOS — mockups & chips con luz ━━━━━━━━━━ */
.mock {
  border-color: rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
  box-shadow: var(--pm-lit-d), 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.3) !important;
}
.mock::after {
  content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%);
}
.srv__chip { box-shadow: var(--pm-lit-d), 0 4px 12px rgba(0,0,0,0.22); }
.srv__chip--pop { box-shadow: 0 6px 18px rgba(77,127,232,0.45); }
.srv__nav-item.on { background: linear-gradient(90deg, rgba(77,127,232,0.10), transparent); }
.mk-kpi { box-shadow: var(--pm-lit-d), 0 4px 12px rgba(0,0,0,0.2); }

/* ━━━━━━━━━━ 8 · CASOS — voices glass + lift ━━━━━━━━━━ */
.voice {
  border-top-color: rgba(255,255,255,0.14) !important;
  box-shadow: var(--pm-lit-d), 0 10px 30px rgba(0,0,0,0.22);
  transition: background .35s, border-color .35s, transform .45s var(--pm-ease), box-shadow .45s var(--pm-ease) !important;
}
.voice:hover { transform: translateY(-5px); box-shadow: var(--pm-lit-d), 0 24px 56px rgba(0,0,0,0.34); }
.voice--metric { background: linear-gradient(165deg, #21397f, var(--navy)) !important; box-shadow: var(--pm-glow-navy), 0 16px 44px rgba(0,0,0,0.3) !important; }
.voice--cta:hover { transform: translateY(-5px); }

/* ━━━━━━━━━━ 9 · STATS — inner light ━━━━━━━━━━ */
.stats { box-shadow: var(--pm-lit-d), 0 18px 50px rgba(0,0,0,0.28); }
.stat { position: relative; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 1px; background: rgba(255,255,255,0.05); }

/* ━━━━━━━━━━ 10 · FOUNDER — photo depth + ring ━━━━━━━━━━ */
.founder__photo-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 2px 0 rgba(255,255,255,0.16);
}
.founder__photo { box-shadow: 0 34px 80px rgba(0,0,0,0.45); }
.founder { position: relative; overflow: hidden; }
.founder::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; right: -140px; bottom: -160px; filter: blur(60px);
  background: radial-gradient(circle, rgba(77,127,232,0.22), transparent 70%);
}
.founder__grid { position: relative; z-index: 1; }

/* ━━━━━━━━━━ 11 · FAQ — hover/open premium ━━━━━━━━━━ */
.faq__item { border-radius: 14px; padding-inline: 18px; transition: background .3s, box-shadow .3s; }
.faq__item:hover { background: rgba(255,255,255,0.6); }
.faq__item.open { background: #fff; box-shadow: var(--pm-lit), var(--pm-sh-sm); border-top-color: transparent !important; }
.faq__list { display: flex; flex-direction: column; gap: 4px; }

/* ━━━━━━━━━━ 12 · CONTACTO — form glass premium ━━━━━━━━━━ */
.cform {
  border-top-color: rgba(255,255,255,0.24) !important;
  box-shadow: var(--pm-lit-d), 0 30px 70px rgba(0,0,0,0.30) !important;
}
.contacto__alt { box-shadow: var(--pm-lit-d), 0 6px 18px rgba(0,0,0,0.14); }
.cform__send { box-shadow: var(--pm-lit-d), 0 10px 26px rgba(37,211,102,0.34); }

/* ━━━━━━━━━━ 13 · MARQUEE / BANDS refinamiento ━━━━━━━━━━ */
.clients { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(255,255,255,0.04); padding-block: 64px; }
.clients__lab { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 38px; }
.marquee__track { gap: 100px; padding-right: 100px; }
.marquee__track img { height: 72px; opacity: 0.95; }
.marquee__track img:hover { opacity: 1; transform: scale(1.06); }
@media (max-width: 700px) {
  .marquee__track { gap: 64px; padding-right: 64px; }
  .marquee__track img { height: 52px; }
}

/* ━━━━━━━━━━ 14 · EYEBROW dot accent ━━━━━━━━━━ */
.eyebrow::before { background: linear-gradient(90deg, var(--red), transparent); opacity: .8; }
.eyebrow--light::before { background: linear-gradient(90deg, var(--navy-light), transparent); }

/* ━━━━━━━━━━ 15 · scrollbar ━━━━━━━━━━ */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--paper); }
  ::-webkit-scrollbar-thumb { background: rgba(27,47,110,0.30); border-radius: 100px; border: 3px solid var(--paper); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(27,47,110,0.5); }
}

/* ━━━━━━━━━━ 16 · QUIEBRE EDITORIAL full-bleed ━━━━━━━━━━ */
.editorial { position: relative; min-height: clamp(440px, 66vh, 700px); display: flex; align-items: center;
  overflow: hidden; background: #d8d5d0; }
.editorial__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: 0; }
.editorial__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(246,244,240,0.97) 0%, rgba(246,244,240,0.82) 30%, rgba(246,244,240,0.30) 52%, rgba(246,244,240,0) 70%); }
.editorial__inner { position: relative; z-index: 2; max-width: 640px; }
.editorial__title { font-size: clamp(38px, 6vw, 86px); line-height: 0.96; letter-spacing: -0.03em; color: var(--ink); margin-top: 22px; }
.editorial__title .ac { color: var(--red); }
.editorial__sub { font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--text-mid); margin-top: 26px; max-width: 40ch; text-wrap: pretty; font-weight: 500; }
.editorial__cta { margin-top: 32px; }
@media (max-width: 700px) {
  .editorial__veil { background: linear-gradient(0deg, rgba(246,244,240,0.97) 8%, rgba(246,244,240,0.78) 42%, rgba(246,244,240,0.32) 72%, rgba(246,244,240,0) 100%); }
  .editorial { align-items: flex-end; min-height: 78vh; }
  .editorial__inner { padding-bottom: 18px; }
}

/* ━━━━━━━━━━ 17 · NOSOTROS — foto de equipo ━━━━━━━━━━ */
.about__team { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/8;
  margin-bottom: clamp(30px, 4vw, 52px); box-shadow: var(--pm-lit-d), 0 26px 64px rgba(0,0,0,0.34); }
.about__team img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; transition: transform 1.1s var(--pm-ease); }
.about__team:hover img { transform: scale(1.04); }
.about__team::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); border-radius: inherit;
  background: linear-gradient(90deg, rgba(10,13,28,0.45), transparent 46%); }
.about__team-cap { position: absolute; left: 24px; bottom: 22px; z-index: 2; max-width: 30ch;
  font-size: 15px; color: rgba(255,255,255,0.92); line-height: 1.45; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.about__team-cap b { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy-light); margin-bottom: 8px; font-weight: 500; }

/* ━━━━━━━━━━ 18 · COMBOS — venta problema→solución + tier dorado ━━━━━━━━━━ */
.combo__situ { font-family: var(--f-ui); font-size: 15.5px; line-height: 1.4; font-weight: 600;
  color: var(--navy); margin-top: 12px; padding-left: 14px; position: relative; text-wrap: pretty; }
.combo__situ::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px;
  border-radius: 3px; background: var(--red); }
.combo--star .combo__situ { color: #fff; }
.combo--star .combo__situ::before { background: var(--navy-light); }
.combo--gold .combo__situ { color: #7a5e18; }
.combo--gold .combo__situ::before { background: linear-gradient(180deg, #d9b65a, #b8862f); }
.combo__name { margin-top: 14px; }

/* tier dorado */
.combo--gold { border-color: rgba(201,162,63,0.42) !important;
  box-shadow: 0 0 0 1px rgba(201,162,63,0.30), 0 18px 50px rgba(201,162,63,0.16), var(--pm-sh-sm) !important;
  background: linear-gradient(176deg, #fffdf6, #fff) !important; }
.combo--gold:hover { box-shadow: 0 0 0 1px rgba(201,162,63,0.55), 0 26px 62px rgba(201,162,63,0.26) !important; }
.combo--gold::after { background: linear-gradient(180deg, rgba(201,162,63,0.14), transparent 28%) !important; opacity: 1 !important; }
.combo--gold .combo__cta { color: #9a7416; }
.combo__tag--gold { background: linear-gradient(135deg, #e3c469, #b8862f) !important; color: #3a2c07 !important;
  box-shadow: 0 4px 14px rgba(184,134,47,0.4) !important; }

/* ━━━━━━━━━━ 19 · MOTION CINEMATOGRÁFICO (scroll reveal) ━━━━━━━━━━ */
@media (prefers-reduced-motion: no-preference) {
  body.anim .reveal { transition: opacity .9s var(--pm-ease), transform 1s var(--pm-ease), filter .9s var(--pm-ease); }
  body.anim .reveal:not(.in) { filter: blur(7px); }
  .reveal.in { filter: blur(0); }
  body.anim .stagger > * { transition: opacity .85s var(--pm-ease), transform .9s var(--pm-ease), filter .85s var(--pm-ease); }
  body.anim .stagger:not(.in) > * { filter: blur(6px); }
  .stagger.in > * { filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { filter: none !important; }
}

/* ━━━━━━━━━━ 20 · MANIFIESTO — fondo cinematográfico (sin grid técnico) ━━━━━━━━━━ */
.manifesto__grid { display: none !important; }
.manifesto { background: radial-gradient(120% 100% at 50% 0%, #fbfaf8, var(--paper) 60%) !important; }
.manifesto::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 120%, rgba(27,47,110,0.07), transparent 70%); }
.manifesto__orb--1 { width: 620px !important; height: 620px !important;
  background: radial-gradient(circle, rgba(27,47,110,0.20) 0%, transparent 68%) !important; }
.manifesto__orb--2 { width: 520px !important; height: 520px !important;
  background: radial-gradient(circle, rgba(204,34,51,0.12) 0%, transparent 68%) !important; }
.manifesto__dot { width: 7px !important; height: 7px !important; opacity: 0.32 !important; }


/* ━━━━━━━━━━ 21 · CONTACTO — Liquid Glass (sereno, premium) ━━━━━━━━━━ */
.contacto {
  background: linear-gradient(180deg, #16224f 0%, #111c44 56%, #0c1636 100%) !important;
}
.contacto__bg {
  background:
    radial-gradient(900px 640px at 82% -8%, rgba(77,127,232,0.24), transparent 62%),
    radial-gradient(720px 580px at 6% 114%, rgba(27,47,110,0.40), transparent 60%) !important;
}
/* una sola luz especular suave y estática — sin auroras ni grids */
.contacto__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(560px 360px at 76% 4%, rgba(255,255,255,0.07), transparent 64%);
}
/* formulario en vidrio líquido, coherente con el nav */
.cform {
  background: rgba(255,255,255,0.07) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
          backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-top-color: rgba(255,255,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 30px 70px rgba(0,0,0,0.34) !important;
}
.contacto__alt {
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-top-color: rgba(255,255,255,0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(0,0,0,0.16) !important;
}


/* ━━━━━━━━━━ 22 · EDITORIAL — parallax + legibilidad ━━━━━━━━━━ */
.editorial__img {
  height: 128% !important; top: -14% !important;
  will-change: transform; transform: scale(1.12);
}
.editorial__veil {
  background: linear-gradient(90deg,
    rgba(246,244,240,0.99) 0%, rgba(246,244,240,0.94) 26%,
    rgba(246,244,240,0.58) 50%, rgba(246,244,240,0.06) 80%) !important;
}
/* halo suave detrás del texto para que respire sobre la foto */
.editorial__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(720px 460px at 24% 50%, rgba(246,244,240,0.62), transparent 70%);
}
.editorial__inner { position: relative; z-index: 2; }
.editorial__title { text-wrap: balance; }
.editorial__sub { color: var(--ink) !important; opacity: 0.74; }
@media (max-width: 700px) {
  .editorial__scrim {
    background: linear-gradient(0deg, rgba(246,244,240,0.96) 6%, rgba(246,244,240,0.55) 46%, transparent 80%);
  }
}


/* ━━━━━━━━━━ 23 · SERVICIOS — Liquid Glass (sin grid/neón/tilt) ━━━━━━━━━━ */
.servicios {
  background: linear-gradient(180deg, #0e1120 0%, var(--ink) 58%) !important;
}
/* sidebar: item activo como pastilla de vidrio esmerilado */
.srv__nav-item { position: relative; border-radius: 14px; }
.srv__nav-item::after {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 24px; border-radius: 3px; background: var(--navy-light);
  transition: transform .35s var(--pm-ease);
}
.srv__nav-item.on {
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.srv__nav-item.on::after { transform: translateY(-50%) scaleY(1); }
.srv__nav-item.on .srv__nav-num { color: var(--navy-light); }
/* panel: aire + hairline suave (sin marco técnico) */
.srv__panel-tag { padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.srv__chip--pop {
  background: var(--navy-light) !important;
  box-shadow: 0 6px 18px rgba(77,127,232,0.26) !important;
}
/* mockup: tarjeta de vidrio con sombra suave (sin tilt 3D) */
.mock {
  border-radius: 22px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.mock::before {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,0.07), transparent 30%);
}


/* ━━━━━━━━━━ 24 · CASOS — tarjeta "página extra" ━━━━━━━━━━ */
.extrapage {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(26px, 4vw, 44px); padding: clamp(22px, 3vw, 34px);
  border-radius: 22px; text-decoration: none; position: relative; overflow: hidden;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 46px rgba(0,0,0,0.26);
  transition: transform .45s var(--pm-ease), border-color .45s var(--pm-ease), box-shadow .45s var(--pm-ease);
}
.extrapage:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 26px 60px rgba(0,0,0,0.34); }
.extrapage__lab {
  flex-shrink: 0; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.70); align-self: flex-start;
  padding: 7px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.extrapage__main { flex: 1; min-width: 0; }
.extrapage__title { font-family: var(--f-display); text-transform: uppercase; font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.04; color: #fff; letter-spacing: -0.01em; }
.extrapage__sub { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.66);
  margin-top: 8px; text-wrap: pretty; max-width: 48ch; }
.extrapage__go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; white-space: nowrap; }
.extrapage__go .arrow { transition: transform .35s var(--pm-ease); }
.extrapage:hover .extrapage__go .arrow { transform: translateX(6px); }
@media (max-width: 720px) {
  .extrapage { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ━━━━━━━━━━ 25 · ABOUT — foto del equipo (image-slot) ━━━━━━━━━━ */
.about__team image-slot { width: 100%; height: 100%; display: block; }
.about__team-cap { z-index: 4; }