/* ====================================================
   ILUSOFT — landing page
   Stack: vanilla CSS, mobile-first, modern UI
   ==================================================== */

:root {
  /* Paleta bandera argentina:
     - Celeste oficial #74acdf (primary)
     - Dorado sol de mayo #f6b40e (accent)
     - Azul marino #0b1e3a (texto, secciones oscuras)
     - Blanco roto / celeste muy claro #f0f7ff (surfaces) */
  --bg: #0b1e3a;
  --bg-soft: #0f2a4f;
  --surface: #ffffff;
  --surface-soft: #f0f7ff;
  --text: #0b1e3a;
  --text-soft: #475569;
  --text-mute: #94a3b8;
  --border: #cfe0f1;

  --primary: #74acdf;        /* celeste bandera */
  --primary-dark: #5b95c9;
  --primary-deep: #3d7eb6;
  --accent: #f6b40e;          /* dorado sol de mayo */
  --accent-soft: #fbd34a;

  /* Legacy aliases (no romper componentes existentes) */
  --emerald: #10b981;
  --amber: #f6b40e;
  --violet: #74acdf;

  --grad-1: linear-gradient(135deg, #5b95c9 0%, #74acdf 50%, #a8d0f0 100%);
  --grad-2: linear-gradient(135deg, #74acdf 0%, #a8d0f0 100%);
  /* Gradient acento dorado para detalles tipo sol/CTA secundario */
  --grad-accent: linear-gradient(135deg, #f6b40e 0%, #fbd34a 100%);

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(11, 30, 58, .06);
  --shadow: 0 10px 30px rgba(11, 30, 58, .1);
  --shadow-lg: 0 30px 70px rgba(116, 172, 223, .28);

  --container: 1180px;
  --nav-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-scrolled {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
}
/* ====== Logo (ícono SVG + wordmark) ====== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-mark-svg {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(116, 172, 223, .25));
  transition: transform .3s ease;
}
.logo:hover .logo-mark-svg { transform: rotate(-6deg) scale(1.05); }
.logo-text {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.logo-light .logo-text {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.logo-light .logo-mark-svg {
  filter: drop-shadow(0 4px 10px rgba(255, 255, 255, .15));
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.btn-pill {
  background: var(--text);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.nav-links a.btn-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .15);
  color: #fff;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 0; left: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 22px 22px;
    transform: translateY(-150%);
    transition: transform .3s ease;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a.btn-pill {
    margin-top: 10px;
    text-align: center;
  }
  .nav-toggle { display: inline-flex; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 72px 0 110px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(168, 208, 240, .32), transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(116, 172, 223, .28), transparent 60%),
    linear-gradient(180deg, #eff5ff 0%, #ffffff 70%);
  z-index: -1;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero { padding: 56px 0 80px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3.2px;
  color: var(--primary);
  background: transparent;
  padding: 0;
  margin-bottom: 22px;
  position: relative;
  padding-left: 28px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.eyebrow.light {
  color: #bfdbfe;
  background: rgba(191, 219, 254, .12);
}

.hero h1 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  font-weight: 800;
}
.grad {
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 18px;
  font-size: 17px;
  color: var(--text-soft);
  max-width: 540px;
}

.hero-cta {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s, color .25s, border-color .25s;
  text-decoration: none;
}
.btn-primary {
  background: var(--grad-1);
  color: #fff;
  box-shadow: 0 10px 26px rgba(116, 172, 223, .3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(116, 172, 223, .42);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(15, 23, 42, .18);
}
.btn-ghost:hover {
  background: rgba(15, 23, 42, .04);
  border-color: rgba(15, 23, 42, .35);
}
.btn-block { width: 100%; }

.hero-stats {
  margin-top: 28px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.hero-stats > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-stats strong {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 26px;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}
.hero-stats span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
  max-width: 32ch;
}
.hero-stats .stat-rosario {
  flex: 1 1 240px;
  max-width: 340px;
}
.hero-stats .stat-rosario span {
  margin-top: 2px;
  max-width: none;
}
.monumento-svg {
  width: 24px;
  height: 30px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .hero-stats {
    gap: 20px;
    margin-top: 24px;
  }
  .hero-stats .stat-rosario {
    flex-basis: 100%;
    max-width: none;
  }
}

/* hero card / mockup */
.hero-card {
  perspective: 1500px;
}
.window {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transform: rotate(2deg);
  transition: transform .4s ease;
}
.hero-card:hover .window { transform: rotate(0deg) translateY(-6px); }
.window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.window-bar span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fca5a5;
}
.window-bar span:nth-child(2) { background: #fcd34d; }
.window-bar span:nth-child(3) { background: #86efac; }
.window-bar em {
  margin-left: 8px;
  font-style: normal;
  font-size: 12px;
  color: var(--text-mute);
}
.window-body { padding: 22px; display: grid; gap: 18px; }
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kpi {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 1px; }
.kpi-value { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 20px; font-weight: 700; }
.kpi-up { font-size: 12px; color: #10b981; font-weight: 600; }
.kpi-down { font-size: 12px; color: #ef4444; font-weight: 600; }

.chart {
  background: var(--surface-soft);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px;
  height: 110px;
}
.chart svg { width: 100%; height: 100%; }

.bar-list { display: grid; gap: 10px; }
.bar-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-soft);
}
.bar {
  position: relative;
  height: 8px;
  background: #dbeafe;
  border-radius: 999px;
  overflow: hidden;
}
.bar i {
  position: absolute;
  inset: 0;
  background: var(--grad-2);
  border-radius: inherit;
  display: block;
}

/* ============ HERO MAP — planisferio cenital equidistante centrado en BA ============ */
/* ============ HERO MAP — Planisferio cenital centrado en Rosario ============
   SVG con d3-geo + topojson (continentes) + marker pulsante dorado en
   el centro (Rosario). Paleta bandera argentina: disco oceánico celeste,
   continentes celeste profundo, marker dorado sol de mayo. */
.hero-map-card {
  perspective: none;
  display: flex;
  justify-content: center;
}
.hero-map-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 520px;
}
.hero-map-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 28px 40px rgba(15, 23, 42, .16));
  transition: transform .5s ease;
  will-change: transform;
}
.hero-map-card:hover .hero-map-wrap { transform: translateY(-4px) scale(1.01); }
.hero-map {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-map-graticule path {
  fill: none;
  stroke: #5b95c9;
  stroke-width: .55;
  stroke-opacity: .45;
  stroke-dasharray: 2 3;
}
.hero-map-land path {
  fill: #5b95c9;
  fill-opacity: .92;
  stroke: #0b1e3a;
  stroke-width: .45;
  stroke-linejoin: round;
}
/* Marker dorado pulsante de Rosario (centro del planisferio) */
.hero-map-ros-pulse {
  fill: #f6b40e;
  fill-opacity: .4;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-map-ros-pulse 2.6s ease-out infinite;
}
@keyframes hero-map-ros-pulse {
  0%   { transform: scale(.6);  opacity: .65; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-map-ros-pulse { animation: none; opacity: .35; }
  .hero-map-card:hover .hero-map-wrap { transform: none; }
}
.hero-map-caption { text-align: center; }
.hero-map-caption strong {
  display: block;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.5px;
  color: #0b1e3a;
}
.hero-map-caption .grad {
  background: var(--grad-1, linear-gradient(135deg, #5b95c9, #74acdf));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-map-caption .hero-map-sub {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-mute);
  font-size: 13px;
}
/* Estado de carga: skeleton mientras d3+topojson resuelven */
.hero-map-card.is-loading .hero-map-land { opacity: 0; }
.hero-map-card.is-loading .hero-map-graticule { opacity: 0; }
.hero-map-card.is-loaded  .hero-map-land,
.hero-map-card.is-loaded  .hero-map-graticule {
  animation: hero-map-fadein .55s ease both;
}
@keyframes hero-map-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============ SECTIONS ============ */
.section { padding: 130px 0; }
@media (max-width: 768px) { .section { padding: 80px 0; } }
.section-dark {
  background: var(--bg);
  color: #e2e8f0;
}
.section-dark .section-head h2,
.section-dark .feature h4 { color: #fff; }
.section-dark .feature p { color: #cbd5e1; }
.section-head {
  text-align: center;
  margin-bottom: 72px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* Centramos el eyebrow en section-head: el ::before queda mal alineado en
   bloque inline cuando el contenedor tiene text-align: center. Lo dejo
   pasar para el de la sección, manteniendo el hairline en el hero. */
.section-head .eyebrow { padding-left: 0; }
.section-head .eyebrow::before { display: none; }
.section-head h2 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 16px;
  font-weight: 800;
}
.section-head p {
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.55;
}

/* ============ SERVICIOS ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card h3 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 19px;
  margin: 18px 0 10px;
}
.card p {
  color: var(--text-soft);
  font-size: 14.5px;
  margin-bottom: 14px;
}
.card ul { display: grid; gap: 6px; }
.card ul li {
  font-size: 13.5px;
  color: var(--text-soft);
  padding-left: 22px;
  position: relative;
}
.card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 12px;
  background: var(--grad-2);
  border-radius: 4px;
  opacity: .9;
}
.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.card-icon[data-c="indigo"] { background: linear-gradient(135deg, #74acdf, #5b95c9); }
.card-icon[data-c="violet"] { background: linear-gradient(135deg, #a8d0f0, #74acdf); }
.card-icon[data-c="emerald"] { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.card-icon[data-c="amber"] { background: linear-gradient(135deg, #f6b40e, #fbd34a); }
.card-icon svg { width: 26px; height: 26px; }

/* ============ FEATURES ============ */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.feature {
  padding: 28px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .3s, background .3s, border-color .3s;
}
.feature:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(168, 208, 240, .35);
}
.feature-num {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.feature h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.feature p { font-size: 14px; line-height: 1.6; }

/* ============ STEPS ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.steps li { list-style: none; }
.steps li {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  position: relative;
}
.step-dot {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-1);
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(116, 172, 223, .3);
}
.steps h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.steps p { color: var(--text-soft); font-size: 14px; }

/* ============ CONTACT ============ */
.section-contact {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(168, 208, 240, .14), transparent 60%),
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
.contact-info h2 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  margin: 6px 0 16px;
}
.contact-info p {
  color: var(--text-soft);
  font-size: 16px;
  margin-bottom: 28px;
}
.contact-list { display: grid; gap: 18px; }
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ci-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--grad-2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-list strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.contact-list a, .contact-list span {
  font-size: 14px;
  color: var(--text-soft);
}

.contact-form {
  background: #fff;
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}
@media (max-width: 540px) { .contact-form { padding: 22px; } }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) { .grid-2 { grid-template-columns: 1fr; } }

.field {
  display: grid;
  gap: 6px;
}
.field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.field span em { color: #ef4444; font-style: normal; margin-left: 2px; }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(116, 172, 223, .15);
  background: #fff;
}
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
}
.field-check input { margin-top: 3px; }

.form-status {
  font-size: 13.5px;
  text-align: center;
  min-height: 18px;
}
.form-status.success { color: #059669; }
.form-status.error { color: #dc2626; }

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #ef4444;
  background: #fef2f2;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--bg);
  color: #cbd5e1;
  padding: 70px 0 24px;
  margin-top: 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 50px;
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
}
.logo-light .logo-text { color: #fff; }
.footer-brand p {
  margin-top: 14px;
  font-size: 14px;
  color: #94a3b8;
  max-width: 320px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
}
.footer-cols h5 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
}
.footer-cols ul { display: grid; gap: 8px; }
.footer-cols a, .footer-cols li {
  font-size: 14px;
  color: #94a3b8;
  transition: color .2s;
}
.footer-cols a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 28px;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  color: #64748b;
}

/* ============ ANIMATIONS ============ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
  .reveal.is-in { opacity: 1; transform: translateY(0); }
}

/* ============ PORTFOLIO ============ */
/* Portfolio comprimido vertical: el padding 130px del .section es lo
   que estiraba al bloque. Acá lo bajamos a 40/20 (top/bottom) y el
   section-head pierde la mayoría de su margin-bottom. */
.section-portfolio { background: var(--surface-soft); padding: 40px 0 20px; }
@media (max-width: 768px) { .section-portfolio { padding: 30px 0 16px; } }
.section-portfolio .section-head { margin-bottom: 20px; }
.section-portfolio .section-head p { margin-top: 4px; }

/* ============ COVERFLOW 3D ============ */
/* Banner horizontal con stack en perspectiva. La card centrada al
   frente, las laterales rotadas en Y. Los transforms 3D se aplican
   desde JS según la distancia al centro del viewport del track. */
.coverflow-stage {
  position: relative;
  margin: 8px calc(50% - 50vw) 0;   /* full-bleed: rompe el container */
  padding: 0;
  perspective: 1600px;
  overflow: hidden;
}
.coverflow-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Padding lateral grande para centrar primera/última card en
     viewport completo. Vertical mínimo. */
  padding: 10px max(20vw, calc(50% - 240px)) 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.coverflow-track::-webkit-scrollbar { display: none; }
.coverflow-card {
  flex: 0 0 480px;
  max-width: 480px;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease,
              opacity .35s ease;
  will-change: transform;
  cursor: pointer;
}
/* Las cards laterales se ven con tilt + atrás; la centrada al frente.
   Estos son fallbacks por si JS no llega — el efecto real se aplica
   por JS midiendo scrollLeft. */
.coverflow-card[data-cf-state="center"] {
  transform: translateZ(0) scale(1.02);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .25);
  z-index: 3;
}
.coverflow-card[data-cf-state="near"] {
  opacity: .92;
  z-index: 2;
}
.coverflow-card[data-cf-state="far"] {
  opacity: .55;
  z-index: 1;
}
@media (max-width: 768px) {
  .coverflow-card { flex: 0 0 86vw; max-width: 86vw; }
  .coverflow-track { padding: 8px max(8vw, calc(50% - 43vw)) 12px; gap: 18px; }
  .coverflow-stage { perspective: 1000px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .coverflow-track { scroll-behavior: auto; }
  .coverflow-card { transition: opacity .25s ease; transform: none !important; }
}
/* Flechas laterales (Starlink-style: minimalistas, contraste alto) */
.coverflow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #0b1e3a;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
}
.coverflow-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 26px rgba(15, 23, 42, .2); }
.coverflow-arrow:active { transform: translateY(-50%) scale(.96); }
.coverflow-arrow-prev { left: clamp(8px, 3vw, 32px); }
.coverflow-arrow-next { right: clamp(8px, 3vw, 32px); }
.coverflow-arrow:disabled { opacity: .35; cursor: not-allowed; }
/* Dots: minimalistas, hairline activo, sin sombras */
.coverflow-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.coverflow-dots .coverflow-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .18);
  padding: 0;
  cursor: pointer;
  transition: background .2s, width .25s ease;
}
.coverflow-dots .coverflow-dot.is-active {
  background: #0b1e3a;
  width: 28px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 8px;
}
.proj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: var(--shadow-sm);
}
.proj-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.proj-shot {
  aspect-ratio: 16 / 9;
  display: block;
  position: relative;
  overflow: hidden;
}
.proj-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-shot .ph-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  color: rgba(255, 255, 255, .96);
}
.proj-shot .ph-icon {
  font-size: 64px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.proj-shot .ph-name {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 24px; font-weight: 800; letter-spacing: 1px;
}
.proj-shot.ph-warfit { background: linear-gradient(135deg, #f97316 0%, #dc2626 100%); }
.proj-shot.ph-erp    { background: var(--grad-1); }
.proj-shot.ph-deljus { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); }
.proj-shot.ph-jopet  { background: linear-gradient(135deg, #059669 0%, #84cc16 100%); }

/* Jopet — composición vectorial inline: fondo naranja JOPET +
   título "Con tu celular podés ayudar" + mockup de smartphone con
   cámara y patita. Todo SVG inline, cero requests extra. */
.proj-shot-jopet { background: #e04708; position: relative; overflow: hidden; }
.proj-shot-jopet .jopet-art {
  width: 100%;
  height: 100%;
  display: block;
}

/* Sameria — video MP4 (mismo de la landing oficial) + overlay del wordmark. */
.proj-shot-sameria {
  background: #0b1e3a;
  position: relative;
  overflow: hidden;
}
.proj-shot-sameria .sameria-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* Wordmark overlay: legible sobre cualquier frame del video gracias al
   gradiente oscuro sutil de fondo. Texto blanco con tracking marcado. */
.proj-shot-sameria .sameria-wordmark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 30, 58, .15) 0%,
    rgba(11, 30, 58, 0)   45%,
    rgba(11, 30, 58, .55) 100%);
}
.proj-shot-sameria .sameria-wordmark-main {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(34px, 5.6vw, 64px);
  font-weight: 800;
  letter-spacing: clamp(6px, 1.2vw, 14px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  line-height: 1;
}
.proj-shot-sameria .sameria-wordmark-sub {
  margin-top: 10px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: clamp(2px, .35vw, 4px);
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* GESTIUM — mismo patrón video+wordmark que Sameria, con acento dorado
   (paleta de gestium.com.ar: fondo #10131a, dorado #d9a441). */
.proj-shot-gestium {
  background: #10131a;
  position: relative;
  overflow: hidden;
}
.proj-shot-gestium .gestium-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.proj-shot-gestium .gestium-wordmark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 19, 26, .15) 0%,
    rgba(16, 19, 26, 0)   45%,
    rgba(16, 19, 26, .6)  100%);
}
.proj-shot-gestium .gestium-wordmark-main {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(34px, 5.6vw, 64px);
  font-weight: 800;
  letter-spacing: clamp(4px, 1vw, 12px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  line-height: 1;
}
.proj-shot-gestium .gestium-wordmark-sub {
  margin-top: 10px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: clamp(2px, .35vw, 4px);
  color: #d9a441;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.proj-body {
  padding: 22px 24px 26px;
  display: flex; flex-direction: column;
  flex: 1; gap: 12px;
}
.proj-head {
  display: flex; align-items: center; gap: 10px;
}
.proj-head h3 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--text); margin: 0;
}
.proj-tag {
  background: rgba(16, 185, 129, .12);
  color: #047857;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.proj-tagline {
  font-size: 15px; line-height: 1.55;
  color: var(--text-soft);
  flex: 1; margin: 0;
}
.proj-tagline em {
  color: var(--text); font-style: normal; font-weight: 600;
}
.proj-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--primary); padding: 4px 0;
  align-self: flex-start;
  transition: color .15s;
}
.proj-cta::after { content: "→"; transition: transform .2s; }
.proj-cta:hover { color: var(--primary-dark); }
.proj-cta:hover::after { transform: translateX(3px); }

/* Card de servicio (Páginas personalizadas) — diferenciado del producto deployed.
   Tag amarillo "Servicio", overlay sutil sobre el screenshot del primer caso,
   dos CTAs (caso real + pedí la tuya). */
.proj-tag-servicio {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}
.proj-tag-nuevo {
  background: rgba(168, 208, 240, .15);
  color: #0369a1;
}
.proj-shot-overlay {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(15, 23, 42, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 1;
}
/* ---- Slider páginas personalizadas ---- */
.proj-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #0f172a;
}
.proj-slider-slide {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.proj-slider-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.proj-slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proj-slider-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.proj-slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background .3s;
  cursor: pointer;
}
.proj-slider-dot.active { background: #fff; }
.proj-slider-label {
  position: absolute;
  bottom: 28px;
  left: 12px;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  pointer-events: none;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 576px) {
  .proj-slider-label { font-size: 12px; padding: 5px 10px; bottom: 24px; }
}
/* ---- fin slider ---- */

.proj-casos-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 6px 0 2px;
}
.proj-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.proj-cta-secondary {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
}
.proj-cta-secondary:hover { color: var(--text); }

@media (max-width: 820px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============ HERO CANVAS (partículas conectadas) ============ */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* El .hero-bg va encima del canvas con muy baja opacidad para
   mantener el gradiente base pero dejar ver las partículas */
.hero-bg {
  z-index: 1;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(168, 208, 240, .18), transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(116, 172, 223, .14), transparent 60%),
    linear-gradient(180deg, rgba(239, 245, 255, .85) 0%, rgba(255, 255, 255, .92) 70%);
}
.hero-inner { position: relative; z-index: 2; }

/* ============ REVEAL ON SCROLL — variantes mejoradas ============ */
@media (prefers-reduced-motion: no-preference) {

  /* Override del reveal base (más suave) */
  .reveal {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  .reveal.is-in {
    opacity: 1;
    transform: none !important;
  }

  /* section-head: sube desde ligero scale */
  .reveal-scale { transform: scale(0.96) translateY(16px); }

  /* features: alternan izquierda/derecha */
  .reveal-left  { transform: translateX(-32px); }
  .reveal-right { transform: translateX(32px); }

  /* steps: desde abajo con delay cascade */
  .reveal-up { transform: translateY(28px); }

  /* mapa hero: zoom */
  .reveal-zoom { transform: scale(0.93); }

  /* contacto form: desde la derecha */
  .reveal-right-far { transform: translateX(44px); }

  /* delays para cascade */
  .reveal-d0  { transition-delay: 0ms; }
  .reveal-d1  { transition-delay: 100ms; }
  .reveal-d2  { transition-delay: 200ms; }
  .reveal-d3  { transition-delay: 300ms; }
}
/* Motion-reduce: sin transforms, solo opacity */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-left, .reveal-right,
  .reveal-up, .reveal-zoom, .reveal-right-far {
    opacity: 0;
    transform: none;
    transition: opacity .5s ease;
  }
  .reveal.is-in,
  .reveal-scale.is-in, .reveal-left.is-in, .reveal-right.is-in,
  .reveal-up.is-in, .reveal-zoom.is-in, .reveal-right-far.is-in {
    opacity: 1;
  }
}

/* ============ BTN SHIMMER (hover brillante) ============ */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,0)   100%
  );
  transform: skewX(-20deg);
  transition: none;
}
.btn-primary:hover::after {
  animation: btn-shimmer .55s ease forwards;
}
@keyframes btn-shimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
}

/* ============ PROJ-CTA ARROW mejorada ============ */
.proj-cta:hover::after {
  transform: translateX(4px) scale(1.2);
}

/* ============ FEATURE TILT — estado base ============ */
.feature {
  /* transition reforzado para el reset del tilt */
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s cubic-bezier(.22, 1, .36, 1),
              background .3s,
              border-color .3s;
}
/* Cuando JS pone tilt, la sombra se calcula inline */

/* ============ COUNTER ANIMADO hero-proj-count ============ */
#hero-proj-count {
  font-variant-numeric: tabular-nums;
}

/* ============ COVERFLOW ARROW active ============ */
.coverflow-arrow:active {
  transform: translateY(-50%) scale(0.93) !important;
}