/* =========================================================
   D-Solutions — hoja de estilos
   Tipografía: Montserrat (display) / Open Sans (cuerpo)
   Paleta: tomada del manual de marca D-Solutions
   ========================================================= */

:root {
  /* ---- tema claro (por defecto) ---- */
  --bg: #fcfcfc;              /* Gris 1 */
  --surface: #ffffff;
  --surface-alt: #eff4fb;     /* Tech Gray */
  --ink: #2c2c2c;             /* Negro Carbón */
  --ink-soft: #4c4c4c;        /* Gris 7 */
  --line: rgba(44, 44, 44, 0.12);
  --line-accent: rgba(11, 41, 72, 0.35);   /* Borde azul de marca, para bandas y tarjetas */
  --accent: #0B2948;          /* Azul marca — reemplaza al rojo */
  --accent-deep: #04162B;     /* Azul profundo, para hover sobre fondos claros */
  --accent-glow: #3B82D6;     /* Azul claro derivado, para que el acento se lea sobre fondos oscuros */
  --accent-gradient: radial-gradient(ellipse at center, #0B2948 0%, #071C37 45%, #04162B 75%, #020D1C 100%);
  --card-bg: #ffffff;
  --shadow: 0 20px 45px -25px rgba(44, 44, 44, 0.35);
  /* Gris propio de los planos técnicos de personalización: es el fondo que
     traen los PNG originales, no un color de tema. Se repite igual en los
     tres estados para respetar el patrón, pero no cambia con el tema. */
  --method-plate: #E7E8E9;

  /* ---- superficies siempre oscuras (hero / cta / footer) ---- */
  --dark-bg: #050505;
  --dark-surface: #141414;
  --dark-ink: #fcfcfc;
  --dark-ink-soft: #c7c7c7;
  --dark-line: rgba(252, 252, 252, 0.14);
  --dark-danger: #ff8a8a;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", Arial, sans-serif;

  --container: 1180px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #121212;
    --surface-alt: #1a1a1a;
    --ink: #fcfcfc;
    --ink-soft: #c7c7c7;
    --line: rgba(252, 252, 252, 0.14);
    --line-accent: rgba(91, 155, 221, 0.4);
    --accent: #3B82D6;
    --accent-deep: #2C6AAE;
    --accent-glow: #5B9BDD;
    --card-bg: #161616;
    --shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.6);
    --method-plate: #E7E8E9;
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #121212;
  --surface-alt: #1a1a1a;
  --ink: #fcfcfc;
  --ink-soft: #c7c7c7;
  --line: rgba(252, 252, 252, 0.14);
  --line-accent: rgba(91, 155, 221, 0.4);
  --accent: #3B82D6;
  --accent-deep: #2C6AAE;
  --accent-glow: #5B9BDD;
  --card-bg: #161616;
  --shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.6);
  --method-plate: #E7E8E9;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.accent-dot { color: var(--accent); }

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

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

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.9rem;
}
.eyebrow-dark {
  color: var(--accent-glow);
}

.band-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  text-transform: lowercase;
}
.band-title::first-letter { text-transform: uppercase; }

.band-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.band {
  padding: 4.75rem 0;
  background: var(--bg);
  scroll-margin-top: 72px;
}
/* Entre dos secciones seguidas ya hay dos paddings sumados (el de abajo
   de una y el de arriba de la siguiente): recortamos el segundo para
   que el salto entre secciones no se sienta tan largo. */
.band + .band {
  padding-top: 2.5rem;
}
.hero, .cta-band { scroll-margin-top: 72px; }
.band-alt {
  background: var(--surface-alt);
  border-top: 1px solid var(--line-accent);
  border-bottom: 1px solid var(--line-accent);
}

.section-head {
  max-width: 640px;
  margin: 0 0 3rem;
}
.section-lead {
  margin-top: 0.85rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

/* ---------------- NAV ---------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.97);
  border-bottom: 1px solid var(--dark-line);
}
.nav-inner {
  width: 100%;
  padding: 0.85rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--dark-ink);
  justify-self: center;
}
.nav-brand-mark { filter: drop-shadow(0 0 0 transparent); }
.nav-menu-trigger {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: none;
  color: var(--dark-ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0;
}
.nav-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
}
.nav-menu-icon span {
  height: 2px;
  width: 100%;
  background: var(--dark-ink);
  border-radius: 2px;
}
.nav-contact-link {
  justify-self: end;
  color: var(--dark-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.nav-contact-link:hover { color: var(--dark-ink); }

/* ---------------- DRAWER (menú principal) ---------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(400px, 88vw);
  background: var(--surface);
  color: var(--ink);
  padding: 2rem 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-close {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 2.75rem;
  padding: 0;
}
.drawer-close span { font-size: 1.4rem; line-height: 1; }
.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.drawer-list li { border-bottom: 1px solid var(--line); }
.drawer-list li:first-child { border-top: 1px solid var(--line); }
.drawer-list a {
  display: block;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.drawer-list a:hover { color: var(--accent); padding-left: 0.4rem; }

/* Submenú de marcas — el disparador copia la tipografía y el ritmo de
   .drawer-list a para que "Marcas" siga pesando lo mismo que el resto del
   menú; las marcas quedan por debajo en tamaño, color e indentación. */
.drawer-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.drawer-sub-trigger:hover { color: var(--accent); padding-left: 0.4rem; }
/* Indicador + / − dibujado en CSS, con el mismo lenguaje que el "+" de las
   tarjetas de proyectos: al abrir, la barra vertical se contrae y queda "−". */
.drawer-sub-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.drawer-sub-icon::before,
.drawer-sub-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform 0.25s ease;
}
.drawer-sub-icon::before { width: 14px; height: 2px; }
.drawer-sub-icon::after { width: 2px; height: 14px; }
.drawer-sub-trigger[aria-expanded="true"] .drawer-sub-icon::after { transform: scaleY(0); }
/* Con 34 marcas la lista se acota y hace su propio scroll: overscroll-behavior
   evita que al llegar al final el gesto arrastre el panel o la página. */
.drawer-brands {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: max-height 0.28s ease, visibility 0.28s ease;
}
.drawer-brands.is-open {
  max-height: min(42vh, 400px);
  visibility: visible;
  padding-bottom: 0.9rem;
}
.drawer-brands li {
  padding: 0.55rem 0 0.55rem 0.9rem;
  border: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
  .drawer-brands,
  .drawer-sub-icon::before,
  .drawer-sub-icon::after { transition: none; }
}

.drawer-contact {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.drawer-contact-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.drawer-contact-value {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.drawer-contact-value:hover { color: var(--accent); }

/* ---------------- BUTTONS ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn-ghost {
  border-color: var(--dark-line);
  color: var(--dark-ink);
}
.btn-outline {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn-outline:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--accent-glow); color: var(--accent-glow); transform: translateY(-2px); }

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  height: clamp(420px, 78vh, 760px);
  background: var(--dark-bg);
  color: var(--dark-ink);
  overflow: hidden;
}
.hero-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Frase sobre la fotografía, anclada abajo a la derecha.
   El degradado NO es decorativo: con object-position: center 42%, entre 1024 y
   1440px el recorte deja el encendedor plateado de la foto justo en esta
   esquina, y sin él el texto blanco resulta ilegible sobre el metal. Se limita
   al ángulo inferior derecho para no velar la fotografía. */
.hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 45%;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}
.hero-quote {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(1.5rem, 5vh, 3.5rem);
  z-index: 1;
  max-width: 15ch;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--dark-ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

@media (max-width: 980px) {
  .hero-quote { font-size: 2rem; max-width: 14ch; }
}
@media (max-width: 640px) {
  .hero-quote {
    right: 1.25rem;
    bottom: 1.5rem;
    max-width: 72%;
    font-size: 1.5rem;
  }
  .hero::after { width: 80%; height: 55%; }
}
/* ---------------- PROBLEMA ---------------- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.problem-body p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 52ch;
}
.problem-body p:last-child { margin-bottom: 0; }

/* ---------------- MÉTODOS DE PERSONALIZACIÓN ---------------- */
/* Selector de pestañas — salta directo a un método */
.methods-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  margin-top: 2rem;
  scrollbar-width: none;
}
.methods-tabs::-webkit-scrollbar { display: none; }
.methods-tab {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line-accent);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.methods-tab:hover { border-color: var(--accent-glow); color: var(--ink); }
.methods-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Carrusel de una sola franja, con recorte lateral ("peek") */
.methods-slider-wrap {
  position: relative;
  margin-top: 2rem;
}
.methods-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem clamp(1.25rem, 11vw, 15vw) 1rem;
  scrollbar-width: none;
}
.methods-slider::-webkit-scrollbar { display: none; }
.methods-fade {
  position: absolute;
  top: 0;
  bottom: 1rem;
  width: clamp(32px, 8vw, 110px);
  pointer-events: none;
  z-index: 2;
}
.methods-fade-left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.methods-fade-right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.method-card {
  flex: 0 0 auto;
  width: min(360px, 62vw);
  scroll-snap-align: center;
  background: var(--card-bg);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  transition: border-color 0.25s ease;
}
.method-card.is-active,
.method-card:hover { border-color: var(--accent-glow); }
/* Las imágenes son los planos técnicos originales, sin retocar: fondo gris
   propio, líneas negras. El contenedor se iguala a ese gris (--method-plate)
   para que las bandas que deja object-fit: contain se fundan con la imagen y
   el PNG se lea como una placa continua, no como un recuadro flotante. Sin
   padding, el dibujo aprovecha todo el hueco sin deformarse ni recortarse. */
.method-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--method-plate);
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.method-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.method-tag {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-glow);
}
.method-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0.35rem 0 0.4rem;
  color: var(--ink);
}
.method-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0 auto 1.35rem;
}

/* Controles: reproducir, puntos, flechas */
.methods-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}
.methods-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-accent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.methods-play:hover { border-color: var(--accent-glow); color: var(--accent-glow); }
.methods-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.methods-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--line-accent);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.methods-dot.is-active { width: 22px; background: var(--accent); }
.methods-arrows {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.methods-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-accent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.methods-arrow:hover { border-color: var(--accent-glow); color: var(--accent-glow); transform: translateY(-2px); }

@media (max-width: 640px) {
  .method-card { width: 78vw; }
  .methods-slider { padding: 0.5rem 8vw 1rem; }
  .methods-fade { width: 24px; }
}

/* Solo desktop: se recorta el "peek" lateral para que el carrusel aproveche
   casi todo el ancho, pero se conserva margen suficiente para que la primera
   y la última tarjeta puedan centrarse (scroll-snap-align: center). */
@media (min-width: 981px) {
  .methods-slider { padding: 0.5rem clamp(1.25rem, 4vw, 90px) 1rem; }
  .method-card { width: min(440px, 45vw); }
  .methods-fade { width: clamp(24px, 4vw, 64px); }
}

/* ---------------- CARDS / SERVICIOS ---------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}
.card:hover { transform: translateY(-6px); }
.card-lift { transform: translateY(-1.25rem); }
.card-lift:hover { transform: translateY(calc(-1.25rem - 6px)); }
.card-mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px 10px 10px 2px;
  background: var(--accent-gradient);
  margin-bottom: 1.5rem;
  transform: rotate(-8deg);
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.card-example {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.94rem !important;
  color: var(--ink) !important;
  border-left: 2px solid var(--accent-glow);
  padding-left: 0.85rem;
  margin: 1.1rem 0 0.85rem;
}
.card-insight {
  font-size: 0.85rem !important;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ---------------- GALERÍA DE PROYECTOS ---------------- */
.gallery-bleed {
  /* Fuera de .band-inner para poder ensanchar solo esta rejilla. La base
     replica .band-inner (1180px / 1.75rem) para que tablet y móvil queden
     exactamente como estaban; el ensanche vive en la media query de desktop. */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.75rem;
}
@media (min-width: 981px) {
  .gallery-bleed {
    max-width: 1500px;
    padding: 0 clamp(1.75rem, 2.5vw, 2.5rem);
  }
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.gallery-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  aspect-ratio: 4 / 3;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card-bg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.gallery-card:hover { transform: translateY(-6px); border-color: var(--accent-glow); }
.gallery-card-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.gallery-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Solo la imagen — la información del proyecto vive en el modal que
   abre el botón circular "+". */
.gallery-card-expand {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease;
}
.gallery-card:hover .gallery-card-expand { transform: scale(1.08); }
.gallery-card-empty {
  cursor: default;
  border-style: dashed;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gallery-card-empty:hover { transform: none; border-color: var(--line); }
.gallery-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px 14px 14px 4px;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-thumb svg { width: 26px; height: 26px; }
.gallery-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}
.gallery-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.gallery-tag-muted { color: var(--ink-soft); }
.gallery-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ---------------- LIGHTBOX ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.is-open { visibility: visible; opacity: 1; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.lightbox-panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.lightbox.is-open .lightbox-panel { transform: translateY(0); }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-visual {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  background: var(--accent-gradient);
}
.lightbox-panel h3 {
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
.lightbox-panel p#lightboxDesc {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---------------- CASO DE ESTUDIO (modal grande) ---------------- */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 1.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.case-modal.is-open { visibility: visible; opacity: 1; }
.case-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.case-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform: translateY(16px);
  transition: transform 0.3s ease;
  -webkit-overflow-scrolling: touch;
}
.case-modal.is-open .case-panel { transform: translateY(0); }
.case-close {
  position: sticky;
  top: 0.85rem;
  left: 100%;
  transform: translateX(-0.85rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(6px);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.case-close span { font-size: 1.1rem; line-height: 1; }
.case-hero-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  margin-top: -3rem;
}
.case-article-body {
  padding: 0.5rem 2.5rem 3rem;
}
.case-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: lowercase;
  line-height: 1.2;
  color: var(--ink);
  margin: 0.5rem 0 1.25rem;
  text-wrap: balance;
}
.case-title::first-letter { text-transform: uppercase; }
.case-standfirst {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.6;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.case-standfirst a { color: var(--accent-deep); font-weight: 700; text-decoration: underline; }
.case-article-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}
.case-article-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 68ch;
  margin-bottom: 1.15rem;
}
.case-article-body strong { color: var(--ink); }
.case-inline-img {
  width: 100%;
  border-radius: var(--radius-md);
  margin: 1.75rem 0;
  display: block;
}
/* Foto de producto aislada (ej. el modelo base sin personalizar): se
   muestra chica y centrada, no a todo el ancho como las fotos de
   ambiente/lifestyle. */
.case-product-shot {
  width: auto;
  max-width: 220px;
  margin: 1.75rem auto;
  border-radius: 0;
}
.case-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: -1.25rem;
  margin-bottom: 1.75rem;
}
/* Ficha técnica del proyecto — Marca / Modelo / Técnica / etc. */
.case-spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2rem;
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.case-spec-item dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.35rem;
}
.case-spec-item dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
.case-spec-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 6px;
  background: radial-gradient(circle, #202020, #121212 75%);
  flex-shrink: 0;
}
.case-spec-logo img {
  width: 80%;
  height: 70%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.case-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 1.75rem 0;
  max-width: 60ch;
}
.case-quote-accent {
  font-size: 1.3rem;
  font-weight: 800;
  font-style: normal;
  border-left: none;
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
  max-width: none;
}
.case-framework {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--accent-deep);
  margin: 1.5rem 0;
}
.case-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  max-width: 68ch;
}
.case-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}
.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.case-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.case-example {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.case-example p { margin-bottom: 0; font-size: 0.92rem; line-height: 1.5; }
.case-example-brand {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink) !important;
  font-size: 1.05rem;
  margin-bottom: 0.5rem !important;
}
.case-source {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  max-width: none;
}
.case-source a { color: var(--accent-deep); font-weight: 700; }

@media (max-width: 640px) {
  .case-modal { padding: 0; }
  .case-panel { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .case-article-body { padding: 0.5rem 1.25rem 3rem; }
  .case-hero-img { margin-top: -2.5rem; max-height: 280px; }
  .case-examples { grid-template-columns: 1fr; }
  .case-spec-list { grid-template-columns: 1fr; }
}

/* ---------------- PROCESO ---------------- */
.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.process-list::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: var(--line);
}
.process-step {
  position: relative;
  padding-top: 3.5rem;
}
/* Los cuatro números crecen en peso visual hacia el último paso: el
   reconocimiento (04) es la culminación de la historia, no un detalle
   menor — por eso es el único que se enciende en azul sólido. */
.step-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--accent);
  background: var(--surface);
  border: 1.5px solid var(--line-accent);
}
.step-marker-final {
  color: #fff;
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-glow) 16%, transparent);
}
.process-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.process-step p {
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.process-cta {
  margin-top: 3rem;
  text-align: center;
}

/* Composición compacta de la banda: esta sección venía con el padding completo
   de .band arriba y abajo (no le aplica .band + .band porque la precede un
   div de modal, no otra banda), y el aire sobrante hacía que el título, la
   frase y el botón flotaran demasiado separados. Se recorta solo el espaciado
   vertical — ni el texto, ni el botón, ni el ancho, ni los cuatro pasos. */
#proceso {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
#proceso .section-head { margin-bottom: 1.75rem; }
#proceso .process-cta { margin-top: 1.75rem; }

/* En pantallas menores la lista pasa a 2 y luego a 1 columna: crece a lo alto
   por sí sola, así que el recorte se suaviza y se conserva espacio táctil
   alrededor del botón. */
@media (max-width: 980px) {
  #proceso {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
  #proceso .section-head { margin-bottom: 2rem; }
  #proceso .process-cta { margin-top: 2rem; }
}
@media (max-width: 640px) {
  #proceso {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  #proceso .section-head { margin-bottom: 2rem; }
  #proceso .process-cta { margin-top: 2.25rem; }
}

/* ---------------- PILARES / NOSOTROS ---------------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.pillar {
  border-top: 3px solid var(--accent);
  padding-top: 1.25rem;
}
.pillar h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  text-transform: lowercase;
}
.pillar h3::first-letter { text-transform: uppercase; }
.pillar p {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------------- CTA / CONTACTO (formulario + cronometrista) ----------------
   El formulario y la credencial de cronometrista comparten una sola banda
   oscura: dos columnas en desktop (el formulario manda, 64/36), una sola
   columna con el formulario primero en tablet y móvil. */
.cta-band {
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-ink);
  overflow: hidden;
  /* El aire superior se conserva; el inferior se recorta para que el footer
     se lea como continuación del formulario y no como una banda aparte. */
  padding: 6.5rem 0 2.5rem;
}
.cta-glow {
  top: auto;
  bottom: -30%;
  left: -10%;
  right: auto;
}
.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 3.5rem;
  align-items: start;
}
.contact-main { min-width: 0; }
/* El titular es el mensaje emocional y el subtítulo la explicación
   funcional: se separan con tamaño y color, no con adornos. */
.cta-title {
  color: var(--dark-ink);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.cta-sub {
  color: var(--dark-ink-soft);
  font-size: 1.05rem;
  max-width: 52ch;
  display: block;
  margin-bottom: 2.25rem;
}

/* ---- panel del formulario ---- */
.form-panel {
  background: var(--dark-surface);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 2.25rem;
}
.quote-form :focus-visible { outline-color: var(--accent-glow); }

.form-group {
  border: 0;
  padding: 0;
  margin: 0 0 2.25rem;
}
.form-group:last-of-type { margin-bottom: 1.75rem; }
.form-legend {
  padding: 0;
  margin-bottom: 1.35rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-glow);
}

.field {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0;
}
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block;
  padding: 0;
  margin-bottom: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-ink);
}
.field-label-sm {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark-ink-soft);
}
.field-help {
  margin: -0.25rem 0 0.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--dark-ink-soft);
}
.field-help-strong strong { color: var(--dark-ink); font-weight: 700; }

.field-input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  background: #0d0d0d;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-sm);
  color: var(--dark-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field-input::placeholder { color: rgba(252, 252, 252, 0.32); }
.field-input:hover { border-color: rgba(252, 252, 252, 0.28); }
.field-input:focus {
  outline: none;
  border-color: var(--accent-glow);
  background: #101010;
  box-shadow: 0 0 0 3px rgba(59, 130, 214, 0.22);
}
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--dark-ink-soft) 50%), linear-gradient(135deg, var(--dark-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.field-input option { background: #0d0d0d; color: var(--dark-ink); }

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.field-pair .field { margin-bottom: 0; }
.field-sub { display: block; min-width: 0; }
.field-sub label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  color: var(--dark-ink-soft);
}

/* ---- preguntas binarias: control segmentado ---- */
.seg-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.seg-control input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.seg-control label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-sm);
  background: #0d0d0d;
  color: var(--dark-ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.seg-control label:hover { border-color: rgba(252, 252, 252, 0.28); color: var(--dark-ink); }
.seg-control input:checked + label {
  border-color: var(--accent-glow);
  background: rgba(59, 130, 214, 0.12);
  color: var(--dark-ink);
}
.seg-control input:focus-visible + label {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}

/* ---- presupuesto por unidad ---- */
.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.budget-grid input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.budget-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 62px;
  justify-content: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-sm);
  background: #0d0d0d;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.budget-grid label:hover { border-color: rgba(252, 252, 252, 0.28); }
.budget-grid input:checked + label {
  border-color: var(--accent-glow);
  background: rgba(59, 130, 214, 0.12);
}
.budget-grid input:focus-visible + label {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}
.budget-amount {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark-ink);
}
.budget-unit {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--dark-ink-soft);
}
.budget-custom { margin-top: 0.9rem; }
.input-affix {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  background: #0d0d0d;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-sm);
}
.input-affix:focus-within {
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 3px rgba(59, 130, 214, 0.22);
}
.input-prefix {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dark-ink-soft);
}
.input-affix .field-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.input-affix .field-input:focus { box-shadow: none; background: transparent; }
.input-suffix {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--dark-ink-soft);
}
.budget-echo {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--accent-glow);
  background: rgba(59, 130, 214, 0.08);
  font-size: 0.88rem;
  color: var(--dark-ink-soft);
}
.budget-echo strong { color: var(--dark-ink); font-weight: 700; }

/* ---- errores ---- */
.field-error {
  margin: 0.45rem 0 0;
  font-size: 0.83rem;
  color: var(--dark-danger);
}
.field.has-error .field-input,
.field.has-error .input-affix { border-color: var(--dark-danger); }
.field.has-error .seg-control label,
.field.has-error .budget-grid label { border-color: rgba(255, 138, 138, 0.45); }
.form-alert {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 138, 138, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(255, 138, 138, 0.1);
  color: var(--dark-danger);
  font-size: 0.9rem;
}
.form-alert a { color: var(--dark-ink); text-decoration: underline; }

/* ---- envío ---- */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.form-btn { min-height: 50px; }
.form-btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.form-legal {
  margin: 0;
  font-size: 0.8rem;
  color: var(--dark-ink-soft);
}
.form-legal a { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 2px; }
.form-legal a:hover { color: var(--accent-glow); }

/* ---- confirmación ---- */
.form-success { outline: none; }
.form-success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line-accent);
  background: rgba(59, 130, 214, 0.12);
  color: var(--accent-glow);
}
.demo-flag {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px dashed rgba(255, 138, 138, 0.6);
  border-radius: var(--radius-sm);
  background: rgba(255, 138, 138, 0.08);
  color: var(--dark-danger);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.form-success-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  margin: 0 0 0.9rem;
  color: var(--dark-ink);
}
.form-success-lead {
  margin: 0 0 1.75rem;
  color: var(--dark-ink-soft);
  font-size: 1rem;
  max-width: 54ch;
}
.advisor-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line-accent);
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 214, 0.06);
  margin-bottom: 1.9rem;
}
.advisor-role {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-ink-soft);
}
.advisor-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark-ink);
}
.advisor-channels {
  font-size: 0.88rem;
  color: var(--accent-glow);
}
.form-success-sub {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-glow);
}
.next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.next-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--dark-ink-soft);
  font-size: 0.96rem;
}
.next-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-accent);
  color: var(--accent-glow);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---- columna de credenciales (reloj Tissot + datos de contacto) ---- */
.contact-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dark-line);
  text-align: left;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.contact-item:hover { border-color: var(--accent-glow); transform: translateX(4px); }
/* WhatsApp: misma familia visual que el resto de datos de contacto, con el
   icono como único punto de color de la marca para que no parezca un botón
   flotante pegado encima del diseño. */
.contact-item-whatsapp {
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  border-color: var(--line-accent);
  background: rgba(59, 130, 214, 0.07);
}
.contact-item-whatsapp:hover { background: rgba(59, 130, 214, 0.13); }
.contact-wa-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: #25d366;
}
.contact-wa-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-ink-soft);
}
.contact-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

/* ---------------- CRONOMETRISTA OFICIAL NBA/WNBA ----------------
   Vive dentro de la banda de contacto, en la columna derecha. */
.timekeeper-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.timekeeper-shotclock {
  width: 104px;
  height: auto;
  display: block;
}
.timekeeper-live {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #ff3b3b;
  background: #0a0a0a;
  border: 1px solid rgba(255, 59, 59, 0.35);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.65);
}
.timekeeper-credential {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}
.timekeeper-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  flex-shrink: 0;
}
/* Ambas marcas son SVG verticales (28x62 y 24x60): se miden por ALTURA para
   que compartan línea de base, conserven su proporción y queden claramente
   por debajo del reloj Tissot en jerarquía. */
.timekeeper-nba-mark,
.timekeeper-wnba-mark { height: 34px; width: auto; }
.timekeeper-text {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--dark-ink);
  margin: 0;
}
.timekeeper-text strong { font-weight: 800; }
.timekeeper-note {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--dark-ink-soft);
}

/* ---- responsive de la banda de contacto ---- */
@media (max-width: 980px) {
  .cta-band { padding: 4.75rem 0 2.5rem; }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-aside {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
  }
  .contact-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 0;
    padding-top: 0;
    width: auto;
  }
  .contact-item { flex: 1 1 200px; }
}

@media (max-width: 860px) {
  .budget-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .form-panel { padding: 1.5rem 1.25rem; }
  .field-pair { grid-template-columns: 1fr; }
  .seg-control { grid-template-columns: 1fr; }
  .contact-aside { gap: 1.5rem 2rem; }
  .timekeeper-shotclock { width: 72px; }
  .timekeeper-credential { gap: 0.85rem; }
  .timekeeper-text { font-size: 0.92rem; }
  .contact-item { flex: 1 1 100%; }
  .form-btn { width: 100%; }
  .form-submit { align-items: stretch; }
  .cta-title-break { display: none; }
  .timekeeper-nba-mark,
  .timekeeper-wnba-mark { height: 28px; }
  .timekeeper-marks { gap: 1.1rem; }
}

@media (max-width: 380px) {
  .budget-grid { grid-template-columns: 1fr; }
}

/* ---------------- FOOTER ---------------- */
/* El cierre del sitio es un solo sistema de dos filas: la navegación primero,
   a ancho completo, para que sea el elemento reconocible justo después del
   formulario; debajo, la marca y el aviso legal en una sola línea. */
.site-footer {
  background: var(--dark-bg);
  color: var(--dark-ink-soft);
  padding-top: 2rem;
}
/* Isotipo (pieza de rompecabezas), no el wordmark: al ser casi cuadrado
   necesita más altura que el logotipo horizontal anterior. */
.footer-logo { height: 46px; width: auto; }
/* Isotipo y frase van en línea, no apilados: la fila de cierre mide lo que
   mide el isotipo y no arrastra altura extra. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-tagline {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--dark-ink-soft);
  margin-top: 0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--dark-line);
}
/* El padding vertical no agranda el texto: agranda el área que se puede tocar
   (de 23px a 34px de alto) sin sumar altura perceptible a la fila. */
.footer-links a {
  font-size: 0.9rem;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--dark-ink); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1.25rem 1.75rem 1.75rem;
  font-size: 0.82rem;
}

/* En móvil no se fuerza la fila única: los enlaces envuelven centrados con más
   área táctil, y la marca y el aviso legal se apilan. */
@media (max-width: 640px) {
  .footer-links {
    gap: 0.15rem 1.35rem;
    padding-bottom: 1.25rem;
  }
  .footer-links a { padding: 0.5rem 0; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.25rem 1.75rem 1.5rem;
  }
}

/* ---------------- PÁGINA LEGAL ---------------- */
.legal-band { padding-top: 3.5rem; }
.legal-inner { max-width: 760px; }
.legal-updated {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
.legal-notice {
  margin-top: 1.75rem;
  padding: 1.1rem 1.4rem;
  border: 1px dashed var(--accent-deep);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.legal-inner h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}
.legal-inner p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.legal-inner a { color: var(--accent-deep); text-decoration: underline; }
.legal-back { margin-top: 3rem; }
.legal-back a { font-weight: 700; text-decoration: none; }

/* ---------------- SCROLL REVEAL ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .problem-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .card-lift { transform: none; }
  .process-list { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .process-list::before { display: none; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .band { padding: 4.5rem 0; }
  .cards-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}

/* MARCAS — franja de logos en carrusel */
.marcas-band {
  background: var(--dark-bg);
  color: var(--dark-ink);
  overflow: hidden;
  padding-bottom: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
#marcas {
  padding-top: 4.75rem;
}
.marcas-band .eyebrow { color: var(--dark-ink-soft); }
.marcas-band .band-title { color: var(--dark-ink); }
.marcas-band .accent-dot { color: var(--accent-glow); }
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-accent);
  background: color-mix(in srgb, var(--accent-glow) 10%, transparent);
  color: var(--dark-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}
.verified-badge svg { flex-shrink: 0; color: var(--accent-glow); }

.marcas-viewport {
  margin-top: 2.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marcas-track {
  display: flex;
  width: max-content;
  animation: marcas-scroll 84s linear infinite;
}
.marcas-viewport:hover .marcas-track { animation-play-state: paused; }
.marcas-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marcas-group img {
  /* Todos los logos comparten el mismo lienzo de origen (misma
     plantilla, mismas dimensiones): un recuadro igual para todos +
     object-fit: contain conserva el tamaño relativo real de cada
     marca tal como viene en la carpeta, sin forzar una altura pareja. */
  height: 104px;
  width: 144px;
  object-fit: contain;
  margin: 0 1.1rem;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.marcas-group img:hover { opacity: 1; }

@keyframes marcas-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marcas-track { animation: none; }
  .marcas-viewport { overflow-x: auto; }
}

@media (max-width: 640px) {
  .marcas-group img { height: 64px; width: 92px; margin: 0 0.65rem; }
  .marcas-track { animation-duration: 50s; }
}

/* EMPRESAS — franja en carrusel de clientes corporativos, cada logo
   dentro de un recuadro propio ("Cuadro Empresas"), en blanco. */
.empresas-band {
  background: var(--dark-bg);
  color: var(--dark-ink);
  overflow: hidden;
  padding-bottom: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
#empresas { padding-top: 4.75rem; }
.empresas-band .eyebrow { color: var(--dark-ink-soft); }
.empresas-band .band-title { color: var(--dark-ink); }
.empresas-band .accent-dot { color: var(--accent-glow); }

.empresas-viewport {
  margin-top: 2.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.empresas-track {
  display: flex;
  width: max-content;
  animation: empresas-scroll 46s linear infinite;
}
.empresas-viewport:hover .empresas-track { animation-play-state: paused; }
.empresas-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.empresas-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 108px;
  margin: 0 0.9rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-accent);
  background: var(--dark-surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.empresas-card:hover { border-color: var(--accent-glow); transform: translateY(-3px); }
.empresas-card img {
  width: 76%;
  height: 60%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

@keyframes empresas-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .empresas-track { animation: none; }
  .empresas-viewport { overflow-x: auto; }
}
@media (max-width: 640px) {
  .empresas-card { width: 124px; height: 84px; margin: 0 0.6rem; }
  .empresas-track { animation-duration: 30s; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0.85rem 1.25rem; }
  .nav-menu-label { display: none; }
  .drawer-panel { padding: 1.75rem 1.5rem 2rem; }
  .hero { height: clamp(320px, 60vh, 480px); }
}