/* Ajustes visuales para la composición editorial de Zone0. */
.hero-grid { display: none; }
.hero-waves { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-snow { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; perspective: 800px; transform: translate3d(0, var(--snow-scroll, 0px), 0); will-change: transform; }
.snow-particle { position: absolute; top: -12%; left: var(--x); width: var(--size); height: var(--size); opacity: var(--depth); transform-style: preserve-3d; filter: drop-shadow(0 0 5px rgba(155, 192, 255, .72)); animation: snow-descent var(--duration) linear var(--delay) infinite; }
.snow-particle .lucide { display: block; width: 100%; height: 100%; fill: rgba(126, 176, 222, .08); stroke: #cbe6ff; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, .5)) drop-shadow(-1px -1px 0 rgba(40, 82, 130, .62)) drop-shadow(0 0 5px rgba(134, 190, 255, .72)); }
@keyframes snow-descent { 0% { transform: translate3d(0, -7vh, -120px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(var(--depth)); } 52% { transform: translate3d(var(--mid-drift), 54vh, 40px) rotateX(210deg) rotateY(175deg) rotateZ(145deg) scale(var(--depth)); } 100% { transform: translate3d(var(--drift), 115vh, 130px) rotateX(440deg) rotateY(355deg) rotateZ(290deg) scale(var(--depth)); } }
.hero-waves::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 58% 47% at 68% 67%, transparent 25%, rgba(6, 9, 20, .3) 72%, rgba(6, 9, 20, .92) 100%); pointer-events: none; }
.hero-waves canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 12px rgba(110, 150, 255, .19)); }
.hero-waves svg { width: 115%; height: 73%; position: absolute; bottom: -5%; left: -7%; filter: drop-shadow(0 -22px 34px rgba(65, 109, 255, .22)) drop-shadow(0 21px 20px rgba(0, 0, 0, .42)); }
.wave { transform-origin: center; }
.wave-a { fill: rgba(27, 57, 151, .38); stroke: rgba(111, 153, 255, .25); stroke-width: 2; animation: wave-shift-a 15s ease-in-out infinite; }
.wave-b { fill: rgba(37, 87, 209, .3); stroke: rgba(130, 168, 255, .32); stroke-width: 2; animation: wave-shift-b 11s ease-in-out infinite; }
.wave-c { fill: rgba(93, 140, 255, .19); stroke: rgba(191, 213, 255, .42); stroke-width: 2; animation: wave-shift-c 8s ease-in-out infinite; }

.intro-section .section-top { border-bottom: 0; padding-bottom: 0; }
.intro-section .intro-layout { padding-top: clamp(34px, 5vw, 65px); }
.intro-section .principles { border-top: 0; gap: 15px; }
.intro-section .principle { border: 0; border-radius: 16px; padding: 25px 28px; position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(51, 81, 161, .11), rgba(10, 15, 30, .15)); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.intro-section .principle:first-child { padding-left: 28px; }
.intro-section .principle::before, .product-card::before, .capability::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 0; pointer-events: none; opacity: 0; transition: height .35s ease, opacity .35s ease; background: linear-gradient(180deg, rgba(100, 141, 255, .25), transparent); }
.intro-section .principle:hover, .intro-section .principle:focus-within { transform: translateY(-5px); background: linear-gradient(145deg, rgba(55, 91, 184, .22), rgba(10, 15, 30, .2)); box-shadow: 0 19px 38px rgba(0, 0, 0, .26); }
.intro-section .principle:hover::before, .intro-section .principle:focus-within::before, .product-card:hover::before, .product-card:focus-within::before, .capability:hover::before { height: 110px; opacity: 1; }
.intro-section .principle:active::before, .product-card:active::before, .capability:active::before { height: 110px; opacity: 1; }
.principle-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(140, 168, 255, .3); border-radius: 10px; color: #bcd0ff; position: absolute; top: 24px; right: 24px; transition: transform .3s ease, background .3s ease; }
.principle-icon svg, .capability-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.principle:hover .principle-icon { transform: translateY(-3px); background: rgba(85, 122, 240, .24); }

.product-card { position: relative; }
.product-card::before { z-index: 1; }
.product-card .product-info, .product-card .product-visual { position: relative; z-index: 2; }
.capability { grid-template-columns: 10% 42px 1fr 40px; position: relative; overflow: hidden; }
.capability > * { position: relative; z-index: 1; }
.capability-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #a9c2ff; border: 1px solid rgba(133, 162, 255, .27); border-radius: 9px; transition: transform .3s ease, background .3s ease; }
.capability:hover .capability-icon { transform: translateY(-3px); background: rgba(73, 113, 228, .22); }
.zone-card { width: min(86%, 760px); min-height: 0; margin: 24px auto 0; padding: 25px; }
.zone-card h3 { margin: 16px 0 10px; font-size: clamp(31px, 3.3vw, 46px); }
.zone-card-content > p:not(.eyebrow) { margin: 0; max-width: 455px; font-size: 14px; }
.zone-card-backdrop { background-size: auto 63%; background-position: 90% center; }
.zone-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(220px, .72fr); align-items: center; gap: 28px; background: linear-gradient(118deg, #0b1636, #101c44); }
.zone-card::after { width: 43%; height: 130%; right: -13%; top: -30%; }
.zone-card-image { height: 164px; position: relative; display: grid; place-items: center; padding: 0; overflow: hidden; border-radius: 14px; background: #edf1fa; box-shadow: 0 17px 36px rgba(0, 0, 0, .28); }
.zone-card-image img { display: block; width: 150%; height: 150%; object-fit: cover; object-position: center top; mix-blend-mode: multiply; }
.zone-card-image::after { content: 'Zone 3.0+1'; position: absolute; right: 12px; bottom: 10px; padding: 5px 8px; border-radius: 6px; color: #f6f8ff; background: rgba(13, 24, 62, .88); box-shadow: 0 5px 13px rgba(0, 0, 0, .3); font: 600 10px var(--mono); letter-spacing: .04em; }

.eyebrow { width: fit-content; gap: 9px; padding: 8px 13px; border: 1px solid rgba(178, 198, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #eef3ff; font: 500 10px var(--sans); letter-spacing: 0; text-transform: none; }
.eyebrow span { width: 13px; height: 13px; position: relative; display: block; background: none; }
.eyebrow span::before, .eyebrow span::after { content: ''; position: absolute; left: 6px; top: 0; width: 1px; height: 13px; background: #b8c8f0; transform: rotate(45deg); }
.eyebrow span::after { transform: rotate(-45deg); }
.eyebrow .lucide { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: #b8c8f0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Iconografía Lucide con volumen, brillo y respuesta táctil. */
.principle-icon { border-color: rgba(147, 180, 255, .42); background: linear-gradient(145deg, rgba(125, 160, 255, .34), rgba(35, 59, 135, .18) 52%, rgba(7, 13, 31, .68)); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .24), inset -4px -5px 11px rgba(1, 4, 15, .45), 0 9px 18px rgba(0, 0, 0, .3); }
.principle-icon .lucide { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.capability-icon { border-color: rgba(142, 175, 255, .42); color: #d4e1ff; background: linear-gradient(145deg, rgba(117, 154, 255, .36), rgba(30, 55, 136, .22) 54%, rgba(7, 12, 31, .82)); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .22), inset -4px -5px 10px rgba(1, 4, 15, .46), 0 8px 17px rgba(0, 0, 0, .3); }
.principle:hover .principle-icon, .capability:hover .capability-icon { box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .35), inset -4px -5px 11px rgba(1, 4, 15, .34), 0 13px 24px rgba(52, 96, 220, .34); }
.eyebrow .lucide { padding: 2px; border-radius: 5px; background: linear-gradient(145deg, rgba(125, 160, 255, .36), rgba(17, 31, 78, .55)); box-shadow: inset 1px 1px rgba(255, 255, 255, .2), 0 3px 7px rgba(0, 0, 0, .22); }

/* Navegación superior: subrayado progresivo para hover y sección activa. */
.nav-links a { position: relative; padding: 5px 0 8px; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: 1px; width: 100%; height: 1px; border-radius: 999px; background: linear-gradient(90deg, transparent, #91b1ff 20%, #d7e3ff 50%, #617fff 80%, transparent); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .35s ease; box-shadow: 0 0 9px rgba(112, 151, 255, .75); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.is-active::after { transform: scaleX(1); opacity: 1; }
.nav-links a.is-active { color: #eef3ff; }

.principle-icon, .capability-icon { isolation: isolate; }
.principle-icon::before, .principle-icon::after, .capability-icon::before, .capability-icon::after { content: ''; position: absolute; box-sizing: border-box; }
.icon-shield::before { width: 15px; height: 17px; border: 1.7px solid currentColor; border-radius: 8px 8px 10px 10px; clip-path: polygon(50% 0,100% 22%,88% 73%,50% 100%,12% 73%,0 22%); }
.icon-shield::after { width: 5px; height: 3px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translate(-1px, 1px) rotate(-45deg); }
.icon-bars::before { width: 17px; height: 15px; border-bottom: 2px solid currentColor; background: linear-gradient(to top, currentColor 0 2px, transparent 2px 4px, currentColor 4px 9px, transparent 9px 11px, currentColor 11px 15px); clip-path: polygon(0 100%,0 47%,22% 47%,22% 0,44% 0,44% 67%,67% 67%,67% 20%,89% 20%,89% 100%); }
.icon-target::before { width: 17px; height: 17px; border: 1.6px solid currentColor; border-radius: 50%; }
.icon-target::after { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.icon-code::before { width: 13px; height: 13px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateX(3px) rotate(45deg); }
.icon-code::after { width: 2px; height: 18px; background: currentColor; transform: rotate(25deg); box-shadow: 9px 0 0 currentColor; opacity: .8; }
.icon-spark::before { width: 15px; height: 15px; border: 1.7px solid currentColor; transform: rotate(45deg); border-radius: 4px; }
.icon-spark::after { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: -8px -8px 0 -1px currentColor, 8px 8px 0 -1px currentColor; }
.icon-grid::before { width: 17px; height: 17px; border: 1.5px solid currentColor; background: linear-gradient(90deg, transparent 44%, currentColor 45% 55%, transparent 56%), linear-gradient(transparent 44%, currentColor 45% 55%, transparent 56%); }
.principle-icon::before, .principle-icon::after, .capability-icon::before, .capability-icon::after { display: none; }
.principle-icon .lucide { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.capability-icon { padding: 7px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.button:focus-visible, .text-link:focus-visible, .circle-link:focus-visible, .nav-cta:focus-visible { outline: 2px solid #b8ccff; outline-offset: 4px; }

@keyframes wave-shift-a { 50% { transform: translateX(3%) translateY(-18px) scaleX(1.03); } }
@keyframes wave-shift-b { 50% { transform: translateX(-3%) translateY(13px) scaleX(1.04); } }
@keyframes wave-shift-c { 50% { transform: translateX(2%) translateY(-10px) scaleX(1.025); } }

@media (max-width: 760px) {
  .hero-waves svg { width: 230%; height: 52%; left: -65%; bottom: 0; }
  .intro-section .principles { display: grid; }
  .intro-section .principle, .intro-section .principle:first-child { padding: 23px; }
  .capability { grid-template-columns: 35px 34px 1fr 34px; gap: 10px; }
  .zone-card { min-height: 0; width: 92%; }
  .zone-card-backdrop { background-size: 62% auto; background-position: center 85%; }
  .zone-card { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .zone-card-image { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .wave { animation: none; }
  .intro-section .principle, .capability-icon, .principle-icon { transition: none; }
  .snow-particle { animation: none; transform: translate3d(0, 25vh, 0) scale(var(--depth)); }
}

/* Entradas fluidas al recorrer la página. */
.reveal { opacity: 0; transform: translate3d(0, 46px, 0) scale(.975); filter: blur(8px); transition: opacity .82s ease, transform .94s cubic-bezier(.16, 1, .3, 1), filter .72s ease; }
.reveal.in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
.section-top.reveal { transform: translate3d(-24px, 0, 0); }
.section-top.reveal.in { transform: translate3d(0, 0, 0); }
.product-card.reveal, .principle.reveal { transform: translate3d(0, 52px, 0) scale(.96); }
.product-card.reveal.in, .principle.reveal.in { transform: translate3d(0, 0, 0) scale(1); }
.capability.reveal { transform: translate3d(-34px, 0, 0); }
.capability.reveal.in { transform: translate3d(0, 0, 0); }
.hero-waves { transform: translate3d(0, var(--wave-scroll, 0px), 0); will-change: transform; transition: transform .1s linear; }
.hero-mark { transform: translate3d(0, var(--mark-scroll, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in, .section-top.reveal, .section-top.reveal.in, .product-card.reveal, .product-card.reveal.in, .principle.reveal, .principle.reveal.in, .capability.reveal, .capability.reveal.in { opacity: 1; filter: none; transform: none; transition: none; }
  .hero-waves, .hero-snow, .hero-mark { transform: none; transition: none; }
}