/* Acabado visual de Inicio. Conserva la composición, tipografía y movimiento. */
:root {
  color-scheme: dark;
  --bg: #0b110e;
  --bg-2: #111b16;
  --bg-3: #18251e;
  --cream: #f5f7f5;
  --cream-dim: #c9d2cc;
  --muted: #9aa79f;
  --line: rgba(229, 245, 235, .15);
}

body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 34%, #39ff8821 0%, transparent 51%),
    radial-gradient(ellipse at 93% 79%, #31a97f2e 0%, transparent 49%),
    radial-gradient(ellipse at 54% 0%, #90e0bd12 0%, transparent 55%);
}

.nav, .nav.is-solid {
  background: rgba(10, 17, 13, .74);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: 0 10px 32px -24px #0009, inset 0 1px #ffffff0a;
}
.nav-mobile {
  background: rgba(12, 21, 16, .94);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.nav-links a::after { border-radius: 2px; }

.hero-veil {
  background:
    radial-gradient(ellipse at 90% 32%, #39ff8817, transparent 60%),
    linear-gradient(90deg, #0b110ed9 0%, #0b110e70 65%, #0b110e29 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%, #0b110e40 100%);
}
.hero-reel-play {
  background: #ffffff0c;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px #ffffff66, 0 8px 24px #0003;
}

.criterio-item, .retainer, .cita {
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 100% 0%, #39ff8812, transparent 65%),
    linear-gradient(135deg, #ffffff08, transparent 50%),
    #121c17b8;
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: inset 0 0 0 1px #e3f4ea26, inset 0 1px #ffffff0d,
    0 20px 48px -32px #000b;
}
.framework-lista li {
  border-radius: 12px;
  background: linear-gradient(140deg, #ffffff0b, #ffffff03);
  box-shadow: inset 0 0 0 1px #ffffff20;
}
.criterio-item::before, .retainer::before, .framework-lista li::before, .cita::before {
  background: linear-gradient(90deg, var(--accent), #a3f3c8);
}
.criterio-item:nth-child(2)::before, .cita:nth-child(2)::before {
  background: #eef3ef;
}
.criterio-item:nth-child(2) .criterio-num { color: var(--cream); }

.btn:not(.btn-ghost) {
  background: linear-gradient(120deg, #39ff88, #70f6aa);
  box-shadow: inset 0 1px #ffffff70, 0 8px 24px -16px #39ff8880;
}
.btn-ghost {
  color: var(--cream);
  background: #ffffff08;
  box-shadow: inset 0 0 0 1px #ffffff33;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--cream);
  color: var(--bg);
  box-shadow: 0 8px 26px -12px #ffffff4d;
}
.btn:not(.btn-ghost):hover, .btn:not(.btn-ghost):focus-visible {
  box-shadow: inset 0 1px #ffffff70, 0 10px 34px -8px #39ff8866;
}

.criterio-foto img, .still img, .proceso-clip video,
.proceso-foto img, .sobre-foto img, .reel-marco {
  border-radius: 12px;
}
.logos li { border-radius: 10px; }
.campo input, .campo textarea {
  border-radius: 12px;
  background: #ffffff08;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px #ffffff29, inset 0 1px #ffffff08;
}
.campo input:focus, .campo textarea:focus {
  background: #ffffff0c;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px #39ff8812;
}
.marca-corte {
  border-radius: 18px;
  background: linear-gradient(130deg, #ffffff06, #0000000d);
}
.footer { background: #00000021; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .nav.is-solid, .nav-mobile { background: #0d1711; }
  .criterio-item, .retainer, .cita { background: #14221a; }
}
@media print {
  body::before { display: none; }
  .nav, .criterio-item, .retainer, .cita, .campo input, .campo textarea {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}