/* ============================================================
   TuRadiologo v9 — Premium Design System
   ============================================================ */

/* === Design tokens === */
:root {
  /* Colors */
  --bg-primary: #0A0E1A;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F5F7FA;
  --bg-elevated: #FAFBFC;
  --ink-primary: #0F172A;
  --ink-secondary: #475569;
  --ink-muted: #64748B;
  --ink-inverse: #F8FAFC;
  --ink-inverse-muted: rgba(248, 250, 252, 0.62);
  --accent-primary: #2563EB;
  --accent-deep: #1E3A8A;
  --accent-glow: #60A5FA;
  --accent-success: #10B981;
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --border-inverse: rgba(248, 250, 252, 0.12);
  --border-inverse-strong: rgba(248, 250, 252, 0.2);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* Section padding */
  --section-y: clamp(64px, 10vw, 128px);
  --container-x: clamp(20px, 5vw, 64px);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 12px 40px rgba(37, 99, 235, 0.18);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* === Skip link === */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--accent-primary);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 9999;
  transition: top var(--duration-base) var(--ease);
}
.skip-link:focus { top: 16px; }

/* === Container === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--container-x);
}
.container-narrow { max-width: 880px; margin: 0 auto; padding-inline: var(--container-x); }

/* === Typography utilities === */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent-primary);
}
.eyebrow.on-dark { color: var(--accent-glow); }
.eyebrow.on-dark::before { background: var(--accent-glow); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-primary); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ink-inverse); }

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

h1 { font-size: clamp(40px, 6.5vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }

.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-secondary); }
.lead.on-dark { color: var(--ink-inverse-muted); }

.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* === Section base === */
section {
  padding-block: var(--section-y);
  position: relative;
}
.section-tertiary { background: var(--bg-tertiary); }
.section-dark {
  background: var(--bg-primary);
  color: var(--ink-inverse);
}
.section-dark p { color: var(--ink-inverse-muted); }

.section-header { max-width: 720px; margin-bottom: var(--space-16); }
.section-header h2 { margin-block: var(--space-4) var(--space-6); }
.section-header.center { text-align: center; margin-inline: auto; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all var(--duration-base) var(--ease);
  white-space: nowrap;
  position: relative;
  border: 1px solid transparent;
  will-change: transform;
}
.btn-primary {
  background: var(--accent-primary);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 20px rgba(37, 99, 235, 0.22);
}
.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, var(--shadow-glow);
}
.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-primary);
}
.btn-secondary:hover {
  border-color: var(--ink-primary);
  background: var(--bg-tertiary);
}
.btn-ghost-dark {
  background: transparent;
  border-color: var(--border-inverse-strong);
  color: var(--ink-inverse);
}
.btn-ghost-dark:hover {
  border-color: var(--ink-inverse);
  background: rgba(248, 250, 252, 0.05);
}
.btn-arrow svg { transition: transform var(--duration-fast) var(--ease); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* === Nav === */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), backdrop-filter var(--duration-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border-subtle);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--container-x);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.nav-logo img { height: 28px; width: auto; }
.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark { display: none; }
.nav.scrolled .nav-logo .logo-light { display: none; }
.nav.scrolled .nav-logo .logo-dark { display: block; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-inverse-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease);
}
.nav-link:hover { color: var(--ink-inverse); }
.nav.scrolled .nav-link { color: var(--ink-secondary); }
.nav.scrolled .nav-link:hover { color: var(--ink-primary); }

.nav-cta {
  margin-left: 8px;
  padding: 10px 18px;
  font-size: 14px;
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.1);
  border: 1px solid var(--border-inverse-strong);
  color: var(--ink-inverse);
  transition: all var(--duration-fast) var(--ease);
}
.nav-cta:hover { background: rgba(248, 250, 252, 0.18); }
.nav.scrolled .nav-cta {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: white;
}
.nav.scrolled .nav-cta:hover { background: #1e293b; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-inverse);
}
.nav.scrolled .nav-toggle { color: var(--ink-primary); }

@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 99;
  padding: 88px var(--container-x) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  display: block;
  padding: 16px 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-inverse);
  border-bottom: 1px solid var(--border-inverse);
}
.mobile-menu .btn {
  margin-top: 24px;
  align-self: flex-start;
}

/* === HERO === */
.hero {
  position: relative;
  background: var(--bg-primary);
  color: var(--ink-inverse);
  padding-top: clamp(120px, 14vw, 180px);
  padding-bottom: clamp(80px, 12vw, 140px);
  overflow: hidden;
  isolation: isolate;
}
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(37, 99, 235, 0.45) 0%, transparent 60%),
    radial-gradient(45% 40% at 0% 100%, rgba(96, 165, 250, 0.2) 0%, transparent 60%),
    radial-gradient(40% 30% at 100% 80%, rgba(30, 58, 138, 0.5) 0%, transparent 60%);
  animation: mesh-shift 18s ease-in-out infinite;
}
@keyframes mesh-shift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(248,250,252,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,250,252,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (min-width: 1100px) {
  .hero-inner { grid-template-columns: 1.15fr 1fr; gap: var(--space-24); }
}
.hero-content { max-width: 720px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-glow);
  margin-bottom: var(--space-6);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.hero h1 {
  font-size: clamp(40px, 6.8vw, 88px);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}
.hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero h1 .word + .word { margin-left: 0.25em; }
.hero h1 .display {
  background: linear-gradient(135deg, #FFFFFF 0%, #93C5FD 50%, #60A5FA 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 8s ease-in-out infinite;
  display: inline;
}
@keyframes gradient-flow {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p.lead { max-width: 560px; margin-bottom: var(--space-8); }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-12);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-inverse);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-inverse-muted);
}
.trust-item svg {
  width: 18px; height: 18px;
  color: var(--accent-glow);
  flex-shrink: 0;
}

/* Hero diagram */
.hero-diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
.hero-diagram svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 60px rgba(37, 99, 235, 0.25));
}
@media (max-width: 1099px) {
  .hero-diagram { max-width: 420px; margin-top: 32px; }
}

/* === Trust strip / logos === */
.tagline-strip {
  background: var(--bg-primary);
  color: var(--ink-inverse);
  padding-block: 28px;
  border-block: 1px solid var(--border-inverse);
  text-align: center;
}
.tagline-strip p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink-inverse);
  max-width: 800px;
  margin: 0 auto;
  padding-inline: var(--container-x);
}
.tagline-strip span { color: var(--accent-glow); }

/* === Problema === */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.problem-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all var(--duration-base) var(--ease);
}
.problem-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.problem-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-primary);
  display: grid; place-items: center;
}
.problem-card p {
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.55;
}
.problem-conclusion {
  margin-top: var(--space-12);
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 760px;
}

/* === Propuesta de valor === */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.value-card {
  padding: 32px 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all var(--duration-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
  pointer-events: none;
}
.value-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.value-card:hover::before { opacity: 1; }
.value-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--accent-primary);
  margin-bottom: 16px;
  display: block;
}
.value-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.value-card p {
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

/* === Cómo funciona — sticky narrative === */
.how-section { background: var(--bg-tertiary); }
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
@media (min-width: 1024px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
}
.how-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}
.how-sticky h3 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.how-sticky .indicator {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.how-sticky .indicator-bar {
  flex: 1;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.how-sticky .indicator-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent-primary);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease);
}
.how-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.how-step {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--duration-base) var(--ease);
}
.how-step.active {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
}
.how-step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  margin-bottom: 12px;
}
.how-step h4 {
  font-size: 22px;
  margin-bottom: 12px;
}
.how-step p {
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.how-note {
  margin-top: var(--space-12);
  font-size: 13px;
  color: var(--ink-muted);
  padding: 16px 20px;
  border-left: 2px solid var(--accent-primary);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* === Servicios === */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.service-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--duration-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, rgba(37,99,235,0.4), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.service-card:hover::after { opacity: 1; }
.service-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  display: grid; place-items: center;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.service-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.service-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-secondary);
}
.service-extra {
  margin-top: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  color: var(--ink-secondary);
  transition: all var(--duration-fast) var(--ease);
}
.pill:hover {
  border-color: var(--border-strong);
  color: var(--ink-primary);
}

/* === Seguridad === */
.security-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
@media (min-width: 900px) {
  .security-grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-16); align-items: start; }
}
.security-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .security-features { grid-template-columns: 1fr; } }
.security-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: all var(--duration-base) var(--ease);
}
.security-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.security-card svg {
  width: 22px; height: 22px;
  color: var(--accent-primary);
  margin-bottom: 14px;
}
.security-card h4 {
  font-size: 15px;
  margin-bottom: 6px;
}
.security-card p {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* === SLA === */
.sla-section { background: var(--bg-primary); color: var(--ink-inverse); }
.sla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.sla-card {
  background: rgba(248, 250, 252, 0.04);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-base) var(--ease);
}
.sla-card:hover { border-color: var(--border-inverse-strong); }
.sla-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: 12px;
}
.sla-value {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 8vw, 88px);
  line-height: 1;
  color: var(--ink-inverse);
  letter-spacing: -0.03em;
}
.sla-value .unit {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.5em;
  font-weight: 500;
  color: var(--ink-inverse-muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.sla-bar {
  height: 4px;
  background: rgba(248, 250, 252, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 14px;
}
.sla-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-glow));
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out);
}
.sla-card.in-view .sla-bar-fill { transform: scaleX(var(--fill, 1)); }
.sla-card p {
  font-size: 14px;
  color: var(--ink-inverse-muted);
}

/* === Casos === */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.case-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--duration-base) var(--ease);
}
.case-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent-primary);
  align-self: flex-start;
}
.case-metric {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1;
  color: var(--ink-primary);
  letter-spacing: -0.02em;
}
.case-card p {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.55;
}
.case-disclaimer {
  margin-top: var(--space-8);
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

/* === Director === */
.director-section { background: var(--bg-tertiary); }
.director-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-8);
}
@media (min-width: 900px) {
  .director-inner { grid-template-columns: 320px 1fr; gap: var(--space-16); }
}
.director-photo {
  aspect-ratio: 1 / 1.1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  position: relative;
  max-width: 360px;
}
.director-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.director-content {
  padding-top: 12px;
}
.director-content .role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 12px;
}
.director-content h3 {
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.director-content p {
  font-size: 16px;
  color: var(--ink-secondary);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 640px;
}
.director-meta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
}
.director-meta div {
  display: flex; flex-direction: column; gap: 4px;
}
.director-meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.director-meta dd { color: var(--ink-primary); font-weight: 500; }

/* === Staff (red en expansión) === */
.staff-card {
  background: var(--bg-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 760px;
}
.staff-card .indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-success);
}
.staff-card .indicator .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}
.staff-card h3 {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
}
.staff-card p {
  font-size: 16px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

/* === Modelos cobranza === */
.pricing-section { background: var(--bg-tertiary); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.pricing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--duration-base) var(--ease);
}
.pricing-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pricing-card.featured { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-md); }
.pricing-card h3 { font-size: 22px; }
.pricing-card .desc {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.55;
  flex: 1;
}
.pricing-card ul { display: flex; flex-direction: column; gap: 8px; }
.pricing-card li {
  font-size: 14px;
  color: var(--ink-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pricing-card li svg {
  flex-shrink: 0;
  width: 16px; height: 16px;
  color: var(--accent-success);
  margin-top: 3px;
}
.pricing-card .btn { margin-top: 8px; align-self: flex-start; }
.pricing-note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}

/* === Pilot === */
.pilot-section { background: var(--bg-secondary); }
.pilot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .pilot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.pilot-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.pilot-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-primary), var(--border-subtle));
}
.pilot-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  padding: 14px 0;
  position: relative;
}
.pilot-step .dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-primary);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  z-index: 1;
}
.pilot-step h4 { font-size: 17px; margin-bottom: 4px; }
.pilot-step p { font-size: 14px; color: var(--ink-secondary); }

/* === FAQ === */
.faq-section { background: var(--bg-tertiary); }
.faq-list {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  transition: color var(--duration-fast) var(--ease);
}
.faq-trigger:hover { color: var(--accent-primary); }
.faq-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: all var(--duration-base) var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--ink-primary);
  border-radius: 1px;
}
.faq-icon::before { width: 12px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 12px; transition: transform var(--duration-base) var(--ease); }
.faq-item.open .faq-icon { background: var(--ink-primary); border-color: var(--ink-primary); }
.faq-item.open .faq-icon::before { background: white; }
.faq-item.open .faq-icon::after { transform: scaleY(0); }
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease);
}
.faq-content > div {
  padding-bottom: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-secondary);
  max-width: 760px;
}

/* === Contacto === */
.contact-section {
  background: var(--bg-primary);
  color: var(--ink-inverse);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; gap: var(--space-16); align-items: start; }
}
.contact-aside h3 {
  font-size: clamp(28px, 3.5vw, 36px);
  margin-bottom: 16px;
}
.contact-aside p {
  font-size: 16px;
  color: var(--ink-inverse-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border-inverse);
}
.contact-list a, .contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-inverse-muted);
  font-size: 15px;
  transition: color var(--duration-fast) var(--ease);
}
.contact-list a:hover { color: var(--ink-inverse); }
.contact-list svg { width: 18px; height: 18px; color: var(--accent-glow); }

.form-wrap {
  background: rgba(248, 250, 252, 0.03);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) {
  .form-row.two { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.field {
  position: relative;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-inverse);
  transition: border-color var(--duration-fast) var(--ease);
}
.field:focus-within { border-bottom-color: var(--accent-glow); }
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 0 10px;
  font-size: 15px;
  color: var(--ink-inverse);
}
.field textarea { resize: vertical; min-height: 80px; }
.field select option { background: var(--bg-primary); color: var(--ink-inverse); }
.field label {
  position: absolute;
  left: 0;
  top: 22px;
  font-size: 15px;
  color: var(--ink-inverse-muted);
  pointer-events: none;
  transition: all var(--duration-base) var(--ease);
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field.has-value label,
.field.always-up label {
  top: 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-glow);
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 24px 0;
}
@media (max-width: 600px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-inverse-muted);
  cursor: pointer;
}
.checkbox-grid input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none; height: 0; }
.field-label-static {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
  margin-bottom: 12px;
  display: block;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.form-submit {
  background: var(--accent-primary);
  color: white;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all var(--duration-base) var(--ease);
}
.form-submit:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.form-submit:disabled { opacity: 0.6; cursor: wait; }
.form-submit .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  display: none;
}
.form-submit.loading .spinner { display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-wa {
  background: transparent;
  color: var(--ink-inverse);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid var(--border-inverse-strong);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all var(--duration-base) var(--ease);
}
.form-wa:hover { background: rgba(248,250,252,0.06); border-color: var(--ink-inverse); }
.form-privacy {
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink-inverse-muted);
  line-height: 1.5;
}
.form-success {
  display: none;
  padding: 24px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  color: var(--ink-inverse);
  margin-top: 16px;
}
.form-success.show { display: block; animation: fade-up 0.5s var(--ease); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.form-error {
  font-size: 12px;
  color: #FCA5A5;
  margin-top: 4px;
  min-height: 14px;
}

/* === Footer === */
footer {
  background: var(--bg-primary);
  color: var(--ink-inverse);
  padding-block: var(--space-24) var(--space-12);
  border-top: 1px solid var(--border-inverse);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-12); }
}
.footer-brand img { height: 28px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p {
  font-size: 14px;
  color: var(--ink-inverse-muted);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 20px;
}
.footer-brand a {
  font-size: 14px;
  color: var(--accent-glow);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--duration-fast) var(--ease);
}
.footer-brand a:hover { color: var(--ink-inverse); }
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-inverse-muted);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--ink-inverse-muted);
  transition: color var(--duration-fast) var(--ease);
}
.footer-col a:hover { color: var(--ink-inverse); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-inverse);
  font-size: 12px;
  color: var(--ink-inverse-muted);
}
.footer-bottom p { font-size: 12px; }

/* === Reveal animations === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in-view > *:nth-child(n+7) { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero-mesh, .hero-eyebrow .dot, .staff-card .indicator .dot { animation: none; }
  .diagram-line { stroke-dashoffset: 0 !important; }
  .sla-bar-fill { transform: scaleX(var(--fill, 1)) !important; }
  .hero h1 .word { overflow: visible; }
}

/* === Legal pages === */
.legal-page {
  padding-block: clamp(120px, 14vw, 160px) clamp(64px, 10vw, 96px);
}
.legal-page h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.legal-page .updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 32px;
}
.legal-page .disclaimer {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #F59E0B;
  padding: 16px 20px;
  margin-bottom: 48px;
  font-size: 14px;
  color: var(--ink-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.legal-page h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.legal-page h3 {
  font-size: 18px;
  margin-top: 32px;
  margin-bottom: 12px;
}
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-secondary);
  margin-bottom: 12px;
}
.legal-page ul, .legal-page ol {
  padding-left: 20px;
  margin-bottom: 16px;
}
.legal-page ul li, .legal-page ol li { list-style: disc; padding-left: 4px; }
.legal-page ol li { list-style: decimal; }
.legal-page strong { color: var(--ink-primary); }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent-primary);
  margin-bottom: 32px;
}
.legal-back:hover { text-decoration: underline; }

/* === v10 Venezuela / legibility / interactivity === */
.light-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.16;
  transition: opacity 500ms var(--ease);
}
.nav, .mobile-menu, main, footer { position: relative; z-index: 2; }
.hero { z-index: 0; }
.hero-mesh { opacity: 0.36; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 25% 40%, rgba(15,23,42,0.1), transparent 38%), linear-gradient(90deg, rgba(10,14,26,0.05), rgba(10,14,26,0.35));
}
.hero h1 .word:not(.display) {
  color: #F8FAFC;
  text-shadow: 0 2px 26px rgba(10,14,26,0.55);
}
.hero h1 .display {
  background: linear-gradient(135deg, #FFFFFF 0%, #DBEAFE 36%, #60A5FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 28px rgba(96,165,250,0.18));
}
.hero p.lead { color: rgba(248,250,252,0.82); }
.hero-diagram-v10 .diagram-node { transition: transform 280ms var(--ease), filter 280ms var(--ease); transform-box: fill-box; transform-origin: center; }
.hero-diagram-v10 .diagram-node:hover { transform: translateY(-4px); filter: drop-shadow(0 12px 28px rgba(96,165,250,0.25)); }
.hero-diagram-v10 .diagram-line { animation: dash-flow 1.8s linear infinite; }
.hero-diagram-v10 .data-dot { filter: drop-shadow(0 0 10px currentColor); }
.cloud-orbit { transform-origin: 65px 65px; animation: cloud-spin 18s linear infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -36; } }
@keyframes cloud-spin { to { transform: rotate(360deg); } }
.featured-service { border-color: rgba(236,72,153,0.28); }
.featured-service .service-icon { color: #BE185D; background: rgba(236,72,153,0.08); }
.mobile-mammo-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-12);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,246,255,0.82));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 920px) { .mobile-mammo-card { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } }
.mobile-mammo-copy { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.mobile-mammo-copy h3 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; margin-block: 12px 16px; }
.mobile-mammo-copy p { color: var(--ink-secondary); line-height: 1.65; font-size: 16px; max-width: 560px; }
.mobile-mammo-media { min-height: 280px; background: var(--bg-primary); overflow: hidden; position: relative; }
.mobile-mammo-media::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(10,14,26,0.18), transparent 55%); pointer-events:none; }
.mobile-mammo-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.mobile-mammo-card:hover .mobile-mammo-media img { transform: scale(1.035); }
.service-extra.compact { margin-top: 22px; }
.uc-credential {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-top: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.uc-credential img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: white; }
.uc-credential strong { display: block; color: var(--ink-primary); font-size: 14px; }
.uc-credential span { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
.form-note-critical {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: rgba(248,250,252,0.82);
  font-size: 12px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .hero-diagram-v10 .diagram-line, .cloud-orbit { animation: none; }
  .light-particles { display: none; }
}

/* === v11 Visual refinement: premium logo stage + controlled ambient interaction === */
body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(37,99,235,0.18), transparent 62%),
    linear-gradient(180deg, #070B14 0%, #0A0E1A 42%, #F8FAFC 42%, #F8FAFC 100%);
}

.ambient-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  mix-blend-mode: screen;
}
.nav, .mobile-menu, main, footer { position: relative; z-index: 2; }

.nav-inner { padding-block: 16px; }
.nav-logo img { height: 34px; width: auto; }
.nav:not(.scrolled) {
  background: linear-gradient(180deg, rgba(7,11,20,0.82), rgba(7,11,20,0));
}
.nav.scrolled .nav-logo img { height: 32px; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(88px, 8vw, 118px);
  padding-bottom: clamp(72px, 8vw, 110px);
  background:
    radial-gradient(900px 500px at 50% 18%, rgba(96,165,250,0.12), transparent 64%),
    linear-gradient(180deg, #070B14 0%, #0A0E1A 58%, #0B1020 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(148,163,184,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(34,211,238,0.08), transparent 36%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  animation: hero-grid-drift 24s linear infinite;
}
@keyframes hero-grid-drift {
  to { background-position: 72px 72px, 72px 72px, 0 0; }
}
.hero-mesh { opacity: 0.24; }
.hero-grid { opacity: 0.85; }

.hero-brand-stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
  isolation: isolate;
}
.hero-brand-stage::before {
  content: '';
  position: absolute;
  width: min(760px, 86vw);
  height: min(310px, 42vw);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(circle at 25% 50%, rgba(34,211,238,0.10), transparent 46%);
  filter: blur(24px);
  z-index: -2;
  animation: brand-glow 6s ease-in-out infinite alternate;
}
.hero-brand-stage::after {
  content: '';
  position: absolute;
  width: min(700px, 84vw);
  height: 1px;
  bottom: 4px;
  background: linear-gradient(90deg, transparent, rgba(148,163,184,0.35), transparent);
  z-index: -1;
}
.hero-main-logo {
  width: min(660px, 86vw);
  height: auto;
  object-fit: contain;
  border-radius: 28px;
  filter:
    drop-shadow(0 24px 60px rgba(0,0,0,0.42))
    drop-shadow(0 0 26px rgba(125,211,252,0.14));
  opacity: 0.98;
  transform: translateZ(0);
  transition: transform 700ms var(--ease), filter 700ms var(--ease), opacity 700ms var(--ease);
}
.hero-brand-stage:hover .hero-main-logo {
  transform: translateY(-4px) scale(1.012);
  filter:
    drop-shadow(0 30px 80px rgba(0,0,0,0.5))
    drop-shadow(0 0 36px rgba(125,211,252,0.22));
}
.brand-orbit {
  position: absolute;
  width: min(740px, 88vw);
  height: min(330px, 44vw);
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 999px;
  z-index: -1;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  animation: orbit-pulse 5s ease-in-out infinite;
}
@keyframes brand-glow {
  from { opacity: 0.55; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.03); }
}
@keyframes orbit-pulse {
  0%, 100% { opacity: 0.34; transform: scale(1); }
  50% { opacity: 0.72; transform: scale(1.018); }
}

.hero-inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.hero-content { max-width: 680px; }
.hero h1 { font-size: clamp(48px, 6.3vw, 96px); line-height: 0.98; }
.hero p.lead { font-size: clamp(16px, 1.25vw, 20px); color: rgba(226,232,240,0.88); }
.hero-trust { border-color: rgba(148,163,184,0.16); }
.hero-trust li {
  background: rgba(15,23,42,0.28);
  border: 1px solid rgba(148,163,184,0.10);
  border-radius: 14px;
  padding: 8px 10px;
}
.hero-diagram {
  max-width: 520px;
  padding: 18px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(15,23,42,0.22), rgba(15,23,42,0.04));
  border: 1px solid rgba(148,163,184,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 80px rgba(0,0,0,0.28);
  transition: transform 700ms var(--ease), border-color 700ms var(--ease), box-shadow 700ms var(--ease);
}
.hero-diagram:hover {
  transform: translateY(-6px);
  border-color: rgba(96,165,250,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 38px 100px rgba(0,0,0,0.38);
}

.section-light,
.problem,
.services,
.security,
.director,
.contact,
.faq,
.pricing {
  position: relative;
  overflow: hidden;
}
.problem::before,
.services::before,
.security::before,
.director::before,
.contact::before,
.faq::before,
.pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 320px at 82% 12%, rgba(96,165,250,0.06), transparent 70%),
    radial-gradient(420px 280px at 8% 90%, rgba(20,184,166,0.045), transparent 72%);
  z-index: 0;
}
.problem > .container,
.services > .container,
.security > .container,
.director > .container,
.contact > .container,
.faq > .container,
.pricing > .container { position: relative; z-index: 1; }

.card,
.problem-card,
.service-card,
.security-card,
.faq-item,
.form-card,
.contact-method,
.staff-card,
.director-card,
.mobile-mammo-card {
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), border-color 360ms var(--ease), background 360ms var(--ease);
}
.problem-card:hover,
.service-card:hover,
.security-card:hover,
.faq-item:hover,
.contact-method:hover,
.staff-card:hover,
.mobile-mammo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(96,165,250,0.22);
  box-shadow: 0 24px 60px rgba(15,23,42,0.10);
}
.service-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
}
.mobile-mammo-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241,245,249,0.90));
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-diagram { max-width: 560px; margin-inline: auto; }
  .hero-main-logo { width: min(540px, 88vw); }
}
@media (max-width: 640px) {
  .nav-logo img { height: 28px; }
  .hero { padding-top: 92px; }
  .hero-main-logo { width: min(420px, 92vw); border-radius: 20px; }
  .hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .hero-brand-stage { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-particles { display: none; }
  .hero::before, .hero-brand-stage::before, .brand-orbit { animation: none; }
}

/* === v12: contrast, tighter hero, protagonist workflow === */
body { background: var(--bg-secondary); }
body.home-page {
  background:
    radial-gradient(1100px 650px at 50% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, #070B14 0%, #0A0E1A 44%, #F8FAFC 44%, #F8FAFC 100%);
}
body.legal-doc {
  background: #F8FAFC !important;
  color: var(--ink-primary);
}
body.legal-doc .ambient-particles { display: none !important; }
body.legal-doc .legal-page {
  background: #F8FAFC;
  color: var(--ink-primary);
  padding-top: clamp(108px, 10vw, 140px);
}
body.legal-doc .legal-page h1,
body.legal-doc .legal-page h2,
body.legal-doc .legal-page h3 { color: #0F172A; }
body.legal-doc .legal-page p,
body.legal-doc .legal-page li { color: #334155; }
body.legal-doc .legal-page .updated { color: #64748B; }

.hero {
  min-height: auto;
  padding-top: clamp(112px, 10vw, 148px);
  padding-bottom: clamp(72px, 8vw, 104px);
  justify-content: flex-start;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.18fr);
  gap: clamp(36px, 5.5vw, 88px);
  align-items: center;
}
.hero-content { max-width: 700px; }
.hero-logo-lockup {
  position: relative;
  width: min(520px, 88vw);
  margin-bottom: clamp(18px, 3vw, 30px);
  isolation: isolate;
}
.hero-logo-lockup::before {
  content: '';
  position: absolute;
  inset: 18% 6% 8% 6%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96,165,250,0.30), transparent 68%);
  filter: blur(28px);
  z-index: -1;
  animation: brand-glow 6s ease-in-out infinite alternate;
}
.hero-logo-glow {
  position: absolute;
  left: 8%; right: 8%; bottom: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,211,252,0.42), transparent);
  pointer-events: none;
}
.hero-main-logo {
  width: min(520px, 88vw);
  border-radius: 22px;
  opacity: 0.98;
  filter: drop-shadow(0 22px 54px rgba(0,0,0,0.42)) drop-shadow(0 0 24px rgba(125,211,252,0.16));
  transition: transform 650ms var(--ease), filter 650ms var(--ease);
}
.hero-logo-lockup:hover .hero-main-logo {
  transform: translateY(-3px) scale(1.012);
  filter: drop-shadow(0 30px 76px rgba(0,0,0,0.52)) drop-shadow(0 0 34px rgba(125,211,252,0.24));
}
.brand-orbit, .hero-brand-stage { display: none !important; }

.hero h1,
.hero h1 .word:not(.display) {
  color: #F8FAFC !important;
  text-shadow: 0 2px 22px rgba(0,0,0,0.26);
}
.hero h1 .display {
  color: #D8ECFF !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  text-shadow: 0 0 24px rgba(125,211,252,0.24);
}
.hero p.lead,
.hero .lead.on-dark { color: rgba(226,232,240,0.88) !important; }
.hero-trust .trust-item,
.hero-trust span { color: rgba(241,245,249,0.86); }
.hero-trust svg { color: #7DD3FC; }
.hero-eyebrow { color: #93C5FD; background: rgba(15,23,42,0.52); border-color: rgba(96,165,250,0.28); }

.hero-diagram-v12 {
  max-width: 760px;
  width: min(760px, 100%);
  padding: clamp(10px, 1.4vw, 18px);
  border-radius: 38px;
  background:
    radial-gradient(620px 340px at 50% 48%, rgba(37,99,235,0.18), transparent 72%),
    linear-gradient(145deg, rgba(15,23,42,0.34), rgba(15,23,42,0.08));
  border: 1px solid rgba(148,163,184,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 34px 100px rgba(0,0,0,0.36);
  transform: translateZ(0);
}
.hero-diagram-v12 svg { width: 100%; height: auto; overflow: visible; }
.hero-diagram-v12:hover { transform: translateY(-7px) scale(1.01); }
.v12-node { transition: transform 500ms var(--ease), filter 500ms var(--ease), opacity 500ms var(--ease); transform-box: fill-box; transform-origin: center; }
.hero-diagram-v12:hover .v12-node { filter: url(#v12SoftShadow); }
.v12-route { animation: v12-route-flow 1.5s linear infinite; }
.cloud-orbit { animation: spin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.v12-cloud { filter: drop-shadow(0 0 30px rgba(96,165,250,0.28)); }
.xray-packet { transform-box: fill-box; transform-origin: center; }
.v12-spark circle { animation: v12-pulse 2.4s ease-in-out infinite; }
.v12-spark circle:nth-child(2) { animation-delay: .45s; }
.v12-spark circle:nth-child(3) { animation-delay: .9s; }
@keyframes v12-route-flow { to { stroke-dashoffset: -23; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes v12-pulse { 0%,100% { opacity: .45; r: 5; } 50% { opacity: 1; r: 8; } }

.section-header h2,
.card h3,
.problem-card p,
.service-card h3,
.security-card h3,
.director h2,
.contact h2,
.faq h2 { color: #0F172A; }
.section-dark .section-header h2,
.section-dark h2,
.section-dark h3 { color: #F8FAFC; }

@media (min-width: 1280px) {
  .container { max-width: 1360px; }
  .hero-diagram-v12 { transform: translateX(10px); }
}
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-diagram-v12 { margin-inline: auto; max-width: 720px; }
  .hero-logo-lockup, .hero-main-logo { width: min(500px, 88vw); }
}
@media (max-width: 640px) {
  .hero { padding-top: 94px; }
  .hero-logo-lockup, .hero-main-logo { width: min(390px, 90vw); }
  .hero-diagram-v12 { border-radius: 26px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .v12-route, .cloud-orbit, .v12-spark circle { animation: none !important; }
}


/* === v13: nav visible, tighter first fold, dark-section contrast === */
.nav {
  background: rgba(7, 11, 20, 0.96) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.nav.scrolled {
  background: rgba(7, 11, 20, 0.96) !important;
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}
.nav-inner {
  min-height: 70px;
  padding-block: 10px !important;
}
.nav-logo img,
.nav.scrolled .nav-logo img {
  height: 42px !important;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.18));
}
.nav-logo .logo-light,
.nav.scrolled .nav-logo .logo-light { display: block !important; }
.nav-logo .logo-dark,
.nav.scrolled .nav-logo .logo-dark { display: none !important; }
.nav-link,
.nav.scrolled .nav-link {
  color: rgba(226, 232, 240, 0.78) !important;
  font-weight: 600;
}
.nav-link:hover,
.nav.scrolled .nav-link:hover { color: #FFFFFF !important; }
.nav-cta,
.nav.scrolled .nav-cta {
  background: rgba(248, 250, 252, 0.10) !important;
  border-color: rgba(226, 232, 240, 0.22) !important;
  color: #FFFFFF !important;
  font-weight: 700;
}
.nav-cta:hover,
.nav.scrolled .nav-cta:hover {
  background: rgba(96, 165, 250, 0.18) !important;
  border-color: rgba(125, 211, 252, 0.36) !important;
}

.hero {
  margin-top: 0 !important;
  min-height: auto !important;
  padding-top: clamp(86px, 7vw, 112px) !important;
  padding-bottom: clamp(54px, 6vw, 82px) !important;
}
.hero-inner {
  align-items: center !important;
  gap: clamp(28px, 4.8vw, 72px) !important;
}
.hero-logo-lockup {
  width: min(390px, 72vw) !important;
  margin-bottom: clamp(12px, 2vw, 20px) !important;
}
.hero-main-logo {
  width: min(390px, 72vw) !important;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.045em;
}
.hero-diagram-v12 {
  max-width: 820px !important;
}

#problema,
#servicios {
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(37,99,235,0.12), transparent 62%),
    linear-gradient(180deg, #070B14 0%, #0A0E1A 100%);
  color: #F8FAFC;
}
#problema .section-header h2,
#servicios .section-header h2 {
  color: #F8FAFC !important;
  font-weight: 800;
  text-shadow: 0 2px 28px rgba(0,0,0,0.34);
}
#problema .section-header .lead,
#servicios .section-header .lead {
  color: rgba(226, 232, 240, 0.78) !important;
}
#problema .eyebrow,
#servicios .eyebrow {
  color: #60A5FA !important;
  font-weight: 800;
}
.problem-conclusion {
  color: rgba(248, 250, 252, 0.92) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.value-num,
.how-step-num,
.service-icon,
.metric-value,
.stat-number {
  font-family: var(--font-sans) !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.value-num {
  font-size: clamp(46px, 5vw, 68px) !important;
  line-height: 0.9;
  color: #2563EB;
}
.service-icon {
  letter-spacing: -0.02em;
}

@media (min-width: 1280px) {
  .hero-inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(620px, 1.28fr) !important;
  }
}
@media (max-width: 1080px) {
  .hero {
    padding-top: 92px !important;
  }
  .hero-logo-lockup,
  .hero-main-logo {
    width: min(340px, 84vw) !important;
  }
  .hero-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .nav-inner { min-height: 64px; }
  .nav-logo img,
  .nav.scrolled .nav-logo img { height: 34px !important; }
  .hero { padding-top: 82px !important; }
}

/* === v14: remove empty hero band + larger Universidad de Carabobo mark === */
.hero {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 92px !important;
  padding-bottom: 64px !important;
}
.hero-inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
  align-items: center !important;
}
.hero-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.hero-logo-lockup {
  margin-top: 0 !important;
}
@media (min-width: 1280px) {
  .hero {
    padding-top: 90px !important;
    padding-bottom: 72px !important;
  }
  .hero-inner {
    min-height: auto !important;
    align-content: start !important;
  }
}
@media (min-width: 1600px) {
  .hero-inner {
    min-height: auto !important;
  }
}
@media (max-width: 1080px) {
  .hero { padding-top: 86px !important; }
  .hero-inner { min-height: 0 !important; }
}

.director-visual {
  display: grid;
  gap: 22px;
  align-content: start;
  justify-items: center;
}
.director-visual .director-photo {
  width: 100%;
}
.uc-credential-large {
  width: min(100%, 360px);
  display: grid !important;
  justify-items: center;
  gap: 10px !important;
  padding: 22px 20px !important;
  text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
.uc-credential-large img {
  width: min(190px, 70%) !important;
  height: auto !important;
  max-height: 190px;
  object-fit: contain;
  border-radius: 0 !important;
  background: transparent !important;
}
.uc-credential-large strong {
  font-size: 18px !important;
  font-weight: 800;
  color: #0F172A !important;
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .director-inner {
    grid-template-columns: 360px 1fr !important;
  }
}

/* ============================================================
   v15 — Premium interactivity layer
   ============================================================ */

/* 3D tilt cards — Stripe/Apple style */
.has-tilt {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
  will-change: transform;
  position: relative;
}
.has-tilt:hover {
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(37, 99, 235, 0.08);
}

/* Mouse-following spotlight inside cards */
.has-tilt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(37, 99, 235, 0.12),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.has-tilt:hover::before { opacity: 1; }
.has-tilt > * { position: relative; z-index: 1; }

/* Dark section spotlight (hero, SLA, contact) */
.hero, .sla-section, .contact-section {
  --spot-x: 50%;
  --spot-y: 30%;
}
.hero::after,
.sla-section::after,
.contact-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    640px circle at var(--spot-x) var(--spot-y),
    rgba(96, 165, 250, 0.14),
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
  mix-blend-mode: screen;
}
@media (hover: hover) {
  .hero:hover::after,
  .sla-section:hover::after,
  .contact-section:hover::after { opacity: 1; }
}
.hero > *, .sla-section > *, .contact-section > * { position: relative; z-index: 1; }

/* Magnetic enhanced */
[data-magnetic] {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* SLA card on dark — softer spotlight color */
.sla-card.has-tilt::before {
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(96, 165, 250, 0.18),
    transparent 45%
  );
}

/* Reduced motion — disable tilt */
@media (prefers-reduced-motion: reduce) {
  .has-tilt { transform: none !important; }
  .has-tilt::before, .hero::after, .sla-section::after, .contact-section::after { display: none !important; }
}

/* Touch devices — disable tilt (avoid weird sticky transforms) */
@media (hover: none) {
  .has-tilt { transform: none !important; }
  .has-tilt::before { display: none; }
}

/* Override conflicting hover transforms when tilt is active */
.case-card.has-tilt:hover,
.pricing-card.has-tilt:hover,
.service-card.has-tilt:hover,
.value-card.has-tilt:hover,
.security-card.has-tilt:hover,
.sla-card.has-tilt:hover {
  /* tilt transform comes from JS inline style; don't override here */
}