/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Ajustado 2026-09-04: más croma y hue alineado a --accent (258) — antes
     era casi neutro (0.007-0.012), leía como negro plano en vez del azul
     profundo del hero. Mismo nivel de luminosidad (8/10.5/14%), así que no
     cambia el contraste con --ink en ningún lado. */
  --bg:        oklch(9% 0.05 258);
  --bg-2:      oklch(12% 0.055 259);
  --bg-3:      oklch(16% 0.06 260);
  --ink:       #f5f6f8;
  --ink-soft:  rgba(245,246,248,0.72);
  --ink-mute:  rgba(245,246,248,0.55);
  --ink-dim:   rgba(245,246,248,0.5); /* subido de .4 -- medía 3.47:1 en .contact-list dt sobre --bg, por debajo de AA (4.5:1); hallazgo nuevo durante validación, ver auditoría UI/UX */
  --accent:    oklch(60% 0.22 258);
  --accent-2:  oklch(72% 0.14 195);
  --accent-3:  oklch(62% 0.14 300);
  --line:      rgba(255,255,255,0.08);
  --line-soft: rgba(255,255,255,0.06);
  --glass:     rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.065);
  --danger:    oklch(66% 0.2 20);

  /* Secciones claras — nunca blanco puro, ver CLAUDE.md §4/§12 */
  --surface-light:   oklch(89% 0.014 258);
  --surface-light-2: oklch(87% 0.03 254); /* variante azul muy suave, para alternar con --surface-light */
  --ink-on-light:      oklch(20% 0.014 260);
  --ink-on-light-soft: oklch(20% 0.014 260 / .72);
  --ink-on-light-mute: oklch(20% 0.014 260 / .68);
  --ink-on-light-dim:  oklch(20% 0.014 260 / .7); /* subido de .62 -- medía 4.32:1 sobre --surface-light, por debajo de AA (4.5:1); ver auditoría UI/UX */
  --line-on-light:      rgba(10,14,26,0.12);
  --line-on-light-soft: rgba(10,14,26,0.08);
  --glass-on-light:        rgba(10,14,26,0.035);
  --glass-on-light-strong: rgba(10,14,26,0.06);
  --accent-on-light:   oklch(46% 0.2 258);
  --accent-2-on-light: oklch(44% 0.13 195);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-h: 82px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--bg);
  border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container { max-width: 1280px; margin: 0 auto; padding-inline: 24px; }

/* =============================================================
   3. Typography helpers
   ============================================================= */
.eyebrow {
  font-size: 16px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent-2); font-family: var(--mono);
}
.h2 { font-size: clamp(30px, 4vw, 42px); margin-top: 14px; letter-spacing: -0.5px; }
.p-lead { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin-top: 20px; max-width: 56ch; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), background .3s;
  white-space: nowrap;
}
.btn-solid {
  background: linear-gradient(135deg, var(--accent), oklch(66% 0.16 235));
  color: #fff;
  box-shadow: 0 10px 30px -10px rgba(60,110,255,0.5);
}
.btn-solid:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -12px rgba(60,110,255,0.68); }
.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--ink);
}
.btn-ghost:hover { transform: translateY(-4px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
.btn:active { transform: translateY(-1px); transition-duration: .12s; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 16px; left: 16px; right: 16px; max-width: 1360px; margin-inline: auto;
  z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 32px;
  border-radius: 999px;
  background: oklch(14% 0.01 260 / 0.55);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px -22px rgba(0,0,0,0.6);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled {
  background: oklch(14% 0.01 260 / 0.78);
  border-color: var(--line);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .5px; flex: none; }
.nav-brand-sub { font-weight: 400; color: var(--ink-mute); letter-spacing: 2px; }
.nav-mark { width: 54px; height: 54px; flex: none; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--ink-soft); }
.nav-link { position: relative; padding: .3rem 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; background: var(--accent-2); }
.nav-actions { display: flex; align-items: center; gap: 16px; flex: none; }
.nav-cta { padding: 10px 20px; font-size: 14px; }
.nav-burger {
  display: none; width: 40px; height: 40px; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-burger span { width: 18px; height: 2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-mobile {
  position: fixed; top: 112px; left: 16px; right: 16px; z-index: 99;
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border-radius: 14px; background: oklch(16% 0.015 260 / 0.97);
  backdrop-filter: blur(16px); border: 1px solid var(--line);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6);
  clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
  transition: clip-path .5s var(--ease-soft), opacity .3s;
}
.nav-mobile.is-open { clip-path: inset(0); opacity: 1; pointer-events: auto; }
.nav-mobile-link { padding: 12px 8px; font-size: 15px; }
.nav-mobile-cta { margin-top: 8px; text-align: center; }

/* =============================================================
   5b. Nav — menú "Servicios" desplegable (Fase SEO A)
   ============================================================= */
.nav-item-dropdown { position: relative; }
/* Puente invisible entre el trigger y el submenú: sin esto, el "margin-top"
   de .nav-dropdown-menu deja una franja de 14px que no pertenece a ninguna
   caja hoverable. Al cruzarla con el mouse en movimiento (no con un salto
   instantáneo), pointer-events pasa a "none" de inmediato -- antes de que
   termine el fade -- y el menú nunca puede recuperar el :hover del padre.
   Siempre presente (no depende de :hover/:focus-within) y sin estilo
   visual, así que no cambia nada del diseño. */
.nav-item-dropdown::before {
  content: "";
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 268px; height: 14px;
}
.nav-dropdown-menu {
  list-style: none;
  position: absolute; top: 100%; left: 50%; margin-top: 14px;
  min-width: 268px; padding: 10px; border-radius: 14px;
  background: oklch(14% 0.01 260 / 0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.65);
  display: flex; flex-direction: column; gap: 2px;
  /* opacity + pointer-events (nunca visibility) para que los enlaces sigan
     siendo enfocables por Tab mientras el menú está "cerrado" — con
     visibility:hidden un elemento no puede recibir foco, así que
     :focus-within nunca llegaría a dispararse (ver docs/audits). */
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-dropdown-link {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: 14px; color: var(--ink-soft); transition: background .2s, color .2s;
}
.nav-dropdown-link:hover, .nav-dropdown-link:focus-visible {
  background: rgba(255,255,255,0.06); color: var(--ink);
}
.nav-mobile-sublink { padding: 9px 8px 9px 22px; font-size: 13.5px; color: var(--ink-mute); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 140px 24px 80px; overflow: hidden; isolation: isolate;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, oklch(14% 0.01 260 / 0.55), var(--bg) 88%);
}
.hero-gradient {
  position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(circle 620px at var(--mx, 22%) var(--my, 28%), oklch(55% 0.19 258 / 0.34), transparent 62%),
    radial-gradient(circle 560px at calc(var(--mx, 22%) + 40%) calc(var(--my, 28%) + 45%), oklch(72% 0.14 195 / 0.24), transparent 62%),
    radial-gradient(circle 480px at calc(var(--mx, 22%) - 15%) calc(var(--my, 28%) + 60%), oklch(62% 0.13 300 / 0.14), transparent 65%);
  filter: blur(30px);
  transition: background .6s ease;
  animation: heroGradientShift 16s ease-in-out infinite;
}
@keyframes heroGradientShift {
  0%, 100% { filter: blur(30px) hue-rotate(0deg) saturate(1); }
  50% { filter: blur(30px) hue-rotate(14deg) saturate(1.15); }
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(10px); z-index: -1; pointer-events: none;
}
.hero-orb-a { width: 560px; height: 560px; background: radial-gradient(circle, oklch(55% 0.16 255 / 0.28), transparent 70%); top: -120px; left: -140px; animation: floatA 14s ease-in-out infinite; }
.hero-orb-b { width: 480px; height: 480px; background: radial-gradient(circle, oklch(72% 0.13 195 / 0.22), transparent 70%); bottom: -160px; right: -100px; animation: floatB 16s ease-in-out infinite; }
.hero-orb-c { width: 380px; height: 380px; background: radial-gradient(circle, oklch(58% 0.07 300 / 0.16), transparent 70%); top: 20%; right: 8%; filter: blur(14px); animation: floatA 20s ease-in-out infinite; }

.hero-network { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; z-index: -1; pointer-events: none; }
.hero-network-line {
  stroke: oklch(70% 0.12 220); stroke-width: 1.4; stroke-dasharray: 6 14;
  animation: pulseLine 7s ease-in-out infinite, heroNetworkFlow 2.4s linear infinite;
}
.hero-network-dot { fill: oklch(80% 0.14 210); }
@keyframes heroNetworkFlow { to { stroke-dashoffset: -40; } }

.hero-mark {
  position: absolute; top: 50%; left: 50%; z-index: -1; pointer-events: none;
  width: 420px; height: 420px; max-width: none; opacity: 0.42;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 50px oklch(55% 0.19 258 / 0.45));
  animation: heroMarkFloat 3s ease-in-out infinite;
  image-rendering: -webkit-optimize-contrast;
}
@keyframes heroMarkFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    filter: drop-shadow(0 18px 36px oklch(55% 0.19 258 / 0.4));
  }
  50% {
    transform: translate(-50%, -50%) translateY(-26px) scale(1.05);
    filter: drop-shadow(0 44px 64px oklch(55% 0.19 258 / 0.22));
  }
}

.hero-content { position: relative; z-index: 2; max-width: 1180px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.hero-title { font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; letter-spacing: -1px; }
.hero-sub { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 720px; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
/* Mismo alto que el botón "Agendar reunión" del nav (.nav-cta) — los
   botones del hero se veían desproporcionados frente al resto de la UI. */
.hero-actions .btn { padding: 10px 20px; font-size: 14px; }

@keyframes floatA { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(18px,-24px) rotate(4deg); } }
@keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,19px); } }
@keyframes pulseLine { 0%,100% { opacity: .14; } 50% { opacity: .5; } }

.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  animation: heroScrollCue 2.2s ease-in-out infinite;
  transition: color .3s, border-color .3s, background .3s;
}
.hero-scroll-cue svg { width: 16px; height: 16px; }
.hero-scroll-cue:hover { color: var(--ink); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }
@keyframes heroScrollCue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* =============================================================
   7. Sections / layout
   ============================================================= */
.section { position: relative; padding: 96px 0; }
/* Secciones de una sola columna de texto (sin cards/lista/imagen) — menos
   padding porque su contenido pesa menos, y texto más grande ya que no
   hay ningún elemento visual que ocupe el espacio restante. */
.section-compact { padding: 64px 0; }
.section-compact .h2 { font-size: clamp(32px, 4.2vw, 44px); }
.section-compact .p-lead { font-size: 19px; max-width: 68ch; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-bg-slant {
  position: absolute; inset: 0; background: var(--bg-2);
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 94%);
}
.section-bg-slant-deep { background: var(--bg-3); }
.section > .container { position: relative; z-index: 1; }

/* Ritmo de fondo entre secciones planas — tonos oscuros (CLAUDE.md §4/§12) */
.section-tone-2 { background: var(--bg-2); }
.section-tone-3 { background: var(--bg-3); }

/* Secciones claras alternadas — re-derivan los tokens de tema localmente (CLAUDE.md §4/§12) */
.section-light {
  background: var(--surface-light);
  color: var(--ink-on-light);
  --ink: var(--ink-on-light);
  --ink-soft: var(--ink-on-light-soft);
  --ink-mute: var(--ink-on-light-mute);
  --ink-dim: var(--ink-on-light-dim);
  --line: var(--line-on-light);
  --line-soft: var(--line-on-light-soft);
  --glass: var(--glass-on-light);
  --glass-strong: var(--glass-on-light-strong);
}
/* Variante azul muy suave — misma familia de tokens que .section-light, solo cambia el fondo */
.section-light.section-tone-blue { background: var(--surface-light-2); }
/* Degradado en los bordes para suavizar el cambio oscuro/claro entre secciones.
   Ampliado 2026-09-04 (220px→320px, más stops) porque el salto oscuro→claro
   se sentía brusco al entrar a Servicios justo después de la franja de
   filosofía (fondo --bg casi negro, sin fundido propio) — ver también el
   fundido simétrico en .philosophy-strip::after más abajo. */
.section-light::before,
.section-light::after {
  content: ""; position: absolute; left: 0; right: 0; height: 320px; pointer-events: none;
}
.section-light::before { top: 0; background: linear-gradient(to bottom, oklch(12% 0.03 259 / .55), oklch(12% 0.03 259 / .24) 40%, oklch(12% 0.03 259 / .06) 70%, transparent); }
.section-light::after { bottom: 0; background: linear-gradient(to top, oklch(12% 0.03 259 / .55), oklch(12% 0.03 259 / .24) 40%, oklch(12% 0.03 259 / .06) 70%, transparent); }
.section-light .eyebrow { color: var(--accent-2-on-light); }
.section-light .glass-card:hover { border-color: rgba(10,14,26,0.22); }
.section-light .field input,
.section-light .field textarea { background: rgba(10,14,26,0.03); }
.section-light .field input:focus,
.section-light .field textarea:focus { background: rgba(10,14,26,0.05); }
.section-light .cta-form-error,
.section-light .required-mark { color: oklch(48% 0.2 20); }
.section-light .link-inline { color: var(--accent-2-on-light); }
.section-light .link-inline:hover { color: var(--accent-on-light); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-contact { align-items: start; }

.split-figure { position: relative; }
.about-photo-frame { display: flex; align-items: center; justify-content: center; background: #000; }
.about-portrait {
  position: relative; width: min(78%, 380px); aspect-ratio: 1 / 1; flex: none;
  border-radius: 50%; padding: 4px;
  background: conic-gradient(from 220deg, var(--accent-3), var(--accent), var(--accent-2), var(--accent-3));
  box-shadow: 0 0 0 0 oklch(60% 0.22 258 / 0), 0 0 0 0 oklch(60% 0.22 258 / 0);
  transition: box-shadow .3s var(--ease-soft);
}
.about-portrait:hover,
.about-portrait:focus-within {
  box-shadow: 0 0 0 6px oklch(60% 0.22 258 / 0.28), 0 0 70px 8px oklch(60% 0.22 258 / 0.55);
}
.about-portrait::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #000;
}
.about-photo {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 50%;
  transition: transform .5s var(--ease-soft);
}
.about-photo-hover {
  z-index: 2; object-position: 50% 20%;
  opacity: 0; transition: opacity .3s var(--ease-soft);
}
.about-portrait:hover .about-photo-hover,
.about-portrait:focus-within .about-photo-hover { opacity: 1; }
.about-portrait:hover .about-photo,
.about-portrait:focus-within .about-photo { transform: scale(1.02); }
.tilt-frame {
  position: relative; height: 540px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); border: 1px solid var(--line);
}
.floating-chip {
  padding: 14px 20px; border-radius: 14px;
  background: oklch(20% 0.015 260 / 0.88); backdrop-filter: blur(10px);
  border: 1px solid var(--line); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.5);
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-2);
  animation: chipFloat 6s ease-in-out infinite;
}
.floating-chip-corner { position: absolute; bottom: -22px; left: -20px; transform: rotate(3deg); }
@keyframes chipFloat { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }

.about-quote { margin: 0; padding: 0; border: 0; font-style: italic; }

.about-specialty { margin-top: 8px; }
.about-specialty-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.about-specialty-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-specialty-list li { font-size: 15px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.about-specialty-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px currentColor;
}

/* =============================================================
   8. Glass floating cards — signature effect
   ============================================================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

/* Composición deliberada 3+2 cuando un grid tiene exactamente 5 tarjetas —
   con auto-fit a 4 columnas la quinta queda huérfana en su propia fila
   (ver docs/audits/2026-08-10-visual-ux.md §3/§11). Solo se activa con
   exactamente 5 hijos directos, así que no afecta a los grids de 3/4/6
   tarjetas del resto del sitio. */
.card-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
.card-grid:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
.card-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
.card-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 4 / span 2; }

/* Composición explícita 3×2 para los tres grids del sitio que tienen
   exactamente 6 tarjetas (Home "Lo que hacemos", Desarrollo Web "Qué
   incluye este servicio", Power BI "Casos de uso") — con auto-fit a 4
   columnas la fila final quedaba 4+2 con hueco vacío a la derecha
   (ver auditoría UI/UX). A diferencia del fix de 5 tarjetas, esta no
   depende de contar hijos con :has()/:nth-child(): es una clase
   modificadora que se agrega a mano en el HTML de esos tres grids,
   así que nunca se activa "por accidente" en un grid futuro que
   casualmente tenga 6 tarjetas. */
.card-grid-3x2 { grid-template-columns: repeat(3, 1fr); }

.glass-card {
  --rx: 0deg; --ry: 0deg;
  position: relative; padding: 32px; border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex; flex-direction: column; gap: 16px;
  isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-soft), border-color .4s, box-shadow .4s, background .4s;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-card { background: rgba(24,26,32,0.92); }
}
.glass-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: var(--glass-strong);
  box-shadow: 0 40px 80px -30px rgba(60,110,255,0.35), 0 20px 40px -20px rgba(0,0,0,0.5);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
  transition-duration: .22s;
}
.glass-card.has-halo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), oklch(60% 0.22 258 / 0.26), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.glass-card.has-halo:hover::before { opacity: 1; }

.glass-card h3 { font-size: 19px; }
.glass-card p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }

/* =============================================================
   11. Tecnologías — fila compacta de logos (respaldo, no protagonista)
   ============================================================= */
.tech-tiles { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.tech-tiles-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
.tech-tile {
  display: inline-flex; align-items: center; gap: 12px;
  transition: transform .35s var(--ease-soft), opacity .3s;
}
.tech-tile:hover { transform: translateY(-3px); }
.tech-tile-logo {
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tech-tile-logo img { width: 32px; height: 32px; }
.tech-tile em { font-style: normal; font-size: 15px; font-weight: 500; color: var(--ink-soft); }

/* =============================================================
   11b. Hero pills + stack strip
   ============================================================= */
.hero-pills {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center;
  margin: 30px 0 0; padding: 0; max-width: 720px;
}
.hero-pills li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft); font-weight: 600;
}
.hero-pill-dot { font-weight: 700; font-size: 15px; text-shadow: 0 0 10px currentColor; }

.stack-strip { padding: 30px 0 12px; border-top: 1px solid var(--line-soft); margin-top: -1px; }

.stack-marquee-viewport {
  display: flex; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.stack-strip-logos {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px 52px;
  padding-inline: 24px;
}
.stack-strip-logos.is-marquee { flex: none; flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 64px; }
.stack-marquee-viewport.has-marquee { gap: 64px; }
.stack-marquee-viewport.has-marquee:hover [data-marquee-id], .stack-marquee-viewport.has-marquee:hover [data-marquee-clone] { animation-play-state: paused; }
.stack-logo {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease-soft);
}
.stack-logo img { width: 40px; height: 40px; }
.stack-logo:hover { transform: translateY(-5px) scale(1.08); }

.philosophy-strip { padding: 88px 0; text-align: center; position: relative; }
/* Fundido hacia el tono claro que viene justo después (#servicios), del lado
   oscuro del empalme — complementa .section-light::before para que el
   cambio de fondo se sienta como una transición, no un corte. Única sección
   que precede a un bloque .section-light en el sitio, así que el ajuste es
   local a esta franja, no un patrón global. */
.philosophy-strip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, oklch(95% 0.006 258 / .12) 70%, oklch(95% 0.006 258 / .22));
}
.philosophy-text {
  max-width: 46ch; margin: 0 auto; font-size: clamp(23px, 3vw, 30px);
  line-height: 1.55; color: var(--ink); font-weight: 500; font-style: italic; letter-spacing: -0.01em;
}
.philosophy-text::before,
.philosophy-text::after { color: var(--accent-2); font-style: normal; }
.philosophy-text::before { content: "\201C"; margin-right: 2px; }
.philosophy-text::after { content: "\201D"; margin-left: 2px; }

/* =============================================================
   11c. Service cards (colored icons)
   ============================================================= */
.svc-card { position: relative; }
.svc-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  opacity: 0; transition: opacity .4s;
}
.svc-card:hover::after { opacity: 1; }
.svc-icon {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 12px 26px -12px var(--c1);
}
.svc-icon svg { width: 24px; height: 24px; }
.svc-card h3 { font-size: 19px; }
.svc-card p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }
.svc-card-cta {
  background: linear-gradient(155deg, oklch(23% 0.045 264 / 0.94), oklch(16% 0.03 264 / 0.9));
  border-color: rgba(120,150,255,0.28);
  /* Fondo propio siempre oscuro y opaco (gradiente navy), sin importar el tono de la sección */
  --ink: #f5f6f8; --ink-mute: rgba(245,246,248,0.68); color: var(--ink);
}
.svc-card-link { display: block; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--accent-2); text-align: left; }
.svc-card-cta:hover .svc-card-link { color: #fff; }

/* Acento circular estático (no interactivo, no sigue el mouse) para las tarjetas
   de Servicios — mismo lenguaje de color por tarjeta (--c1), sin animación. */
.svc-feature-card {
  position: relative; overflow: hidden;
  text-align: center;
}
.svc-feature-card::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, var(--c1) 0%, transparent 70%);
  opacity: .16; pointer-events: none; z-index: 0;
}
.svc-feature-card > * { position: relative; z-index: 1; }
.svc-feature-card .svc-icon { margin-inline: auto; width: 60px; height: 60px; }
.svc-feature-card .svc-icon svg { width: 28px; height: 28px; }
/* Link de texto (no botón) al final de cada tarjeta, centrado, con el mismo
   acento cian ya usado por .svc-card-link — distinto del azul del CTA final. */
.svc-feature-card .svc-card-link { text-align: center; margin-inline: auto; margin-top: auto; }

/* Servicios (Home), Servicios incluidos (Desarrollo Web) y Qué hacemos
   (Apps móviles, Integraciones/Dashboards, Entidades públicas): versión
   compacta para que el título de sección, las tarjetas y el CTA de cierre
   no se vean tan altos/espaciados. Extendida 2026-09-04 a las 3 secciones
   "Qué hacemos" — tenían grids de 3-5 tarjetas a tamaño completo y se
   sentían desproporcionadamente altas frente al resto del sitio. */
#servicios.section, #servicios-incluidos.section, #que-hacemos.section { padding: 44px 0 48px; }
#servicios .section-head, #servicios-incluidos .section-head, #que-hacemos .section-head { margin-bottom: 22px; }
#servicios .card-grid, #servicios-incluidos .card-grid, #que-hacemos .card-grid { gap: 14px; }
#servicios .glass-card, #servicios-incluidos .glass-card, #que-hacemos .glass-card { padding: 18px 16px; gap: 8px; }
#servicios .svc-icon, #servicios-incluidos .svc-icon, #que-hacemos .svc-icon { width: 38px; height: 38px; margin-bottom: 0; }
#servicios .svc-icon svg, #servicios-incluidos .svc-icon svg, #que-hacemos .svc-icon svg { width: 18px; height: 18px; }
#servicios .svc-card h3, #servicios-incluidos .svc-card h3, #que-hacemos .svc-card h3 { font-size: 15.5px; }
#servicios .svc-card p, #servicios-incluidos .svc-card p, #que-hacemos .svc-card p { font-size: 13px; line-height: 1.45; }
#servicios .svc-card-link, #servicios-incluidos .svc-card-link, #que-hacemos .svc-card-link { font-size: 13px; }
/* Cápsula de cierre: texto + botón fundidos en una sola pieza (en vez de una
   línea con borde superior + botón suelto) para que la pregunta funcione
   como el gancho del botón, no como un párrafo aparte. Degradado sólido
   deliberado — el dueño de la marca pidió que este mensaje y su botón
   destacaran como su propio momento dentro de la sección, no como una
   línea más. Originalmente en violeta (fuera de la paleta de acentos),
   revisado 2026-09-04: mismo tratamiento (cápsula sólida que rompe con las
   glass-cards de alrededor) pero en azul→cian (--accent/--accent-2), los
   acentos protagonistas reales del sitio — conserva el protagonismo pedido
   sin introducir un tercer color como base de sección (CLAUDE.md §4:
   --accent-3 nunca protagonista). El hover eleva la cápsula completa,
   igual que el resto de superficies interactivas del sitio (glass-card,
   botones): invita al clic sin animación en loop.
   Extraída 2026-09-04 a la clase modificadora reutilizable
   .section-inline-cta-capsule (además de los dos ids originales, por
   compatibilidad) para poder usar la misma cápsula en Qué hacemos de las
   3 páginas de servicio sin depender de su id de sección. Selector
   compuesto ".section-inline-cta.section-inline-cta-capsule" (no la clase
   sola) a propósito: con la misma especificidad que la regla base
   .section-inline-cta de más abajo (línea ~730), la que aparece después en
   el archivo ganaba y pisaba justify-content/padding/fondo — la cápsula se
   veía como la línea con borde superior, no como pill centrada. */
#servicios .section-inline-cta, #servicios-incluidos .section-inline-cta, .section-inline-cta.section-inline-cta-capsule {
  margin-top: 20px; padding: 9px 28px; border-top: none;
  border-radius: 999px; gap: 20px; justify-content: center;
  background: linear-gradient(135deg, oklch(14% 0.03 262), oklch(24% 0.08 260), var(--accent), var(--accent-2));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 22px 46px -20px oklch(40% 0.18 258 / 0.5);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
#servicios .section-inline-cta:hover, #servicios-incluidos .section-inline-cta:hover, .section-inline-cta.section-inline-cta-capsule:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -18px oklch(40% 0.18 258 / 0.65); }
/* Resalta la pregunta de cierre como el gancho de la cápsula — más peso,
   en blanco sobre el degradado. Bajado de 19px a 17px 2026-09-04 al reducir
   el alto de la cápsula, para que el texto siga proporcionado al padding
   nuevo (9px, antes 13px). */
#servicios .section-inline-cta p, #servicios-incluidos .section-inline-cta p, .section-inline-cta.section-inline-cta-capsule p { font-size: 17px; font-weight: 700; color: #fff; }
/* Botón al mismo tamaño que .nav-cta (10px/20px, 14px) — antes usaba el
   tamaño base de .btn (14px/26px, 15px), desproporcionado dentro de una
   cápsula ya de por sí compacta. */
#servicios .section-inline-cta .btn-solid, #servicios-incluidos .section-inline-cta .btn-solid, .section-inline-cta.section-inline-cta-capsule .btn-solid {
  padding: 10px 20px; font-size: 14px;
  background: #fff; color: var(--accent-on-light); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.4);
}
#servicios .section-inline-cta .btn-solid:hover, #servicios-incluidos .section-inline-cta .btn-solid:hover, .section-inline-cta.section-inline-cta-capsule .btn-solid:hover { background: #eef4ff; color: var(--accent-on-light); }

/* =============================================================
   11c-bis. Tarjetas de plan (Planes de sitio web / Niveles de plataforma)
   Reutiliza .glass-card + .svc-card como base; solo añade la tipografía
   del precio, que no existía en ningún otro componente del sitio.
   ============================================================= */
.plan-price { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); white-space: nowrap; }
.plan-price .amount { font-size: 25px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.plan-price .unit { font-size: 12px; font-weight: 500; color: var(--ink-mute); }
.plan-price-prefix { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
/* Descripción del plan a una altura consistente entre las 4 tarjetas, para
   que el precio quede alineado sin importar cuánto ocupe cada texto. */
.svc-card:has(.plan-price) h3 + p { min-height: 48px; }
.plan-meta { font-size: 13px; color: var(--ink-mute); border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: auto; }
.plan-meta strong { color: var(--ink-soft); font-weight: 600; }
.svc-card-cta .plan-meta { border-top-color: rgba(255,255,255,0.14); }

/* Viñeta de flecha para la lista visible de un plan (primer nivel de lectura,
   ver referencia de precios) — solo el listado directo de la tarjeta, no los
   sub-listados dentro de .plan-details (esos conservan el punto original). */
.svc-card:has(.plan-price) > .about-specialty-list li {
  padding-left: 22px;
}
.svc-card:has(.plan-price) > .about-specialty-list li::before {
  content: "→"; background: none; box-shadow: none; border-radius: 0;
  width: auto; height: auto; top: -1px; color: var(--accent-2); font-size: 14px; line-height: 1;
}
/* Línea "No incluye" siempre visible (segundo nivel = .plan-details sigue existiendo aparte) */
.plan-exclude { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.plan-exclude strong { color: var(--ink-mute); font-weight: 600; }

/* Disclosure "ver más detalles" dentro de una tarjeta de plan — reutiliza
   el lenguaje visual del marcador +/− de .faq-item (misma interacción,
   misma marca, distinto contexto). */
.plan-details { border-top: 1px solid var(--line-soft); padding-top: 14px; }
.svc-card-cta .plan-details { border-top-color: rgba(255,255,255,0.14); }
.plan-details summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--accent-2);
}
.plan-details summary::-webkit-details-marker { display: none; }
.plan-details[open] .faq-mark::after { transform: translate(-50%,-50%) scaleY(0); }
.plan-details-body { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.plan-details-group h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px; font-weight: 600;
}
.plan-details-group .about-specialty-list li { font-size: 14px; }

/* Botón de WhatsApp junto al CTA principal de cada plan — mensaje
   pre-llenado con el nombre y precio del plan (ver href por tarjeta),
   directo sin pasos intermedios. Mismo ancho que "Quiero este plan" para
   que ninguno de los dos domine visualmente sobre el otro. */
.plan-actions { display: flex; gap: 10px; margin-top: 4px; }
.plan-actions > .btn { flex: 1; }
/* Verde de marca de WhatsApp — única excepción de color puntual del sitio
   (igual criterio que la cápsula de Servicios): un botón de acción externa
   reconocible se beneficia de su propio color de marca en vez de heredar
   el azul genérico de .btn-solid, que aquí competiría por el mismo
   protagonismo y confundiría cuál de los dos botones es "el" CTA. */
.plan-cta-whatsapp {
  gap: 8px; border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 10px 24px -12px rgba(37,211,102,0.5);
}
.plan-cta-whatsapp:hover { background: linear-gradient(135deg, #2be374, #14a389); box-shadow: 0 16px 32px -12px rgba(37,211,102,0.65); }
.plan-cta-whatsapp svg { width: 18px; height: 18px; flex: none; }

.section-inline-cta {
  margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.section-inline-cta p { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); text-align: left; }

/* =============================================================
   11c-ter. Planes: grid único (los 4 caben en una pantalla) + tip técnico
   ============================================================= */
/* Los 4 planes en una sola fila en desktop — evita que un grupo con una sola
   tarjeta se estire a todo el ancho, como pasaba agrupando por categoría. */
.card-grid-4x1 { grid-template-columns: repeat(4, 1fr); }
.plan-category-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: -4px;
}
/* Especificidad extra: sin esto, ".glass-card p" (una clase + un selector de
   tipo, más específico que la única clase de ".plan-category-tag") gana la
   cascada y deja la etiqueta en gris silenciado en vez del color --c1. */
.glass-card .plan-category-tag { color: var(--c1); }
/* Título de cada plan (ej. "Landing Página Básica") con el color de su
   categoría (--c1, ya usado por .plan-category-tag) para diferenciarlo del
   resto del texto de la tarjeta — aplica tanto a la vista resumida del Home
   (.plan-preview-card) como a la tarjeta completa (identificada por tener
   .plan-price, para no afectar otras .svc-card ajenas a Planes). */
.plan-preview-card h4, .svc-card:has(.plan-price) h3 { color: var(--c1); }

/* Section-head centrado — solo donde se aplica explícitamente (Planes), el
   resto de secciones conserva su alineación a la izquierda por defecto. */
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .p-lead { margin-inline: auto; }
/* Cabecera más ancha para un h2 largo que si no se parte en 3 líneas dentro
   del max-width de 640px por defecto (ver Planes en Desarrollo Web). */
.section-head-wide { max-width: 900px; }

/* Bloques de categoría de Planes (Home): <details> por categoría — el
   <summary> ES el encabezado completo (ilustración + intro + CTA "Ver
   planes"), así que la fila entera es la superficie clickeable que despliega
   las tarjetas-resumen. Colapsado por defecto: evita mostrar de entrada 7
   tarjetas seguidas bajo el mismo título. La página de detalle completo vive
   en planes/index.html — ver CLAUDE.md §10. */
.plan-category-toggle { margin-top: 48px; }
.plan-category-toggle:first-of-type { margin-top: 32px; }
.plan-category-header {
  display: flex; gap: 28px; align-items: center;
  list-style: none; cursor: pointer;
}
.plan-category-header::-webkit-details-marker { display: none; }
.plan-category-illustration {
  flex: none; width: 120px; height: 120px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--glass); border: 1px dashed var(--line); overflow: hidden;
}
.plan-category-illustration:has(img) { border-style: solid; }
.plan-category-illustration img { width: 100%; height: 100%; object-fit: contain; }
.plan-category-intro { flex: 1; min-width: 0; }
.plan-category-title { font-size: 20px; margin-bottom: 8px; }
.plan-category-intro p { color: var(--ink-mute); font-size: 15px; line-height: 1.6; text-align: left; }
.plan-category-toggle-cta {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background .3s, border-color .3s;
}
.plan-category-header:hover .plan-category-toggle-cta { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.plan-category-toggle[open] .plan-category-toggle-cta .faq-mark::after { transform: translate(-50%,-50%) scaleY(0); }
/* Etiqueta del toggle según estado — "Ver planes" cerrado, "Contraer" abierto,
   sin JS: el <details> ya expone [open], solo cambiamos el contenido generado. */
.plan-category-toggle-label::before { content: "Ver planes"; }
.plan-category-toggle[open] .plan-category-toggle-label::before { content: "Contraer"; }
.plan-category-toggle .card-grid { margin-top: 24px; }
/* En planes/index.html cada categoría vive en su propia <section>, ya con su
   propio padding — el margin-top de arriba es para el caso del Home (varias
   categorías dentro de una misma sección) y aquí solo sumaba espacio de más. */
#landing .plan-category-toggle, #corporativo .plan-category-toggle, #tienda-virtual .plan-category-toggle {
  margin-top: 0;
}
.plan-preview-tagline { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.plan-preview-cta { margin-top: auto; padding-top: 8px; }

/* Resalta la tarjeta enlazada desde un deep link (ej. Home → "Ver plan y precio")
   por unos segundos — el scroll aterriza al nivel de la categoría (ver
   initPlanDeepLink en main.js), así que esto es lo que le indica al visitante
   cuál de las tarjetas de la categoría es la que vino a ver. */
.plan-highlight {
  box-shadow: 0 0 0 2px var(--accent-2), 0 0 32px -6px var(--accent-2);
  transition: box-shadow 1.2s ease-out;
}
@media (max-width: 720px) {
  .plan-category-header { flex-direction: column; align-items: flex-start; }
  .plan-category-illustration { width: 100%; height: 84px; flex-direction: row; }
  .plan-category-toggle-cta { align-self: stretch; justify-content: center; }
}

/* Tip técnico (detalle amigable al pasar el mouse o al enfocar por teclado).
   Promovido desde clientes/la-fabrika-aluminio/index.html, mismo componente,
   ahora reutilizable en cualquier término técnico del sitio (ver CLAUDE.md §10). */
.tip { border-bottom: 1px dotted var(--ink-mute); cursor: help; position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line);
  padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; font-weight: 400;
  width: 210px; max-width: 68vw; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease; box-shadow: 0 10px 26px rgba(0,0,0,.45); z-index: 200;
}
.tip:hover::after, .tip:focus::after, .tip:focus-visible::after { opacity: 1; visibility: visible; }

/* "¿Por qué elegirnos?" — imagen a la izquierda con una franja numerada
   (01-04) superpuesta a su borde derecho, y a la derecha el título/texto de
   cada punto alineado a su número. Grid de 3 columnas [imagen | franja |
   texto] con 4 filas — imagen y franja ocupan todas las filas (así el
   fondo de la franja queda como una sola pieza continua), y cada número
   comparte fila con su texto correspondiente (data-row 1-4) para que
   ambos quedan alineados sin importar cuánto ocupe el texto. */
.why-showcase {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 84px 1fr;
  grid-template-rows: repeat(4, auto);
  align-items: stretch; row-gap: 30px;
}
.why-visual {
  grid-column: 1; grid-row: 1 / -1;
  position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -24px rgba(10,14,30,0.45);
}
.why-visual-art { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 32%; }
.why-num-strip {
  grid-column: 2; grid-row: 1 / -1; margin-left: -42px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 24px 44px -18px rgba(60,110,255,0.45);
}
/* Los números y su texto se anclan arriba de su celda (no al centro): con
   justify-content:center cualquier diferencia de alto entre celdas (ej. el
   borde/padding-bottom del divisor) descuadraba el número frente a su
   título. Ambos empiezan en el mismo punto y ya no se desalinean. */
.why-num {
  grid-column: 2; margin-left: -42px;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 4px;
  font-family: var(--mono); font-weight: 700; font-size: 32px; color: #fff;
  position: relative;
}
.why-num:not(:last-of-type)::after {
  content: ""; position: absolute; left: 26%; right: 26%; bottom: -15px;
  border-bottom: 2px dashed rgba(255,255,255,0.45);
}
.why-row {
  grid-column: 3; padding-left: 36px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
}
.why-row h3 { font-size: 25px; }
.why-row p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); }
.section-light .why-row p { color: var(--ink-mute); }
/* Línea divisoria entre cada punto (no entre su propio título y párrafo) —
   azul oscuro, re-derivado del tema para verse bien sobre el fondo claro de
   la sección (--accent-on-light, el mismo azul ya usado en enlaces sobre
   fondo claro), a un tercio de opacidad para que quede sutil. */
.why-row:not(:last-of-type) {
  border-bottom: 1px solid color-mix(in oklch, var(--accent-on-light) 35%, transparent);
  padding-bottom: 18px;
}
.why-num[data-row="1"], .why-row[data-row="1"] { grid-row: 1; }
.why-num[data-row="2"], .why-row[data-row="2"] { grid-row: 2; }
.why-num[data-row="3"], .why-row[data-row="3"] { grid-row: 3; }
.why-num[data-row="4"], .why-row[data-row="4"] { grid-row: 4; }

/* =============================================================
   11c-bis. Hero de página de servicio — visual lateral con ícono
   (reemplaza fotografía de stock, ver CLAUDE.md §17 — solo ícono
   de línea + grid de puntos, sin ilustraciones complejas)
   ============================================================= */
/* Más aire que el resto de las secciones (se acerca al hero del Home sin
   repetir su efecto de pantalla completa, ver conversación con el PO) */
#hero-servicio { padding: 148px 0 120px; }
#hero-servicio .h2 { font-size: clamp(34px, 4.6vw, 50px); }
#hero-servicio .p-lead { font-size: 18.5px; }

/* Hero de Desarrollo Web con imagen de fondo propia (no banco de fotos
   genérico) — pedido explícito del dueño de la marca, distinto del resto de
   heros de servicio de arriba (que siguen siendo solo ícono + grid de
   puntos). Se compone con .hero-photo sobre el mismo #hero-servicio para
   subir la especificidad y no afectar las otras páginas que comparten ese
   id con el hero split de siempre. */
#hero-servicio.hero-photo {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 560px; display: flex; align-items: flex-start;
  padding: 150px 0 90px;
}
/* <img> con object-fit en vez de background-image: permite ajustar
   exactamente qué parte de la foto queda visible (object-position) sin
   adivinar con background-position, y evita el corte raro del lado derecho
   de la imagen original al recortarla contra el ancho completo del hero. */
.hero-photo-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 30% center;
}
.hero-photo-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, oklch(8% 0.01 262 / 0.4), oklch(8% 0.01 262 / 0.62));
}
/* Ancho igual al de la píldora del nav (1360px + 32px de padding + su
   margen fijo de 16px) para que el texto quede alineado, borde a borde,
   con el botón "Agendar reunión" del nav. */
#hero-servicio.hero-photo .container { width: 100%; max-width: 1392px; padding-inline: 32px; }
.hero-photo-content { margin-left: auto; max-width: 560px; text-align: right; }
.hero-photo-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 28px; }
@media (max-width: 720px) {
  #hero-servicio.hero-photo { min-height: 460px; padding-top: 120px; }
  #hero-servicio.hero-photo .container { max-width: none; padding-inline: 20px; }
  .hero-photo-img { object-position: 65% center; }
  .hero-photo-content { margin-left: 0; max-width: 100%; text-align: left; }
  .hero-photo-actions { justify-content: flex-start; }
}

/* Variante de .hero-photo alineada a la izquierda: para cuando la imagen del
   hero deja despejado el lado izquierdo en vez del derecho (ej. Software a
   Medida, cuyo mockup de panel queda centrado/a la derecha) — mismo
   componente y mismas reglas base, solo se invierte a qué lado va el texto.
   En mobile no hace falta nada aparte: la regla general de arriba ya deja
   todo alineado a la izquierda. */
.hero-photo-left .hero-photo-content { margin-left: 0; margin-right: auto; text-align: left; }
.hero-photo-left .hero-photo-actions { justify-content: flex-start; }
.hero-photo-left .hero-photo-img { object-position: 68% center; }

/* "Tus desafíos tienen solución" (Desarrollo Web) — 4 puntos en fila
   (ícono + título + texto), sin caja de tarjeta: sin .glass-card, así que
   sin borde, sin fondo ni sombra de hover — solo el contenido, para que no
   se lean como .glass-card comunes. Ícono el doble del tamaño habitual de
   .svc-feature-card (60px → 120px) para que pese como una imagen, no como
   un simple ícono de apoyo. */
#desafios.section { padding: 56px 0 64px; }
#desafios .section-head { margin-bottom: 28px; }
.challenge-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 8px;
}
.challenge-card::after { display: none; }
.challenge-card .svc-icon { width: 120px; height: 120px; border-radius: 24px; }
.challenge-card .svc-icon svg { width: 56px; height: 56px; }
.challenge-card h3 { font-size: 17px; }
.challenge-card p { font-size: 14px; }
.hero-visual-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; min-height: 380px; text-align: center;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hero-visual-icon {
  width: 92px; height: 92px; border-radius: 26px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 24px 50px -18px var(--c1);
}
.hero-visual-icon svg { width: 44px; height: 44px; }
.hero-visual-illustration {
  width: min(100%, 320px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 16px; box-shadow: 0 24px 50px -18px var(--c1);
}
.tilt-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fincontrol-icon-card { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.fincontrol-mark { width: min(55%, 220px); height: auto; filter: drop-shadow(0 20px 40px oklch(60% 0.22 258 / 0.35)); }
.hero-visual-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 300px; margin: 0; padding: 0;
}
.hero-visual-tags li {
  padding: 7px 14px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--glass); border: 1px solid var(--line);
}

/* =============================================================
   11d. Proceso
   ============================================================= */
.section-proceso { position: relative; }
.proceso-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; counter-reset: step;
}
.proceso-step { position: relative; padding: 30px 26px; overflow: hidden; }
.proceso-num {
  font-family: var(--mono); font-size: 34px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 14px;
}
.proceso-step h3 { font-size: 18px; margin-bottom: 8px; }
.proceso-step p { font-size: 14px; line-height: 1.6; color: var(--ink-mute); }

/* =============================================================
   11e. FAQ
   ============================================================= */
.faq-wrap { max-width: 820px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  border: 1px solid var(--line); border-radius: 14px; background: var(--glass);
  backdrop-filter: blur(10px); overflow: hidden; transition: border-color .3s, background .3s;
}
.faq-item[open] { border-color: rgba(120,150,255,0.3); background: var(--glass-strong); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; width: 16px; height: 16px; flex: none; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--accent-2); border-radius: 2px;
}
.faq-mark::before { width: 14px; height: 2px; }
.faq-mark::after { width: 2px; height: 14px; transition: transform .3s var(--ease-out); }
.faq-item[open] .faq-mark::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-item p { padding: 0 22px 22px; margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch; }

/* =============================================================
   12. Contact
   ============================================================= */
.contact-list { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.contact-list > div { display: flex; align-items: center; gap: 14px; }
.contact-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--accent-2);
}
.contact-icon svg { width: 18px; height: 18px; }
.contact-list dt { color: var(--ink-dim); width: 78px; flex: none; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.contact-list dd a:hover { color: var(--accent-2); }

.contact-card { padding: 36px; }
/* /contacto/: el formulario es la acción principal (columna del split);
   este bloque es la alternativa secundaria ("Agendar reunión"), separada
   visualmente debajo de ambas columnas para que en mobile aparezca
   después del formulario, no antes. */
.contact-secondary { grid-column: 1 / -1; text-align: center; margin-top: 12px; }
.contact-alt-hint { font-size: 13px; color: var(--ink-dim); margin: 0 0 14px; }

.cta-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; color: var(--ink-dim); }
.field-optional { color: var(--ink-dim); font-weight: 400; }
.field input:not([type="checkbox"]), .field textarea {
  padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); color: var(--ink); font-size: 15px; font-family: inherit;
  transition: border-color .3s, background .3s;
}
.field input:not([type="checkbox"]):focus, .field textarea:focus { border-color: var(--accent-2); background: rgba(255,255,255,0.06); }
.field textarea { min-height: 96px; resize: vertical; }

.required-mark { color: var(--danger); }

.field-consent { margin-top: 6px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; }
.consent-row input[type="checkbox"] {
  width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--accent);
}
.consent-row label { font-size: 13px; color: var(--ink-mute); line-height: 1.5; }
.link-inline {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-inline:hover { color: var(--accent); }

.cta-submit { position: relative; margin-top: 4px; }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.cta-form.is-sending .cta-form-label { opacity: 0; }
.cta-form-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.cta-form.is-sending .cta-form-spinner { display: flex; }
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-form.is-sent { display: none; }
.cta-form-error { font-size: 13px; color: var(--danger); margin: 0; }

.cta-success { display: none; flex-direction: column; gap: 18px; }
.cta-success.is-visible { display: flex; }
.cta-success h3 { font-size: 20px; color: var(--accent-2); }
.cta-success p { color: var(--ink-mute); font-size: 14px; line-height: 1.6; }
.cta-success p strong { color: var(--ink); font-weight: 700; }
.cta-success p.cta-success-note { color: var(--ink); font-weight: 700; }

/* =============================================================
   13. Footer
   ============================================================= */
.footer { position: relative; padding: 24px 0 14px; background: var(--bg-3); }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-2) 50%, var(--accent-3) 80%, transparent);
  opacity: .55;
}
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 32px; align-items: start; }
.footer-col-title {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--ink-dim); margin-bottom: 14px;
}
.footer-col-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-mark { width: 54px; height: 54px; border-radius: 7px; flex: none; object-fit: contain; }
.footer-brand-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.footer-brand-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.footer-social { display: flex; gap: 10px; }
.footer-social-link {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--accent);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.footer-social-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.footer-social-link svg { width: 16px; height: 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--ink-mute); }
.footer-nav a:hover { color: var(--accent-2); }
.footer-right { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-dim); }
.footer-right a:hover { color: var(--accent-2); }
.footer-contact-item { display: flex; align-items: center; gap: 10px; }
.footer-icon {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--accent-2);
}
.footer-icon svg { width: 14px; height: 14px; }
.footer-bottom { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-dim); }

/* =============================================================
   14. Scroll progress + reveal
   ============================================================= */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: rgba(255,255,255,0.06); pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: 0 0; transform: scaleX(0); transition: transform .08s linear; }

[data-reveal] {
  opacity: 0; transform: translateY(64px) scale(.95);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .14s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .28s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .42s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .56s; }

/* Pares texto/imagen — convergen desde lados opuestos en vez de solo aparecer (Sobre mí, Soluciones) */
[data-reveal-x="left"] { transform: translateY(30px) translateX(-70px) scale(.96); }
[data-reveal-x="right"] { transform: translateY(30px) translateX(70px) scale(.96); }
[data-reveal-x].is-revealed { transform: none; }
.card-grid [data-reveal] { transition-delay: 0s; }
.card-grid [data-reveal]:nth-child(2) { transition-delay: .08s; }
.card-grid [data-reveal]:nth-child(3) { transition-delay: .16s; }
.card-grid [data-reveal]:nth-child(4) { transition-delay: .24s; }
.card-grid [data-reveal]:nth-child(5) { transition-delay: .32s; }
.card-grid [data-reveal]:nth-child(6) { transition-delay: .4s; }

/* =============================================================
   14b. Botón flotante de contacto (FAB)
   ============================================================= */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.fab[hidden] { display: none; }
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.fab-button {
  position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), oklch(66% 0.16 235));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -14px rgba(60,110,255,0.55);
  transition: transform .35s var(--ease-soft), box-shadow .35s;
}
.fab-button:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -14px rgba(60,110,255,0.65); }
.fab-button svg { width: 24px; height: 24px; position: absolute; transition: opacity .25s, transform .25s; }
.fab-icon-close { opacity: 0; transform: scale(.6) rotate(-45deg); }
.fab.is-open .fab-icon-open { opacity: 0; transform: scale(.6) rotate(45deg); }
.fab.is-open .fab-icon-close { opacity: 1; transform: scale(1) rotate(0); }

.fab-panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: 264px; padding: 18px; border-radius: 16px;
  /* Glass oscuro con tinte propio: el FAB flota sobre secciones claras y oscuras,
     no puede depender de los tokens de tema de la sección que quede detrás,
     pero mantiene el mismo lenguaje glassmorphism que el modal (.glass-card) */
  background: oklch(16% 0.02 262 / 0.58); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.fab.is-open .fab-panel { opacity: 1; transform: none; pointer-events: auto; }
.fab-panel-title { font-size: 13px; color: rgba(245,246,248,0.68); line-height: 1.4; margin-bottom: 8px; }
.fab-option {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: #f5f6f8;
  transition: background .25s, color .25s;
}
.fab-option:hover { background: rgba(255,255,255,0.09); color: var(--accent-2); }
.fab-option-icon {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); color: var(--accent-2);
}
.fab-option-icon svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .fab { right: 16px; bottom: 16px; }
  .fab-panel { width: calc(100vw - 64px); max-width: 300px; }
}

/* =============================================================
   14c. Modal de agenda (abierto desde el FAB)
   ============================================================= */
html.has-modal-open, html.has-modal-open body { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  pointer-events: none;
}
.modal.is-open { pointer-events: auto; }
.modal-backdrop {
  position: absolute; inset: 0; background: oklch(6% 0.01 260 / 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: relative; z-index: 1; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent;
}
.modal-panel::-webkit-scrollbar { width: 7px; }
.modal-panel::-webkit-scrollbar-track { background: transparent; }
.modal-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; }
.modal-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }
.modal.is-open .modal-panel { opacity: 1; transform: none; transition-delay: .05s; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--ink-mute);
  background: rgba(255,255,255,0.05); transition: color .25s, background .25s;
}
.modal-close:hover { color: var(--ink); background: rgba(255,255,255,0.1); }
.modal-close svg { width: 16px; height: 16px; }
.modal-title { font-size: 22px; margin-top: 14px; letter-spacing: -.3px; }
.modal-lead { font-size: 14px; color: var(--ink-mute); margin-top: 8px; }
.modal-panel .cta-form { margin-top: 24px; }

/* Modal de política — se abre encima del modal de agenda, panel más ancho para lectura */
[data-modal="policy"] { z-index: 310; }
.modal-panel-wide { max-width: 640px; max-height: 92vh; }
.policy-body { margin-top: 16px; padding-right: 4px; }
.policy-body h4 { font-size: 13.5px; margin-top: 14px; letter-spacing: -.1px; }
.policy-body h4:first-child { margin-top: 0; }
.policy-body p { font-size: 13px; line-height: 1.55; color: var(--ink-mute); margin-top: 5px; }
.policy-body ul { margin: 5px 0 0; padding-left: 18px; }
.policy-body li { font-size: 13px; line-height: 1.55; color: var(--ink-mute); }
.policy-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.policy-body a:hover { color: var(--accent); }
.policy-actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* =============================================================
   15. Responsive (mobile-first breakpoints)
   ============================================================= */
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .split {
    /* minmax(0, 1fr) en vez de 1fr: sin el 0 explícito, el track de grid
       adopta un mínimo "auto" (= min-content) y un botón con texto largo y
       white-space:nowrap (ej. "Cuéntanos tu proyecto →" en #contacto) fuerza
       el track — y con él toda la sección — más ancho que el viewport. */
    grid-template-columns: minmax(0, 1fr); order: initial;
  }
  .split { gap: 48px; }
  /* La composición 3+2 de §8 es de escritorio; por debajo de 1024px vuelve
     a apilarse en una sola columna como cualquier otro card-grid. El reset
     de grid-column repite los mismos selectores nth-child (misma
     especificidad que la regla de escritorio) para poder ganarle por
     orden de aparición — un simple ">*" tiene menor especificidad y no
     alcanzaba a sobreescribir los spans. */
  .card-grid:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; }
  .card-grid:has(> :nth-child(5):last-child) > :nth-child(-n+3),
  .card-grid:has(> :nth-child(5):last-child) > :nth-child(4),
  .card-grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: auto; }
  .card-grid-3x2 { grid-template-columns: 1fr; }
  .card-grid-4x1 { grid-template-columns: 1fr; }
  /* "¿Por qué elegirnos?" apilado: imagen arriba a todo el ancho, franja
     numerada angosta a la izquierda sin superponerse (no hay borde de
     imagen del que colgar) y el texto a la derecha de cada número. */
  .why-showcase { grid-template-columns: 52px 1fr; grid-template-rows: auto repeat(4, auto); row-gap: 20px; }
  .why-visual { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .why-num-strip { grid-column: 1; grid-row: 2 / -1; margin-left: 0; }
  .why-num { grid-column: 1; margin-left: 0; font-size: 18px; }
  .why-row { grid-column: 2; padding-left: 18px; }
  .why-num[data-row="1"], .why-row[data-row="1"] { grid-row: 2; }
  .why-num[data-row="2"], .why-row[data-row="2"] { grid-row: 3; }
  .why-num[data-row="3"], .why-row[data-row="3"] { grid-row: 4; }
  .why-num[data-row="4"], .why-row[data-row="4"] { grid-row: 5; }
  .tilt-frame { height: 320px; }
  .hero-visual-card { min-height: 260px; }
  .about-portrait { width: min(68%, 300px); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-col-brand { grid-column: 1 / -1; }
}

/* Por debajo de ~400px (iPhone SE y similares) el nav-brand completo (logo +
   wordmark) más el botón de menú no caben en el padding-inline de 32px del
   nav — el burger terminaba sobresaliendo hasta 6px fuera de la píldora.
   Ajuste puntual, no un rediseño: reduce el padding del nav y el tamaño del
   wordmark solo en este rango. */
@media (max-width: 400px) {
  .nav { padding-inline: 16px; }
  .nav-brand { font-size: 15px; gap: 8px; }
  .nav-mark { width: 40px; height: 40px; }
}

@media (max-width: 639px) {
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { padding-inline: 20px; }
  .section { padding: 72px 0; }
  .section-compact { padding: 48px 0; }
  .hero { padding-top: 120px; }
  #hero-servicio { padding: 120px 0 64px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; white-space: normal; text-align: center; }
  .plan-actions { flex-direction: column; }
  .section-inline-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .section-inline-cta .btn { width: 100%; }
  /* La cápsula de Servicios pierde el radio 999px en columna — con el botón
     a todo el ancho, una píldora completa se ve rota, no como cápsula. */
  #servicios .section-inline-cta, #servicios-incluidos .section-inline-cta, .section-inline-cta.section-inline-cta-capsule { border-radius: 28px; padding: 24px; text-align: center; }
  .hero-mark { width: 260px; height: 260px; }
  .floating-chip-corner { left: 0; bottom: -16px; }
  .stack-logo img { width: 26px; height: 26px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   16. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .hero-network-line, .hero-mark, .hero-gradient, .floating-chip, .hero-scroll-cue { animation: none; }
}