/* Borabe — rediseño limpio (2026-10)
   Misma identidad: Switzer + blanco frío, azul rey, navy y celeste.
   Menos efectos, más aire y jerarquía clara. */

:root {
  /* Marca */
  --bg: #f2f4fa;
  --bg-deep: #e6ebf6;
  --surface: #fbfcfe;
  --ink: #0e1220;
  --ink-soft: #565d72;
  --ink-faint: #8a90a3;
  --line: rgba(14, 18, 32, 0.09);
  --line-strong: rgba(14, 18, 32, 0.16);
  --royal: #2a52ad;
  --royal-hover: #23468f;
  --navy: #0f1a52;
  --celeste: #5b9be8;
  --on-navy: #eef2fb;
  --on-navy-soft: rgba(238, 242, 251, 0.68);

  /* Solo 2 fondos en todo el sitio: blanco frío (--bg) y este azul de marca. */
  /* Azul medio (tomado del inicio): ni tan claro ni tan saturado */
  /* Azul medio de referencia (#192555): uniforme, apenas más claro arriba */
  --blue:
    linear-gradient(180deg, #1a285e 0%, #192555 50%, #151f4b 100%);

  /* Sistema */
  --font: "Switzer", system-ui, sans-serif;
  /* Contenido más ancho: aprovecha los lados de la pantalla */
  --wrap: 1600px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --section: clamp(88px, 11vw, 148px);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip; /* nada puede empujar la página hacia los lados */
  scroll-behavior: smooth; scroll-padding-top: 0; /* cada sección ya trae aire arriba para librar la barra */ -webkit-text-size-adjust: 100%;
  /* Sin "rebote" al llegar arriba o abajo: la página se detiene justo en el tope. */
  overscroll-behavior-y: none;
  /* Si el navegador aún rebota (Safari viejo), el hueco se ve del color del hero, no blanco. */
  background: #070b1f;
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 6px; }

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

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--pill);
  font: 600 16px/1 var(--font); letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--sm { height: 42px; padding: 0 20px; font-size: 15px; }
.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: var(--navy); }
.btn--royal { background: var(--royal); color: #fff; }
.btn--royal:hover { background: var(--royal-hover); }
.btn--light { background: var(--surface); color: var(--navy); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* CTA del header: misma cápsula que los demás. Blanca sobre el hero oscuro,
   oscura cuando la barra ya es la cápsula clara. */
.topbar__cta { background: var(--ink); color: var(--bg); }
.topbar__cta:hover { background: var(--navy); }
.topbar__cta { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s, background-color 0.25s var(--ease); }
/* Arriba del todo el botón grande del hero ya cumple esa función:
   el del header se esconde y aparece con fundido al primer scroll. */
.topbar--naked .topbar__cta { opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: hidden; }

/* CTA secundario: misma cápsula que el principal, pero solo con contorno. */
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(238, 242, 251, 0.35); }
.btn--outline-light:hover { background: rgba(238, 242, 251, 0.08); box-shadow: inset 0 0 0 1.5px rgba(238, 242, 251, 0.7); }

/* Énfasis: cursiva de Switzer, mismo color */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Topbar: copia fiel del de borabe.com (hero-v2.css) ----------
   Sobre el hero azul va "naked" (sin caja, todo blanco); al bajar se vuelve
   la cápsula flotante con blur. */
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(calc(100% - var(--gutter) * 2 + 56px), calc(var(--wrap) + 56px));
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 14px 24px 14px 28px;
  border: 1px solid rgba(18, 18, 20, 0.08);
  border-radius: 26px;
  background: rgba(248, 250, 253, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px -28px rgba(18, 18, 20, 0.18);
  transition: top 0.45s var(--ease), opacity 0.3s var(--ease), background-color 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.topbar__right { position: relative; display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.topbar__menu { display: inline-flex; align-items: center; gap: clamp(18px, 2vw, 32px); }
.topnav__contacto { display: none; }

.topbar--naked { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar--naked .topnav a, .topbar--naked .brand, .topbar--naked .brand__word,
.topbar--naked .topbar__link, .topbar--naked .topbar__link-text, .topbar--naked .topbar__link-arrow { color: #eef2fb; }
.topbar--naked .topbar__sep { background: rgba(238, 242, 251, 0.45); }
.topbar--naked .nav-toggle { border-color: rgba(238, 242, 251, 0.32); }
.topbar--naked .nav-toggle__bar { background: #eef2fb; }
body[data-nav-open="true"] .nav-toggle__bar { background: #f4f4f6; }
body[data-nav-open="true"] .nav-toggle { border-color: rgba(244, 244, 246, 0.2); transform: rotate(90deg); }

.topbar--naked .topnav a { color: #eef2fb; }
.topbar--naked .topnav a:hover { opacity: 0.7; }
.topbar--naked .topbar__link:hover,
.topbar--naked .topbar__link:hover .topbar__link-text,
.topbar--naked .topbar__link:hover .topbar__link-arrow { color: #fff; }
.topbar--naked .topbar__link-dot { width: 11px; height: 11px; background: #eef2fb; border: 0.5px solid rgba(238, 242, 251, 0.6); box-shadow: none; }
.topbar--naked .topbar__link-dot::before, .topbar--naked .topbar__link-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(238, 242, 251, 0.45); z-index: -1;
  animation: dotRipple 2.8s ease-out infinite;
}
.topbar--naked .topbar__link-dot::after { animation-delay: 1.4s; }
@keyframes dotRipple { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(3.6); opacity: 0; } }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); transition: transform 0.4s var(--ease); }
.brand__mark { width: 34px; height: 34px; transition: transform 1.1s ease-in-out; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__word { font-size: 1.8rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.brand:hover { transform: scale(1.12); }
.brand:hover .brand__mark { transform: scale(1.12); }
.brand__mark svg path, .brand__mark svg circle { stroke-dasharray: 240; }
.brand:hover .brand__mark svg path, .brand:hover .brand__mark svg circle { animation: isoDraw 0.95s ease-in-out; }
@keyframes isoDraw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }

.topnav { display: flex; gap: clamp(20px, 2.6vw, 40px); margin-left: clamp(28px, 5vw, 72px); margin-right: auto; }
.topnav a { position: relative; padding: 6px 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); transition: color 0.22s ease, opacity 0.22s ease; }
.topnav a:hover { color: var(--ink); opacity: 0.6; }

.topbar__sep { width: 1px; height: 16px; background: rgba(18, 18, 20, 0.5); flex-shrink: 0; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 11px; padding: 4px 2px;
  font-size: 1.02rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
  position: relative; white-space: nowrap;
}
.topbar__link-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #eef2fb;
  box-shadow: 0 0 0 3px rgba(238, 242, 251, 0.14); flex-shrink: 0; position: relative;
}
.topbar__link-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(238, 242, 251, 0.45); animation: ctaDotPulse 2.6s var(--ease) infinite;
}
.topbar__link:hover .topbar__link-dot { background: var(--ink); box-shadow: 0 0 0 3px rgba(14, 18, 32, 0.22); }
.topbar__link:hover .topbar__link-dot::after { border-color: rgba(14, 18, 32, 0.7); }
.topbar--naked .topbar__link:hover .topbar__link-dot { background: #fff; box-shadow: none; }
@keyframes ctaDotPulse { 0%, 100% { transform: scale(0.6); opacity: 0; } 50% { transform: scale(1.4); opacity: 0.7; } 80% { transform: scale(1.8); opacity: 0; } }
.topbar__link-text { position: relative; font-weight: 600; transition: color 0.22s ease; }
.topbar__link:hover, .topbar__link:hover .topbar__link-text, .topbar__link:hover .topbar__link-arrow { color: var(--ink); }
.topbar__link-arrow { display: inline-flex; align-items: center; transition: transform 0.32s var(--ease); }
.topbar__link:hover .topbar__link-arrow { transform: rotate(90deg); }

.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0; margin: 0;
  background: transparent; border: 1px solid rgba(18, 18, 20, 0.14); border-radius: 14px; cursor: pointer;
  flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-toggle:hover { background: rgba(18, 18, 20, 0.05); }
.nav-toggle__bar { display: block; width: 1.6px; height: 17px; background: var(--ink); border-radius: 2px; }

.mobile-menu {
  position: fixed; inset: 0; width: 100%; z-index: 45;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  padding: clamp(96px, 15vh, 140px) clamp(24px, 7vw, 44px) calc(clamp(28px, 6vw, 44px) + env(safe-area-inset-bottom));
  background: #0a0a0c;
  transform: translateX(100%); pointer-events: none; visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.mobile-menu[data-open="true"] { transform: translateX(0); pointer-events: auto; visibility: visible; }
.mobile-menu__scrim {
  position: fixed; inset: 0; z-index: 44; background: rgba(8, 16, 48, 0.22);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
body[data-nav-open="true"] .mobile-menu__scrim { opacity: 1; pointer-events: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.mobile-menu__nav a {
  font-size: clamp(1.7rem, 8vw, 2.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  color: #f4f4f6; padding: clamp(0.7rem, 3.2vw, 1.05rem) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateX(38px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease, color 0.22s ease;
}
.mobile-menu__nav a:hover { color: #fff; }
.mobile-menu[data-open="true"] .mobile-menu__nav a { transform: translateX(0); opacity: 1; }
.mobile-menu[data-open="true"] .mobile-menu__nav a:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu[data-open="true"] .mobile-menu__nav a:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu[data-open="true"] .mobile-menu__nav a:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu[data-open="true"] .mobile-menu__nav a:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu__footer {
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin-top: auto;
  transform: translateX(38px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
}
.mobile-menu[data-open="true"] .mobile-menu__footer { transform: translateX(0); opacity: 1; transition-delay: 0.3s; }
.mobile-menu__contact { display: inline-flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: #f4f4f6; }
.mobile-menu__contact-ic {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid rgba(244, 244, 246, 0.22); color: #f4f4f6; flex: none; transition: border-color 0.2s ease;
}
.mobile-menu__contact:hover .mobile-menu__contact-ic { border-color: rgba(244, 244, 246, 0.5); }

@media (max-width: 860px) {
  .topbar__menu, .topnav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .topbar { top: 10px; width: calc(100% - 14px); padding: 12px; }
  .brand__word { font-size: 1.55rem; }
}


/* ---------- Hero ---------- */
.hero { padding: 0; }
.hero__panel {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100lvh; /* pantalla completa aun con la barra del navegador escondida */
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 clamp(72px, 9vw, 120px);
  color: var(--on-navy);
  /* Fondo oscuro con un haz de luz azul que baja desde arriba (estilo spotlight). */
  background:
    radial-gradient(26% 62% at 50% -6%, rgba(170, 210, 255, 0.95), rgba(91, 155, 232, 0.7) 32%, transparent 74%),
    radial-gradient(52% 85% at 50% -4%, rgba(47, 98, 224, 0.8), rgba(42, 82, 173, 0.35) 50%, transparent 78%),
    radial-gradient(100% 80% at 50% 0%, rgba(30, 60, 160, 0.4), transparent 82%),
    #070b1f;
  isolation: isolate;
}
/* Cuadrícula muy tenue que se desvanece hacia abajo. */
.hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(238, 242, 251, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(238, 242, 251, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 20%, #000 30%, transparent 85%);
          mask-image: radial-gradient(80% 70% at 50% 20%, #000 30%, transparent 85%);
}
/* Mismo ancho y margen que el topbar → el texto arranca alineado con el logo. */
/* Acomodo centrado (como Suprisma): todo al eje central de la pantalla. */
.hero__copy { max-width: 1100px; margin: 0 auto; position: relative; text-align: center; }
.eyebrow { font-size: 15px; font-weight: 500; color: var(--on-navy-soft); margin-bottom: 22px; }
.hero__title {
  font-size: clamp(42px, 5.4vw, 84px);
  letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; color: #fff;
}
/* Título en 2 líneas centradas. */
.hero__title { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hero__line { display: block; white-space: nowrap; }

/* Entrada palabra por palabra: cada palabra sube desde abajo de su "ventana".
   Padding vertical = margin negativo → no recorta ascenders ni la ñ/acentos. */
.word {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.25em 0.04em; margin: -0.25em -0.04em;
}
.word__inner { display: inline-block; transform: translateY(130%); transition: transform 1.3s var(--ease); }
.is-visible .word__inner { transform: none; }
@media (prefers-reduced-motion: reduce) { .word__inner { transform: none; transition: none; } }

.hero__lede {
  margin: 30px auto 0; max-width: 32em;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--on-navy-soft);
}
.hero__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.hero__stage {
  position: relative;
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 1040px;
}
.browser {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 40px 100px -24px rgba(6, 12, 40, 0.65);
}
.browser__bar {
  display: flex; align-items: center; gap: 16px;
  height: 38px; padding: 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.browser__dots { display: inline-flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-deep); }
.browser__url {
  flex: 1; max-width: 340px; margin: 0 auto; transform: translateX(-30px);
  padding: 4px 12px; border-radius: 7px; background: var(--bg);
  font-size: 12.5px; color: var(--ink-faint); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Herramientas (logos) ---------- */
.stack { padding: clamp(48px, 6vw, 72px) 0; border-bottom: 1px solid var(--line); }
.stack__title { font-size: 15px; color: var(--ink-soft); text-align: center; }
/* Carrusel infinito: la lista va duplicada y se desplaza la mitad de su ancho,
   así el final empata con el inicio sin salto. Orillas con fundido. */
.stack__track {
  margin-top: 32px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.stack__list { display: flex; width: max-content; animation: stackScroll 38s linear infinite; }
.stack__track:hover .stack__list { animation-play-state: paused; }
.stack__list li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: clamp(128px, 13vw, 176px);
  color: var(--ink-soft); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  transition: color 0.25s;
}
.stack__list li:hover { color: var(--ink); }
.stack__list svg { width: 34px; height: 34px; flex: none; }
@keyframes stackScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .stack__list { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .stack__list li[aria-hidden="true"] { display: none; }
}

/* ---------- Secciones ---------- */
.section { padding: var(--section) 0; }
.section__head { max-width: 640px; margin-bottom: clamp(44px, 5vw, 64px); }
.section__title { font-size: clamp(32px, 4vw, 50px); letter-spacing: -0.03em; text-wrap: balance; }
.section__lede { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 36em; }

/* Proyectos: título centrado, mosaico (sitio grande + identidad) y ficha abajo */
.projects { padding-bottom: var(--section); }
/* Dos columnas: título fijo a la izquierda, proyectos a la derecha */
.projects > .wrap {
  display: grid; grid-template-columns: minmax(260px, 0.55fr) 1.45fr;
  gap: clamp(40px, 5vw, 96px); align-items: start;
}
.projects .section__head { position: sticky; top: 120px; margin-bottom: 0; }

/* Portafolio horizontal: fondo del color de la marca, su logo arriba y su
   página web asomando desde abajo dentro de una ventana de navegador. */
.work { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 3.4vw, 48px) clamp(24px, 3vw, 48px); }
.work__card { display: block; color: inherit; }
.work__media {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 10px;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
    var(--brand, var(--navy));
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate; transform: translateZ(0); /* evita parpadeos del recorte en Chrome/Safari */
}
.work__logo { position: absolute; inset: 0; display: grid; place-items: center; }
.work__logo img { width: 62%; height: auto; }
.work__mark { color: #fff; font-size: clamp(34px, 3.6vw, 52px); font-weight: 600; letter-spacing: -0.03em; }
.work__mark--wide { font-size: clamp(20px, 2vw, 28px); letter-spacing: 0.34em; font-weight: 500; }
.work__mark--soft { font-weight: 500; letter-spacing: -0.01em; font-size: clamp(40px, 4.2vw, 60px); }
.work__mark--italic { font-style: italic; }
.work__mark--serif { font-weight: 500; letter-spacing: 0.02em; }

/* Develación: al pasar el cursor, la página web sube y cubre la tarjeta
   completa (cortina de abajo hacia arriba), sin círculo. */
.work__reveal {
  position: absolute; inset: 0; z-index: 2; display: flex;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.7s var(--ease);
  will-change: clip-path;
}
@media (hover: hover) { .work__media:hover .work__reveal { clip-path: inset(0 0 0 0); } }
/* El logo se despide hacia arriba y la página entra con un leve zoom */
.work__logo { transition: transform 0.7s var(--ease), opacity 0.5s var(--ease); }
@media (hover: hover) { .work__media:hover .work__logo { transform: translateY(-14%); opacity: 0; } }
.work__reveal > * { transform: scale(1.08) translateZ(0); transition: transform 0.9s var(--ease); width: 100%; height: 100%; object-fit: cover; object-position: center top; backface-visibility: hidden; }
@media (hover: hover) { .work__media:hover .work__reveal > * { transform: translateZ(0); } }
/* Fila de nombre + botón para visitar (el botón solo en pantallas táctiles) */
.work__row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 14px; }
.work__row .work__title { margin-top: 0; }
.work__go {
  display: none; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.work__handle { display: none; }
.work__card[data-href] .work__media { cursor: pointer; }

/* Celular: "antes y después". La página se devela de derecha a izquierda
   arrastrando la manija; arranca a medio camino para que se entienda. */
@media (hover: none) {
  .work__go { display: grid; }
  .work__reveal { clip-path: inset(0 0 0 var(--cut, 60%)); transition: none; }
  .work__reveal > * { transform: none; }
  .work__media.is-hint .work__reveal { transition: clip-path 1.1s var(--ease); }
  .work__media.is-hint .work__handle { transition: left 1.1s var(--ease); }
  .work__media { touch-action: pan-y; }
  .work__handle {
    display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cut, 60%);
    width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  }
  .work__handle i {
    position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .work__handle i::before, .work__handle i::after {
    content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -4px;
    border: 4px solid transparent;
  }
  .work__handle i::before { left: 5px; border-right-color: var(--ink); }
  .work__handle i::after { right: 5px; border-left-color: var(--ink); }
}
}
@media (prefers-reduced-motion: reduce) { .work__reveal { transition: none; } }

/* Mini página (lo que se devela) */
.mini { flex: 1 1 0; min-height: 0; position: relative; background-size: cover; background-position: center; padding: 4% 5%; color: #fff; }
.mini::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)); }
.mini > * { position: relative; }
.mini--shot { padding: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mini__nav { display: flex; justify-content: space-between; align-items: center; }
.mini__brand { font-size: 14px; font-weight: 600; }
.mini__brand--wide { letter-spacing: 0.24em; font-weight: 500; font-size: 11px; }
.mini__brand--italic { font-style: italic; }
.mini__links { display: flex; gap: 8px; }
.mini__links i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); }
.mini__hero { margin-top: 12%; font-size: clamp(18px, 2.2vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }

.work__meta { margin-top: 18px; }
.work__tags {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.work__tags::before { content: "▸"; font-size: 10px; letter-spacing: 0; }
.work__tags i { font-style: normal; letter-spacing: 0; }
.work__title { margin-top: 14px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }

/* Servicios */
/* Servicios en el azul de marca: encabezado arriba (título | texto + botón)
   y un mosaico de 4 piezas translúcidas, cada una con un detalle visual. */
.services { background: var(--blue); color: var(--on-navy); }
.services .section__title { color: #fff; }
.services .section__lede { color: var(--on-navy-soft); }
.services__top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(40px, 6vw, 96px); align-items: center;
  margin-bottom: clamp(44px, 5vw, 64px);
}
.services__intro .section__lede { margin-top: 0; max-width: 36em; }

.bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.bento .tile:nth-child(3) { grid-column: 1; }
.bento .tile:nth-child(4) { grid-column: 2; }
@media (min-width: 981px) {
  .bento { grid-template-columns: repeat(5, 1fr); }
  .tile { grid-column: span 2; }
  .tile--wide { grid-column: span 3; }
  .bento .tile:nth-child(3), .bento .tile:nth-child(4) { grid-column: auto / span 2; }
  .bento .tile--wide:nth-child(4) { grid-column: auto / span 3; }
}
.tile {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius-lg);
  background: rgba(238, 242, 251, 0.07);
  border: 1px solid rgba(238, 242, 251, 0.14);
  transition: background-color 0.3s, transform 0.5s var(--ease);
}
.tile:hover { background: rgba(238, 242, 251, 0.11); }
.tile h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.025em; color: #fff; margin-top: auto; }
.tile > p { margin-top: 10px; color: var(--on-navy-soft); max-width: 34em; }

.tile__visual { height: clamp(200px, 15vw, 290px); margin-bottom: 28px; position: relative; flex: none; }

/* 1 · Hoja de estilo */
.vis-board { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; }
.vis-board__colors { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; width: 210px; min-height: 0; }
.vis-board__colors span {
  position: relative; border-radius: 12px; background: var(--c);
  border: 1px solid rgba(238, 242, 251, 0.18); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.vis-board__colors em {
  position: absolute; left: 10px; bottom: 8px; font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85);
}
.vis-board__colors span:last-child em { color: var(--navy); }
.vis-board__type {
  display: flex; flex-direction: column; justify-content: space-between; width: 130px;
  padding: 14px 16px; border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.vis-board__type b { font-size: 58px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.vis-board__type small { font-size: 11px; line-height: 1.35; color: var(--ink-soft); }
.vis-board__photos { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 0; }
.vis-board__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; min-height: 0; }

/* 2 · Hero que se arma por partes */
.vis-build {
  border-radius: 12px; overflow: hidden; background: #e9eef0;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45);
}
.vis-build__img {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 40, 48, 0.85) 0%, rgba(12, 40, 48, 0.35) 60%, rgba(12, 40, 48, 0.1)),
    url("../assets/img/proyectos/jademis-foto.jpg") center / cover;
}
.vis-build__nav {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; font-size: 11px; color: rgba(255, 255, 255, 0.85);
}
.vis-build__nav b { font-size: 16px; font-weight: 500; color: #fff; margin-right: auto; letter-spacing: -0.01em; }
.vis-build__cta { padding: 4px 10px; border-radius: var(--pill); background: #fff; color: #1f5d6b; font-weight: 600; }
.vis-build__copy { position: absolute; left: 18px; bottom: 18px; right: 40%; color: #fff; }
.vis-build__h { font-size: 24px; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }
.vis-build__h span { display: inline-block; }
.vis-build__p { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.vis-build__btn { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: var(--pill); background: #fff; color: #1f5d6b; font-size: 11.5px; font-weight: 600; }
.vis-build__card {
  position: absolute; right: 16px; bottom: 18px; display: grid; gap: 1px;
  padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: var(--ink);
  font-size: 11px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
}
.vis-build__card b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.vis-build__card span { color: var(--ink-soft); }
/* Variante Jademis: foto real, texto blanco, botones en su rojo */
.vis-build--jademis .vis-build__img {
  background: linear-gradient(90deg, rgba(18, 20, 23, 0.82) 0%, rgba(18, 20, 23, 0.45) 55%, rgba(18, 20, 23, 0.05)),
    url("../assets/img/proyectos/jademis-foto.jpg") center / cover;
}
.vis-build--jademis .vis-build__nav {
  left: 10px; right: 10px; top: 8px; padding: 6px 8px 6px 14px; border-radius: var(--pill);
  background: rgba(250, 248, 245, 0.92); color: #3a3f47; font-size: 10px; gap: 0;
  justify-content: space-between;
}
.vis-build--jademis .vis-build__nav img { height: 13px; width: auto; }
.vis-build--jademis .vis-build__nav span:first-child { width: 70px; }
.vis-build--jademis .vis-build__cta { background: #e8412e; color: #fff; padding: 4px 10px; width: auto; }
.vis-build--jademis .vis-build__h { font-size: 22px; letter-spacing: -0.04em; }
.vis-build--jademis .vis-build__btn { background: #e8412e; color: #fff; }
.vis-build--jademis .vis-build__card b { color: #e8412e; }
/* Variante Cuadro Fijo: negro, Nunito-like en negritas, figura y tabla del concurso */
.vis-build--cf { background: #000; }
.vis-build--cf .vis-build__img { background: radial-gradient(60% 80% at 80% 60%, #141414, #000 70%); }
.vis-build--cf .vis-build__nav { justify-content: space-between; }
.vis-build--cf .vis-build__nav img { height: 15px; width: auto; }
.vis-build--cf .vis-build__cta { background: #fff; color: #000; }
.vis-build--cf .vis-build__copy { right: 50%; bottom: 20px; }
.vis-build--cf .vis-build__h { font-size: 20px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.vis-build--cf .vis-build__p { color: rgba(255, 255, 255, 0.55); font-size: 11px; }
.vis-build--cf .vis-build__btn { background: none; color: #fff; padding: 0 0 2px; border-radius: 0; border-bottom: 1px solid #fff; font-size: 11px; }
.vis-build__fig { position: absolute; right: 41%; bottom: 52px; width: 16%; height: auto; }
.vis-build--cf .vis-build__card {
  right: 12px; bottom: 12px; width: 178px; gap: 3px; padding: 9px 11px;
  background: #0a0a0a; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 9.5px;
}
.vis-build--cf .vis-build__card b { font-size: 10.5px; color: #fff; display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.vis-build--cf .vis-build__card b i { width: 5px; height: 5px; border-radius: 50%; background: #3ccf7a; }
.vis-build--cf .vis-build__card span { color: rgba(255, 255, 255, 0.8); display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.vis-build--cf .vis-build__card em { font-style: normal; font-weight: 700; color: #fff; }
/* Portal de Subalans redibujado en HTML: plano, nítido, con su azul #0052CC */
.vis-portal {
  display: grid; grid-template-columns: 30% 1fr; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: 12px; background: #fff; color: #1d1d1f; font-size: 8px; line-height: 1.3;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.vis-portal__side { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-right: 1px solid #eef1f5; background: #fbfbfc; }
.vis-portal__side b { font-size: 11px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 4px; }
.vis-portal__side b em { font-style: normal; color: #0052cc; }
.vis-portal__side span { padding: 3px 5px; border-radius: 4px; color: #3a3a3c; }
.vis-portal__side span.is-on { background: #eef1f5; font-weight: 600; }
.vis-portal__side small { font-size: 6.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1a6; margin-top: 3px; }
.vis-portal__main { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-width: 0; }
.vis-portal__date { font-size: 10px; font-weight: 600; }
.vis-portal__box { border: 1px solid #eef1f5; border-radius: 6px; padding: 6px 7px; }
.vis-portal__h { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 8.5px; margin-bottom: 4px; }
.vis-portal__h em { font-style: normal; color: #a1a1a6; font-weight: 500; }
.vis-portal__h small { margin-left: auto; color: #a1a1a6; font-weight: 500; font-size: 7px; }
.vis-portal__alert { display: flex; align-items: center; gap: 5px; padding: 3px 0; border-top: 1px solid #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-portal__alert i { flex: none; width: 4px; height: 4px; border-radius: 50%; background: #c2372f; }
.vis-portal__table { margin: 0; padding: 0; list-style: none; }
.vis-portal__table li { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 4px; padding: 3px 0; border-top: 1px solid #f3f4f6; white-space: nowrap; }
.vis-portal__table li.is-head { color: #a1a1a6; font-size: 7px; border-top: 0; }
.vis-portal__table span { overflow: hidden; text-overflow: ellipsis; }
.vis-portal__table i { font-style: normal; display: flex; align-items: center; gap: 3px; }
.vis-portal__table i.ok::before, .vis-portal__table i.neg::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #1a7f4b; }
.vis-portal__table i.neg { color: #c2372f; }
.vis-portal__table i.neg::before { background: #c2372f; }
/* Fotos de interfaz (Subalans): mostrar la UI, no recortarla al centro */
.vis-board__photos--ui { grid-template-rows: minmax(0, 1fr); }
.vis-board__photos--ui img { object-position: left top; background: #fff; }
/* Cada parte entra en orden (el JS va sumando .is-on) */
.vis-build [data-step] { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.vis-build .vis-build__img[data-step] { transform: scale(1.06); transition-duration: 0.6s; }
.vis-build .vis-build__card[data-step] { transform: translateY(10px) scale(0.96); }
.vis-build [data-step].is-on { opacity: 1; transform: none; }

/* 3 · Computadora + celular con el sitio de Fundación */
.vis-devices { display: flex; align-items: flex-end; justify-content: center; }
.vis-laptop { width: min(76%, 460px); }
.vis-laptop__screen {
  border: 6px solid #10131c; border-bottom-width: 8px; border-radius: 10px 10px 0 0;
  aspect-ratio: 16 / 10; overflow: hidden; background: #10131c;
}
.vis-laptop__screen img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.vis-laptop__base { height: 9px; margin: 0 -18px; border-radius: 0 0 10px 10px; background: linear-gradient(#c9d0dc, #8e97a8); }
.vis-phone {
  width: min(22%, 120px); aspect-ratio: 9 / 17; margin-left: -6%; margin-bottom: -4px;
  border: 5px solid #10131c; border-radius: 16px; overflow: hidden; background: #10131c;
  box-shadow: -8px 10px 24px -8px rgba(0, 0, 0, 0.5);
}
.vis-phone img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* 4 · Sitio publicado + notificación */
.vis-pub { position: relative; }
.vis-pub__win {
  position: absolute; left: 0; top: 0; bottom: 0; width: 84%;
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}
.vis-pub__bar { flex: none; display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 10px; background: #f1f3f7; border-bottom: 1px solid var(--line); }
.vis-pub__bar .browser__dots i { width: 7px; height: 7px; background: #d5dae3; }
.vis-pub__url {
  flex: 1; max-width: 240px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 10px; border-radius: 6px; background: #fff; color: var(--ink-soft); font-size: 10.5px;
}
.vis-pub__win .mini { flex: 1; min-height: 0; }
.vis-pub__shot { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: left top; display: block; }
.vis-pub__win .mini__hero { font-size: clamp(16px, 1.6vw, 24px); margin-top: 5%; }
/* notificación estilo iPhone: a un lado de la ventana, entra y sale en ciclo */
.vis-notif {
  position: absolute; right: 0; bottom: 14px; width: min(270px, 46%);
  display: flex; gap: 10px; align-items: center; padding: 9px 12px;
  border-radius: 14px; background: rgba(245, 246, 250, 0.96); color: var(--ink);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55);
  animation: notifCycle 6s var(--ease) infinite;
}
@keyframes notifCycle {
  0%, 8% { transform: translateX(24px); opacity: 0; }
  18%, 72% { transform: none; opacity: 1; }
  84%, 100% { transform: translateX(24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .vis-notif { animation: none; } }
.vis-notif__app {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(180deg, #4ea2ff, #1d6ff2); color: #fff;
}
.vis-notif__body { display: grid; gap: 0; font-size: 10.5px; line-height: 1.3; color: var(--ink-soft); min-width: 0; }
.vis-notif__top { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-faint); }
.vis-notif__top b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-size: 9px; }
.vis-notif__top em { font-style: normal; }
.vis-notif__body > b { font-size: 11.5px; color: var(--ink); font-weight: 600; }

/* Proceso */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--royal), rgba(42, 82, 173, 0.18));
}
.step { position: relative; padding-right: 8px; }
.step__dot {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--royal); margin-bottom: 26px;
  position: relative;
}
.step__dot { background: var(--royal); box-shadow: 0 0 0 5px var(--bg); }
.step h3 { font-size: 20px; letter-spacing: -0.015em; }
.step p { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }

/* Proceso: encabezado centrado, línea luminosa con nodos y tarjetas de vidrio
   colgando de cada nodo. El destello recorre la línea y enciende cada nodo. */
.flow { margin-top: clamp(80px, 9vw, 128px); position: relative; }
.flow__head { text-align: left; max-width: 640px; margin: 0; }
.flow__title { font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -0.035em; color: #fff; }
.flow__head p { margin: 16px 0 0; color: var(--on-navy-soft); max-width: 34em; text-wrap: balance; }

.flow__track {
  position: relative; height: 1px; margin: clamp(48px, 5vw, 72px) var(--track-r, 0px) 0 var(--track-l, 0px);
  background: linear-gradient(90deg, rgba(158, 210, 255, 0) 0%, rgba(158, 210, 255, 0.55) 3%, rgba(158, 210, 255, 0.55) 97%, rgba(158, 210, 255, 0) 100%);
  overflow-x: clip; overflow-y: visible;
}
/* Destello continuo: la capa mide el doble de la línea y repite el brillo
   una vez por cada ancho de línea; al avanzar exactamente la mitad, el ciclo
   empata y nunca se ve el corte (cuando uno sale por la derecha, ya viene
   el siguiente entrando por la izquierda). */
.flow__glow {
  position: absolute; top: -1px; left: -100%; width: 200%; height: 3px;
  /* destello alargado que se adelgaza hacia las puntas (sin bordes cuadrados) */
  background: linear-gradient(90deg, transparent 30%, rgba(158, 210, 255, 0.35) 42%, rgba(230, 242, 255, 1) 50%, rgba(158, 210, 255, 0.35) 58%, transparent 70%) repeat-x;
  background-size: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  filter: drop-shadow(0 0 4px rgba(158, 210, 255, 0.8));
  animation: flowGlow 6.4s linear infinite;
}
@keyframes flowGlow { from { transform: translateX(0); } to { transform: translateX(50%); } }

.flow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: -1px; }
.flow__list li { position: relative; display: flex; flex-direction: column; align-items: center; }
/* nodo sobre la línea + hilo que baja a la tarjeta */
.flow__node {
  position: relative; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%;
  background: #cfe3ff; box-shadow: 0 0 0 5px rgba(91, 155, 232, 0.14), 0 0 16px 3px rgba(91, 155, 232, 0.5);
  animation: nodePulse 6.4s linear infinite; animation-delay: calc(var(--i) * 2.1333s - 3.52s); /* cada nodo brilla justo cuando el destello pasa */
}
.flow__node::after {
  content: ""; position: absolute; left: 50%; top: 13px; width: 1px; height: 28px; margin-left: -0.5px;
  background: linear-gradient(rgba(158, 210, 255, 0.6), rgba(158, 210, 255, 0));
}
@keyframes nodePulse {
  0%, 12%, 100% { box-shadow: 0 0 0 5px rgba(91, 155, 232, 0.14), 0 0 16px 3px rgba(91, 155, 232, 0.5); }
  5% { box-shadow: 0 0 0 9px rgba(91, 155, 232, 0.22), 0 0 30px 8px rgba(158, 210, 255, 0.85); }
}
@media (prefers-reduced-motion: reduce) { .flow__glow, .flow__node { animation: none; } .flow__glow { opacity: 0; } }

.flow__card {
  position: relative; width: 100%; margin-top: 36px; flex: 1;
  display: flex; flex-direction: column;
  padding: 26px 24px 22px; border-radius: 20px; text-align: left;
  background: linear-gradient(180deg, rgba(238, 242, 251, 0.09), rgba(238, 242, 251, 0.03));
  border: 1px solid rgba(238, 242, 251, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.5s var(--ease), border-color 0.3s, background-color 0.3s;
  overflow: hidden;
}
/* brillo sutil en la orilla superior */
.flow__card::before {
  content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 227, 255, 0.8), transparent);
  opacity: 0.6; transition: opacity 0.3s, left 0.5s var(--ease), right 0.5s var(--ease);
}
/* Sin tarjetas: texto cargado a la izquierda bajo cada nodo */
/* 4 columnas lado a lado, limpias: separadas solo por una línea vertical fina.
   Sin cajas, sin acentos, sin puntos. */
.flow__list {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important;
  max-width: none; margin: clamp(48px, 5vw, 72px) 0 0;
}
.flow__list li { display: block !important; padding: 4px clamp(20px, 2.4vw, 36px); text-align: left; border-left: 1px solid rgba(238, 242, 251, 0.14); }
.flow__list li:first-child { border-left: 0; padding-left: 0; }
.flow__list .flow__card {
  display: flex !important; flex-direction: column; align-items: flex-start !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; height: 100%;
}
.flow__list .flow__card::after { display: none !important; }
.flow__list .flow__step { margin: 0 0 14px; color: var(--on-navy-soft); }
.flow__list .flow__card h4 { margin: 0; font-size: 20px; }
.flow__list .flow__card p { margin: 10px 0 24px !important; max-width: 32ch !important; }
.flow__list .flow__out { margin: auto 0 0 !important; padding: 0; text-align: left; text-transform: none; letter-spacing: -0.01em; font-size: 15px; color: #fff; }
.flow__list .flow__out small { display: block; color: var(--on-navy-soft); font-size: 12px; margin-bottom: 2px; } /* la línea arranca antes del primer punto */
.flow__node { margin-left: 0; }
.flow__list .flow__card {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 clamp(8px, 1.6vw, 24px) 0 0; text-align: left; align-items: flex-start; margin-top: 30px;
}
.flow__list .flow__card::before { display: none; }
.flow__list { margin-top: clamp(48px, 5vw, 72px); }
.flow__list li:hover .flow__card { transform: none; }
/* Columnas "desnudas": acento de 40px arriba de "Paso uno" y el entregable
   destacado en celeste, sin recuadro. */
.flow__list .flow__card { margin-top: 0; padding-top: 22px; position: relative; }
.flow__list .flow__card::after {
  content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; border-radius: 2px;
  background: var(--celeste);
}
.flow__list .flow__step { display: block; }
.flow__list .flow__out { text-align: left; padding: 0; border: 0; color: var(--celeste); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.flow__list .flow__out small { text-transform: none; letter-spacing: 0.02em; }
.flow__list .flow__card p { max-width: 30ch; }
.flow__node::after { height: 18px; }
.flow__step { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--celeste); }
.flow__card h4 { margin: 12px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.flow__card p { margin: 10px 0 22px; font-size: 15px; line-height: 1.55; color: var(--on-navy-soft); }
.flow__out {
  display: grid; gap: 2px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(238, 242, 251, 0.1);
  font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em;
}
.flow__out small { font-size: 11.5px; font-weight: 500; color: var(--on-navy-soft); letter-spacing: 0.02em; }

/* Franja del CTA intermedio (fondo claro) */
.midband { padding: clamp(56px, 7vw, 88px) 0 0; }
.midcta--card .midcta__title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; }
.midcta--card .midcta__sub { font-size: 17px; }
.midcta--card .btn { height: 56px; padding: 0 30px; font-size: 16.5px; }
/* Franja tipo tarjeta translúcida que se monta sobre el borde inferior de Servicios */
.midband { position: relative; z-index: 2; padding-top: 0; margin-top: -72px; }
.services { padding-bottom: calc(var(--section) + 24px); }
/* Más corta: ancho según su contenido, centrada; botón junto al texto */
.midcta.midcta--card {
  width: fit-content; max-width: 100%; margin: 0 auto;
  justify-content: flex-start; gap: 20px clamp(32px, 4vw, 64px);
  border-top: 0;
  padding: clamp(32px, 3.6vw, 52px) clamp(32px, 4vw, 60px);
  border-radius: var(--radius-lg);
  background: rgba(248, 250, 253, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 24px 60px -30px rgba(15, 26, 82, 0.45);
}

/* CTA intermedio: franja sutil al cierre de Proceso */
.midcta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.midcta__title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.midcta__sub { margin-top: 6px; color: var(--ink-soft); }

/* ---------- Preguntas frecuentes ---------- */
.faq { padding-top: clamp(72px, 9vw, 120px); }
/* Acomodo centrado: título arriba y una columna de tarjetas. */
.faq__grid { max-width: 920px; }
.faq__head { text-align: center; margin: 0 auto clamp(40px, 5vw, 56px); }
.faq__head .section__lede { margin-inline: auto; }
.faq__list { display: grid; gap: 12px; }
.faq__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color 0.25s;
}
.faq__item:hover, .faq__item.is-open { border-color: var(--line-strong); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 22px 22px 28px; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.015em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__more { display: flex; justify-content: center; margin-top: 36px; }
/* + que gira a × al abrir */
.faq__icon { position: relative; flex: none; width: 40px; height: 40px; color: var(--ink); }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 14px; height: 1.6px; }
.faq__icon::after { width: 1.6px; height: 14px; }
.faq__icon::before, .faq__icon::after { transition: transform 0.35s var(--ease); }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(45deg); }
.faq__body { overflow: hidden; }
.faq__item p { padding: 0 90px 26px 28px; color: var(--ink-soft); max-width: 46em; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Contacto ---------- */
.contact {
  padding: var(--section) 0 clamp(64px, 8vw, 96px);
  background: var(--blue);
  color: var(--on-navy);
}
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
/* Luz detrás de "Hablemos de tu proyecto": un halo celeste que respira despacio */
.contact__copy { position: relative; isolation: isolate; }
.contact__copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -30%; top: -80%; width: 150%; height: 240%;
  background:
    radial-gradient(30% 26% at 38% 44%, rgba(158, 210, 255, 0.35), transparent 75%),
    radial-gradient(50% 42% at 42% 46%, rgba(47, 98, 224, 0.4), transparent 78%);
  filter: blur(30px);
  animation: contactGlow 7s ease-in-out infinite alternate;
}
@keyframes contactGlow { from { opacity: 0.75; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .contact__copy::before { animation: none; } }
.contact__title { font-size: clamp(36px, 4.6vw, 58px); letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 40px rgba(158, 210, 255, 0.35); }
.contact__title em { color: inherit; }
.contact__lede { margin-top: 18px; font-size: 18px; color: var(--on-navy-soft); max-width: 26em; line-height: 1.65; }

.channels { margin-top: 44px; display: grid; }
.channels a {
  display: flex; justify-content: flex-start; align-items: center; gap: 14px;
  padding: 20px 0; border-top: 1px solid rgba(238, 242, 251, 0.14);
  transition: color 0.2s;
}
.channels li:last-child a { border-bottom: 1px solid rgba(238, 242, 251, 0.14); }
.channels__label { font-size: 15px; color: var(--on-navy-soft); }
.channels__label--icon { display: inline-flex; color: #fff; }
/* WhatsApp como botón (sin mostrar el número) */
.channels li:last-child a { border-bottom: 0; }
.channels a.channels__wa {
  display: inline-flex; gap: 10px; margin-top: 24px; padding: 0 24px; height: 52px;
  border: 0; border-radius: var(--pill);
  background: rgba(238, 242, 251, 0.1); box-shadow: inset 0 0 0 1.5px rgba(238, 242, 251, 0.3);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.channels a.channels__wa:hover { background: rgba(238, 242, 251, 0.18); box-shadow: inset 0 0 0 1.5px rgba(238, 242, 251, 0.6); }
.channels a.channels__wa:hover .channels__value { color: #fff; }
.channels__value { font-weight: 600; }
.channels a:hover .channels__value { color: var(--celeste); }

/* Tarjeta del formulario (estilo Suprisma): oscura y translúcida sobre el azul,
   campos con solo línea inferior y etiquetas en mayúsculas espaciadas. */
.form {
  position: relative;
  background: rgba(238, 242, 251, 0.08);
  border: 1px solid rgba(238, 242, 251, 0.16);
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  color: var(--on-navy);
  box-shadow: 0 30px 70px -30px rgba(3, 8, 30, 0.45);
}
.form { max-width: 560px; width: 100%; justify-self: end; }
.form__hp { position: absolute; left: -9999px; }
.form__fields { display: grid; gap: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.field { display: grid; gap: 6px; position: relative; }
.field input, .field textarea { padding-right: 34px !important; }
.field__clear {
  position: absolute; right: 0; bottom: 14px;
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(238, 242, 251, 0.16); color: #fff;
  opacity: 0; transform: scale(0.8); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease), background-color 0.2s;
}
.field textarea ~ .field__clear { bottom: auto; top: 34px; }
.field.has-value .field__clear { opacity: 1; transform: none; pointer-events: auto; }
.field__clear:hover { background: rgba(238, 242, 251, 0.3); }
.field label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(238, 242, 251, 0.85);
}
.field input, .field textarea {
  width: 100%; font: 500 17px/1.5 var(--font); color: #fff;
  background: transparent; border: 0; border-bottom: 1px solid rgba(238, 242, 251, 0.18);
  border-radius: 0; padding: 4px 0 12px;
  transition: border-color 0.2s;
  appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 56px; }
/* Autocompletar de Chrome/Safari: sin el bloque azul claro; el texto queda
   blanco sobre el fondo de la tarjeta, encima de la línea. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.field input:autofill { background: transparent; color: #fff; }
.field input::placeholder, .field textarea::placeholder { color: rgba(238, 242, 251, 0.38); text-overflow: ellipsis; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--celeste); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #e5303f; box-shadow: 0 1px 0 #e5303f; }
/* Campo faltante: solo un asterisco rojo junto a la etiqueta y la línea en rojo */
.field.is-invalid label::after { content: " *"; color: #e5303f; font-size: 15px; letter-spacing: 0; }
.form__status.is-err { font-weight: 600; }

.btn--block { width: 100%; justify-content: center; }
.btn--send {
  width: 100%; justify-content: center; height: 54px; margin-top: 4px;
  background: var(--royal); color: #fff; font-size: 17px;
  box-shadow: 0 12px 30px -14px rgba(10, 20, 60, 0.6);
}
.btn--send:hover { background: var(--royal-hover); }
.form .btn--outline-light { height: 54px; font-size: 16px; background: rgba(238, 242, 251, 0.04); }

.form__mail { display: block; text-align: center; font-size: 14.5px; color: var(--on-navy-soft); margin-top: -4px; }
.form__mail b { color: #fff; font-weight: 600; }
.form__mail:hover b { color: var(--celeste); }
.form__or { display: flex; align-items: center; gap: 18px; color: rgba(238, 242, 251, 0.5); font-size: 14px; }
.form__or::before, .form__or::after { content: ""; flex: 1; height: 1px; background: rgba(238, 242, 251, 0.14); }

.form__status { font-size: 14px; margin-top: -6px; text-align: center; }
.form__status:empty { display: none; }
.form__status.is-err { color: #e5303f; }
.form__privacy { margin-top: -8px; font-size: 13.5px; color: rgba(238, 242, 251, 0.55); text-align: center; }
.form__privacy a { text-decoration: underline; text-underline-offset: 2px; }

.form__sent { display: none; padding: 24px 0 8px; text-align: center; }
.form__sent-title { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; color: #fff; }
.form__sent p:last-child { color: var(--on-navy-soft); }
.form.is-sent .form__fields, .form.is-sent .form__status { display: none; }
.form.is-sent .form__sent { display: block; }

/* ---------- Footer: tarjeta dentro del mismo azul de Contacto ---------- */
.closing { background: var(--blue); color: var(--on-navy); }
.closing .contact { background: none; }
.footer { padding: 0 0 calc(32px + env(safe-area-inset-bottom)); }
/* Sin Contacto arriba (p. ej. Privacidad), la tarjeta necesita aire para no pegarse al borde */
.closing > .footer:first-child { padding-top: clamp(48px, 6vw, 80px); }
.footer__card {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 28px clamp(40px, 5vw, 80px); align-items: start;
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px);
  border-radius: var(--radius-lg);
  background: rgba(238, 242, 251, 0.06);
  border: 1px solid rgba(238, 242, 251, 0.12);
}
.footer__brand { display: inline-flex; align-items: center; gap: 16px; color: #fff; font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.footer__brand svg { width: 0.95em; height: 0.95em; transition: transform 1.1s ease-in-out; }
/* Mismo gesto que el logo del header: el isotipo crece y se redibuja */
.footer__brand { transition: transform 0.4s var(--ease); transform-origin: left center; }
.footer__brand:hover { transform: scale(1.04); }
.footer__brand:hover svg { transform: scale(1.12); }
.footer__brand svg path, .footer__brand svg circle { stroke-dasharray: 240; }
.footer__brand:hover svg path, .footer__brand:hover svg circle { animation: isoDraw 0.95s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .footer__brand:hover svg path, .footer__brand:hover svg circle { animation: none; } }
.footer__about p { margin-top: 12px; max-width: 24em; color: var(--on-navy-soft); line-height: 1.65; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.footer__col a { color: var(--on-navy-soft); transition: color 0.2s; }
.footer__col a:hover { color: #fff; }
.footer__icons { display: flex; flex-direction: column; gap: 10px; }
.footer__ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(238, 242, 251, 0.2); color: #fff !important; transition: background-color 0.2s, border-color 0.2s;
}
.footer__ic:hover { background: rgba(238, 242, 251, 0.1); border-color: rgba(238, 242, 251, 0.45); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 24px 10px 0; font-size: 14px; color: var(--on-navy-soft);
}

/* ---------- Aparición al hacer scroll ---------- */
/* La franja del CTA entra deslizándose desde la derecha, con el texto ya dentro. */
.js .midcta--card.reveal {
  opacity: 0; transform: translateX(80px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.js .midcta--card.reveal.is-in { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .contact__grid, .projects > .wrap, .services__top { grid-template-columns: 1fr; }
  .flow__track { display: none; }
  .flow__list { grid-template-columns: 1fr 1fr !important; row-gap: 40px !important; }
  .flow__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .flow__node { display: none; }
  .flow__card { margin-top: 0; }
  .flow__list { grid-template-columns: 1fr !important; row-gap: 0 !important; border-top: 1px solid rgba(238, 242, 251, 0.14); }
  .flow__list li { border-left: 0; padding: 24px 0; border-bottom: 1px solid rgba(238, 242, 251, 0.14); }
  .flow__list .flow__out { text-align: left; }
  .flow__list li { padding-left: 0; }
  .projects .section__head { position: static; }
  .footer__card { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .footer__about { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .steps::before { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .hero__panel { padding: 120px 0 56px; }
  .hero__title { font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.04; }
  .hero__line { white-space: normal; }
  .browser__bar { height: 30px; }
  .browser__dots i { width: 8px; height: 8px; }
  .browser__url { display: none; }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { display: grid; grid-template-columns: 13px 1fr; column-gap: 20px; padding-bottom: 32px; }
  .step__dot { grid-row: span 2; margin: 6px 0 0; }
  .step::before { content: ""; position: absolute; left: 5.5px; top: 22px; bottom: 0; width: 2px; background: rgba(42, 82, 173, 0.3); }
  .step:last-child::before { display: none; }
  .step p { grid-column: 2; }
  .field-row { grid-template-columns: 1fr; }
  .flow__list { grid-template-columns: 1fr; }
  .flow__head { text-align: left; }
  .bento { grid-template-columns: 1fr; }
  .bento .tile:nth-child(n) { grid-column: auto; }
  .tile__visual { height: 180px; margin-bottom: 22px; }
  /* Dirección visual en cel: el portal de fondo, oscurecido, y encima los colores y la tipografía */
  .vis-board { grid-template-columns: 124px 78px; grid-template-rows: 78px; align-content: center; justify-content: center; gap: 8px; padding: 14px; }
  .vis-board__colors, .vis-board__type { position: relative; z-index: 1; width: auto; }
  .vis-board__colors { gap: 5px; }
  .vis-board__colors span { border-radius: 8px; }
  .vis-board__colors em { left: 6px; bottom: 4px; font-size: 7.5px; letter-spacing: 0.02em; }
  .vis-board__type { padding: 8px 9px; border-radius: 8px; }
  .vis-board__type b { font-size: 30px; }
  .vis-board__type small { font-size: 8px; }
  .vis-board__photos { display: none !important; }
  .vis-portal { position: absolute; inset: 0; filter: brightness(0.4); }
  .vis-laptop { width: 230px; }
  .vis-phone { border-width: 2.5px; border-radius: 12px; }
  .vis-build--jademis .vis-build__h { font-size: 17px; }
  .vis-build--jademis .vis-build__p { display: none; }
  .vis-build--jademis .vis-build__card { display: none; }
  .vis-build--jademis .vis-build__copy { right: 18px; bottom: 16px; }
  .vis-build--jademis .vis-build__nav span:first-child { width: auto; }
  .vis-pub__win { width: 100%; }
  .vis-build--cf .vis-build__copy { right: 34%; }
  .vis-build--cf .vis-build__card { display: none; }
  .vis-build--cf .vis-build__h { font-size: 17px; }
  .vis-build--cf .vis-build__p { display: none; }
  .vis-build__fig { right: 18px; bottom: 30px; width: 24%; }
  .vis-notif__body > span:last-child { display: none; }
  .vis-notif { width: 58%; right: 6px; bottom: 6px; padding: 7px 9px; }
  .stack__list { animation-duration: 28s; }
  .work { grid-template-columns: 1fr; gap: 40px; }
  .faq__item summary { padding: 18px 16px 18px 20px; }
  .faq__item p { padding: 0 20px 22px; }
  .stack__list svg { width: 28px; height: 28px; }
  .footer__card { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px 16px; }
  .footer__brand { font-size: 40px; }
  .footer__about { grid-column: 1 / -1; }
}

/* ---------- Aviso de privacidad ---------- */
.legal { padding: clamp(130px, 14vw, 180px) 0 var(--section); }
.legal__wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: 120px; }
.legal__toc p { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.legal__toc nav { display: grid; gap: 10px; }
.legal__toc a { font-size: 15px; color: var(--ink-soft); }
.legal__toc a:hover { color: var(--ink); }
/* La sección que se está leyendo se marca en negritas */
.legal__toc a.is-current { color: var(--ink); font-weight: 600; }
.legal__back { margin-top: clamp(32px, 4vw, 48px); font-weight: 600; }
.legal__main { max-width: 760px; }
.legal__eyebrow { color: var(--royal); font-weight: 600; font-size: 15px; }
.legal__title { margin-top: 10px; font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.035em; }
.legal__meta { margin-top: 12px; color: var(--ink-faint); font-size: 15px; }
.legal__intro { margin: 36px 0 8px; font-size: 19px; color: var(--ink); }
.legal__block { padding-top: 36px; scroll-margin-top: 110px; }
.legal__block h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal__block h3, .legal__sub { font-size: 17px; font-weight: 600; margin: 20px 0 8px; }
.legal__block p, .legal__block li { color: var(--ink-soft); line-height: 1.7; }
.legal__block p + p { margin-top: 12px; }
.legal__block ul { list-style: disc; padding-left: 20px; margin: 10px 0; display: grid; gap: 6px; }
.legal__block a { color: var(--royal); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .legal__wrap { grid-template-columns: 1fr; }
  .legal__toc { display: none; }
}