@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --negro: #050505;
    --negro-2: #080b0d;
    --negro-3: #0d1215;
    --verde: #a6dc2a;
    --cyan: #08bde8;
    --blanco: #ffffff;
    --gris: #a6adb3;
    --border: rgba(255,255,255,.10);
}

/* ENVAL 2026-10-08: tercera familia del menú Software 3D */
.navbar .mega-menu-wide .mega-grid.mega-grid-2:has(.creaform-menu-column){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.creaform-software-mark{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;
  border:1px solid rgba(0,218,232,.42);border-radius:10px;
  background:linear-gradient(145deg,rgba(0,214,227,.2),rgba(126,255,43,.12));
  color:#8bff31;font:800 9px/1 Montserrat,sans-serif;letter-spacing:.4px;
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
.creaform-software-mark img{
  width:30px;height:30px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 5px rgba(70,178,255,.22));
}
.creaform-menu-column .mega-item:hover .creaform-software-mark,
.creaform-menu-column .mega-item.active .creaform-software-mark{
  transform:scale(1.07);border-color:#87ff2f;
  box-shadow:0 0 16px rgba(122,255,43,.24),0 0 18px rgba(0,218,232,.14);
}
.creaform-menu-suite{
  display:block;margin-top:3px;color:#16b8c7;
  font-size:8px;font-weight:700;line-height:1.15;letter-spacing:.055em;
}
@media(max-width:767px){
  .navbar .mega-menu-wide .mega-grid.mega-grid-2:has(.creaform-menu-column){grid-template-columns:1fr}
  .creaform-menu-column{grid-column:auto}
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Montserrat", sans-serif;
    background: var(--negro);
    color: var(--blanco);
    overflow-x: hidden;
}

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

a {
    transition: .3s ease;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #050505;
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--verde), var(--cyan));
    border-radius: 10px;
}


/* PRELOADER */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030405;
    transition: opacity .6s ease, visibility .6s ease;
}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
}

/* ENVAL preloader identity */
.preloader-enval {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preloader-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.preloader-planet {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0, 229, 255, .18));
}

.preloader-brand-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.preloader-brand-copy strong {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 1px;
    color: transparent;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
}

.preloader-brand-copy small {
    margin-top: 6px;
    color: rgba(255,255,255,.78);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.45px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .preloader-brand { gap: 10px; }
    .preloader-planet { width: 58px; height: 58px; }
    .preloader-brand-copy strong { font-size: 34px; }
    .preloader-brand-copy small { font-size: 6px; letter-spacing: .85px; }
    .preloader-line { width: 155px; margin-top: 15px; }
}

.logo-fake {
    font-size: 48px;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
}

.preloader-line {
    position: relative;
    width: 180px;
    height: 2px;
    margin: 18px auto 0;
    overflow: hidden;
    background: rgba(255,255,255,.12);
}

.preloader-line::before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    animation: preloadLine 1.2s linear infinite;
}

@keyframes preloadLine {
    to {
        left: 100%;
    }
}


/* GENERAL */
.section-heading {
    margin-bottom: 60px;
}

.section-heading span,
.mini-title {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--verde);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
}

.section-heading h2,
.servicios h2,
.nosotros-home h2,
.soluciones-home h2,
.clientes h2,
.contact-cta h2 {
    font-size: clamp(38px, 5vw, 64px);
    line-height: .98;
    font-weight: 900;
}

.section-heading strong,
.servicios strong,
.nosotros-home strong,
.soluciones-home strong,
.clientes strong,
.contact-cta strong {
    color: var(--cyan);
}

.section-description {
    max-width: 700px;
    margin: 20px auto 0;
    color: var(--gris);
    line-height: 1.8;
}


/* NAVBAR */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 18px 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.84), transparent);
    transition: .35s ease;
}

.navbar.navbar-scrolled {
    position: fixed;
    padding: 10px 0;
    background: rgba(3,5,6,.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 35px rgba(0,0,0,.30);
}

.brand-custom,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-main {
    font-size: 32px;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
}

.brand-sub {
    display: flex;
    flex-direction: column;
    color: white;
    line-height: 1.05;
}

.brand-sub strong {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.brand-sub small {
    margin-top: 3px;
    color: var(--gris);
    font-size: 8px;
    letter-spacing: 1px;
}

.navbar-nav {
    gap: 14px;
}

.nav-link {
    position: relative;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: white !important;
    font-size: 10px;
    font-weight: 800;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    transition: .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-contacto {
    padding: 10px 16px !important;
    border: 1px solid rgba(255,255,255,.22);
}

.nav-contacto::after {
    display: none;
}

.nav-contacto:hover {
    color: #000 !important;
    border-color: transparent;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
}


/* HERO */
.hero {
    position: relative;
    min-height: 800px;
    overflow: hidden;
    background: #050505;
}

.hero-bg {
    position: absolute;
    inset: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.18) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.10) 55%, rgba(0,0,0,.68));
}

.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .10;
    background-image:
        linear-gradient(rgba(0,200,255,.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,200,255,.28) 1px, transparent 1px);
    background-size: 85px 85px;
    -webkit-mask-image: linear-gradient(90deg, black, transparent 75%);
    mask-image: linear-gradient(90deg, black, transparent 75%);
}

.hero-content {
    position: relative;
    z-index: 5;
}

.hero-small {
    display: inline-block;
    color: var(--verde);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.hero h1 {
    max-width: 820px;
    margin-top: 18px;
    font-size: clamp(50px, 7vw, 92px);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -4px;
}

.hero h1 span {
    color: transparent;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
}

.hero p {
    max-width: 680px;
    margin: 28px 0 35px;
    color: #d1d5d7;
    font-size: 16px;
    line-height: 1.85;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-main,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 16px 25px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-decoration: none;
}

.btn-main {
    color: #041013;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    box-shadow: 0 12px 35px rgba(0,190,230,.14);
}

.btn-main:hover {
    color: #000;
    transform: translateY(-4px);
}

.btn-outline {
    color: white;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.015);
}

.btn-outline:hover {
    color: var(--cyan);
    border-color: var(--cyan);
    transform: translateY(-4px);
}

.hero-stats {
    display: flex;
    margin-top: 55px;
}

.hero-stat {
    min-width: 145px;
    padding: 0 26px;
    border-right: 1px solid rgba(255,255,255,.18);
}

.hero-stat:first-child {
    padding-left: 0;
}

.hero-stat:last-child {
    border-right: none;
}

.hero-stat strong {
    display: block;
    font-size: 24px;
    font-weight: 900;
}

.hero-stat span {
    color: var(--gris);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.social-side {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-side a {
    display: flex;
    width: 42px;
    height: 42px;
    justify-content: center;
    align-items: center;
    color: white;
    border: 1px solid rgba(255,255,255,.17);
    text-decoration: none;
    background: rgba(0,0,0,.20);
}

.social-side a:hover {
    color: #000;
    border-color: transparent;
    background: var(--verde);
    transform: translateX(-5px);
}


/* EXPERIENCIA */
.experiencia {
    padding-top: 110px;
    background: #030405;
}

.imagenes-trabajo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    margin-top: 30px;
}

.trabajo {
    position: relative;
    height: 480px;
    overflow: hidden;
    transform: skewX(-5deg);
    border-right: 8px solid #030405;
}

.trabajo:first-child {
    margin-left: -45px;
}

.trabajo:last-child {
    margin-right: -45px;
}

.trabajo img {
    width: 115%;
    height: 100%;
    object-fit: cover;
    transform: skewX(5deg) scale(1.02);
    filter: saturate(.82) brightness(.72);
    transition: .8s ease;
}

.trabajo:hover img {
    transform: skewX(5deg) scale(1.12);
    filter: saturate(1) brightness(.88);
}

.trabajo-overlay {
    position: absolute;
    inset: 0;
    transform: skewX(5deg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px;
    background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.18) 70%);
}

.trabajo-overlay span {
    color: var(--verde);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.trabajo-overlay h3 {
    margin-top: 6px;
    font-size: 25px;
    font-weight: 900;
}

.trabajo-overlay p {
    margin: 0;
    color: var(--gris);
    font-size: 13px;
}


/* MARCAS */
.marcas {
    position: relative;
    z-index: 5;
    padding: 55px 0 65px;
    color: #061013;
    background: linear-gradient(105deg, #9dde29 0%, #58d846 35%, #0dbce7 100%);
    clip-path: polygon(0 0, 100% 8%, 100% 82%, 0 100%);
}

.marcas-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.marcas-title span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.marcas-title strong {
    margin-top: 5px;
    font-size: 18px;
    font-weight: 900;
}

.marcas .swiper-slide {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-fake {
    min-width: 150px;
    padding: 18px 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.16);
}


/* PRODUCTOS */
.productos {
    position: relative;
    padding: 155px 0 130px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #18262c, #060707 46%);
}

.productos::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image:
        linear-gradient(rgba(0,200,255,.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,200,255,.35) 1px, transparent 1px);
    background-size: 75px 75px;
}

.productos .container {
    position: relative;
    z-index: 3;
}

.productosSwiper {
    padding: 20px 10px 50px;
}

.producto-card {
    position: relative;
    min-height: 535px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    backdrop-filter: blur(10px);
    transition: .4s ease;
}

.producto-card:hover {
    transform: translateY(-12px);
    border-color: rgba(0,190,230,.55);
    box-shadow: 0 25px 65px rgba(0,0,0,.35);
}

.producto-card.destacado {
    border-color: rgba(160,220,40,.55);
}

.producto-badge {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
    padding: 7px 11px;
    color: #061013;
    font-size: 9px;
    font-weight: 900;
    background: var(--verde);
}

.producto-img {
    height: 300px;
    overflow: hidden;
    border-radius: 13px;
}

.producto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.68) saturate(.80);
    transition: .6s ease;
}

.producto-card:hover .producto-img img {
    transform: scale(1.08);
    filter: brightness(.82) saturate(1);
}

.producto-info {
    padding: 25px 6px 8px;
}

.producto-info span {
    color: var(--verde);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.producto-info h3 {
    margin: 8px 0 13px;
    font-size: 21px;
    font-weight: 900;
}

.producto-info p {
    min-height: 70px;
    color: var(--gris);
    font-size: 13px;
    line-height: 1.75;
}

.producto-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.swiper-button-next,
.swiper-button-prev {
    width: 48px !important;
    height: 48px !important;
    color: var(--verde) !important;
    border: 1px solid rgba(160,220,40,.4);
    border-radius: 50%;
    background: rgba(0,0,0,.60);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
}


/* SOLUCIONES */
.soluciones-home {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #050505;
}

.soluciones-home p {
    max-width: 700px;
    color: var(--gris);
    line-height: 1.8;
}

.solucion-home-card {
    position: relative;
    display: block;
    min-height: 390px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.10);
}

.solucion-home-card img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    filter: brightness(.58) saturate(.85);
    transition: .8s ease;
}

.solucion-home-card:hover img {
    transform: scale(1.08);
    filter: brightness(.72) saturate(1);
}

.solucion-home-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 22px;
    padding: 34px;
    background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.12) 70%);
}

.solucion-home-overlay > span {
    align-self: start;
    color: var(--verde);
    font-size: 11px;
    font-weight: 900;
}

.solucion-home-overlay small {
    color: var(--verde);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.solucion-home-overlay h3 {
    margin: 6px 0 8px;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
}

.solucion-home-overlay p {
    margin: 0;
    color: #c1c6c8;
    font-size: 12px;
}

.solucion-home-overlay > i {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    font-size: 20px;
}


/* SERVICIOS */
.servicios {
    position: relative;
    padding: 125px 0;
    background: linear-gradient(135deg, #0b0f11, #121b1f);
}

.servicios p {
    max-width: 560px;
    color: var(--gris);
    line-height: 1.8;
}

.servicio-card {
    position: relative;
    min-height: 260px;
    height: 100%;
    padding: 34px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    transition: .35s ease;
}

.servicio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,190,230,.35);
}

.service-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(255,255,255,.08);
    font-size: 46px;
    font-weight: 900;
}

.servicio-card > i {
    color: var(--cyan);
    font-size: 36px;
}

.servicio-card h3 {
    margin: 20px 0 12px;
    font-size: 18px;
    font-weight: 900;
}

.servicio-card p {
    margin: 0;
    color: var(--gris);
    font-size: 13px;
}


/* NOSOTROS */
.nosotros-home {
    padding: 130px 0;
    background: #050505;
}

.nosotros-home p {
    color: var(--gris);
    line-height: 1.9;
}

.nosotros-imagen {
    position: relative;
    padding-right: 40px;
    padding-bottom: 40px;
}

.nosotros-imagen::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 75%;
    height: 75%;
    border: 1px solid rgba(0,190,230,.42);
}

.nosotros-imagen img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 520px;
    object-fit: cover;
    filter: brightness(.68);
}

.nosotros-experience {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    width: 190px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
    color: #041013;
    background: linear-gradient(135deg, var(--verde), var(--cyan));
}

.nosotros-experience strong {
    font-size: 30px;
    font-weight: 900;
}

.nosotros-experience span {
    font-size: 10px;
    font-weight: 700;
}


/* CLIENTES */
.clientes {
    padding: 105px 0;
    background: linear-gradient(105deg, #006d96, #09bde7);
}

.clientes span {
    color: var(--verde);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
}

.clientes p {
    max-width: 360px;
    color: white;
    line-height: 1.7;
}

.cliente-logo {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #273238;
    font-size: 15px;
    font-weight: 900;
    border-radius: 13px;
    background: white;
}


/* CTA */
.contact-cta {
    padding: 100px 0;
    background:
        radial-gradient(circle at 50% 0, rgba(0,190,230,.08), transparent 45%),
        #080b0d;
}

.contact-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 55px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(120deg, rgba(160,220,40,.055), rgba(0,190,230,.055));
}

.contact-cta-box > div > span {
    color: var(--verde);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
}

.contact-cta-box p {
    margin: 15px 0 0;
    color: var(--gris);
}


/* FOOTER */
footer {
    position: relative;
    padding: 85px 0 25px;
    overflow: hidden;
    background: #020304;
}

.footer-bg {
    position: absolute;
    inset: 0;
    opacity: .16;
}

.footer-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.95));
}

.footer-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

footer .container {
    position: relative;
    z-index: 2;
}

footer p {
    color: #b7bdc0;
    font-size: 13px;
    line-height: 1.7;
}

footer h4 {
    margin-bottom: 25px;
    color: var(--verde);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.footer-social a {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    text-decoration: none;
}

.footer-social a:hover {
    color: #000;
    border-color: transparent;
    background: var(--cyan);
    transform: translateY(-4px);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    color: #aeb4b6;
    font-size: 12px;
    text-decoration: none;
}

.footer-links a:hover {
    padding-left: 5px;
    color: var(--cyan);
}

footer p i {
    margin-right: 7px;
    color: var(--cyan);
}

.copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 55px;
    padding-top: 20px;
    color: #626a6f;
    font-size: 10px;
    border-top: 1px solid rgba(255,255,255,.09);
}

.copyright div {
    display: flex;
    gap: 18px;
}

.copyright a {
    color: #626a6f;
    text-decoration: none;
}


/* WHATSAPP */
.whatsapp {
    position: fixed;
    z-index: 999;
    right: 25px;
    bottom: 25px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    text-decoration: none;
    border-radius: 50%;
    background: #25d366;
}


/* RESPONSIVE */
@media(max-width: 1200px) {
    .navbar-nav {
        gap: 10px;
    }

    .nav-link {
        font-size: 9px;
    }

    .hero h1 {
        font-size: 72px;
    }
}

@media(max-width: 991px) {
    .navbar {
        background: rgba(2,4,5,.94);
    }

    .navbar-collapse {
        margin-top: 12px;
        padding: 20px;
        background: rgba(3,5,6,.97);
        border: 1px solid rgba(255,255,255,.08);
    }

    .navbar-nav {
        align-items: flex-start !important;
        gap: 5px;
    }

    .nav-link {
        width: 100%;
        padding: 11px 0 !important;
    }

    .nav-contacto {
        margin-top: 8px;
        padding: 12px 15px !important;
        text-align: center;
    }

    .hero {
        min-height: 760px;
    }

    .hero h1 {
        font-size: 60px;
        letter-spacing: -2px;
    }

    .social-side {
        display: none;
    }

    .imagenes-trabajo {
        grid-template-columns: 1fr;
    }

    .trabajo {
        height: 420px;
        margin: 0 !important;
        transform: none;
        border: none;
        border-bottom: 6px solid #030405;
    }

    .trabajo img {
        width: 100%;
        transform: none;
    }

    .trabajo:hover img {
        transform: scale(1.08);
    }

    .trabajo-overlay {
        transform: none;
    }

    .marcas {
        clip-path: polygon(0 0, 100% 3%, 100% 95%, 0 100%);
    }

    .productos,
    .soluciones-home,
    .servicios,
    .nosotros-home {
        padding: 100px 0;
    }

    .nosotros-imagen img {
        height: 440px;
    }

    .contact-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .copyright {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media(max-width: 767px) {
    .section-heading h2,
    .servicios h2,
    .nosotros-home h2,
    .soluciones-home h2,
    .clientes h2,
    .contact-cta h2 {
        font-size: 40px;
    }

    .hero {
        min-height: 700px;
    }

    .hero-bg img {
        object-position: 60% center;
    }

    .hero-content {
        padding-top: 90px;
    }

    .hero-small {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .hero h1 {
        font-size: 46px;
        line-height: .98;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-main,
    .btn-outline {
        width: 100%;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .hero-stat {
        min-width: 0;
        padding: 0 10px;
        text-align: center;
    }

    .hero-stat:first-child {
        padding-left: 10px;
    }

    .hero-stat strong {
        font-size: 17px;
    }

    .hero-stat span {
        font-size: 8px;
    }

    .experiencia {
        padding-top: 90px;
    }

    .trabajo {
        height: 340px;
    }

    .marcas {
        padding: 50px 0;
    }

    .producto-card {
        min-height: auto;
    }

    .producto-img {
        height: 260px;
    }

    .solucion-home-card {
        min-height: 330px;
    }

    .solucion-home-card img {
        height: 330px;
    }

    .solucion-home-overlay {
        grid-template-columns: 1fr auto;
        padding: 25px;
    }

    .solucion-home-overlay > span {
        display: none;
    }

    .nosotros-imagen img {
        height: 350px;
    }

    .contact-cta {
        padding: 75px 0;
    }

    .contact-cta-box {
        padding: 35px 25px;
    }

    .copyright div {
        flex-direction: column;
        gap: 8px;
    }
}

@media(max-width: 480px) {
    .brand-main {
        font-size: 28px;
    }

    .brand-sub {
        display: none;
    }

    .hero {
        min-height: 670px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-stats {
        display: none;
    }

    .section-heading h2,
    .servicios h2,
    .nosotros-home h2,
    .soluciones-home h2,
    .clientes h2,
    .contact-cta h2 {
        font-size: 34px;
    }

    .trabajo {
        height: 300px;
    }

    .producto-img {
        height: 230px;
    }

    .solucion-home-overlay h3 {
        font-size: 22px;
    }

    .solucion-home-overlay p {
        display: none;
    }

    .nosotros-imagen {
        padding: 0;
    }

    .nosotros-imagen::before {
        display: none;
    }

    .whatsapp {
        right: 18px;
        bottom: 18px;
        width: 54px;
        height: 54px;
        font-size: 25px;
    }
}


/* ============================================================
   EFECTOS DINÁMICOS - MISMO DISEÑO, MÁS INTERACTIVO
============================================================ */

/* Barra de progreso superior */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    box-shadow: 0 0 14px rgba(8,189,232,.5);
}


/* ------------------------------------------------------------
   BOTONES REDONDEADOS + BRILLO + MOVIMIENTO
------------------------------------------------------------ */

.btn-main,
.btn-outline,
.producto-info a {
    border-radius: 999px;
}

.btn-main,
.btn-outline {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-fx::before {
    content: "";
    position: absolute;
    top: -130%;
    left: -45%;
    width: 42%;
    height: 360%;
    z-index: -1;
    transform: rotate(22deg);
    background: rgba(255,255,255,.34);
    transition: left .62s ease;
}

.btn-fx:hover::before {
    left: 125%;
}

.btn-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .3s ease;
}

.btn-main:hover::after {
    opacity: 1;
    animation: btnPulse 1.15s ease-out infinite;
}

@keyframes btnPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8,189,232,.30);
    }

    100% {
        box-shadow: 0 0 0 15px rgba(8,189,232,0);
    }
}

.btn-main:hover,
.btn-outline:hover {
    transform: translateY(-5px) scale(1.025);
}

.btn-main i,
.btn-outline i,
.producto-info a i {
    transition: transform .3s ease;
}

.btn-main:hover i,
.btn-outline:hover i,
.producto-info a:hover i {
    transform: translateX(5px);
}


/* ------------------------------------------------------------
   BRILLO DINÁMICO EN TARJETAS
------------------------------------------------------------ */

.interactive-card {
    position: relative;
    isolation: isolate;
}

.interactive-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(255,255,255,.13),
            transparent 31%
        );
    transition: opacity .3s ease;
}

.interactive-card:hover::after {
    opacity: 1;
}


/* ------------------------------------------------------------
   SOLUCIONES 3D - CHIPS / PILLS
------------------------------------------------------------ */

.solution-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.solution-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: #dce4e7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(10px);
    transition: transform .3s ease,
                border-color .3s ease,
                background .3s ease,
                color .3s ease;
}

.solution-pills span i {
    color: var(--cyan);
    font-size: 14px;
}

.solution-pills span:hover {
    transform: translateY(-5px) scale(1.025);
    color: white;
    border-color: rgba(8,189,232,.45);
    background: rgba(8,189,232,.08);
}


/* ------------------------------------------------------------
   EFECTO 3D SUAVE EN IMÁGENES
------------------------------------------------------------ */

.interactive-media {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .18s ease-out;
}

.media-shine {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            circle at var(--sx, 50%) var(--sy, 50%),
            rgba(255,255,255,.18),
            transparent 34%
        );
    transition: opacity .25s ease;
}

.interactive-media:hover .media-shine {
    opacity: 1;
}


/* ------------------------------------------------------------
   EXPERIENCIA - MÁS MOVIMIENTO SIN CAMBIAR EL DISEÑO
------------------------------------------------------------ */

.trabajo-overlay h3,
.trabajo-overlay span {
    transition: transform .35s ease;
}

.trabajo:hover .trabajo-overlay h3 {
    transform: translateX(7px);
}

.trabajo:hover .trabajo-overlay span {
    transform: translateX(5px);
}


/* ------------------------------------------------------------
   PRODUCTOS
------------------------------------------------------------ */

.producto-card {
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.producto-card:hover {
    transform: translateY(-13px) scale(1.012);
}

.producto-badge {
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.producto-info a {
    padding: 8px 12px;
    margin-left: -12px;
    transition: .3s ease;
}

.producto-info a:hover {
    padding-left: 16px;
    background: rgba(8,189,232,.07);
}


/* ------------------------------------------------------------
   SOLUCIONES HOME
------------------------------------------------------------ */

.solucion-home-card {
    border-radius: 18px;
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.solucion-home-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8,189,232,.45);
    box-shadow: 0 24px 55px rgba(0,0,0,.28);
}

.solucion-home-card img {
    border-radius: 18px;
}

.solucion-home-overlay {
    border-radius: 18px;
}

.solucion-home-overlay > i {
    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease,
        border-color .35s ease;
}

.solucion-home-card:hover .solucion-home-overlay > i {
    color: #031014;
    border-color: transparent;
    background: var(--verde);
    transform: rotate(45deg) scale(1.06);
}


/* ------------------------------------------------------------
   SERVICIOS
------------------------------------------------------------ */

.servicio-card {
    border-radius: 18px;
    overflow: hidden;
}

.servicio-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--verde), var(--cyan));
    transition: transform .35s ease;
}

.servicio-card:hover::after {
    transform: scaleX(1);
}

.servicio-card > i {
    transition: transform .35s ease;
}

.servicio-card:hover > i {
    transform: translateY(-4px) scale(1.08) rotate(-3deg);
}

.service-number {
    transition: opacity .35s ease, transform .35s ease;
}

.servicio-card:hover .service-number {
    opacity: .14;
    transform: translate(-4px, 4px) scale(1.04);
}


/* ------------------------------------------------------------
   NOSOTROS
------------------------------------------------------------ */

.nosotros-imagen {
    transition: transform .22s ease-out;
}

.nosotros-experience {
    border-radius: 18px 0 18px 0;
    box-shadow: 0 18px 35px rgba(0,0,0,.25);
    transition: transform .35s ease;
}

.nosotros-imagen:hover .nosotros-experience {
    transform: translate(-5px, -5px);
}


/* ------------------------------------------------------------
   CLIENTES
------------------------------------------------------------ */

.cliente-logo {
    border-radius: 18px;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cliente-logo:hover {
    transform: translateY(-7px) scale(1.025);
    box-shadow: 0 20px 40px rgba(0,0,0,.16);
}


/* ------------------------------------------------------------
   CTA FINAL
------------------------------------------------------------ */

.dynamic-cta {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.dynamic-cta::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -140px;
    top: -170px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(45px);
    background: rgba(8,189,232,.10);
    animation: ctaFloat 6s ease-in-out infinite alternate;
}

.dynamic-cta::after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    left: -130px;
    bottom: -150px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(50px);
    background: rgba(166,220,42,.07);
    animation: ctaFloat2 7s ease-in-out infinite alternate;
}

.dynamic-cta > * {
    position: relative;
    z-index: 2;
}

@keyframes ctaFloat {
    to {
        transform: translate(-35px, 28px) scale(1.08);
    }
}

@keyframes ctaFloat2 {
    to {
        transform: translate(30px, -20px) scale(1.1);
    }
}


/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */

.footer-social a {
    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}


/* ------------------------------------------------------------
   MOBILE / ACCESIBILIDAD
------------------------------------------------------------ */

@media(max-width: 767px) {

    .solution-pills {
        gap: 8px;
    }

    .solution-pills span {
        padding: 8px 12px;
        font-size: 8px;
    }

    .solucion-home-card,
    .solucion-home-card img,
    .solucion-home-overlay,
    .servicio-card,
    .cliente-logo,
    .dynamic-cta {
        border-radius: 16px;
    }

}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* Ajustes exclusivos para teléfonos: footer técnico y redes al llegar al pie */
@media(max-width:767px){
  .exp-command-footer{grid-template-columns:1fr!important}
  .exp-command-footer>div:not(.exp-footer-signal){display:none!important}
  .exp-command-footer .exp-footer-signal{grid-column:1!important;min-height:58px!important}
  body>.social-side{transition:opacity .25s ease,visibility .25s ease,transform .25s ease!important}
  body>.social-side.is-footer-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(16px)!important}
}

/* Inicio: desplazamiento ligero exclusivo para teléfonos.
   Conserva el diseño y las interacciones, pero evita repintados continuos. */
@media(max-width:767px){
  body.home-page:not(.about-particles-page) .enval-ambient-particles{
    position:absolute!important;
  }

  body.home-page:not(.about-particles-page) section *,
  body.home-page:not(.about-particles-page) section *::before,
  body.home-page:not(.about-particles-page) section *::after,
  body.home-page:not(.about-particles-page) footer *,
  body.home-page:not(.about-particles-page) footer *::before,
  body.home-page:not(.about-particles-page) footer *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }

  body.home-page:not(.about-particles-page) [data-aos]{
    transition-duration:.38s!important;
  }

  body.home-page:not(.about-particles-page) #mainNavbar,
  body.home-page:not(.about-particles-page) #mainNavbar.navbar-scrolled{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  body.home-page:not(.about-particles-page) .exp-command-live,
  body.home-page:not(.about-particles-page) .field-v2-status,
  body.home-page:not(.about-particles-page) .fieldcc-status,
  body.home-page:not(.about-particles-page) .fieldcc-hud{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}


/* ============================================================
   REDES SOCIALES LATERALES
   Agregado sin modificar el diseño general del INDEX
============================================================ */

.social-side {
    position: fixed;
    z-index: 950;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.social-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #fff;
    text-decoration: none;

    border-radius: 999px;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.social-icon {
    position: relative;
    z-index: 2;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    color: #fff;
    font-size: 18px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;

    background:
        rgba(3,7,9,.76);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.24);

    overflow: hidden;

    transition:
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.social-icon::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    opacity: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--cyan)
        );

    transition:
        opacity .3s ease;
}

.social-label {
    position: absolute;
    right: 24px;

    min-width: 128px;

    padding:
        12px 34px 12px 18px;

    color:
        #eef7f9;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        1.4px;

    text-align:
        left;

    white-space:
        nowrap;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        999px 0 0 999px;

    background:
        rgba(3,7,9,.88);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 32px rgba(0,0,0,.22);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(22px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        border-color .3s ease;
}

.social-item:hover {
    transform:
        translateX(-5px);
}

.social-item:hover .social-icon {
    color:
        #031014;

    border-color:
        transparent;

    transform:
        scale(1.07);

    box-shadow:
        0 0 26px
        rgba(8,189,232,.28);
}

.social-item:hover .social-icon::before {
    opacity:
        1;
}

.social-item:hover .social-label {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

    border-color:
        rgba(8,189,232,.32);
}


/* Movimiento sutil individual */

.social-item:nth-child(1) .social-icon {
    animation:
        socialFloat
        4s ease-in-out infinite;
}

.social-item:nth-child(2) .social-icon {
    animation:
        socialFloat
        4s ease-in-out .45s infinite;
}

.social-item:nth-child(3) .social-icon {
    animation:
        socialFloat
        4s ease-in-out .9s infinite;
}

.social-item:nth-child(4) .social-icon {
    animation:
        socialFloat
        4s ease-in-out 1.35s infinite;
}

.social-item:nth-child(5) .social-icon {
    animation:
        socialFloat
        4s ease-in-out 1.8s infinite;
}

@keyframes socialFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

}


/* En tablets/celulares no ocupa espacio lateral */

@media(max-width: 991px) {

    .social-side {
        display:
            none;
    }

}


/* Respeta usuarios que prefieren menos movimiento */

@media(prefers-reduced-motion: reduce) {

    .social-item .social-icon {
        animation:
            none !important;
    }

}


/* ============================================================
   MEGA MENÚ CRL
   Se agrega al diseño aprobado sin modificar el resto del INDEX
============================================================ */

/* Menú principal un poco más grande visualmente */
.navbar {
    overflow: visible;
}

.navbar .container {
    position: relative;
}

.mega-navbar {
    gap: 17px;
}

.mega-navbar > .nav-item {
    position: static;
}

.mega-navbar .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;

    min-height: 46px;

    font-size: 11px;
    letter-spacing: .25px;
}

.nav-icon {
    color: var(--cyan);
    font-size: 13px;
    opacity: .88;
    transition: color .3s ease, transform .3s ease;
}

.nav-chevron {
    margin-left: 1px;
    color: var(--verde);
    font-size: 9px;
    transition: transform .3s ease;
}

.has-mega-menu:hover > .mega-trigger .nav-chevron,
.has-mega-menu.mega-open > .mega-trigger .nav-chevron {
    transform: rotate(180deg);
}

.has-mega-menu:hover > .mega-trigger .nav-icon,
.has-mega-menu.mega-open > .mega-trigger .nav-icon {
    color: var(--verde);
    transform: translateY(-1px) scale(1.08);
}


/* ------------------------------------------------------------
   PANEL GENERAL
------------------------------------------------------------ */

.mega-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;

    z-index: 1200;

    padding: 24px;

    color: #fff;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(10,15,18,.97),
            rgba(3,6,8,.98)
        );

    box-shadow:
        0 28px 80px rgba(0,0,0,.48),
        0 0 0 1px rgba(8,189,232,.04) inset;

    backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 14px)
        scale(.985);

    transform-origin:
        top center;

    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .28s ease;
}

.mega-menu::before {
    content: "";

    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--verde),
            var(--cyan),
            transparent
        );

    opacity: .85;
}

.mega-menu::after {
    content: "";

    position: absolute;
    width: 280px;
    height: 280px;

    right: -110px;
    top: -140px;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(60px);

    background:
        rgba(8,189,232,.07);
}

.has-mega-menu:hover > .mega-menu,
.has-mega-menu:focus-within > .mega-menu,
.has-mega-menu.mega-open > .mega-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 4px)
        scale(1);

    pointer-events: auto;
}

.mega-menu-wide {
    width: min(1120px, calc(100vw - 42px));
}

.mega-menu-medium {
    width: min(790px, calc(100vw - 42px));
}

.mega-menu-small {
    width: min(470px, calc(100vw - 42px));
}


/* ------------------------------------------------------------
   CABECERA DEL MEGA MENÚ
------------------------------------------------------------ */

.mega-menu-head {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 20px;
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.mega-kicker {
    display: block;

    margin-bottom: 4px;

    color: var(--verde);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}

.mega-menu-head h3 {
    margin: 0;

    color: #fff;

    font-size: 20px;
    font-weight: 900;
}

.mega-menu-head p {
    max-width: 560px;

    margin: 7px 0 0;

    color: #919ca1;

    font-size: 10px;
    line-height: 1.65;
}

.mega-all-link {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;

    color: #061014;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .7px;

    text-decoration: none;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--cyan)
        );
}

.mega-all-link:hover {
    color: #000;

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(8,189,232,.16);
}


/* ------------------------------------------------------------
   COLUMNAS
------------------------------------------------------------ */

.mega-grid {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 15px;
}

.mega-grid-3 {
    grid-template-columns:
        repeat(3, 1fr);
}

.mega-grid-2 {
    grid-template-columns:
        repeat(2, 1fr);
}

.mega-column {
    min-width: 0;

    padding: 14px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 17px;

    background:
        rgba(255,255,255,.022);
}

.mega-column-title {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 11px;
    padding: 4px 4px 12px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.mega-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    color: #041014;

    font-size: 17px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--cyan)
        );

    box-shadow:
        0 10px 24px rgba(8,189,232,.12);
}

.mega-column-title small {
    display: block;

    margin-bottom: 1px;

    color: #718086;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.mega-column-title strong {
    color: #fff;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .5px;
}


/* ------------------------------------------------------------
   ITEMS
------------------------------------------------------------ */

.mega-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;

    margin-top: 4px;
    padding: 8px 10px;

    color: #fff;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 13px;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.mega-item > i {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    color: var(--cyan);

    font-size: 13px;

    border-radius: 9px;

    background:
        rgba(8,189,232,.08);

    transition:
        color .25s ease,
        transform .25s ease,
        background .25s ease;
}

.mega-item span {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.mega-item strong {
    overflow: hidden;

    color: #eaf0f2;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mega-item small {
    margin-top: 2px;

    overflow: hidden;

    color: #7f8a8f;

    font-size: 8px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mega-item em {
    margin-left: auto;

    padding: 4px 7px;

    color: #071014;

    font-size: 6px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .5px;

    border-radius: 999px;

    background: var(--verde);
}

.mega-item:hover {
    color: #fff;

    transform:
        translateX(4px);

    border-color:
        rgba(8,189,232,.18);

    background:
        linear-gradient(
            90deg,
            rgba(166,220,42,.07),
            rgba(8,189,232,.07)
        );
}

.mega-item:hover > i {
    color: #061014;

    transform:
        scale(1.08)
        rotate(-4deg);

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--cyan)
        );
}


/* ------------------------------------------------------------
   TARJETAS DE SOLUCIONES/SERVICIOS
------------------------------------------------------------ */

.mega-feature {
    position: relative;

    min-height: 78px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px;

    color: #fff;
    text-decoration: none;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;

    background:
        rgba(255,255,255,.023);

    overflow: hidden;

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.mega-feature::after {
    content: "";

    position: absolute;
    right: -30px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background:
        rgba(8,189,232,.06);

    filter: blur(18px);

    transition:
        transform .3s ease,
        background .3s ease;
}

.mega-feature > i {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    color: var(--cyan);
    font-size: 18px;

    border-radius: 13px;

    background:
        rgba(8,189,232,.075);

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.mega-feature span {
    display: flex;
    flex-direction: column;
}

.mega-feature strong {
    color: #fff;

    font-size: 10px;
    font-weight: 900;
}

.mega-feature small {
    margin-top: 3px;

    color: #7f8a8f;

    font-size: 8px;
}

.mega-feature:hover {
    color: #fff;

    transform:
        translateY(-4px);

    border-color:
        rgba(8,189,232,.24);

    background:
        linear-gradient(
            135deg,
            rgba(166,220,42,.055),
            rgba(8,189,232,.07)
        );

    box-shadow:
        0 16px 30px
        rgba(0,0,0,.16);
}

.mega-feature:hover > i {
    color: #061014;

    transform:
        scale(1.07)
        rotate(-4deg);

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--cyan)
        );
}

.mega-feature:hover::after {
    transform:
        scale(1.35);

    background:
        rgba(166,220,42,.08);
}


/* ============================================================
   RESPONSIVE MEGA MENÚ
============================================================ */

@media(max-width: 1250px) {

    .mega-navbar {
        gap: 11px;
    }

    .mega-navbar .nav-link {
        font-size: 10px;
    }

    .nav-icon {
        display: none;
    }

}


@media(max-width: 991px) {

    .mega-navbar {
        width: 100%;
        gap: 0;
    }

    .mega-navbar > .nav-item {
        width: 100%;
        position: relative;

        border-bottom:
            1px solid rgba(255,255,255,.055);
    }

    .mega-navbar .nav-link {
        min-height: 48px;

        display: flex;
        align-items: center;

        font-size: 11px;
    }

    .nav-icon {
        display: inline-block;
    }

    .nav-chevron {
        margin-left: auto;
        margin-right: 3px;

        font-size: 10px;
    }

    .mega-menu,
    .mega-menu-wide,
    .mega-menu-medium,
    .mega-menu-small {
        position: static;

        width: 100%;

        margin: 0;
        padding: 0 0 12px;

        border: none;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        backdrop-filter: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;

        display: none;
    }

    .mega-menu::before,
    .mega-menu::after {
        display: none;
    }

    .has-mega-menu.mega-open > .mega-menu {
        display: block;
    }

    .mega-menu-head {
        align-items: flex-start;

        margin: 2px 0 12px;
        padding: 13px;

        border: 1px solid rgba(255,255,255,.06);
        border-radius: 14px;

        background:
            rgba(255,255,255,.025);
    }

    .mega-menu-head h3 {
        font-size: 15px;
    }

    .mega-menu-head p {
        display: none;
    }

    .mega-all-link {
        padding: 8px 11px;
        font-size: 7px;
    }

    .mega-grid-3,
    .mega-grid-2 {
        grid-template-columns: 1fr;
    }

    .mega-column {
        padding: 10px;
    }

    .mega-item {
        min-height: 46px;
    }

    .mega-feature {
        min-height: 66px;
    }

}


@media(max-width: 575px) {

    .mega-menu-head {
        flex-direction: column;
        gap: 10px;
    }

    .mega-all-link {
        width: 100%;
        justify-content: center;
    }

    .mega-item strong,
    .mega-feature strong {
        white-space: normal;
    }

    .mega-item small,
    .mega-feature small {
        white-space: normal;
    }

}


/* ============================================================
   AJUSTE BOTÓN CONTACTO DEL MENÚ
   Más ovalado, moderno y coherente con los demás botones
============================================================ */

.nav-contacto {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;

    padding:
        10px 20px !important;

    border:
        1px solid rgba(255,255,255,.22);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015);

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.nav-contacto:hover {
    color:
        #031014 !important;

    border-color:
        transparent;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--cyan)
        );

    transform:
        translateY(-3px)
        scale(1.025);

    box-shadow:
        0 12px 28px
        rgba(8,189,232,.20);
}

.nav-contacto .nav-icon {
    color:
        var(--cyan);

    transition:
        color .3s ease,
        transform .3s ease;
}

.nav-contacto:hover .nav-icon {
    color:
        #031014;

    transform:
        translateX(-1px)
        scale(1.08);
}


/* En móvil conserva forma ovalada y buen ancho */

@media(max-width: 991px) {

    .nav-contacto {
        width:
            auto !important;

        align-self:
            flex-start;

        margin-top:
            10px;

        padding:
            11px 20px !important;

        border-radius:
            999px;

        text-align:
            center;
    }

}


/* ============================================================
   FIX DE NAVEGACIÓN MEGA MENÚ
   Evita que Software / Academia / Nosotros desaparezcan
   al mover el cursor desde el menú hacia el desplegable.
============================================================ */

@media(min-width: 992px) {

    /*
       El panel queda ligeramente superpuesto al área inferior
       de la barra de navegación, eliminando cualquier hueco
       donde se pudiera perder el :hover.
    */
    .mega-menu {
        top: calc(100% - 12px);

        transform:
            translate(-50%, 0)
            scale(.985);

        padding-top: 28px;
    }

    .has-mega-menu:hover > .mega-menu,
    .has-mega-menu:focus-within > .mega-menu,
    .has-mega-menu.mega-open > .mega-menu {
        transform:
            translate(-50%, 0)
            scale(1);
    }


    /*
       Zona invisible de seguridad entre el trigger y el panel.
       Esto amplía el corredor del mouse sin alterar el diseño.
    */
    .mega-menu .mega-hover-bridge {
        position: absolute;

        left: 0;
        right: 0;
        top: -18px;

        height: 24px;

        pointer-events: auto;

        background: transparent;
    }


    /*
       El propio LI conserva hover/focus mientras se navega
       dentro del panel desplegable.
    */
    .has-mega-menu {
        position: static;
    }

    .has-mega-menu:hover,
    .has-mega-menu:focus-within {
        z-index: 1250;
    }


    /*
       Los menús pequeños de Academia y Nosotros quedan centrados
       pero con suficiente zona activa para llegar con el mouse.
    */
    .mega-menu-small {
        min-width: 430px;
    }


    /*
       Evita que la animación de cierre sea demasiado rápida
       al cruzar del texto al panel.
    */
    .mega-menu {
        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .22s ease;
    }

}


/* En móvil se mantiene intacto el acordeón existente. */
@media(max-width: 991px) {

    .mega-menu .mega-hover-bridge {
        display: none;
    }

}


/* ============================================================
   FIX POSICIÓN DE ACADEMIA Y NOSOTROS
   Cada desplegable aparece debajo de SU propio botón.
============================================================ */

@media(min-width: 992px) {

    /*
       Los mega menús grandes continúan centrados como antes.
       Solo Academia y Nosotros cambian su punto de anclaje.
    */
    .mega-navbar > .mega-anchor-academia,
    .mega-navbar > .mega-anchor-nosotros {
        position: relative;
    }


    /* ACADEMIA: centrado justo debajo de ACADEMIA */
    .mega-anchor-academia > .mega-menu-small {
        left: 50%;
        right: auto;

        top: calc(100% - 8px);

        transform:
            translate(-50%, 0)
            scale(.985);

        transform-origin:
            top center;
    }

    .mega-anchor-academia:hover > .mega-menu-small,
    .mega-anchor-academia:focus-within > .mega-menu-small,
    .mega-anchor-academia.mega-open > .mega-menu-small {
        transform:
            translate(-50%, 0)
            scale(1);
    }


    /* NOSOTROS: alineado al borde derecho del botón NOSOTROS */
    .mega-anchor-nosotros > .mega-menu-small {
        left: auto;
        right: 0;

        top: calc(100% - 8px);

        transform:
            translate(0, 0)
            scale(.985);

        transform-origin:
            top right;
    }

    .mega-anchor-nosotros:hover > .mega-menu-small,
    .mega-anchor-nosotros:focus-within > .mega-menu-small,
    .mega-anchor-nosotros.mega-open > .mega-menu-small {
        transform:
            translate(0, 0)
            scale(1);
    }


    /*
       Mantener un corredor continuo entre el botón y su submenu.
       Esto evita que se cierre al bajar el cursor.
    */
    .mega-anchor-academia > .mega-menu-small .mega-hover-bridge,
    .mega-anchor-nosotros > .mega-menu-small .mega-hover-bridge {
        top: -20px;
        height: 28px;
    }

}


/* En móvil se mantiene exactamente el acordeón existente */
@media(max-width: 991px) {

    .mega-navbar > .mega-anchor-academia,
    .mega-navbar > .mega-anchor-nosotros {
        position: relative;
    }

}


/* ============================================================
   NUEVO HERO CON VIDEO
   Mantiene el diseño general del INDEX, cambia solo el banner.
============================================================ */

.hero-video-layout {
    position: relative;
    min-height: 820px;
    overflow: hidden;
    background: #030506;
}

.hero-video-layout .hero-dark-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 72% 42%, rgba(8,189,232,.10), transparent 30%),
        radial-gradient(circle at 26% 70%, rgba(166,220,42,.055), transparent 28%),
        linear-gradient(135deg, #020304 0%, #050708 58%, #071014 100%);
}

.hero-video-layout .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .08;

    background-image:
        linear-gradient(rgba(8,189,232,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,189,232,.22) 1px, transparent 1px);

    background-size: 78px 78px;

    -webkit-mask-image:
        linear-gradient(90deg, black, rgba(0,0,0,.8) 55%, transparent 100%);

    mask-image:
        linear-gradient(90deg, black, rgba(0,0,0,.8) 55%, transparent 100%);
}

.hero-orb {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(85px);
}

.hero-orb-a {
    width: 390px;
    height: 390px;
    right: 5%;
    top: 10%;
    background: rgba(8,189,232,.09);
    animation: heroOrbA 8s ease-in-out infinite alternate;
}

.hero-orb-b {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: -70px;
    background: rgba(166,220,42,.055);
    animation: heroOrbB 9s ease-in-out infinite alternate;
}

@keyframes heroOrbA {
    to {
        transform: translate(-28px, 24px) scale(1.08);
    }
}

@keyframes heroOrbB {
    to {
        transform: translate(38px, -20px) scale(1.10);
    }
}

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .18;

    background:
        radial-gradient(circle at 14% 25%, var(--verde) 0 1px, transparent 1.8px),
        radial-gradient(circle at 35% 76%, var(--cyan) 0 1px, transparent 1.8px),
        radial-gradient(circle at 69% 17%, var(--cyan) 0 1px, transparent 1.8px),
        radial-gradient(circle at 82% 68%, var(--verde) 0 1px, transparent 1.8px),
        radial-gradient(circle at 55% 52%, #fff 0 1px, transparent 1.8px);

    background-size:
        320px 320px,
        410px 410px,
        370px 370px,
        460px 460px,
        520px 520px;

    animation:
        particleDrift 18s linear infinite;
}

@keyframes particleDrift {
    to {
        background-position:
            70px 40px,
            -60px 80px,
            45px -55px,
            -80px -35px,
            100px 70px;
    }
}

.hero-video-layout .hero-content {
    position: relative;
    z-index: 5;
}

.hero-video-layout h1 {
    max-width: 720px;
}

.hero-video-layout p {
    max-width: 650px;
}


/* ------------------------------------------------------------
   VIDEO STAGE
------------------------------------------------------------ */

.hero-video-stage {
    position: relative;
    max-width: 690px;
    margin-left: auto;
    padding: 26px 22px 30px 0;
    transform-style: preserve-3d;
}

.hero-video-card {
    position: relative;
    z-index: 3;

    min-height: 440px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        24px;

    background:
        #081015;

    box-shadow:
        0 35px 90px rgba(0,0,0,.48),
        0 0 50px rgba(8,189,232,.07);

    isolation: isolate;
}

.hero-video-frame {
    position: absolute;
    z-index: 1;

    top: 52px;
    right: 0;
    bottom: 0;
    left: 32px;

    border:
        1px solid rgba(8,189,232,.36);

    border-radius:
        24px;
}

.hero-video-frame::before {
    content: "";

    position: absolute;

    left: -1px;
    top: 35px;

    width: 3px;
    height: 110px;

    border-radius: 99px;

    background:
        linear-gradient(
            var(--verde),
            var(--cyan)
        );

    box-shadow:
        0 0 20px rgba(8,189,232,.4);
}

.hero-video-glow {
    position: absolute;
    z-index: 0;

    width: 390px;
    height: 390px;

    right: -80px;
    top: 30px;

    border-radius: 50%;

    background:
        rgba(8,189,232,.12);

    filter:
        blur(70px);
}

.hero-video {
    width: 100%;
    height: 440px;

    display: block;

    object-fit: cover;
    object-position: center;

    background:
        #080b0d;

    filter:
        brightness(.82)
        saturate(.92)
        contrast(1.04);
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(2,5,6,.62),
            transparent 50%
        ),
        linear-gradient(
            90deg,
            rgba(2,5,6,.20),
            transparent 40%
        );
}


/* ------------------------------------------------------------
   VIDEO BADGES
------------------------------------------------------------ */

.hero-video-badge {
    position: absolute;
    z-index: 7;

    display: flex;
    align-items: center;
    gap: 11px;

    padding:
        12px 15px;

    border:
        1px solid rgba(255,255,255,.13);

    border-radius:
        14px;

    color:
        white;

    background:
        rgba(3,7,9,.74);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.28);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.hero-video-badge i {
    display: flex;
    width: 35px;
    height: 35px;

    align-items: center;
    justify-content: center;

    flex: 0 0 35px;

    color:
        var(--cyan);

    font-size:
        18px;

    border-radius:
        11px;

    background:
        rgba(8,189,232,.08);
}

.hero-video-badge span {
    display: flex;
    flex-direction: column;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .7px;
}

.hero-video-badge small {
    margin-bottom: 2px;

    color:
        var(--verde);

    font-size:
        7px;

    letter-spacing:
        1.4px;
}

.hero-video-badge-top {
    top: 22px;
    left: 20px;
}

.hero-video-badge-bottom {
    right: 20px;
    bottom: 22px;
}

.hero-video-card:hover .hero-video-badge-top {
    transform:
        translate(5px, 4px);
}

.hero-video-card:hover .hero-video-badge-bottom {
    transform:
        translate(-5px, -4px);
}


/* ------------------------------------------------------------
   SCAN LINE
------------------------------------------------------------ */

.hero-scan-line {
    position: absolute;
    z-index: 5;

    left: 0;
    right: 0;
    top: -20%;

    height: 2px;

    pointer-events: none;

    opacity: .0;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--verde),
            var(--cyan),
            transparent
        );

    box-shadow:
        0 0 18px rgba(8,189,232,.50);

    animation:
        heroScan 5s ease-in-out infinite;
}

@keyframes heroScan {

    0% {
        top: 8%;
        opacity: 0;
    }

    12% {
        opacity: .75;
    }

    55% {
        opacity: .75;
    }

    70%,
    100% {
        top: 86%;
        opacity: 0;
    }

}


/* ------------------------------------------------------------
   VIDEO CONTROL
------------------------------------------------------------ */

.hero-video-control {
    position: absolute;
    z-index: 12;

    right: 18px;
    top: 18px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        white;

    font-size:
        18px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        50%;

    background:
        rgba(3,7,9,.62);

    backdrop-filter:
        blur(10px);

    cursor:
        pointer;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.hero-video-control:hover {
    color:
        #031014;

    border-color:
        transparent;

    transform:
        scale(1.08);

    background:
        linear-gradient(
            135deg,
            var(--verde),
            var(--cyan)
        );
}


/* ------------------------------------------------------------
   CAPTION
------------------------------------------------------------ */

.hero-video-caption {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin:
        16px 0 0 30px;

    color:
        #869398;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}

.hero-live-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--verde);

    box-shadow:
        0 0 0 0 rgba(166,220,42,.45);

    animation:
        liveDot 1.8s infinite;
}

@keyframes liveDot {

    70% {
        box-shadow:
            0 0 0 8px rgba(166,220,42,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(166,220,42,0);
    }

}


/* ------------------------------------------------------------
   RESPONSIVE NUEVO HERO
------------------------------------------------------------ */

@media(max-width: 991px) {

    .hero-video-layout {
        min-height:
            auto;

        padding:
            120px 0 85px;
    }

    .hero-video-layout .min-vh-100 {
        min-height:
            auto !important;
    }

    .hero-video-stage {
        max-width:
            760px;

        margin:
            55px auto 0;
    }

}


@media(max-width: 767px) {

    .hero-video-layout {
        padding:
            105px 0 70px;
    }

    .hero-video-stage {
        padding:
            15px 0 20px;
    }

    .hero-video-frame {
        display:
            none;
    }

    .hero-video-card {
        min-height:
            330px;

        border-radius:
            18px;
    }

    .hero-video {
        height:
            330px;
    }

    .hero-video-badge {
        padding:
            9px 11px;
    }

    .hero-video-badge span {
        font-size:
            8px;
    }

    .hero-video-badge i {
        width:
            30px;
        height:
            30px;

        flex-basis:
            30px;

        font-size:
            15px;
    }

    .hero-video-caption {
        margin-left:
            8px;
    }

}


@media(max-width: 480px) {

    .hero-video-card {
        min-height:
            270px;
    }

    .hero-video {
        height:
            270px;
    }

    .hero-video-badge-bottom {
        display:
            none;
    }

    .hero-video-badge-top {
        left:
            12px;
        top:
            12px;
    }

    .hero-video-control {
        right:
            12px;
        top:
            12px;

        width:
            40px;
        height:
            40px;
    }

}

/* ============================================================
   CLIENTES - WORDMARKS / TAGS DEMO
   ============================================================ */
.clientesSwiper {
    padding: 10px 2px 24px;
}

.cliente-logo {
    position: relative;
    min-height: 156px;
    padding: 24px 20px 20px;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.42);
    background:
        radial-gradient(circle at 85% 10%, rgba(0,190,230,.08), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f6fafb 100%);
    box-shadow: 0 16px 32px rgba(0, 55, 75, .10);
}

.cliente-logo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--verde), var(--cyan));
}

.cliente-logo::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -42px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(0,190,230,.13);
    border-radius: 50%;
    z-index: -1;
}

.cliente-tag {
    position: absolute;
    top: 13px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    color: #0c170e !important;
    background: var(--verde);
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    box-shadow: 0 7px 15px rgba(95, 200, 0, .18);
}

.cliente-tag-cyan {
    color: #05202a !important;
    background: var(--cyan);
    box-shadow: 0 7px 15px rgba(0, 190, 230, .18);
}

.cliente-wordmark {
    margin-top: 18px;
    color: #18242a;
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.7px;
    text-transform: uppercase;
}

.cliente-wordmark-wide {
    letter-spacing: 2px;
}

.cliente-logo small {
    color: #77848a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.cliente-logo:hover {
    border-color: rgba(160,220,40,.65);
    box-shadow: 0 22px 45px rgba(0, 40, 55, .18);
}

.cliente-logo:hover .cliente-wordmark {
    background: linear-gradient(90deg, #28343a 10%, #006f93 58%, #77b800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media(max-width: 767px) {
    .cliente-logo {
        min-height: 140px;
        padding: 22px 14px 18px;
    }

    .cliente-wordmark {
        font-size: 22px;
    }
}


/* =========================================================
   ENVAL FOOTER MOTION
   ========================================================= */
.footer-prelude{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 40%, rgba(110,255,0,.12), transparent 28%),
    linear-gradient(135deg,#0a0f0b 0%,#0e1510 55%,#091009 100%);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(117,255,0,.16);
}
.footer-prelude::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(117,255,0,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,255,0,.035) 1px,transparent 1px);
  background-size:46px 46px;
  animation:footerGridMove 18s linear infinite;
  opacity:.8;
}
.footer-prelude-inner{
  position:relative;
  z-index:2;
  width:min(1280px,92%);
  margin:auto;
  padding:58px 0;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
}
.footer-prelude-kicker{
  color:#79ff00;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.footer-prelude h2{
  margin:10px 0 0;
  color:#fff;
  font-size:clamp(32px,4vw,58px);
  line-height:1;
  max-width:760px;
}
.footer-prelude-cta{
  min-width:260px;
  padding:18px 20px;
  border:1px solid rgba(121,255,0,.5);
  color:#fff;
  text-decoration:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
  transition:.25s ease;
}
.footer-prelude-cta b{
  color:#79ff00;
  font-size:22px;
  transition:.25s ease;
}
.footer-prelude-cta:hover{
  background:#79ff00;
  color:#081008;
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(121,255,0,.12);
}
.footer-prelude-cta:hover b{
  color:#081008;
  transform:translate(3px,-3px);
}

.enval-footer-motion{
  position:relative !important;
  overflow:hidden;
  isolation:isolate;
  --fx:50%;
  --fy:50%;
}
.enval-footer-motion::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at var(--fx) var(--fy), rgba(121,255,0,.07), transparent 24%);
}
.footer-motion-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.footer-motion-wrap{
  position:relative;
  z-index:2;
}
.footer-grid-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(121,255,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121,255,0,.025) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 80%,transparent);
  animation:footerGridMove 20s linear infinite;
}
.footer-orb{
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  filter:blur(26px);
  opacity:.13;
  background:#79ff00;
}
.footer-orb-a{
  left:-120px;
  top:10%;
  animation:footerOrbA 9s ease-in-out infinite alternate;
}
.footer-orb-b{
  right:-130px;
  bottom:-120px;
  background:#00e5ff;
  opacity:.08;
  animation:footerOrbB 11s ease-in-out infinite alternate;
}
.footer-scan-line{
  position:absolute;
  left:-20%;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,transparent 4%,#79ff00 35%,#d9ffbd 50%,#79ff00 65%,transparent 96%);
  box-shadow:0 0 18px rgba(121,255,0,.7),0 0 44px rgba(121,255,0,.28);
  animation:footerScan 7.5s ease-in-out infinite;
  opacity:.65;
}
.footer-reveal-item{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .65s ease var(--footer-delay,0ms),
    transform .65s ease var(--footer-delay,0ms),
    color .2s ease;
}
.footer-in-view .footer-reveal-item{
  opacity:1;
  transform:none;
}
.enval-footer-motion a{
  transition:color .2s ease, transform .2s ease;
}
.enval-footer-motion a:hover{
  transform:translateX(3px);
}
.enval-footer-motion a::after{
  transition:transform .2s ease;
}
@keyframes footerGridMove{
  from{background-position:0 0,0 0}
  to{background-position:54px 54px,54px 54px}
}
@keyframes footerOrbA{
  from{transform:translate3d(0,0,0) scale(.95)}
  to{transform:translate3d(70px,24px,0) scale(1.08)}
}
@keyframes footerOrbB{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-65px,-25px,0) scale(1.1)}
}
@keyframes footerScan{
  0%,18%{left:-20%;opacity:0}
  24%{opacity:.65}
  60%{left:118%;opacity:.65}
  68%,100%{left:118%;opacity:0}
}
@media(max-width:800px){
  .footer-prelude-inner{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-prelude-cta{
    min-width:0;
    width:100%;
  }
  .footer-orb{
    width:230px;
    height:230px;
  }
}
@media(prefers-reduced-motion:reduce){
  .footer-grid-lines,
  .footer-orb-a,
  .footer-orb-b,
  .footer-scan-line{
    animation:none !important;
  }
  .footer-reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   ENVAL FOOTER PRELUDE V2 - PRESENTACION PREMIUM
   ========================================================= */

.footer-prelude-v2{
  min-height:410px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 78% 46%, rgba(0,229,255,.065), transparent 25%),
    radial-gradient(circle at 16% 50%, rgba(121,255,0,.10), transparent 31%),
    linear-gradient(112deg,#070b08 0%,#0b120d 52%,#07100b 100%);
}

.footer-prelude-v2::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(121,255,0,.55),rgba(0,229,255,.28),transparent);
}

.footer-prelude-inner-v2{
  width:min(1280px,92%);
  padding:78px 0;
  align-items:center;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:80px;
}

.footer-prelude-copy{
  position:relative;
  z-index:3;
}

.prelude-status{
  display:flex;
  align-items:center;
  gap:10px;
  color:#b7c1b8;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:22px;
}

.prelude-status i{
  width:30px;
  height:1px;
  background:linear-gradient(90deg,#79ff00,rgba(121,255,0,.15));
}

.status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#79ff00;
  box-shadow:0 0 0 5px rgba(121,255,0,.08),0 0 18px rgba(121,255,0,.65);
  animation:preludeDot 2s ease-in-out infinite;
}

.footer-prelude-v2 h2{
  margin:0;
  max-width:850px;
  font-size:clamp(46px,5.2vw,78px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:800;
}

.footer-prelude-v2 h2 span{
  color:#79ff00;
  position:relative;
  display:inline-block;
}

.footer-prelude-v2 h2 span::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:-7px;
  height:2px;
  transform-origin:left;
  background:linear-gradient(90deg,#79ff00,rgba(0,229,255,.65),transparent);
  animation:preludeUnderline 3.5s ease-in-out infinite;
}

.footer-prelude-v2 p{
  max-width:690px;
  margin:27px 0 0;
  color:#929e95;
  font-size:15px;
  line-height:1.75;
}

.footer-prelude-action{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-left:34px;
  border-left:1px solid rgba(255,255,255,.10);
}

.action-label{
  color:#7d8980;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.7px;
  margin-bottom:14px;
}

.footer-prelude-cta-v2{
  min-width:0 !important;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  display:inline-flex !important;
  justify-content:flex-start !important;
  gap:14px !important;
  align-items:center;
  color:#f3f7f3 !important;
  font-size:14px;
  font-weight:700;
  position:relative;
  box-shadow:none !important;
}

.footer-prelude-cta-v2 span{
  position:relative;
  padding-bottom:6px;
}

.footer-prelude-cta-v2 span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:1px;
  background:#79ff00;
  transition:width .3s ease;
}

.footer-prelude-cta-v2 b{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(121,255,0,.48);
  display:grid;
  place-items:center;
  flex:0 0 38px;
  color:#79ff00 !important;
  font-size:17px !important;
  background:rgba(121,255,0,.025);
  transition:.3s ease !important;
}

.footer-prelude-cta-v2:hover{
  color:#79ff00 !important;
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

.footer-prelude-cta-v2:hover span::after{
  width:100%;
}

.footer-prelude-cta-v2:hover b{
  color:#071007 !important;
  background:#79ff00;
  transform:rotate(45deg) !important;
  box-shadow:0 0 24px rgba(121,255,0,.18);
}

.footer-prelude-action small{
  display:block;
  margin-top:15px;
  max-width:240px;
  color:#667169;
  font-size:11px;
  line-height:1.55;
}

.footer-prelude-tech{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

.prelude-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(121,255,0,.10);
}

.ring-one{
  width:460px;
  height:460px;
  right:-115px;
  top:50%;
  margin-top:-230px;
  box-shadow:
    0 0 0 65px rgba(121,255,0,.018),
    0 0 0 130px rgba(0,229,255,.008);
  animation:preludeRing 14s linear infinite;
}

.ring-two{
  width:180px;
  height:180px;
  right:25%;
  top:-90px;
  border-style:dashed;
  border-color:rgba(0,229,255,.10);
  animation:preludeRingReverse 18s linear infinite;
}

.prelude-crosshair{
  position:absolute;
  right:75px;
  top:50%;
  width:90px;
  height:90px;
  transform:translateY(-50%);
  opacity:.28;
}

.prelude-crosshair::before,
.prelude-crosshair::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,transparent,#79ff00,transparent);
}

.prelude-crosshair::before{
  width:100%;
  height:1px;
  top:50%;
  left:0;
}

.prelude-crosshair::after{
  height:100%;
  width:1px;
  left:50%;
  top:0;
  background:linear-gradient(transparent,#79ff00,transparent);
}

@keyframes preludeDot{
  50%{opacity:.42;box-shadow:0 0 0 8px rgba(121,255,0,.03),0 0 9px rgba(121,255,0,.3)}
}

@keyframes preludeUnderline{
  0%,100%{transform:scaleX(.42);opacity:.55}
  50%{transform:scaleX(1);opacity:1}
}

@keyframes preludeRing{
  to{transform:rotate(360deg)}
}

@keyframes preludeRingReverse{
  to{transform:rotate(-360deg)}
}

@media(max-width:900px){
  .footer-prelude-inner-v2{
    grid-template-columns:1fr;
    gap:45px;
    padding:64px 0;
  }
  .footer-prelude-action{
    padding-left:0;
    padding-top:25px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .prelude-crosshair{display:none}
}

@media(max-width:560px){
  .footer-prelude-v2 h2{
    font-size:clamp(39px,12vw,58px);
  }
  .footer-prelude-v2 p{
    font-size:13px;
  }
  .ring-one{
    width:300px;
    height:300px;
    right:-170px;
  }
}


/* =========================================================
   ENVAL FOOTER FINAL - VERDE + CELESTE EQUILIBRADO
   Mantiene la estructura Premium V2 y armoniza con el INDEX.
   ========================================================= */

.footer-prelude-v2{
  background:
    radial-gradient(circle at 78% 42%, rgba(0,190,235,.11), transparent 28%),
    radial-gradient(circle at 14% 54%, rgba(121,255,0,.095), transparent 31%),
    linear-gradient(112deg,#070b08 0%,#0b1210 52%,#071117 100%);
}

.footer-prelude-v2::after{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(121,255,0,.62),
    rgba(0,190,235,.62),
    transparent
  );
}

.prelude-status .services-tag-text,
.prelude-status span:last-child{
  color:#12bfe8;
}

.footer-prelude-v2 h2{
  color:#f7faf8;
}

/* "precisión" conserva verde ENVAL */
.footer-prelude-v2 h2 span{
  color:#79ff00;
}

/* "resultados." recibe el acento celeste sin alterar el HTML */
.footer-prelude-v2 h2 br + *{
  color:inherit;
}

.footer-prelude-v2 h2::after{
  content:"RESULTADOS.";
  display:inline;
  color:#11bde7;
  font:inherit;
  letter-spacing:inherit;
}

/* Ocultar visualmente la palabra resultados original si está como texto final:
   el JS siguiente la envuelve para aplicar el color de forma limpia. */
.footer-result-cyan{
  color:#11bde7 !important;
  text-shadow:0 0 28px rgba(0,190,235,.10);
}

.footer-prelude-v2 h2::after{
  content:none;
}

.footer-prelude-v2 h2 span::after{
  background:linear-gradient(90deg,#79ff00 0%,#79ff00 38%,#11bde7 78%,transparent);
}

.prelude-status i{
  background:linear-gradient(90deg,#79ff00,#11bde7);
}

.ring-two{
  border-color:rgba(17,189,231,.16);
}

.footer-prelude-cta-v2 b{
  border-color:rgba(17,189,231,.48);
  color:#11bde7 !important;
  box-shadow:0 0 18px rgba(17,189,231,.06);
}

.footer-prelude-cta-v2:hover{
  color:#11bde7 !important;
}

.footer-prelude-cta-v2:hover span::after{
  background:linear-gradient(90deg,#79ff00,#11bde7);
}

.footer-prelude-cta-v2:hover b{
  background:#11bde7;
  border-color:#11bde7;
  color:#061014 !important;
  box-shadow:0 0 25px rgba(17,189,231,.20);
}

.footer-prelude-action{
  border-left-color:rgba(17,189,231,.16);
}


/* =========================================================
   HERO - GLOW ALTERNATIVO "ENERGY EDGE"
   SOLO afecta la imagen/video principal derecha.
   ========================================================= */

.hero-video-stage{
  overflow:visible !important;
  isolation:isolate;
}

/* Eliminamos visualmente el halo original para que no genere caja */
.hero-video-glow{
  display:none !important;
}

/* El card conserva exactamente su tamaño y posición */
.hero-video-card{
  position:relative;
  isolation:isolate;
}

/* Halo difuso que nace exclusivamente alrededor de la tarjeta */
.hero-video-card::before{
  content:"";
  position:absolute;
  inset:-10px;
  z-index:-2;
  pointer-events:none;
  border-radius:32px;

  background:linear-gradient(
    120deg,
    rgba(122,255,0,.55),
    rgba(122,255,0,.04) 28%,
    rgba(0,210,255,.04) 56%,
    rgba(0,210,255,.62)
  );

  filter:blur(18px);
  opacity:.42;
  animation:envalEnergyBreath 3.8s ease-in-out infinite alternate;
}

/* Borde luminoso fino, como un equipo encendido */
.hero-video-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:8;
  pointer-events:none;
  border-radius:25px;
  padding:1px;

  background:linear-gradient(
    115deg,
    #8cff00 0%,
    rgba(140,255,0,.12) 25%,
    rgba(0,210,255,.08) 55%,
    #00d2ff 100%
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.82;
  filter:drop-shadow(0 0 4px rgba(0,210,255,.38));
}

/* Dos puntos de energía recorren discretamente el borde */
.hero-video-frame::before{
  content:"";
  position:absolute;
  z-index:12;
  width:7px;
  height:7px;
  border-radius:50%;
  top:-4px;
  left:12%;
  pointer-events:none;

  background:#9cff00;
  box-shadow:
    0 0 7px #9cff00,
    0 0 15px rgba(156,255,0,.65),
    0 0 28px rgba(156,255,0,.25);

  animation:envalEdgeTravelTop 5.2s ease-in-out infinite alternate;
}

.hero-video-frame::after{
  content:"";
  position:absolute;
  z-index:12;
  width:7px;
  height:7px;
  border-radius:50%;
  right:-4px;
  top:24%;
  pointer-events:none;

  background:#00d8ff;
  box-shadow:
    0 0 7px #00d8ff,
    0 0 16px rgba(0,216,255,.65),
    0 0 30px rgba(0,216,255,.25);

  animation:envalEdgeTravelSide 4.6s ease-in-out infinite alternate;
}

/* Mantener la forma redondeada uniforme */
.hero-video-card,
.hero-video-frame,
.hero-video,
.hero-video-card img,
.hero-video-card video{
  border-radius:24px !important;
}

/* Resplandor inferior muy fino, tipo plataforma tecnológica */
.hero-video-stage::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:13%;
  right:4%;
  bottom:-20px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(0,210,255,.23),
    rgba(122,255,0,.07) 45%,
    transparent 72%
  );
  filter:blur(15px);
  opacity:.7;
}

@keyframes envalEnergyBreath{
  from{
    opacity:.26;
    filter:blur(20px);
    transform:scale(.995);
  }
  to{
    opacity:.55;
    filter:blur(14px);
    transform:scale(1.006);
  }
}

@keyframes envalEdgeTravelTop{
  from{left:9%; opacity:.45}
  to{left:78%; opacity:1}
}

@keyframes envalEdgeTravelSide{
  from{top:18%; opacity:.45}
  to{top:72%; opacity:1}
}

@media(max-width:767px){
  .hero-video-card::before{
    inset:-7px;
    filter:blur(13px);
  }
  .hero-video-frame::before,
  .hero-video-frame::after{
    width:5px;
    height:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-video-card::before,
  .hero-video-frame::before,
  .hero-video-frame::after{
    animation:none !important;
  }
}


/* =========================================================
   ENVAL HERO - PROPUESTA TECNOLÓGICA DINÁMICA
   Solo modifica la parte inicial / hero.
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 34%, rgba(0,210,255,.08), transparent 28%),
    radial-gradient(circle at 58% 65%, rgba(128,255,0,.045), transparent 34%),
    linear-gradient(180deg,#050806,#07100b 72%,#060906);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background:
    linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to right,transparent 0%,black 30%,black 90%,transparent 100%);
  animation:heroTechGrid 22s linear infinite;
}

.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:5%;
  top:10%;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(0,210,255,.08);
  box-shadow:
    0 0 0 60px rgba(0,210,255,.015),
    0 0 0 120px rgba(128,255,0,.008);
  animation:heroOrbSpin 24s linear infinite;
}

@keyframes heroTechGrid{
  to{background-position:54px 54px,54px 54px}
}
@keyframes heroOrbSpin{
  to{transform:rotate(360deg)}
}

.hero-video-stage{
  position:relative;
  perspective:1200px;
}

.hero-video-card{
  position:relative;
  isolation:isolate;
  transform:
    perspective(1200px)
    rotateX(var(--hero-rx,0deg))
    rotateY(var(--hero-ry,0deg));
  transition:transform .18s ease;
  will-change:transform;
  border-radius:28px !important;
}

/* Energy edge refinado */
.hero-video-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:12;
  pointer-events:none;
  border-radius:30px;
  padding:1px;
  background:
    linear-gradient(
      120deg,
      rgba(137,255,0,.88) 0%,
      rgba(137,255,0,.18) 24%,
      rgba(0,210,255,.16) 55%,
      rgba(0,210,255,.92) 100%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  box-shadow:
    0 0 12px rgba(137,255,0,.12),
    0 0 24px rgba(0,210,255,.12);
}

/* Scan rail horizontal interno */
.scan-rail{
  position:absolute;
  left:2%;
  right:2%;
  top:var(--scan-y,50%);
  height:1px;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(137,255,0,.72) 28%,
      rgba(0,210,255,.95) 50%,
      rgba(137,255,0,.55) 72%,
      transparent
    );
  opacity:.35;
  box-shadow:0 0 12px rgba(0,210,255,.38);
  animation:scanRailMove 4.8s ease-in-out infinite;
}
@keyframes scanRailMove{
  0%,100%{top:18%;opacity:.18}
  50%{top:82%;opacity:.5}
}

/* HUD blocks */
.tech-hud{
  position:absolute;
  z-index:15;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(0,210,255,.22);
  border-radius:12px;
  background:rgba(5,11,8,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 25px rgba(0,0,0,.22);
  pointer-events:none;
}
.tech-hud b{
  display:block;
  color:#eefaf0;
  font-size:10px;
  letter-spacing:.08em;
}
.tech-hud small{
  display:block;
  margin-top:2px;
  color:#8a978c;
  font-size:7px;
  letter-spacing:.12em;
}
.hud-top-left{left:16px;top:18px}
.hud-bottom-right{right:18px;bottom:18px}
.hud-bottom-right b{color:#95ff21}
.hud-dot{
  width:8px;height:8px;border-radius:50%;
  background:#95ff21;
  box-shadow:0 0 0 5px rgba(149,255,33,.07),0 0 14px rgba(149,255,33,.5);
  animation:hudPulse 1.8s ease-in-out infinite;
}
@keyframes hudPulse{50%{opacity:.35}}

/* Corner guides */
.tech-corner{
  position:absolute;
  z-index:14;
  width:28px;height:28px;
  pointer-events:none;
  opacity:.65;
}
.tc-1{left:10px;top:10px;border-left:1px solid #95ff21;border-top:1px solid #95ff21}
.tc-2{right:10px;top:10px;border-right:1px solid #00d2ff;border-top:1px solid #00d2ff}
.tc-3{left:10px;bottom:10px;border-left:1px solid #95ff21;border-bottom:1px solid #95ff21}
.tc-4{right:10px;bottom:10px;border-right:1px solid #00d2ff;border-bottom:1px solid #00d2ff}

/* Hero copy más tecnológico sin cambiar texto */
.hero .eyebrow,
.hero .kicker{
  position:relative;
  padding-left:16px;
}
.hero .eyebrow::before,
.hero .kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;height:7px;
  border-radius:50%;
  background:#95ff21;
  transform:translateY(-50%);
  box-shadow:0 0 12px rgba(149,255,33,.6);
}

.hero h1{
  text-shadow:0 8px 36px rgba(0,0,0,.28);
}
.hero h1 strong,
.hero h1 span{
  filter:drop-shadow(0 0 12px rgba(0,210,255,.09));
}

/* Animated ribbon at bottom of hero */
.hero-tech-ribbon{
  position:absolute;
  left:0;right:0;bottom:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 20px;
  border-top:1px solid rgba(0,210,255,.10);
  background:rgba(5,10,7,.72);
  backdrop-filter:blur(8px);
  color:#95a29a;
  font-size:9px;
  letter-spacing:.14em;
  z-index:10;
}
.hero-tech-ribbon i{
  width:4px;height:4px;border-radius:50%;
  background:#95ff21;
  box-shadow:0 0 8px rgba(149,255,33,.5);
}

@media(max-width:991px){
  .hero::after{display:none}
  .hero-video-card{transform:none !important}
  .tech-hud{display:none}
  .scan-rail{display:none}
  .hero-tech-ribbon{
    position:relative;
    flex-wrap:wrap;
    padding:12px 16px;
    gap:10px 14px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.scan-rail,.hud-dot{animation:none !important}
  .hero-video-card{transition:none !important}
}


/* =========================================================
   HERO V2 - INSPIRADO EN LA APERTURA DE /software/
   Sin HUDs, sin marco rígido, sin botones flotantes de medición.
   ========================================================= */

/* Fondo más limpio y editorial, con luz técnica ambiental */
.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 73% 28%, rgba(0,202,235,.095), transparent 26%),
    radial-gradient(circle at 54% 64%, rgba(139,255,0,.045), transparent 30%),
    linear-gradient(180deg,#050806 0%,#07100d 62%,#050806 100%) !important;
}

/* Desactivar elementos añadidos por la propuesta anterior */
.tech-hud,
.tech-corner,
.scan-rail,
.hero-tech-ribbon{
  display:none !important;
}

/* Sin aro circular grande ni bordes técnicos duros */
.hero::after{
  display:none !important;
}

/* Stage flotante, sin tarjeta/marco visible */
.hero-video-stage{
  position:relative;
  overflow:visible !important;
  perspective:none !important;
  padding:20px 0 26px;
}

.hero-video-frame,
.hero-video-glow,
.media-shine{
  display:none !important;
}

/* Imagen/video sin borde exterior: flota sobre el fondo */
.hero-video-card{
  position:relative;
  overflow:hidden !important;
  border:0 !important;
  outline:0 !important;
  border-radius:28px !important;
  background:transparent !important;
  box-shadow:
    0 30px 85px rgba(0,0,0,.36),
    0 0 80px rgba(0,200,235,.055) !important;
  transform:none !important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease !important;
  clip-path:inset(0 round 28px);
}

.hero-video-card::before,
.hero-video-card::after{
  content:none !important;
  display:none !important;
}

.hero-video-card:hover{
  transform:translateY(-5px) scale(1.008) !important;
  box-shadow:
    0 38px 95px rgba(0,0,0,.42),
    0 0 95px rgba(0,200,235,.075) !important;
}

.hero-video,
.hero-video-card img,
.hero-video-card video{
  border-radius:28px !important;
  filter:saturate(.96) contrast(1.02) !important;
}

/* Overlay cinematográfico muy sutil */
.hero-video-overlay{
  background:
    linear-gradient(110deg, rgba(0,0,0,.16), transparent 38%),
    linear-gradient(180deg, transparent 64%, rgba(0,0,0,.24)) !important;
  opacity:1 !important;
}

/* Mantener control de video, pero mucho más limpio */
.hero-video-control{
  width:44px !important;
  height:44px !important;
  right:18px !important;
  top:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(5,10,8,.55) !important;
  backdrop-filter:blur(8px);
  box-shadow:none !important;
}
.hero-video-control:hover{
  border-color:rgba(0,205,235,.38) !important;
  background:rgba(6,16,15,.78) !important;
  transform:scale(1.05) !important;
}

/* Los badges originales pasan a ser discretos y planos */
.hero-video-badge{
  border:0 !important;
  box-shadow:none !important;
  background:rgba(5,11,8,.62) !important;
  backdrop-filter:blur(10px);
}
.hero-video-badge-top{
  left:18px !important;
  top:18px !important;
}
.hero-video-badge-bottom{
  right:18px !important;
  bottom:18px !important;
}

/* Quitar línea de escaneo antigua para que el hero respire */
.hero-scan-line{
  display:none !important;
}

/* Caption se vuelve una firma discreta */
.hero-video-caption{
  margin-top:13px !important;
  padding-left:4px !important;
  opacity:.72;
}

/* Datos flotantes estilo software: sin contenedor, sin bordes */
.software-hero-data{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}

.data-chip{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:7px 10px;
  border-radius:7px;
  color:#eafff8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  background:rgba(8,18,17,.64);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  animation:dataFloat 4.8s ease-in-out infinite alternate;
}
.data-a{right:18%;top:10%;color:#9cff43}
.data-b{right:-2%;top:39%;color:#33d8f3;animation-delay:.7s}
.data-c{right:30%;top:30%;color:#ffe76a;animation-delay:1.2s}

.data-axis{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#f5f7f5;
  font-size:14px;
  font-weight:900;
  letter-spacing:.05em;
  opacity:.82;
}
.data-axis small{
  color:#7e8d83;
  font-size:7px;
  letter-spacing:.18em;
  font-weight:700;
}
.axis-a{left:-3%;bottom:22%}
.axis-b{left:11%;bottom:-1%}
.axis-c{right:0;bottom:4%}

@keyframes dataFloat{
  from{transform:translateY(-3px)}
  to{transform:translateY(7px)}
}

/* Luz ambiental: no es borde, solo profundidad detrás del visual */
.hero-video-stage::before{
  content:"";
  position:absolute;
  width:88%;
  height:76%;
  left:10%;
  top:12%;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 72% 35%, rgba(0,205,235,.15), transparent 58%),
    radial-gradient(ellipse at 28% 68%, rgba(139,255,0,.07), transparent 54%);
  filter:blur(30px);
  opacity:.95;
}

/* Título: más parecido al lenguaje de software, limpio y de alto contraste */
.hero-video-layout h1{
  max-width:720px;
  letter-spacing:-.045em;
}

@media(max-width:991px){
  .software-hero-data{display:none}
  .hero-video-stage{padding-top:12px}
  .hero-video-card:hover{transform:none !important}
}

@media(prefers-reduced-motion:reduce){
  .data-chip{animation:none !important}
  .hero-video-card{transition:none !important}
}


/* =========================================================
   HERO SOFTWARE - REFINADO
   - Se retiran chips numéricos y 3D/INSPECCIÓN inferior.
   - Movimiento solo en las 2 etiquetas principales al hover.
   ========================================================= */

/* Top-left badge: Tecnología / Inspección 3D */
.hero-video-card .tech-badge,
.hero-video-card .hero-tech-badge,
.hero-video-card [class*="technology-badge"],
.hero-video-card [class*="tech-label"]{
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
  will-change:transform;
}

/* Bottom-right badge: Precisión / Metrología */
.hero-video-card .precision-badge,
.hero-video-card .metrology-badge,
.hero-video-card [class*="precision-label"],
.hero-video-card [class*="metrology-label"]{
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
  will-change:transform;
}

@media (hover:hover) and (pointer:fine){
  .hero-video-card:hover .tech-badge,
  .hero-video-card:hover .hero-tech-badge,
  .hero-video-card:hover [class*="technology-badge"],
  .hero-video-card:hover [class*="tech-label"]{
    transform:translate(8px,-6px) scale(1.035) !important;
    border-color:rgba(137,255,0,.42) !important;
    box-shadow:
      0 12px 30px rgba(0,0,0,.30),
      0 0 20px rgba(137,255,0,.08) !important;
  }

  .hero-video-card:hover .precision-badge,
  .hero-video-card:hover .metrology-badge,
  .hero-video-card:hover [class*="precision-label"],
  .hero-video-card:hover [class*="metrology-label"]{
    transform:translate(-8px,-6px) scale(1.035) !important;
    border-color:rgba(0,210,255,.42) !important;
    box-shadow:
      0 12px 30px rgba(0,0,0,.30),
      0 0 20px rgba(0,210,255,.10) !important;
  }
}

/* Animación breve del icono interno si existe */
@media (hover:hover) and (pointer:fine){
  .hero-video-card:hover .tech-badge i,
  .hero-video-card:hover .tech-badge svg,
  .hero-video-card:hover .hero-tech-badge i,
  .hero-video-card:hover .hero-tech-badge svg,
  .hero-video-card:hover .precision-badge i,
  .hero-video-card:hover .precision-badge svg,
  .hero-video-card:hover .metrology-badge i,
  .hero-video-card:hover .metrology-badge svg{
    animation:envalBadgeIconPulse .9s ease both;
  }
}

@keyframes envalBadgeIconPulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.12) rotate(-4deg)}
  100%{transform:scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .hero-video-card .tech-badge,
  .hero-video-card .hero-tech-badge,
  .hero-video-card .precision-badge,
  .hero-video-card .metrology-badge{
    transition:none !important;
  }
}


/* =========================================================
   HERO - ENERGY BORDER V2 (WRAPPER REAL)
   Borde dinámico visible alrededor de la imagen.
   No altera el contenido ni overlays internos.
   ========================================================= */
.hero-energy-wrap{
  position:relative;
  width:100%;
  padding:2px;
  border-radius:31px;
  background:linear-gradient(115deg,#9cff00 0%,#5de66c 28%,#24d8b7 54%,#00d2ff 100%);
  box-shadow:
    0 0 14px rgba(156,255,0,.14),
    0 0 24px rgba(0,210,255,.14);
  isolation:isolate;
  transition:box-shadow .35s ease, transform .35s ease;
}

.hero-energy-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:33px;
  padding:2px;
  pointer-events:none;
  background:conic-gradient(
    from var(--enval-border-angle,0deg),
    transparent 0deg,
    transparent 250deg,
    rgba(156,255,0,.18) 278deg,
    #9cff00 302deg,
    #00d2ff 330deg,
    rgba(0,210,255,.18) 348deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(0,210,255,.28));
  animation:envalBorderTravelV2 5.5s linear infinite;
  z-index:3;
}

.hero-energy-wrap::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:38px;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(156,255,0,.10),transparent 35%,transparent 62%,rgba(0,210,255,.12));
  filter:blur(10px);
  opacity:.55;
  z-index:-1;
  animation:envalBorderBreathV2 3.2s ease-in-out infinite alternate;
}

.hero-energy-wrap > .hero-video-card{
  margin:0 !important;
  width:100%;
  border-radius:28px !important;
}

@media (hover:hover) and (pointer:fine){
  .hero-energy-wrap:hover{
    box-shadow:
      0 0 18px rgba(156,255,0,.24),
      0 0 34px rgba(0,210,255,.24);
  }
  .hero-energy-wrap:hover::before{
    animation-duration:2.8s;
  }
}

@property --enval-border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
@keyframes envalBorderTravelV2{to{--enval-border-angle:360deg}}
@keyframes envalBorderBreathV2{
  from{opacity:.36;transform:scale(.997)}
  to{opacity:.68;transform:scale(1.005)}
}

@media(max-width:991px){
  .hero-energy-wrap{padding:1.5px;border-radius:27px}
  .hero-energy-wrap::before{border-radius:29px;animation:none;opacity:.65}
  .hero-energy-wrap::after{border-radius:32px}
}
@media(prefers-reduced-motion:reduce){
  .hero-energy-wrap::before,.hero-energy-wrap::after{animation:none!important}
}


/* =========================================================
   HERO - DUAL ARC BORDER
   Diseño alternativo parecido al Energy Border:
   segmentos luminosos en esquinas + pulso tecnológico.
   ========================================================= */

/* Mantener wrapper visible */
.hero-energy-wrap{
  position:relative !important;
  border-radius:32px !important;
  overflow:visible !important;
}

/* Ocultar el borde completo de la propuesta anterior */
.hero-energy-wrap::before,
.hero-energy-wrap::after{
  display:none !important;
}

/* Capa principal: borde tenue completo */
.hero-energy-wrap{
  border:1px solid rgba(0,210,255,.16) !important;
  box-shadow:
    0 0 0 1px rgba(130,255,0,.035),
    0 14px 38px rgba(0,0,0,.18) !important;
}

/* Nuevo contorno fino interior */
.hero-energy-wrap .energy-alt-border{
  position:absolute;
  inset:-2px;
  border-radius:34px;
  pointer-events:none;
  z-index:25;
  padding:1px;

  background:
    linear-gradient(
      120deg,
      rgba(145,255,0,.72) 0%,
      rgba(145,255,0,.10) 23%,
      rgba(0,210,255,.06) 56%,
      rgba(0,210,255,.74) 100%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:.44;
}

/* Arco verde: esquina superior izquierda */
.hero-energy-wrap .energy-arc-green{
  position:absolute;
  width:42%;
  height:36%;
  left:-7px;
  top:-7px;
  z-index:26;
  pointer-events:none;
  border-radius:36px 0 0 0;
  border-top:2px solid #95ff00;
  border-left:2px solid #95ff00;

  filter:
    drop-shadow(0 0 4px rgba(149,255,0,.65))
    drop-shadow(0 0 10px rgba(149,255,0,.22));

  animation:energyArcGreen 3s ease-in-out infinite alternate;
}

/* Arco cyan: esquina inferior derecha */
.hero-energy-wrap .energy-arc-cyan{
  position:absolute;
  width:46%;
  height:40%;
  right:-7px;
  bottom:-7px;
  z-index:26;
  pointer-events:none;
  border-radius:0 0 36px 0;
  border-right:2px solid #00d2ff;
  border-bottom:2px solid #00d2ff;

  filter:
    drop-shadow(0 0 4px rgba(0,210,255,.72))
    drop-shadow(0 0 12px rgba(0,210,255,.25));

  animation:energyArcCyan 3.4s ease-in-out infinite alternate;
}

/* Pequeños nodos luminosos */
.hero-energy-wrap .energy-node{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  z-index:28;
  pointer-events:none;
}

.hero-energy-wrap .energy-node-green{
  top:-5px;
  left:30%;
  background:#95ff00;
  box-shadow:
    0 0 7px #95ff00,
    0 0 16px rgba(149,255,0,.50);
  animation:nodeGreenMove 5s ease-in-out infinite alternate;
}

.hero-energy-wrap .energy-node-cyan{
  right:-5px;
  bottom:28%;
  background:#00d2ff;
  box-shadow:
    0 0 7px #00d2ff,
    0 0 17px rgba(0,210,255,.55);
  animation:nodeCyanMove 4.7s ease-in-out infinite alternate;
}

/* Hover: un poco más de energía */
.hero-energy-wrap:hover .energy-arc-green{
  filter:
    drop-shadow(0 0 6px rgba(149,255,0,.85))
    drop-shadow(0 0 15px rgba(149,255,0,.34));
}

.hero-energy-wrap:hover .energy-arc-cyan{
  filter:
    drop-shadow(0 0 6px rgba(0,210,255,.88))
    drop-shadow(0 0 17px rgba(0,210,255,.36));
}

.hero-energy-wrap:hover .energy-alt-border{
  opacity:.72;
}

/* Sin láminas ni reflejos sobre la imagen */
.hero-energy-wrap [class*="shine"],
.hero-energy-wrap [class*="glare"],
.hero-energy-wrap [class*="glass"],
.hero-energy-wrap [class*="aura"]{
  display:none !important;
}

@keyframes energyArcGreen{
  from{opacity:.48}
  to{opacity:1}
}
@keyframes energyArcCyan{
  from{opacity:.52}
  to{opacity:1}
}
@keyframes nodeGreenMove{
  from{left:10%;opacity:.45}
  to{left:72%;opacity:1}
}
@keyframes nodeCyanMove{
  from{bottom:14%;opacity:.45}
  to{bottom:70%;opacity:1}
}

@media(max-width:991px){
  .hero-energy-wrap .energy-node{
    display:none !important;
  }
  .hero-energy-wrap .energy-arc-green,
  .hero-energy-wrap .energy-arc-cyan{
    animation:none !important;
    opacity:.72;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-energy-wrap .energy-arc-green,
  .hero-energy-wrap .energy-arc-cyan,
  .hero-energy-wrap .energy-node{
    animation:none !important;
  }
}


/* =========================================================
   NAVBAR - FIX LINEA BLANCA AL HACER SCROLL
   Mantiene el diseño; evita borde/sombra blanca intermitente.
   ========================================================= */

#mainNavbar,
#mainNavbar.scrolled,
#mainNavbar.navbar-scrolled,
#mainNavbar.sticky,
.navbar,
.navbar.scrolled,
.navbar.navbar-scrolled,
.navbar.sticky{
  border-bottom:1px solid rgba(0,210,255,.10) !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Neutralizar líneas generadas por pseudo-elementos */
#mainNavbar::before,
#mainNavbar::after,
.navbar::before,
.navbar::after{
  border:0 !important;
  box-shadow:none !important;
}

/* Evitar flashes claros por backdrop/border durante transición */
#mainNavbar{
  background-color:rgba(4,8,7,.96) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:
    background-color .25s ease,
    border-color .25s ease !important;
}

/* Mantener línea inferior siempre oscura/cyan, nunca blanca */
#mainNavbar.scrolled,
#mainNavbar.navbar-scrolled,
#mainNavbar.sticky{
  border-bottom-color:rgba(0,210,255,.12) !important;
}

/* Evitar hairline blanco por transform/compositing */
#mainNavbar,
#mainNavbar .container,
#menuPrincipal{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Si el header aplica un borde propio al hacer scroll, neutralizarlo */
header,
header.scrolled,
header.sticky{
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}


/* =========================================================
   MEGA MENU - HOVER / SWITCH FIX
   Permite cambiar de desplegable inmediatamente entre botones.
   ========================================================= */

#mainNavbar .has-mega-menu{
  position:static;
}

/* El JS controla el estado abierto */
#mainNavbar .has-mega-menu.mega-open > .mega-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

/* Evita pequeños huecos entre trigger y dropdown que cortan el hover */
#mainNavbar .has-mega-menu > .mega-menu{
  margin-top:0 !important;
}

/* Crear un puente invisible entre botón y panel */
#mainNavbar .has-mega-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px;
  background:transparent;
  pointer-events:auto;
}

/* Transición más rápida para que el cambio se sienta instantáneo */
#mainNavbar .mega-menu{
  transition:
    opacity .12s ease,
    transform .12s ease,
    visibility .12s ease !important;
}

/* No depender solo del :hover original */
#mainNavbar .has-mega-menu:hover > .mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Trigger activo mientras su menú está abierto */
#mainNavbar .has-mega-menu.mega-open > .mega-trigger{
  color:#fff !important;
}

#mainNavbar .has-mega-menu.mega-open > .mega-trigger .nav-chevron{
  transform:rotate(180deg);
}


/* =========================================================
   ENVAL - NAVBAR PREMIUM FLOATING CAPSULE
   Solo cambia la presentación/ubicación del menú.
   Conserva mega menus y comportamiento hover corregido.
   ========================================================= */

#mainNavbar{
  position:fixed !important;
  top:14px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:9999 !important;
  padding:0 28px !important;
  transition:top .28s ease, padding .28s ease !important;
}

/* Contenedor principal: logo separado + cápsula */
#mainNavbar > .container,
#mainNavbar > .container-fluid{
  max-width:1480px !important;
  min-height:72px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
}

/* Marca */
#mainNavbar .navbar-brand{
  flex:0 0 auto !important;
  margin-right:auto !important;
  position:relative !important;
  z-index:4 !important;
  transition:transform .25s ease, opacity .25s ease !important;
}

#mainNavbar .navbar-brand:hover{
  transform:translateY(-1px) !important;
}

/* La lista se convierte en cápsula */
#mainNavbar .navbar-nav{
  position:relative !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:7px 9px !important;

  background:
    linear-gradient(180deg, rgba(15,23,23,.90), rgba(4,10,10,.88)) !important;
  border:1px solid rgba(121,255,0,.13) !important;
  border-radius:999px !important;

  box-shadow:
    0 14px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 24px rgba(0,210,255,.025) !important;

  backdrop-filter:blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}

/* Línea energética superior muy fina */
#mainNavbar .navbar-nav::before{
  content:"" !important;
  position:absolute !important;
  left:12% !important;
  right:12% !important;
  top:-1px !important;
  height:1px !important;
  border:0 !important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(143,255,0,.78),
    rgba(0,210,255,.72),
    transparent
  ) !important;
  opacity:.48 !important;
  pointer-events:none !important;
}

/* Botones */
#mainNavbar .nav-item{
  position:relative !important;
}

#mainNavbar .nav-link{
  position:relative !important;
  min-height:42px !important;
  padding:0 15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  border-radius:999px !important;
  border:1px solid transparent !important;
  color:rgba(255,255,255,.82) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

/* Iconos discretos */
#mainNavbar .nav-icon{
  color:#00d2ff !important;
  opacity:.82 !important;
  font-size:13px !important;
}

#mainNavbar .nav-chevron{
  color:#93ff00 !important;
  opacity:.72 !important;
  font-size:9px !important;
  margin-left:1px !important;
  transition:transform .18s ease !important;
}

/* Hover tipo botón tecnológico */
#mainNavbar .nav-link:hover,
#mainNavbar .has-mega-menu.mega-open > .mega-trigger{
  color:#fff !important;
  background:
    linear-gradient(180deg, rgba(30,44,42,.82), rgba(12,21,20,.78)) !important;
  border-color:rgba(0,210,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 7px 18px rgba(0,0,0,.16) !important;
  transform:translateY(-1px) !important;
}

/* Inicio activo: píldora sutil en vez de línea larga */
#mainNavbar .nav-link.active{
  color:#fff !important;
  background:
    linear-gradient(
      110deg,
      rgba(143,255,0,.13),
      rgba(0,210,255,.10)
    ) !important;
  border-color:rgba(143,255,0,.20) !important;
}

/* Indicador inferior animado */
#mainNavbar .nav-link::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:4px !important;
  width:0 !important;
  height:2px !important;
  border:0 !important;
  border-radius:10px !important;
  background:linear-gradient(90deg,#92ff00,#00d2ff) !important;
  transform:translateX(-50%) !important;
  opacity:0 !important;
  transition:width .20s ease, opacity .20s ease !important;
}

#mainNavbar .nav-link:hover::after,
#mainNavbar .nav-link.active::after,
#mainNavbar .has-mega-menu.mega-open > .mega-trigger::after{
  width:26px !important;
  opacity:1 !important;
}

/* Estado al bajar: cápsula más compacta */
#mainNavbar.scrolled,
#mainNavbar.navbar-scrolled,
#mainNavbar.sticky{
  top:8px !important;
  padding-left:34px !important;
  padding-right:34px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#mainNavbar.scrolled .navbar-nav,
#mainNavbar.navbar-scrolled .navbar-nav,
#mainNavbar.sticky .navbar-nav{
  background:
    linear-gradient(180deg, rgba(10,18,18,.95), rgba(3,8,8,.94)) !important;
  border-color:rgba(0,210,255,.14) !important;
  box-shadow:
    0 15px 38px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Mega menú alineado bajo la cápsula */
#mainNavbar .mega-menu{
  top:calc(100% + 12px) !important;
  border-radius:20px !important;
  border:1px solid rgba(0,210,255,.12) !important;
  background:rgba(5,12,12,.97) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}

/* Puente invisible para no perder hover entre cápsula y mega menú */
#mainNavbar .has-mega-menu::after{
  height:18px !important;
}

/* Espacio superior del hero por navbar flotante */
.hero,
.hero-section,
#inicio{
  scroll-margin-top:100px;
}

@media (max-width:1199px){
  #mainNavbar{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid{
    gap:16px !important;
  }

  #mainNavbar .navbar-nav{
    gap:1px !important;
    padding:6px !important;
  }

  #mainNavbar .nav-link{
    padding-left:10px !important;
    padding-right:10px !important;
    font-size:11px !important;
  }
}

/* En móvil se conserva el comportamiento responsive existente */
@media (max-width:991px){
  #mainNavbar{
    top:0 !important;
    padding:8px 14px !important;
    background:rgba(3,8,8,.96) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }

  #mainNavbar .navbar-nav{
    border-radius:20px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    margin-top:12px !important;
    padding:8px !important;
  }

  #mainNavbar .nav-link{
    justify-content:flex-start !important;
    width:100% !important;
    padding:0 14px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar,
  #mainNavbar .navbar-brand,
  #mainNavbar .nav-link,
  #mainNavbar .nav-link::after{
    transition:none !important;
  }
}


/* =========================================================
   NAVBAR CAPSULE - ALINEACION DE SUBMENUS
   Evita que los mega menus se desplacen demasiado a la derecha.
   ========================================================= */

/* La cápsula actúa como referencia horizontal */
#mainNavbar .navbar-nav{
  position:relative !important;
}

/* Todos los mega menús quedan centrados respecto a la cápsula */
#mainNavbar .mega-menu{
  left:50% !important;
  right:auto !important;
  transform:translate(-50%, 10px) !important;
  transform-origin:top center !important;
}

/* Estado abierto */
#mainNavbar .has-mega-menu.mega-open > .mega-menu,
#mainNavbar .has-mega-menu:hover > .mega-menu{
  transform:translate(-50%, 0) !important;
}

/* Límites para evitar que un panel ancho se salga del viewport */
#mainNavbar .mega-menu-wide{
  width:min(1120px, calc(100vw - 64px)) !important;
  max-width:1120px !important;
}

#mainNavbar .mega-menu-medium{
  width:min(760px, calc(100vw - 64px)) !important;
  max-width:760px !important;
}

#mainNavbar .mega-menu-small{
  width:min(420px, calc(100vw - 64px)) !important;
  max-width:420px !important;
}

/* Software y Equipo 3D son los más anchos: moverlos un poco a la izquierda */
#mainNavbar .nav-item:nth-child(2) > .mega-menu,
#mainNavbar .nav-item:nth-child(4) > .mega-menu{
  left:46% !important;
}

/* Servicios queda apenas a la izquierda del centro */
#mainNavbar .nav-item:nth-child(3) > .mega-menu{
  left:48% !important;
}

/* Academia y Nosotros: por ser más angostos, quedan alineados al centro */
#mainNavbar .nav-item:nth-child(5) > .mega-menu,
#mainNavbar .nav-item:nth-child(6) > .mega-menu{
  left:50% !important;
}

/* En pantallas medianas, mayor seguridad lateral */
@media(max-width:1250px){
  #mainNavbar .mega-menu{
    left:50% !important;
  }

  #mainNavbar .mega-menu-wide{
    width:min(980px, calc(100vw - 40px)) !important;
  }

  #mainNavbar .mega-menu-medium{
    width:min(700px, calc(100vw - 40px)) !important;
  }
}

/* Mobile: volver a flujo normal */
@media(max-width:991px){
  #mainNavbar .mega-menu,
  #mainNavbar .nav-item:nth-child(2) > .mega-menu,
  #mainNavbar .nav-item:nth-child(3) > .mega-menu,
  #mainNavbar .nav-item:nth-child(4) > .mega-menu,
  #mainNavbar .nav-item:nth-child(5) > .mega-menu,
  #mainNavbar .nav-item:nth-child(6) > .mega-menu{
    position:static !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
  }
}


/* =========================================================
   ENVAL / CRL - FLOATING GLASS NAVIGATION
   Variante sobre Capsule Premium.
   Conserva mega menus, hover fix y submenu centrado.
   ========================================================= */

#mainNavbar{
  top:12px !important;
  padding:0 34px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#mainNavbar > .container,
#mainNavbar > .container-fluid{
  max-width:1540px !important;
  min-height:70px !important;
  gap:34px !important;
}

/* Logo totalmente independiente */
#mainNavbar .navbar-brand{
  padding:4px 0 !important;
  margin-right:auto !important;
  filter:drop-shadow(0 5px 18px rgba(0,0,0,.22));
}

/* Glass bar: más fina y ligera que la cápsula anterior */
#mainNavbar .navbar-nav{
  gap:3px !important;
  padding:5px 7px !important;
  border-radius:18px !important;

  background:
    linear-gradient(180deg,rgba(16,25,25,.72),rgba(4,10,10,.66)) !important;

  border:1px solid rgba(255,255,255,.075) !important;

  box-shadow:
    0 16px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,210,255,.025) !important;

  backdrop-filter:blur(22px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
}

/* Eliminar aspecto de cápsula verde anterior */
#mainNavbar .navbar-nav::before{
  left:18px !important;
  right:18px !important;
  top:auto !important;
  bottom:-1px !important;
  height:1px !important;
  opacity:.55 !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(139,255,0,.40) 20%,
    rgba(0,210,255,.65) 52%,
    rgba(0,210,255,.18) 80%,
    transparent 100%
  ) !important;
}

/* Botones rectangulares suaves, no píldoras */
#mainNavbar .nav-link{
  min-height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  color:rgba(255,255,255,.78) !important;
  letter-spacing:.018em !important;
}

/* Hover de vidrio oscuro */
#mainNavbar .nav-link:hover,
#mainNavbar .has-mega-menu.mega-open > .mega-trigger{
  color:#fff !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(0,210,255,.025)) !important;
  border-color:rgba(0,210,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 18px rgba(0,0,0,.15) !important;
  transform:translateY(-1px) !important;
}

/* Activo limpio: sin cápsula */
#mainNavbar .nav-link.active{
  color:#fff !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(143,255,0,.11) !important;
}

/* Punto luminoso superior */
#mainNavbar .nav-link::before{
  content:"" !important;
  position:absolute !important;
  top:5px !important;
  left:50% !important;
  width:4px !important;
  height:4px !important;
  border-radius:50% !important;
  background:#93ff00 !important;
  box-shadow:0 0 8px rgba(147,255,0,.8) !important;
  transform:translate(-50%,-5px) scale(.4) !important;
  opacity:0 !important;
  transition:opacity .18s ease,transform .18s ease !important;
}

#mainNavbar .nav-link:hover::before,
#mainNavbar .nav-link.active::before,
#mainNavbar .has-mega-menu.mega-open > .mega-trigger::before{
  opacity:1 !important;
  transform:translate(-50%,0) scale(1) !important;
}

/* Indicador inferior corto */
#mainNavbar .nav-link::after{
  bottom:2px !important;
  height:1px !important;
  width:0 !important;
  background:linear-gradient(90deg,#93ff00,#00d2ff) !important;
  box-shadow:0 0 8px rgba(0,210,255,.25) !important;
}

#mainNavbar .nav-link:hover::after,
#mainNavbar .nav-link.active::after,
#mainNavbar .has-mega-menu.mega-open > .mega-trigger::after{
  width:30px !important;
}

/* Iconografía más discreta */
#mainNavbar .nav-icon{
  opacity:.70 !important;
}

#mainNavbar .nav-chevron{
  opacity:.58 !important;
}

/* Mega menus estilo glass y un poco más cerca de la barra */
#mainNavbar .mega-menu{
  top:calc(100% + 9px) !important;
  border-radius:18px !important;
  background:
    linear-gradient(180deg,rgba(7,17,17,.965),rgba(3,10,10,.975)) !important;
  border:1px solid rgba(0,210,255,.13) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(24px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(125%) !important;
}

/* Línea superior energética del panel */
#mainNavbar .mega-menu::before{
  content:"" !important;
  position:absolute !important;
  top:-1px !important;
  left:28px !important;
  right:28px !important;
  height:1px !important;
  border:0 !important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(145,255,0,.60),
    rgba(0,210,255,.70),
    transparent
  ) !important;
  opacity:.65 !important;
  pointer-events:none !important;
}

/* Estado al scroll: compacto pero aún flotante */
#mainNavbar.scrolled,
#mainNavbar.navbar-scrolled,
#mainNavbar.sticky{
  top:7px !important;
  background:transparent !important;
  border:0 !important;
}

#mainNavbar.scrolled .navbar-nav,
#mainNavbar.navbar-scrolled .navbar-nav,
#mainNavbar.sticky .navbar-nav{
  background:
    linear-gradient(180deg,rgba(11,20,20,.88),rgba(3,9,9,.86)) !important;
  border-color:rgba(0,210,255,.10) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Conservamos el posicionamiento centrado ya corregido */
#mainNavbar .mega-menu{
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,10px) !important;
}

#mainNavbar .has-mega-menu.mega-open > .mega-menu,
#mainNavbar .has-mega-menu:hover > .mega-menu{
  transform:translate(-50%,0) !important;
}

/* Paneles grandes ligeramente compensados a izquierda */
#mainNavbar .nav-item:nth-child(2) > .mega-menu,
#mainNavbar .nav-item:nth-child(4) > .mega-menu{
  left:46% !important;
}

#mainNavbar .nav-item:nth-child(3) > .mega-menu{
  left:48% !important;
}

@media(max-width:1199px){
  #mainNavbar{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid{
    gap:16px !important;
  }

  #mainNavbar .nav-link{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media(max-width:991px){
  #mainNavbar{
    top:0 !important;
    padding:8px 14px !important;
    background:rgba(3,8,8,.95) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }

  #mainNavbar .navbar-nav{
    border-radius:16px !important;
  }

  #mainNavbar .mega-menu,
  #mainNavbar .nav-item:nth-child(2) > .mega-menu,
  #mainNavbar .nav-item:nth-child(3) > .mega-menu,
  #mainNavbar .nav-item:nth-child(4) > .mega-menu,
  #mainNavbar .nav-item:nth-child(5) > .mega-menu,
  #mainNavbar .nav-item:nth-child(6) > .mega-menu{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   CRL LOGO - ANIMACION PREMIUM
   Entrada + escaneo luminoso + hover sutil.
   ========================================================= */

#mainNavbar .navbar-brand{
  position:relative !important;
  overflow:hidden !important;
  border-radius:8px !important;
  transform-origin:left center !important;
  animation:crlLogoEntrance .75s cubic-bezier(.2,.8,.2,1) both !important;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    filter .28s ease !important;
}

/* Todo el contenido del logo entra de forma limpia */
#mainNavbar .navbar-brand > *{
  position:relative;
  z-index:2;
}

/* Barrido de luz que cruza UNA VEZ al cargar */
#mainNavbar .navbar-brand::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  top:-25% !important;
  bottom:-25% !important;
  left:-55% !important;
  width:30% !important;
  pointer-events:none !important;

  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(145,255,0,.03) 22%,
    rgba(145,255,0,.32) 46%,
    rgba(0,210,255,.34) 58%,
    rgba(255,255,255,.16) 68%,
    transparent 100%
  ) !important;

  filter:blur(1px);
  transform:skewX(-16deg) !important;
  animation:crlLogoScan 1.15s ease .65s 1 both !important;
}

/* Punto energético decorativo, extremadamente discreto */
#mainNavbar .navbar-brand::before{
  content:"" !important;
  position:absolute !important;
  z-index:4 !important;
  width:4px !important;
  height:4px !important;
  right:3px !important;
  top:7px !important;
  border-radius:50% !important;
  background:#00d2ff !important;
  box-shadow:
    0 0 5px rgba(0,210,255,.85),
    0 0 12px rgba(0,210,255,.32) !important;
  opacity:0 !important;
  animation:crlLogoNode 1.8s ease 1.15s 1 both !important;
}

/* Hover: micro elevación, sin exagerar */
#mainNavbar .navbar-brand:hover{
  transform:translateY(-2px) scale(1.025) !important;
  filter:
    drop-shadow(0 5px 13px rgba(145,255,0,.08))
    drop-shadow(0 7px 18px rgba(0,210,255,.07)) !important;
}

/* En hover el barrido puede repetirse */
#mainNavbar .navbar-brand:hover::after{
  animation:crlLogoScanHover .75s ease both !important;
}

@keyframes crlLogoEntrance{
  0%{
    opacity:0;
    transform:translateX(-16px) scale(.97);
    filter:blur(3px);
  }
  60%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@keyframes crlLogoScan{
  0%{
    left:-55%;
    opacity:0;
  }
  18%{
    opacity:.85;
  }
  82%{
    opacity:.85;
  }
  100%{
    left:125%;
    opacity:0;
  }
}

@keyframes crlLogoScanHover{
  0%{
    left:-45%;
    opacity:0;
  }
  20%{
    opacity:.7;
  }
  100%{
    left:125%;
    opacity:0;
  }
}

@keyframes crlLogoNode{
  0%,100%{
    opacity:0;
    transform:scale(.5);
  }
  35%,70%{
    opacity:.9;
    transform:scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar .navbar-brand,
  #mainNavbar .navbar-brand::before,
  #mainNavbar .navbar-brand::after{
    animation:none !important;
  }
}


/* =========================================================
   CRL LOGO - SCANNER 3D V2
   Sustituye visualmente la animación anterior por un escaneo
   vertical tecnológico verde/cyan.
   ========================================================= */

#mainNavbar .navbar-brand{
  overflow:hidden !important;
  isolation:isolate !important;
  animation:crlScannerEntrance .6s ease both !important;
}

/* Anular el pequeño nodo de la versión anterior */
#mainNavbar .navbar-brand::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  top:4px !important;
  bottom:4px !important;
  left:-8% !important;
  width:2px !important;
  height:auto !important;
  right:auto !important;
  border-radius:4px !important;

  background:linear-gradient(
    180deg,
    transparent 0%,
    #9cff00 22%,
    #eaffd2 48%,
    #00d2ff 76%,
    transparent 100%
  ) !important;

  box-shadow:
    0 0 5px rgba(156,255,0,.85),
    0 0 12px rgba(0,210,255,.72),
    0 0 22px rgba(0,210,255,.22) !important;

  opacity:0 !important;
  transform:none !important;
  animation:crlVerticalScanner 1.65s cubic-bezier(.4,0,.2,1) .45s 1 both !important;
}

/* Halo estrecho que acompaña a la línea */
#mainNavbar .navbar-brand::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:4 !important;
  top:0 !important;
  bottom:0 !important;
  left:-18% !important;
  width:18% !important;
  height:auto !important;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(156,255,0,.035),
    rgba(0,210,255,.12),
    transparent
  ) !important;

  filter:blur(3px) !important;
  transform:none !important;
  opacity:0 !important;
  animation:crlScannerHalo 1.65s cubic-bezier(.4,0,.2,1) .45s 1 both !important;
}

/* Hover: repetir el escaneo */
#mainNavbar .navbar-brand:hover::before{
  animation:crlVerticalScannerHover 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

#mainNavbar .navbar-brand:hover::after{
  animation:crlScannerHaloHover 1.05s cubic-bezier(.4,0,.2,1) both !important;
}

/* Hover del logo más estable: sin escalado excesivo */
#mainNavbar .navbar-brand:hover{
  transform:translateY(-1px) scale(1.012) !important;
  filter:
    drop-shadow(0 5px 14px rgba(156,255,0,.055))
    drop-shadow(0 7px 18px rgba(0,210,255,.06)) !important;
}

@keyframes crlScannerEntrance{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes crlVerticalScanner{
  0%{left:-8%;opacity:0}
  12%{opacity:.95}
  86%{opacity:.95}
  100%{left:108%;opacity:0}
}

@keyframes crlScannerHalo{
  0%{left:-18%;opacity:0}
  14%{opacity:.8}
  86%{opacity:.8}
  100%{left:102%;opacity:0}
}

@keyframes crlVerticalScannerHover{
  0%{left:-8%;opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{left:108%;opacity:0}
}

@keyframes crlScannerHaloHover{
  0%{left:-18%;opacity:0}
  12%{opacity:.82}
  88%{opacity:.82}
  100%{left:102%;opacity:0}
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar .navbar-brand,
  #mainNavbar .navbar-brand::before,
  #mainNavbar .navbar-brand::after{
    animation:none !important;
  }
}


/* =========================================================
   CRL LOGO - HOVER UNDERLINE ENERGY
   Mejora visual: línea animada inferior + brillo sutil.
   ========================================================= */

#mainNavbar .navbar-brand{
  position:relative !important;
  padding-bottom:8px !important;
}

/* Mantener el logo estable: menos zoom */
#mainNavbar .navbar-brand:hover{
  transform:translateY(-1px) scale(1.006) !important;
  filter:
    drop-shadow(0 4px 10px rgba(156,255,0,.05))
    drop-shadow(0 6px 14px rgba(0,210,255,.06)) !important;
}

/* Línea base muy tenue */
#mainNavbar .navbar-brand .brand-sub::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:-7px !important;
  width:100% !important;
  height:1px !important;
  background:linear-gradient(
    90deg,
    rgba(156,255,0,.16),
    rgba(0,210,255,.14)
  ) !important;
  opacity:.35 !important;
}

/* Línea energética que aparece al hover */
#mainNavbar .navbar-brand .brand-sub::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:-7px !important;
  width:0 !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(
    90deg,
    #9cff00 0%,
    #66ef6d 34%,
    #00d2ff 100%
  ) !important;
  box-shadow:
    0 0 5px rgba(156,255,0,.35),
    0 0 10px rgba(0,210,255,.25) !important;
  opacity:0 !important;
  transition:
    width .38s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease !important;
}

/* Activación */
#mainNavbar .navbar-brand:hover .brand-sub::before{
  width:100% !important;
  opacity:1 !important;
}

/* Micro movimiento del texto secundario */
#mainNavbar .navbar-brand .brand-sub strong,
#mainNavbar .navbar-brand .brand-sub small{
  transition:
    letter-spacing .28s ease,
    color .28s ease,
    transform .28s ease !important;
}

#mainNavbar .navbar-brand:hover .brand-sub strong{
  letter-spacing:.065em !important;
  color:#f4fff1 !important;
}

#mainNavbar .navbar-brand:hover .brand-sub small{
  color:#8fdbe8 !important;
  transform:translateX(2px) !important;
}

/* Pulso muy sutil en CRL */
#mainNavbar .navbar-brand .brand-main{
  transition:
    text-shadow .28s ease,
    color .28s ease !important;
}

#mainNavbar .navbar-brand:hover .brand-main{
  text-shadow:
    0 0 8px rgba(156,255,0,.18),
    0 0 14px rgba(0,210,255,.10) !important;
}

/* Asegurar contexto relativo para pseudo-elementos */
#mainNavbar .navbar-brand .brand-sub{
  position:relative !important;
  display:inline-block !important;
}

/* Mantener Scanner 3D, pero que el hover principal se sienta más limpio */
#mainNavbar .navbar-brand:hover::before{
  animation:crlVerticalScannerHover .95s cubic-bezier(.4,0,.2,1) both !important;
}

#mainNavbar .navbar-brand:hover::after{
  animation:crlScannerHaloHover .95s cubic-bezier(.4,0,.2,1) both !important;
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar .navbar-brand .brand-sub::before,
  #mainNavbar .navbar-brand .brand-sub strong,
  #mainNavbar .navbar-brand .brand-sub small,
  #mainNavbar .navbar-brand .brand-main{
    transition:none !important;
  }
}


/* =========================================================
   EXPERIENCIA EN CAMPO - FIELD TECH
   Diseño tecnológico aplicado solo a esta sección.
   ========================================================= */

.field-tech-section{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  background:
    radial-gradient(circle at 15% 35%,rgba(151,255,0,.055),transparent 28%),
    radial-gradient(circle at 86% 58%,rgba(0,210,255,.065),transparent 30%),
    linear-gradient(180deg,#060a08 0%,#07100d 52%,#050908 100%) !important;
}

/* Grid técnico sutil */
.field-tech-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,transparent,black 15%,black 85%,transparent);
  animation:fieldGridMove 24s linear infinite;
}

/* Línea de escaneo ambiental */
.field-tech-section::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:-10%;
  width:18%;
  pointer-events:none;
  opacity:.16;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(151,255,0,.07),
    rgba(0,210,255,.14),
    transparent
  );
  filter:blur(5px);
  animation:fieldScanner 9s ease-in-out infinite;
}

@keyframes fieldGridMove{
  to{background-position:52px 52px,52px 52px}
}
@keyframes fieldScanner{
  0%,15%{left:-18%;opacity:0}
  30%{opacity:.18}
  70%{opacity:.18}
  85%,100%{left:105%;opacity:0}
}

/* Tag superior */
.field-tech-section .eyebrow,
.field-tech-section .section-kicker,
.field-tech-section .kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  padding:7px 12px !important;
  border:1px solid rgba(0,210,255,.13) !important;
  border-radius:999px !important;
  background:rgba(5,15,13,.54) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Punto vivo */
.field-tech-section .eyebrow::before,
.field-tech-section .section-kicker::before,
.field-tech-section .kicker::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#98ff00;
  box-shadow:0 0 8px rgba(152,255,0,.62);
  animation:fieldDotPulse 2s ease-in-out infinite;
}
@keyframes fieldDotPulse{50%{opacity:.35;transform:scale(.8)}}

/* Título: EN CAMPO toma el lenguaje verde/cyan */
.field-tech-section h2,
.field-tech-section .section-title{
  position:relative;
  letter-spacing:-.035em !important;
  text-shadow:0 14px 36px rgba(0,0,0,.24);
}

.field-tech-section h2 strong,
.field-tech-section h2 span,
.field-tech-section .section-title strong,
.field-tech-section .section-title span{
  background:linear-gradient(100deg,#a0ff00 5%,#63ee70 46%,#00d2ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Línea tecnológica bajo el encabezado */
.field-tech-section h2::after,
.field-tech-section .section-title::after{
  content:"";
  display:block;
  width:86px;
  height:2px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg,#98ff00,#00d2ff,transparent);
  box-shadow:0 0 12px rgba(0,210,255,.18);
  transform-origin:left;
  animation:fieldTitleLine 3.2s ease-in-out infinite;
}
@keyframes fieldTitleLine{
  0%,100%{transform:scaleX(.55);opacity:.55}
  50%{transform:scaleX(1);opacity:1}
}

/* Cards / imágenes de la sección */
.field-tech-section .card,
.field-tech-section [class*="project-card"],
.field-tech-section [class*="gallery-card"],
.field-tech-section [class*="field-card"],
.field-tech-section figure{
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(0,210,255,.11) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(16,25,22,.72),rgba(6,12,10,.76)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease !important;
}

/* Hover tecnológico limpio */
@media(hover:hover) and (pointer:fine){
  .field-tech-section .card:hover,
  .field-tech-section [class*="project-card"]:hover,
  .field-tech-section [class*="gallery-card"]:hover,
  .field-tech-section [class*="field-card"]:hover,
  .field-tech-section figure:hover{
    transform:translateY(-7px) !important;
    border-color:rgba(0,210,255,.30) !important;
    box-shadow:
      0 24px 52px rgba(0,0,0,.32),
      0 0 24px rgba(0,210,255,.055),
      0 0 16px rgba(152,255,0,.035) !important;
  }
}

/* Imágenes con micro zoom */
.field-tech-section .card img,
.field-tech-section [class*="project-card"] img,
.field-tech-section [class*="gallery-card"] img,
.field-tech-section [class*="field-card"] img,
.field-tech-section figure img{
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease !important;
}

@media(hover:hover) and (pointer:fine){
  .field-tech-section .card:hover img,
  .field-tech-section [class*="project-card"]:hover img,
  .field-tech-section [class*="gallery-card"]:hover img,
  .field-tech-section [class*="field-card"]:hover img,
  .field-tech-section figure:hover img{
    transform:scale(1.035) !important;
    filter:contrast(1.025) saturate(1.04) !important;
  }
}

/* Detalles de esquina tipo metrología */
.field-tech-section .card::before,
.field-tech-section [class*="project-card"]::before,
.field-tech-section [class*="gallery-card"]::before,
.field-tech-section [class*="field-card"]::before{
  content:"";
  position:absolute;
  z-index:5;
  left:10px;
  top:10px;
  width:22px;
  height:22px;
  pointer-events:none;
  border-left:1px solid rgba(152,255,0,.70);
  border-top:1px solid rgba(152,255,0,.70);
  opacity:.5;
  transition:width .3s ease,height .3s ease,opacity .3s ease;
}

.field-tech-section .card::after,
.field-tech-section [class*="project-card"]::after,
.field-tech-section [class*="gallery-card"]::after,
.field-tech-section [class*="field-card"]::after{
  content:"";
  position:absolute;
  z-index:5;
  right:10px;
  bottom:10px;
  width:22px;
  height:22px;
  pointer-events:none;
  border-right:1px solid rgba(0,210,255,.75);
  border-bottom:1px solid rgba(0,210,255,.75);
  opacity:.5;
  transition:width .3s ease,height .3s ease,opacity .3s ease;
}

@media(hover:hover) and (pointer:fine){
  .field-tech-section .card:hover::before,
  .field-tech-section [class*="project-card"]:hover::before,
  .field-tech-section [class*="gallery-card"]:hover::before,
  .field-tech-section [class*="field-card"]:hover::before,
  .field-tech-section .card:hover::after,
  .field-tech-section [class*="project-card"]:hover::after,
  .field-tech-section [class*="gallery-card"]:hover::after,
  .field-tech-section [class*="field-card"]:hover::after{
    width:34px;
    height:34px;
    opacity:.95;
  }
}

@media(max-width:991px){
  .field-tech-section::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .field-tech-section::before,
  .field-tech-section::after,
  .field-tech-section .eyebrow::before,
  .field-tech-section .section-kicker::before,
  .field-tech-section .kicker::before,
  .field-tech-section h2::after,
  .field-tech-section .section-title::after{
    animation:none !important;
  }
}


/* =========================================================
   EXPERIENCIA EN CAMPO V2 - FIELD OPERATIONS
   Rediseño visible y tecnológico de la sección completa.
   ========================================================= */
.field-tech-v2{
  position:relative!important; overflow:hidden!important; padding:110px 0 120px!important;
  background:linear-gradient(180deg,#040706 0%,#07100d 52%,#030706 100%)!important;
  isolation:isolate;
}
.field-v2-grid{position:absolute;inset:0;z-index:-3;background:linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent 2%,black 18%,black 88%,transparent);animation:fieldV2Grid 22s linear infinite}
.field-v2-orb{position:absolute;border-radius:50%;filter:blur(24px);z-index:-2;pointer-events:none}
.field-v2-orb-a{width:420px;height:420px;left:-170px;top:90px;background:rgba(148,255,0,.07)}
.field-v2-orb-b{width:500px;height:500px;right:-180px;bottom:-80px;background:rgba(0,210,255,.075)}
@keyframes fieldV2Grid{to{background-position:56px 56px,56px 56px}}

.field-v2-head{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);align-items:end;gap:60px;margin-bottom:52px!important}
.field-v2-kicker{display:inline-flex;align-items:center;gap:10px;color:#9cff00;font-size:11px;font-weight:900;letter-spacing:.24em;margin-bottom:16px}
.field-v2-kicker span{width:8px;height:8px;border-radius:50%;background:#9cff00;box-shadow:0 0 0 6px rgba(156,255,0,.06),0 0 18px rgba(156,255,0,.48);animation:fieldV2Pulse 1.8s ease-in-out infinite}
@keyframes fieldV2Pulse{50%{opacity:.35;transform:scale(.72)}}
.field-v2-heading h2{margin:0;color:#fff;font-size:clamp(48px,5.4vw,82px);line-height:.92;letter-spacing:-.05em;font-weight:900}
.field-v2-heading h2 strong{display:inline;background:linear-gradient(100deg,#9cff00 0%,#51e77c 43%,#00d2ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.field-v2-heading p{max-width:720px;color:#89958d;font-size:15px;line-height:1.75;margin:24px 0 0}
.field-v2-status{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(0,210,255,.12);border-radius:16px;background:rgba(6,14,12,.65);backdrop-filter:blur(14px);overflow:hidden}
.field-v2-status div{padding:17px 14px;border-right:1px solid rgba(255,255,255,.06)}
.field-v2-status div:last-child{border-right:0}.field-v2-status span{display:block;color:#00d2ff;font-size:9px;font-weight:900;letter-spacing:.14em}.field-v2-status b{display:block;color:#dbe7df;font-size:10px;margin-top:5px;letter-spacing:.08em}

.field-v2-stage{display:grid!important;grid-template-columns:1.32fr .84fr .84fr;gap:16px;align-items:stretch!important}
.field-v2-card{position:relative;min-width:0;overflow:hidden;border-radius:22px;border:1px solid rgba(0,210,255,.15);background:linear-gradient(180deg,rgba(15,24,20,.92),rgba(5,10,8,.98));box-shadow:0 24px 55px rgba(0,0,0,.28);transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease}
.field-v2-card-main{grid-row:span 1}
.field-v2-media{height:390px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.055)}
.field-v2-card:not(.field-v2-card-main) .field-v2-media{height:300px}
.field-v2-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.field-v2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(3,7,6,.18) 70%,rgba(3,7,6,.82) 100%);pointer-events:none}
.field-v2-copy{padding:25px 25px 28px;position:relative}.field-v2-num{color:#9cff00;font-size:9px;font-weight:900;letter-spacing:.18em}.field-v2-copy h3{font-size:26px;color:#fff;margin:10px 0 8px;font-weight:900;letter-spacing:-.02em}.field-v2-copy p{margin:0;color:#8c9990;font-size:13px}.field-v2-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.field-v2-meta span{font-size:8px;letter-spacing:.12em;color:#8ba198;border:1px solid rgba(0,210,255,.13);padding:6px 8px;border-radius:999px;background:rgba(0,210,255,.025)}
.field-v2-corner{position:absolute;z-index:4;width:30px;height:30px;pointer-events:none;opacity:.72}.field-v2-corner.c1{left:13px;top:13px;border-left:1px solid #9cff00;border-top:1px solid #9cff00}.field-v2-corner.c2{right:13px;bottom:13px;border-right:1px solid #00d2ff;border-bottom:1px solid #00d2ff}
.field-v2-scan{position:absolute;z-index:3;left:0;right:0;height:1px;top:-5%;background:linear-gradient(90deg,transparent,#9cff00 25%,#00d2ff 70%,transparent);box-shadow:0 0 12px rgba(0,210,255,.38);opacity:0}
@media(hover:hover) and (pointer:fine){.field-v2-card:hover{transform:translateY(-9px);border-color:rgba(0,210,255,.38);box-shadow:0 30px 65px rgba(0,0,0,.38),0 0 32px rgba(0,210,255,.05)}.field-v2-card:hover .field-v2-media img{transform:scale(1.055);filter:saturate(1.08) contrast(1.035)}.field-v2-card:hover .field-v2-scan{opacity:.8;animation:fieldV2Scan 1.55s ease-in-out}}
@keyframes fieldV2Scan{0%{top:3%;opacity:0}15%{opacity:.82}85%{opacity:.82}100%{top:97%;opacity:0}}
@media(max-width:1100px){.field-v2-head{grid-template-columns:1fr}.field-v2-status{max-width:520px}.field-v2-stage{grid-template-columns:1fr 1fr}.field-v2-card-main{grid-column:1/-1}.field-v2-card-main .field-v2-media{height:420px}}
@media(max-width:700px){.field-tech-v2{padding:78px 0 85px!important}.field-v2-stage{grid-template-columns:1fr}.field-v2-status{grid-template-columns:1fr 1fr 1fr}.field-v2-media,.field-v2-card:not(.field-v2-card-main) .field-v2-media{height:270px}.field-v2-heading h2{font-size:46px}}
@media(prefers-reduced-motion:reduce){.field-v2-grid,.field-v2-kicker span{animation:none!important}.field-v2-card,.field-v2-media img{transition:none!important}.field-v2-scan{display:none!important}}


/* =========================================================
   EXPERIENCIA EN CAMPO V3 - INDUSTRIAL CONTROL CENTER
   ========================================================= */
.field-tech-section{padding:110px 0!important;background:#050908!important;position:relative!important;overflow:hidden!important}
.field-tech-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px);background-size:54px 54px;opacity:.36}
.field-tech-section:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 17% 48%,rgba(145,255,0,.07),transparent 28%),radial-gradient(circle at 82% 54%,rgba(0,210,255,.08),transparent 30%)}
.fieldcc-shell{position:relative;z-index:2;width:min(1420px,calc(100% - 70px));margin:auto}
.fieldcc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.fieldcc-kicker{font-size:12px;font-weight:900;letter-spacing:.28em;color:#9cff00;display:flex;align-items:center;gap:10px}
.fieldcc-kicker span{width:7px;height:7px;border-radius:50%;background:#9cff00;box-shadow:0 0 12px #9cff00}
.fieldcc-head h2{font-size:clamp(48px,5.5vw,84px)!important;line-height:.92!important;margin:16px 0 18px!important;color:#fff!important;letter-spacing:-.055em!important}
.fieldcc-head h2 em{font-style:normal;background:linear-gradient(90deg,#99ff00,#00d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fieldcc-head p{max-width:720px;color:#9aa3a2;font-size:17px;line-height:1.7;margin:0}
.fieldcc-status{min-width:235px;border:1px solid rgba(0,210,255,.17);background:rgba(6,17,16,.7);border-radius:14px;padding:14px 17px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(12px)}
.fieldcc-status i{width:9px;height:9px;border-radius:50%;background:#9cff00;box-shadow:0 0 13px #9cff00;animation:fieldccPulse 1.6s ease-in-out infinite}
.fieldcc-status b,.fieldcc-status small{display:block}.fieldcc-status b{font-size:12px;color:#fff;letter-spacing:.1em}.fieldcc-status small{font-size:9px;color:#6e8280;letter-spacing:.12em;margin-top:3px}
.fieldcc-console{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,.7fr);border:1px solid rgba(0,210,255,.18);border-radius:24px;overflow:hidden;background:rgba(4,11,10,.78);box-shadow:0 30px 80px rgba(0,0,0,.38)}
.fieldcc-visual{position:relative;min-height:610px;overflow:hidden;background:#050908}
.fieldcc-visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.fieldcc-visual:hover img{transform:scale(1.025);filter:saturate(1.08) contrast(1.04)}
.fieldcc-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,5,.1),rgba(1,5,5,.03) 50%,rgba(1,5,5,.35)),linear-gradient(0deg,rgba(2,7,7,.92),transparent 42%)}
.fieldcc-scan{position:absolute;left:0;right:0;top:-12%;height:70px;background:linear-gradient(180deg,transparent,rgba(0,210,255,.12),rgba(153,255,0,.25),transparent);filter:blur(2px);opacity:0}
.fieldcc-visual:hover .fieldcc-scan{animation:fieldccScan 2.2s ease-in-out}
.fieldcc-corner{position:absolute;width:42px;height:42px;z-index:4}.fieldcc-corner.tl{left:18px;top:18px;border-left:2px solid #9cff00;border-top:2px solid #9cff00}.fieldcc-corner.tr{right:18px;top:18px;border-right:2px solid #00d2ff;border-top:2px solid #00d2ff}.fieldcc-corner.bl{left:18px;bottom:18px;border-left:2px solid #9cff00;border-bottom:2px solid #9cff00}.fieldcc-corner.br{right:18px;bottom:18px;border-right:2px solid #00d2ff;border-bottom:2px solid #00d2ff}
.fieldcc-hud{position:absolute;z-index:5;padding:10px 13px 10px 31px;border:1px solid rgba(0,210,255,.18);border-radius:9px;background:rgba(3,12,12,.72);backdrop-filter:blur(8px);box-shadow:0 10px 25px rgba(0,0,0,.25);transition:transform .3s ease,border-color .3s ease}.fieldcc-hud i{position:absolute;left:12px;top:15px;width:7px;height:7px;border-radius:50%;background:#00d2ff;box-shadow:0 0 8px #00d2ff}.fieldcc-hud span,.fieldcc-hud b{display:block}.fieldcc-hud span{font-size:8px;color:#6f8885;letter-spacing:.15em}.fieldcc-hud b{font-size:11px;color:#fff;margin-top:2px}.fieldcc-hud:hover{transform:translateY(-3px);border-color:rgba(153,255,0,.4)}.hud-a{left:8%;top:16%}.hud-b{right:8%;top:30%}.hud-c{right:13%;top:57%}
.fieldcc-caption{position:absolute;left:48px;bottom:44px;z-index:5;max-width:600px}.fieldcc-caption span{font-size:10px;color:#9cff00;letter-spacing:.2em;font-weight:800}.fieldcc-caption strong{display:block;color:#fff;font-size:34px;margin:8px 0}.fieldcc-caption small{display:block;color:#a7b0af;font-size:14px;line-height:1.6}
.fieldcc-panel{padding:22px;background:linear-gradient(180deg,rgba(7,17,16,.96),rgba(3,9,9,.98));border-left:1px solid rgba(0,210,255,.12);display:flex;flex-direction:column}
.fieldcc-paneltop{display:flex;justify-content:space-between;padding:10px 8px 22px;border-bottom:1px solid rgba(255,255,255,.07);font-size:9px;letter-spacing:.15em;color:#71817f}.fieldcc-paneltop b{color:#00d2ff}
.fieldcc-item{appearance:none;text-align:left;color:inherit;width:100%;border:0;border-bottom:1px solid rgba(255,255,255,.065);background:transparent;padding:25px 10px;display:grid;grid-template-columns:45px 1fr 26px;align-items:center;gap:10px;cursor:pointer;position:relative;overflow:hidden;transition:background .28s ease,transform .28s ease}
.fieldcc-item:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:linear-gradient(#9cff00,#00d2ff);transform:scaleY(0);transition:transform .28s ease}.fieldcc-item:hover,.fieldcc-item.active{background:linear-gradient(90deg,rgba(153,255,0,.07),rgba(0,210,255,.035));transform:translateX(3px)}.fieldcc-item:hover:before,.fieldcc-item.active:before{transform:scaleY(1)}
.fieldcc-item .num{font-size:13px;color:#596a68;font-weight:900}.fieldcc-item.active .num{color:#9cff00}.fieldcc-item .copy small{display:block;color:#647572;font-size:8px;letter-spacing:.15em;font-style:normal}.fieldcc-item .copy strong{display:block;color:#fff;font-size:17px;margin:5px 0}.fieldcc-item .copy em{display:block;color:#74827f;font-size:11px;font-style:normal}.fieldcc-item .arrow{color:#00d2ff;opacity:.45;transition:transform .28s ease,opacity .28s ease}.fieldcc-item:hover .arrow,.fieldcc-item.active .arrow{opacity:1;transform:translate(3px,-3px)}
.fieldcc-readout{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:20px}.fieldcc-readout div{border:1px solid rgba(0,210,255,.1);border-radius:10px;padding:12px 8px;text-align:center;background:rgba(255,255,255,.018)}.fieldcc-readout b{display:block;color:#fff;font-size:18px}.fieldcc-readout small{display:block;color:#61706e;font-size:8px;letter-spacing:.13em;margin-top:3px}
@keyframes fieldccPulse{50%{opacity:.35;transform:scale(.75)}}@keyframes fieldccScan{0%{top:-12%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:105%;opacity:0}}
@media(max-width:1000px){.fieldcc-head{align-items:flex-start;flex-direction:column}.fieldcc-console{grid-template-columns:1fr}.fieldcc-panel{border-left:0;border-top:1px solid rgba(0,210,255,.12)}.fieldcc-visual{min-height:520px}.fieldcc-shell{width:min(100% - 32px,1420px)}}
@media(max-width:600px){.field-tech-section{padding:75px 0!important}.fieldcc-visual{min-height:480px}.fieldcc-hud{display:none}.fieldcc-caption{left:25px;right:25px;bottom:28px}.fieldcc-caption strong{font-size:27px}.fieldcc-head h2{font-size:45px!important}}
@media(prefers-reduced-motion:reduce){.fieldcc-status i,.fieldcc-visual:hover .fieldcc-scan{animation:none!important}}


/* =========================================================
   EXPERIENCIA EN CAMPO - TITULO BOLD / WIDE
   Mantiene intacto el diseño Control Center.
   ========================================================= */
.fieldcc-head h2{
  font-weight: 950 !important;
  font-stretch: expanded !important;
  letter-spacing: -0.045em !important;
  line-height: .90 !important;
  text-transform: uppercase !important;
  font-family: "Arial Black", "Montserrat", "Arial", sans-serif !important;
}

.fieldcc-head h2 em{
  font-weight: 950 !important;
  font-style: normal !important;
  letter-spacing: -0.045em !important;
  background: linear-gradient(90deg,#9cff00 0%,#59e77d 43%,#00d2ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Mayor presencia en pantallas grandes */
@media (min-width: 1001px){
  .fieldcc-head h2{
    font-size: clamp(58px,5.7vw,88px) !important;
  }
}


/* =========================================================
   MARCAS ESPECIALIZADAS - TECHNOLOGY PARTNERS
   Rediseño premium oscuro / glass / green-cyan.
   ========================================================= */

.brands-tech-section{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  padding-top:90px !important;
  padding-bottom:100px !important;
  background:
    radial-gradient(circle at 14% 45%,rgba(151,255,0,.075),transparent 27%),
    radial-gradient(circle at 87% 48%,rgba(0,210,255,.085),transparent 30%),
    linear-gradient(180deg,#050908 0%,#07100e 52%,#040807 100%) !important;
}

/* Retícula industrial */
.brands-tech-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-3 !important;
  pointer-events:none !important;
  opacity:.35 !important;
  background:
    linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px) !important;
  background-size:58px 58px !important;
  mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent) !important;
}

/* Banda energética ambiental */
.brands-tech-section::after{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  left:-8% !important;
  right:-8% !important;
  top:47% !important;
  height:1px !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(151,255,0,.12) 12%,
    #97ff00 34%,
    #00d2ff 70%,
    rgba(0,210,255,.12) 88%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 12px rgba(151,255,0,.12),
    0 0 20px rgba(0,210,255,.12) !important;
  opacity:.62 !important;
}

/* Encabezado */
.brands-tech-section .eyebrow,
.brands-tech-section .section-kicker,
.brands-tech-section .kicker{
  color:#9cff00 !important;
  font-weight:900 !important;
  letter-spacing:.27em !important;
}

.brands-tech-section h2,
.brands-tech-section .section-title{
  color:#fff !important;
  font-family:"Arial Black","Montserrat","Arial",sans-serif !important;
  font-weight:950 !important;
  letter-spacing:-.045em !important;
  text-transform:uppercase !important;
  text-shadow:0 12px 32px rgba(0,0,0,.28) !important;
}

/* Contenedores de marca detectados dentro de la sección */
.brands-tech-section a,
.brands-tech-section .brand,
.brands-tech-section [class*="brand-"],
.brands-tech-section [class*="logo-"]{
  position:relative !important;
}

/* Tarjetas: apunta a los elementos directos que normalmente contienen cada marca */
.brands-tech-section .brands-grid > *,
.brands-tech-section .brand-grid > *,
.brands-tech-section [class*="brands"] > a,
.brands-tech-section [class*="brands"] > div,
.brands-tech-section [class*="logos"] > a,
.brands-tech-section [class*="logos"] > div{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:105px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(0,210,255,.14) !important;
  border-radius:16px !important;
  background:
    linear-gradient(145deg,rgba(15,26,23,.82),rgba(5,12,11,.92)) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease !important;
}

/* Línea superior energética */
.brands-tech-section .brands-grid > *::before,
.brands-tech-section .brand-grid > *::before,
.brands-tech-section [class*="brands"] > a::before,
.brands-tech-section [class*="brands"] > div::before,
.brands-tech-section [class*="logos"] > a::before,
.brands-tech-section [class*="logos"] > div::before{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  top:0 !important;
  left:12% !important;
  width:0 !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#9cff00,#4fe77d,#00d2ff) !important;
  box-shadow:
    0 0 8px rgba(156,255,0,.42),
    0 0 13px rgba(0,210,255,.30) !important;
  opacity:0 !important;
  transition:width .38s cubic-bezier(.2,.8,.2,1),opacity .2s ease !important;
}

/* Luz interna que NO sale de la tarjeta */
.brands-tech-section .brands-grid > *::after,
.brands-tech-section .brand-grid > *::after,
.brands-tech-section [class*="brands"] > a::after,
.brands-tech-section [class*="brands"] > div::after,
.brands-tech-section [class*="logos"] > a::after,
.brands-tech-section [class*="logos"] > div::after{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:0 !important;
  background:
    radial-gradient(circle at 18% 25%,rgba(156,255,0,.12),transparent 35%),
    radial-gradient(circle at 82% 72%,rgba(0,210,255,.13),transparent 38%) !important;
  transition:opacity .3s ease !important;
}

@media(hover:hover) and (pointer:fine){
  .brands-tech-section .brands-grid > *:hover,
  .brands-tech-section .brand-grid > *:hover,
  .brands-tech-section [class*="brands"] > a:hover,
  .brands-tech-section [class*="brands"] > div:hover,
  .brands-tech-section [class*="logos"] > a:hover,
  .brands-tech-section [class*="logos"] > div:hover{
    transform:translateY(-7px) scale(1.018) !important;
    border-color:rgba(0,210,255,.38) !important;
    background:linear-gradient(145deg,rgba(16,31,26,.95),rgba(5,16,15,.96)) !important;
    box-shadow:
      0 22px 48px rgba(0,0,0,.34),
      0 0 20px rgba(0,210,255,.065),
      0 0 15px rgba(156,255,0,.045),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .brands-tech-section .brands-grid > *:hover::before,
  .brands-tech-section .brand-grid > *:hover::before,
  .brands-tech-section [class*="brands"] > a:hover::before,
  .brands-tech-section [class*="brands"] > div:hover::before,
  .brands-tech-section [class*="logos"] > a:hover::before,
  .brands-tech-section [class*="logos"] > div:hover::before{
    width:76% !important;
    opacity:1 !important;
  }

  .brands-tech-section .brands-grid > *:hover::after,
  .brands-tech-section .brand-grid > *:hover::after,
  .brands-tech-section [class*="brands"] > a:hover::after,
  .brands-tech-section [class*="brands"] > div:hover::after,
  .brands-tech-section [class*="logos"] > a:hover::after,
  .brands-tech-section [class*="logos"] > div:hover::after{
    opacity:1 !important;
  }
}

/* Texto de las marcas */
.brands-tech-section .brands-grid > *,
.brands-tech-section .brand-grid > *,
.brands-tech-section [class*="brands"] > *,
.brands-tech-section [class*="logos"] > *{
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
}

/* Pequeño indicador tecnológico */
.brands-tech-section .brands-grid > * span,
.brands-tech-section .brand-grid > * span{
  position:relative;
  z-index:2;
}

/* Entrada escalonada, únicamente visual */
.brands-tech-section .brands-grid > *:nth-child(1),
.brands-tech-section .brand-grid > *:nth-child(1){animation-delay:.02s!important}
.brands-tech-section .brands-grid > *:nth-child(2),
.brands-tech-section .brand-grid > *:nth-child(2){animation-delay:.08s!important}
.brands-tech-section .brands-grid > *:nth-child(3),
.brands-tech-section .brand-grid > *:nth-child(3){animation-delay:.14s!important}
.brands-tech-section .brands-grid > *:nth-child(4),
.brands-tech-section .brand-grid > *:nth-child(4){animation-delay:.20s!important}
.brands-tech-section .brands-grid > *:nth-child(5),
.brands-tech-section .brand-grid > *:nth-child(5){animation-delay:.26s!important}

@media(max-width:768px){
  .brands-tech-section{
    padding-top:70px !important;
    padding-bottom:75px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .brands-tech-section *,
  .brands-tech-section *::before,
  .brands-tech-section *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   MARCAS ESPECIALIZADAS v2 - ajuste aislado de esta sección
   ========================================================= */
.brands-tech-section{
  padding:92px 0 96px !important;
  background:
    radial-gradient(circle at 8% 50%,rgba(145,255,0,.10),transparent 25%),
    radial-gradient(circle at 92% 50%,rgba(0,205,255,.10),transparent 27%),
    linear-gradient(180deg,#07100e 0%,#050a09 100%) !important;
}
.brands-tech-section::before{
  opacity:.22 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) !important;
  background-size:48px 48px !important;
}
.brands-tech-section::after{display:none !important;}
.brands-tech-section .marcas-title{margin-bottom:42px;}
.brands-tech-section .marcas-title span{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#9cff00;
  font-size:10px;
  font-weight:900;
  letter-spacing:.28em;
}
.brands-tech-section .marcas-title span::before,
.brands-tech-section .marcas-title span::after{
  content:"";
  width:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,#9cff00);
}
.brands-tech-section .marcas-title span::after{transform:scaleX(-1);}
.brands-tech-section .marcas-title strong{
  margin-top:10px;
  color:#fff;
  font-size:clamp(27px,3vw,42px);
  line-height:1;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.brands-tech-section .marcasSwiper{
  overflow:visible;
  padding:8px 4px 20px;
}
.brands-tech-section .marcasSwiper::before,
.brands-tech-section .marcasSwiper::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:70px;
  z-index:4;
  pointer-events:none;
}
.brands-tech-section .marcasSwiper::before{left:-2px;background:linear-gradient(90deg,#06100d,transparent);}
.brands-tech-section .marcasSwiper::after{right:-2px;background:linear-gradient(270deg,#06100d,transparent);}
.brands-tech-section .marcasSwiper .swiper-slide{
  height:132px;
  padding:0 2px;
}
.brands-tech-section .marca-fake{
  position:relative;
  width:100%;
  min-width:0;
  height:106px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  color:#f6f8f7;
  font-size:clamp(14px,1.25vw,18px);
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease,color .35s ease;
}
.brands-tech-section .marca-fake::before{
  content:"";
  position:absolute;
  left:18%;right:18%;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#9cff00,#00d2ff,transparent);
  opacity:.5;
  transition:opacity .3s ease,left .35s ease,right .35s ease;
}
.brands-tech-section .marca-fake::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:90px;height:90px;
  right:-38px;bottom:-52px;
  border:1px solid rgba(0,210,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(156,255,0,.025),0 0 0 34px rgba(0,210,255,.018);
  transition:transform .45s ease;
}
@media(hover:hover) and (pointer:fine){
  .brands-tech-section .marca-fake:hover{
    transform:translateY(-7px);
    color:#fff;
    border-color:rgba(108,235,112,.42);
    box-shadow:0 24px 52px rgba(0,0,0,.34),0 0 28px rgba(0,210,255,.08),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .brands-tech-section .marca-fake:hover::before{left:8%;right:8%;opacity:1;}
  .brands-tech-section .marca-fake:hover::after{transform:scale(1.35) translate(-7px,-5px);}
}
.brands-tech-section .brand-caption{
  margin:12px auto 0;
  max-width:650px;
  color:rgba(255,255,255,.48);
  font-size:12px;
  line-height:1.65;
  text-align:center;
  letter-spacing:.04em;
}
@media(max-width:767px){
  .brands-tech-section{padding:68px 0 72px !important;}
  .brands-tech-section .marcas-title{margin-bottom:30px;}
  .brands-tech-section .marcasSwiper::before,
  .brands-tech-section .marcasSwiper::after{width:28px;}
  .brands-tech-section .marcasSwiper .swiper-slide{height:116px;}
  .brands-tech-section .marca-fake{height:94px;border-radius:15px;font-size:13px;}
  .brands-tech-section .brand-caption{padding:0 20px;font-size:11px;}
}

/* =========================================================
   MARCAS ESPECIALIZADAS v3 - celeste + movimiento sutil
   Ajuste estrictamente aislado a .brands-tech-section
   ========================================================= */
.brands-tech-section{
  background:
    radial-gradient(circle at 12% 38%,rgba(0,210,255,.18),transparent 28%),
    radial-gradient(circle at 88% 62%,rgba(0,168,255,.14),transparent 30%),
    radial-gradient(circle at 52% 105%,rgba(156,255,0,.055),transparent 34%),
    linear-gradient(180deg,#07100f 0%,#061311 48%,#050a09 100%) !important;
}

.brands-tech-section::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  width:520px !important;
  height:520px !important;
  left:-190px !important;
  top:50% !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(0,210,255,.14) 0%,rgba(0,210,255,.045) 36%,transparent 70%) !important;
  filter:blur(2px) !important;
  opacity:.95 !important;
  animation:brandsCyanDrift 8s ease-in-out infinite alternate !important;
  pointer-events:none !important;
}

.brands-tech-section .marcas-title span{
  color:#58ddff !important;
  text-shadow:0 0 18px rgba(0,210,255,.26);
}
.brands-tech-section .marcas-title span::before,
.brands-tech-section .marcas-title span::after{
  background:linear-gradient(90deg,transparent,#58ddff) !important;
  box-shadow:0 0 9px rgba(0,210,255,.32);
}
.brands-tech-section .marcas-title strong{
  background:linear-gradient(90deg,#ffffff 0%,#ffffff 46%,#a9efff 58%,#ffffff 74%,#ffffff 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:brandsTitleSheen 6s ease-in-out infinite;
}

.brands-tech-section .marca-fake{
  border-color:rgba(65,214,255,.24) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(0,210,255,.075),transparent 48%),
    linear-gradient(145deg,rgba(8,39,43,.72),rgba(255,255,255,.018)) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    0 0 20px rgba(0,210,255,.035),
    inset 0 1px 0 rgba(130,232,255,.08) !important;
}
.brands-tech-section .marca-fake::before{
  left:10% !important;
  right:10% !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent,#31d7ff 25%,#9cff00 72%,transparent) !important;
  opacity:.82 !important;
  background-size:220% 100% !important;
  animation:brandsLineFlow 3.2s linear infinite !important;
}
.brands-tech-section .marca-fake::after{
  border-color:rgba(45,211,255,.24) !important;
  box-shadow:
    0 0 0 16px rgba(0,210,255,.035),
    0 0 0 34px rgba(0,210,255,.018),
    0 0 28px rgba(0,210,255,.05) !important;
  animation:brandsOrbPulse 4.8s ease-in-out infinite alternate !important;
}

.brands-tech-section .swiper-slide:nth-child(even) .marca-fake::after{
  animation-delay:-2.2s !important;
}
.brands-tech-section .swiper-slide:nth-child(3n) .marca-fake::before{
  animation-delay:-1.1s !important;
}

@media(hover:hover) and (pointer:fine){
  .brands-tech-section .marca-fake:hover{
    transform:translateY(-8px) scale(1.012) !important;
    border-color:rgba(68,219,255,.68) !important;
    box-shadow:
      0 26px 56px rgba(0,0,0,.34),
      0 0 34px rgba(0,210,255,.16),
      0 0 18px rgba(156,255,0,.055),
      inset 0 1px 0 rgba(184,242,255,.14) !important;
  }
}

.brands-tech-section .brand-caption{
  color:rgba(205,244,255,.62) !important;
}

@keyframes brandsCyanDrift{
  0%{transform:translate3d(0,-34%,0) scale(.92);opacity:.65}
  100%{transform:translate3d(calc(100vw + 80px),-54%,0) scale(1.08);opacity:.22}
}
@keyframes brandsTitleSheen{
  0%,30%{background-position:100% center}
  60%,100%{background-position:-100% center}
}
@keyframes brandsLineFlow{
  0%{background-position:200% 0}
  100%{background-position:-20% 0}
}
@keyframes brandsOrbPulse{
  0%{transform:scale(.92);opacity:.62}
  100%{transform:scale(1.16) translate(-5px,-4px);opacity:1}
}

@media(max-width:767px){
  .brands-tech-section::after{
    width:330px !important;
    height:330px !important;
    left:-170px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .brands-tech-section::after,
  .brands-tech-section .marcas-title strong,
  .brands-tech-section .marca-fake::before,
  .brands-tech-section .marca-fake::after{
    animation:none !important;
  }
}

/* =========================================================
   ENVAL - HEADER CONTRASTE / SCROLL FIX FINAL
   Solo corrige el fondo de la barra superior para evitar que
   logo y menu se mezclen visualmente con el contenido.
   ========================================================= */

#mainNavbar{
  background:linear-gradient(180deg,rgba(2,10,16,.88),rgba(3,12,17,.80)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(125%) !important;
  backdrop-filter:blur(16px) saturate(125%) !important;
  border-bottom:1px solid rgba(0,210,255,.10) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
  transition:background .28s ease,box-shadow .28s ease,border-color .28s ease,top .28s ease !important;
}

/* Al desplazarse: barra practicamente solida y claramente separada */
#mainNavbar.navbar-scrolled,
#mainNavbar.scrolled,
#mainNavbar.sticky{
  top:0 !important;
  background:linear-gradient(180deg,rgba(2,9,15,.985),rgba(2,11,16,.965)) !important;
  -webkit-backdrop-filter:blur(20px) saturate(130%) !important;
  backdrop-filter:blur(20px) saturate(130%) !important;
  border-bottom:1px solid rgba(0,210,255,.22) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.42),0 1px 0 rgba(0,210,255,.05) !important;
}

/* El logo queda integrado dentro del mismo fondo oscuro */
#mainNavbar .navbar-brand{
  position:relative;
  z-index:2;
}

/* Mantener la capsula del menu, pero con contraste coherente */
#mainNavbar.navbar-scrolled .navbar-nav,
#mainNavbar.scrolled .navbar-nav,
#mainNavbar.sticky .navbar-nav{
  background:linear-gradient(180deg,rgba(12,25,30,.92),rgba(4,13,18,.90)) !important;
  border-color:rgba(0,210,255,.16) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* En movil el menu desplegado conserva siempre un fondo legible */
@media(max-width:991px){
  #mainNavbar{
    top:0 !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    background:rgba(2,10,16,.97) !important;
  }

  #mainNavbar .navbar-collapse{
    margin-top:8px;
    padding:10px;
    border-radius:14px;
    background:rgba(3,12,17,.98) !important;
    border:1px solid rgba(0,210,255,.14);
    box-shadow:0 18px 38px rgba(0,0,0,.35);
  }
}

/* =========================================================
   ENVAL - EQUIPOS 3D / TECH SHOWCASE
   Mejora visual exclusiva de la seccion Equipos 3D.
   ========================================================= */
.productos-tech-showcase{
  background:
    radial-gradient(circle at 50% 16%,rgba(0,194,255,.15),transparent 28%),
    radial-gradient(circle at 50% 62%,rgba(0,140,205,.08),transparent 34%),
    linear-gradient(180deg,#071014 0%,#05090b 58%,#050707 100%) !important;
}

.productos-tech-showcase::after{
  content:"";
  position:absolute;
  width:720px;
  height:260px;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,205,255,.15),rgba(0,205,255,.035) 42%,transparent 72%);
  filter:blur(20px);
  pointer-events:none;
  animation:equiposAmbientGlow 5.5s ease-in-out infinite alternate;
}

.equipos3d-heading{
  position:relative;
  z-index:3;
}

.equipos3d-techline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:22px;
  color:rgba(193,238,250,.58);
  font-size:9px;
  font-weight:800;
  letter-spacing:2.2px;
}

.equipos3d-techline i{
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,205,255,.8),transparent);
}

.equipos3d-showcase{
  position:relative;
  z-index:4;
  padding-top:42px !important;
}

.equipo3d-card{
  min-height:565px !important;
  border-color:rgba(82,215,255,.18) !important;
  background:
    linear-gradient(145deg,rgba(12,33,42,.82),rgba(5,12,16,.94)) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.equipo3d-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 8%,rgba(0,205,255,.055) 34%,transparent 58%);
  transform:translateX(-105%);
  transition:transform .9s ease;
  pointer-events:none;
}

.equipo3d-card:hover::before{
  transform:translateX(105%);
}

.equipo3d-card:hover{
  transform:translateY(-10px) !important;
  border-color:rgba(76,220,255,.60) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.42),
    0 0 32px rgba(0,195,255,.12),
    inset 0 1px 0 rgba(170,240,255,.10) !important;
}

.equipo3d-featured{
  transform:translateY(-12px) scale(1.035);
  border-color:rgba(73,220,255,.55) !important;
  box-shadow:
    0 30px 76px rgba(0,0,0,.46),
    0 0 38px rgba(0,195,255,.13),
    inset 0 1px 0 rgba(170,240,255,.12) !important;
}

.equipo3d-featured:hover{
  transform:translateY(-18px) scale(1.045) !important;
}

.productos-tech-showcase .producto-badge{
  top:16px;
  right:16px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  color:#dcf8ff;
  border:1px solid rgba(78,220,255,.48);
  border-radius:999px;
  background:rgba(3,27,36,.80);
  box-shadow:0 0 20px rgba(0,204,255,.10);
  letter-spacing:1.1px;
}

.equipo3d-index{
  position:absolute;
  z-index:6;
  top:25px;
  left:26px;
  color:rgba(200,244,255,.58);
  font-size:9px;
  font-weight:800;
  letter-spacing:1.7px;
}

.equipo3d-media{
  position:relative;
  margin-top:24px;
  border:1px solid rgba(71,214,255,.14);
  background:#061015;
}

.equipo3d-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,transparent 20%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(0,190,240,.035),transparent 42%);
}

.equipo3d-media img{
  filter:brightness(.70) saturate(.82) contrast(1.04) !important;
}

.equipo3d-card:hover .equipo3d-media img{
  transform:scale(1.065) translateY(-3px) !important;
  filter:brightness(.86) saturate(.98) contrast(1.04) !important;
}

.equipo3d-grid{
  position:absolute;
  z-index:2;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(70,220,255,.48) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,220,255,.48) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent 4%,#000 38%,#000 72%,transparent 100%);
  pointer-events:none;
}

.equipo3d-scanline{
  position:absolute;
  z-index:4;
  left:4%;
  right:4%;
  top:13%;
  height:1px;
  opacity:.82;
  background:linear-gradient(90deg,transparent,rgba(79,226,255,.9),#d5faff,rgba(79,226,255,.9),transparent);
  box-shadow:0 0 13px rgba(50,220,255,.55);
  animation:equiposScan 4.4s ease-in-out infinite;
  pointer-events:none;
}

.equipo3d-focus{
  position:absolute;
  z-index:5;
  width:46px;
  height:46px;
  right:19px;
  bottom:18px;
  border:1px solid rgba(81,226,255,.66);
  border-radius:50%;
  box-shadow:0 0 18px rgba(0,204,255,.10),inset 0 0 14px rgba(0,204,255,.05);
  pointer-events:none;
}

.equipo3d-focus::before,
.equipo3d-focus::after{
  content:"";
  position:absolute;
  background:rgba(106,232,255,.70);
}

.equipo3d-focus::before{width:62px;height:1px;left:-9px;top:22px;}
.equipo3d-focus::after{width:1px;height:62px;left:22px;top:-9px;}

.productos-tech-showcase .producto-info span{
  color:#55ddff !important;
}

.equipo3d-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 12px;
}

.equipo3d-tags small{
  padding:5px 8px;
  color:rgba(195,238,248,.66);
  border:1px solid rgba(79,214,245,.15);
  border-radius:999px;
  background:rgba(0,168,210,.045);
  font-size:8px;
  font-weight:800;
  letter-spacing:1px;
}

.productos-tech-showcase .producto-info a{
  color:#61e2ff !important;
  letter-spacing:.8px;
}

.productos-tech-showcase .producto-info a i{
  transition:transform .25s ease;
}

.productos-tech-showcase .producto-info a:hover i{
  transform:translateX(5px);
}

.productos-tech-showcase .swiper-button-next,
.productos-tech-showcase .swiper-button-prev{
  color:#8cecff !important;
  border-color:rgba(80,221,255,.34) !important;
  background:rgba(2,16,22,.86) !important;
  box-shadow:0 0 22px rgba(0,196,240,.08);
}

.productos-tech-showcase .swiper-button-next:hover,
.productos-tech-showcase .swiper-button-prev:hover{
  border-color:rgba(90,230,255,.68) !important;
  background:rgba(5,30,39,.96) !important;
}

.equipos3d-all{
  border-color:rgba(83,220,255,.34) !important;
}

@keyframes equiposScan{
  0%,10%{top:13%;opacity:.12}
  28%{opacity:.95}
  72%{opacity:.85}
  90%,100%{top:88%;opacity:.10}
}

@keyframes equiposAmbientGlow{
  from{opacity:.60;transform:translate(-50%,-50%) scale(.92)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}

@media(max-width:1099px){
  .equipo3d-featured{transform:none;}
  .equipo3d-featured:hover{transform:translateY(-10px) !important;}
}

@media(max-width:767px){
  .productos-tech-showcase::after{width:430px;height:230px;}
  .equipos3d-techline{gap:7px;font-size:7px;letter-spacing:1.4px;}
  .equipos3d-techline i{width:18px;}
  .equipo3d-card{min-height:540px !important;}
}

@media(prefers-reduced-motion:reduce){
  .productos-tech-showcase::after,
  .equipo3d-scanline{animation:none !important;}
  .equipo3d-card::before{display:none;}
}

/* ==========================================================
   EXPERIENCIA A SU SERVICIO - COMMAND CENTER 2026
   ========================================================== */
.exp-command-section{position:relative;overflow:hidden;padding:112px 0 105px;background:#050a0d;color:#fff}
.exp-command-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,210,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,210,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);opacity:.65}
.exp-command-section:after{content:"";position:absolute;width:760px;height:760px;right:-260px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(0,210,255,.11),rgba(0,210,255,.025) 42%,transparent 68%);filter:blur(10px);pointer-events:none;animation:expAmbient 7s ease-in-out infinite alternate}
.exp-command-shell{position:relative;z-index:2;width:min(1420px,calc(100% - 70px));margin:auto}
.exp-command-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:42px}
.exp-command-titleblock{max-width:920px}.exp-command-kicker{display:flex;align-items:center;gap:10px;color:#25d6ff;font-size:11px;font-weight:900;letter-spacing:.24em}.exp-command-kicker span{width:9px;height:9px;border-radius:50%;background:#25d6ff;box-shadow:0 0 14px rgba(37,214,255,.95);animation:expBlink 1.8s ease-in-out infinite}
.exp-command-titleblock h2{margin:15px 0 18px!important;color:#fff!important;font-size:clamp(48px,5.4vw,82px)!important;line-height:.94!important;letter-spacing:-.055em!important;font-weight:800!important}.exp-command-titleblock h2 em{font-style:normal;background:linear-gradient(90deg,#fff 0%,#79e9ff 42%,#16cfff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(37,214,255,.08)}
.exp-command-titleblock p{margin:0;max-width:780px;color:#9eafb6;font-size:17px;line-height:1.75}
.exp-command-live{min-width:240px;padding:14px 17px;display:flex;align-items:center;gap:13px;border:1px solid rgba(37,214,255,.2);border-radius:15px;background:rgba(7,18,24,.78);box-shadow:inset 0 0 22px rgba(37,214,255,.025);backdrop-filter:blur(13px)}
.exp-live-ring{width:30px;height:30px;border-radius:50%;border:1px solid rgba(37,214,255,.35);display:grid;place-items:center;position:relative}.exp-live-ring:before{content:"";position:absolute;inset:-5px;border:1px solid rgba(37,214,255,.12);border-radius:50%;animation:expRing 2s ease-out infinite}.exp-live-ring i{width:7px;height:7px;border-radius:50%;background:#5df2ff;box-shadow:0 0 13px #25d6ff}.exp-command-live b,.exp-command-live small{display:block}.exp-command-live b{font-size:11px;letter-spacing:.12em}.exp-command-live small{margin-top:3px;color:#6f868e;font-size:8px;letter-spacing:.13em}
.exp-command-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(330px,.72fr);gap:18px}
.exp-main-card{min-width:0;border:1px solid rgba(37,214,255,.19);border-radius:24px;overflow:hidden;background:#071015;box-shadow:0 35px 95px rgba(0,0,0,.42),inset 0 0 30px rgba(37,214,255,.018)}
.exp-main-media{height:620px;position:relative;overflow:hidden}.exp-main-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s ease}.exp-main-media:hover img{transform:scale(1.035);filter:saturate(1.08) contrast(1.04)}
.exp-image-carousel{position:absolute;inset:0;overflow:hidden;background:#071015}.exp-carousel-slide{z-index:0;opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .9s ease,visibility .9s ease,transform 4.8s ease!important}.exp-carousel-slide.is-active{opacity:1;visibility:visible;transform:scale(1);z-index:1}.exp-main-media:hover .exp-carousel-slide.is-active{transform:scale(1.035)}.exp-carousel-dots{position:absolute;z-index:10;left:50%;bottom:17px;display:flex;gap:8px;transform:translateX(-50%)}.exp-carousel-dots button{width:8px;height:8px;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(4,14,20,.64);box-shadow:0 0 0 3px rgba(4,14,20,.22);transition:width .3s ease,background .3s ease,box-shadow .3s ease}.exp-carousel-dots button.is-active{width:28px;background:#25d6ff;border-color:#25d6ff;box-shadow:0 0 14px rgba(37,214,255,.7)}
.exp-main-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,14,.24),rgba(3,10,14,.03) 48%,rgba(3,10,14,.22)),linear-gradient(0deg,rgba(3,9,13,.97),rgba(3,9,13,.5) 27%,transparent 60%)}
.exp-grid-overlay{position:absolute;inset:0;background:linear-gradient(rgba(38,216,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(38,216,255,.055) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,black,transparent 65%);opacity:.35}
.exp-sweep{position:absolute;left:0;right:0;top:-15%;height:100px;background:linear-gradient(180deg,transparent,rgba(37,214,255,.08),rgba(100,240,255,.26),transparent);filter:blur(2px);animation:expSweep 5.2s ease-in-out infinite}
.exp-corner{position:absolute;width:48px;height:48px;z-index:5}.exp-corner.c1{top:22px;left:22px;border-top:2px solid #25d6ff;border-left:2px solid #25d6ff}.exp-corner.c2{top:22px;right:22px;border-top:2px solid rgba(255,255,255,.7);border-right:2px solid rgba(255,255,255,.7)}.exp-corner.c3{bottom:22px;left:22px;border-bottom:2px solid rgba(255,255,255,.7);border-left:2px solid rgba(255,255,255,.7)}.exp-corner.c4{bottom:22px;right:22px;border-bottom:2px solid #25d6ff;border-right:2px solid #25d6ff}
.exp-data-pill{position:absolute;z-index:6;min-width:142px;padding:10px 13px;border:1px solid rgba(37,214,255,.18);border-radius:9px;background:rgba(4,14,20,.72);backdrop-filter:blur(9px);box-shadow:0 14px 30px rgba(0,0,0,.24)}.exp-data-pill span,.exp-data-pill strong{display:block}.exp-data-pill span{color:#6f8b95;font-size:7px;letter-spacing:.17em}.exp-data-pill strong{margin-top:3px;font-size:10px;letter-spacing:.07em;color:#e9fbff}.pill-a{left:7%;top:15%}.pill-b{right:8%;top:27%}.pill-c{right:14%;top:53%}
.exp-main-copy{position:absolute;z-index:7;left:50px;right:50px;bottom:46px;max-width:700px}.exp-index{color:#25d6ff;font-size:9px;font-weight:800;letter-spacing:.22em}.exp-main-copy h3{margin:10px 0 14px;font-size:clamp(32px,3.2vw,48px);line-height:1.03;letter-spacing:-.035em;color:#fff}.exp-main-copy h3 strong{font-weight:800;color:#86ecff}.exp-main-copy p{max-width:650px;margin:0;color:#a9b7bc;font-size:14px;line-height:1.7}
.exp-side-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}.exp-tech-card{position:relative;overflow:hidden;padding:24px 24px 21px;border:1px solid rgba(37,214,255,.13);border-radius:18px;background:linear-gradient(145deg,rgba(10,23,29,.96),rgba(5,12,16,.94));transition:transform .34s ease,border-color .34s ease,box-shadow .34s ease}.exp-tech-card:before{content:"";position:absolute;width:160px;height:160px;right:-65px;top:-70px;border-radius:50%;background:radial-gradient(circle,rgba(37,214,255,.11),transparent 68%);transition:transform .4s ease}.exp-tech-card:hover{transform:translateX(-5px);border-color:rgba(37,214,255,.4);box-shadow:0 20px 45px rgba(0,0,0,.28),inset 0 0 25px rgba(37,214,255,.025)}.exp-tech-card:hover:before{transform:scale(1.25)}
.exp-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.exp-card-top span{color:#53717b;font-size:11px;font-weight:900;letter-spacing:.12em}.exp-card-top i{font-size:22px;color:#25d6ff;filter:drop-shadow(0 0 8px rgba(37,214,255,.25))}.exp-tech-card>small{color:#25d6ff;font-size:8px;letter-spacing:.18em;font-weight:800}.exp-tech-card h4{margin:6px 0 10px;color:#fff;font-size:20px}.exp-tech-card p{margin:0;color:#80949c;font-size:12px;line-height:1.6}.exp-tech-line{height:2px;margin-top:18px;background:rgba(255,255,255,.055);overflow:hidden}.exp-tech-line i{display:block;width:32%;height:100%;background:linear-gradient(90deg,#25d6ff,rgba(37,214,255,.05));box-shadow:0 0 9px rgba(37,214,255,.4);transition:width .45s ease}.exp-tech-card:hover .exp-tech-line i{width:86%}
.exp-command-footer{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(130px,.72fr)) minmax(270px,1.45fr);gap:10px}.exp-command-footer>div{min-height:76px;padding:14px 17px;border:1px solid rgba(37,214,255,.11);border-radius:13px;background:rgba(7,16,21,.75);display:flex;flex-direction:column;justify-content:center}.exp-command-footer strong{color:#fff;font-size:20px;letter-spacing:-.02em}.exp-command-footer span{margin-top:3px;color:#667e87;font-size:7px;letter-spacing:.14em}.exp-command-footer .exp-footer-signal{flex-direction:row;align-items:center;gap:12px}.exp-footer-signal i{width:9px;height:9px;border-radius:50%;background:#25d6ff;box-shadow:0 0 12px #25d6ff;animation:expBlink 1.6s ease-in-out infinite}.exp-footer-signal span{margin:0;color:#9cb1b8;font-size:8px;letter-spacing:.14em}
@keyframes expSweep{0%{top:-18%;opacity:0}15%{opacity:.8}70%{opacity:.5}100%{top:108%;opacity:0}}@keyframes expBlink{0%,100%{opacity:.4;transform:scale(.86)}50%{opacity:1;transform:scale(1.08)}}@keyframes expRing{0%{transform:scale(.75);opacity:.65}100%{transform:scale(1.55);opacity:0}}@keyframes expAmbient{from{transform:translate3d(0,0,0) scale(.94)}to{transform:translate3d(-60px,35px,0) scale(1.08)}}
@media(max-width:1050px){.exp-command-head{align-items:flex-start;flex-direction:column}.exp-command-grid{grid-template-columns:1fr}.exp-side-stack{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.exp-command-footer{grid-template-columns:repeat(2,1fr)}.exp-footer-signal{grid-column:1/-1}.exp-command-shell{width:min(100% - 34px,1420px)}}
@media(max-width:760px){.exp-command-section{padding:78px 0 82px}.exp-command-titleblock h2{font-size:46px!important}.exp-main-media{height:500px}.exp-data-pill{display:none}.exp-main-copy{left:27px;right:27px;bottom:29px}.exp-main-copy h3{font-size:31px}.exp-side-stack{grid-template-columns:1fr}.exp-command-footer{grid-template-columns:1fr 1fr}.exp-footer-signal{grid-column:1/-1}.exp-command-live{min-width:0;width:100%}}
@media(max-width:520px){.exp-command-shell{width:min(100% - 24px,1420px)}.exp-command-footer{grid-template-columns:1fr}.exp-footer-signal{grid-column:auto}.exp-command-titleblock p{font-size:15px}.exp-main-media{height:470px}}
@media(prefers-reduced-motion:reduce){.exp-command-section:after,.exp-command-kicker span,.exp-live-ring:before,.exp-sweep,.exp-footer-signal i{animation:none!important}.exp-carousel-slide{transition:none!important}}

/* =========================================================
   INICIO - EXPERIENCIA: LEGIBILIDAD + INTERACCION INFERIOR
   Alcance exclusivo de .exp-command-section.
   ========================================================= */
.exp-command-section .exp-main-overlay{
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,9,14,.76) 0%,rgba(1,9,14,.48) 42%,rgba(1,9,14,.08) 72%,rgba(1,9,14,.18) 100%),
    linear-gradient(0deg,rgba(1,7,11,.96) 0%,rgba(1,7,11,.78) 25%,rgba(1,7,11,.22) 54%,transparent 72%);
}
.exp-command-section .exp-main-copy{
  isolation:isolate;
  text-shadow:0 3px 16px rgba(0,0,0,.88),0 1px 2px rgba(0,0,0,.95);
}
.exp-command-section .exp-main-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-24px -32px -22px -32px;
  border-radius:20px;
  background:linear-gradient(90deg,rgba(2,12,18,.76),rgba(2,12,18,.34) 64%,transparent 100%);
  filter:blur(2px);
  pointer-events:none;
}
.exp-command-section .exp-main-copy h3,
.exp-command-section .exp-main-copy p{color:#fff}
.exp-command-section .exp-main-copy h3 strong{
  color:#7eeaff;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 18px rgba(37,214,255,.2);
}
.exp-command-section .exp-main-copy p{color:rgba(244,251,253,.94)}

.exp-command-section .exp-command-footer>div:nth-child(-n+4){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.exp-command-section .exp-command-footer>div:nth-child(-n+4)::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(115deg,transparent 15%,rgba(37,214,255,.18) 48%,transparent 72%);
  transform:translateX(-115%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.exp-command-section .exp-command-footer>div:nth-child(-n+4)::after{
  content:"";
  position:absolute;
  left:17px;
  bottom:9px;
  width:28px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#25d6ff,#8cff00);
  box-shadow:0 0 12px rgba(37,214,255,.5);
  transition:width .35s ease,box-shadow .35s ease;
}
.exp-command-section .exp-command-footer>div:nth-child(-n+4) strong,
.exp-command-section .exp-command-footer>div:nth-child(-n+4) span{
  transition:color .3s ease,transform .3s ease,text-shadow .3s ease;
}
@media(hover:hover) and (pointer:fine){
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):hover{
    transform:translateY(-6px);
    border-color:rgba(37,214,255,.52);
    background:linear-gradient(145deg,rgba(9,28,36,.96),rgba(5,16,22,.92));
    box-shadow:0 17px 34px rgba(0,0,0,.32),0 0 24px rgba(37,214,255,.09),inset 0 0 18px rgba(37,214,255,.045);
  }
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):hover::before{transform:translateX(115%)}
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):hover::after{width:calc(100% - 34px);box-shadow:0 0 17px rgba(37,214,255,.72)}
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):hover strong{
    color:#7eeaff;
    transform:translateX(3px);
    text-shadow:0 0 16px rgba(37,214,255,.36);
  }
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):hover span{color:#b7d8e2;transform:translateX(3px)}
}
@media(max-width:760px){
  .exp-command-section .exp-main-copy::before{inset:-20px -18px -18px;border-radius:15px;background:rgba(2,12,18,.68)}
  .exp-command-section .exp-command-footer>div:nth-child(-n+4):active{transform:scale(.985);border-color:rgba(37,214,255,.5);background:rgba(9,28,36,.95)}
}
@media(prefers-reduced-motion:reduce){
  .exp-command-section .exp-command-footer>div:nth-child(-n+4),
  .exp-command-section .exp-command-footer>div:nth-child(-n+4)::before,
  .exp-command-section .exp-command-footer>div:nth-child(-n+4)::after,
  .exp-command-section .exp-command-footer>div:nth-child(-n+4) strong,
  .exp-command-section .exp-command-footer>div:nth-child(-n+4) span{transition:none!important}
}

/* =========================================================
   QUIENES SOMOS - RESULTADOS REALES V2
   Mejora visual aislada. Solo afecta .nosotros-home-v2
   ========================================================= */
.nosotros-home-v2{
    position:relative;
    overflow:hidden;
    padding:135px 0;
    background:
        radial-gradient(circle at 18% 48%, rgba(121,255,0,.055), transparent 31%),
        radial-gradient(circle at 82% 38%, rgba(0,190,230,.075), transparent 34%),
        #050809;
}

.nosotros-home-v2::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.25;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}

.nosotros-home-v2 .container{
    position:relative;
    z-index:2;
}

.resultados-visual{
    position:relative;
    min-height:560px;
    margin-right:18px;
    isolation:isolate;
}

.resultados-image-wrap{
    position:absolute;
    inset:28px 34px 32px 0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:28px 8px 28px 8px;
    background:#0b1114;
    box-shadow:0 34px 80px rgba(0,0,0,.38);
}

.resultados-image-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(5,9,11,.08), rgba(5,9,11,.54)),
        linear-gradient(110deg, rgba(121,255,0,.06), transparent 38%, rgba(0,190,230,.10));
}

.resultados-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.82) contrast(1.06) brightness(.73);
    transform:scale(1.025);
    transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.resultados-visual:hover .resultados-image-wrap img{
    transform:scale(1.065);
    filter:saturate(.95) contrast(1.07) brightness(.78);
}

.resultados-grid{
    position:absolute;
    z-index:-1;
    top:0;
    right:0;
    width:72%;
    height:72%;
    border-top:1px solid rgba(0,190,230,.25);
    border-right:1px solid rgba(0,190,230,.25);
}

.resultados-grid::before{
    content:"";
    position:absolute;
    inset:18px;
    background-image:
        linear-gradient(rgba(0,190,230,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,190,230,.075) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.65;
}

.resultados-scanline{
    position:absolute;
    z-index:3;
    left:0;
    top:31%;
    width:calc(100% - 34px);
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(121,255,0,.75) 18%, rgba(0,190,230,.8) 72%, transparent);
    box-shadow:0 0 18px rgba(0,190,230,.22);
    opacity:.62;
    animation:resultadosScan 5.5s ease-in-out infinite;
    pointer-events:none;
}

.resultados-badge{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:205px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:rgba(8,14,17,.88);
    box-shadow:0 18px 38px rgba(0,0,0,.34);
    backdrop-filter:blur(12px);
}

.resultados-badge i{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    border-radius:50%;
    color:#0bbfe8;
    border:1px solid rgba(0,190,230,.32);
    background:rgba(0,190,230,.07);
    font-size:17px;
}

.resultados-badge span{
    display:block;
    color:#7e8a90;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.resultados-badge strong{
    display:block;
    margin-top:3px;
    color:#f7f9f8;
    font-size:12px;
    font-weight:800;
}

.resultados-badge-top{
    top:0;
    right:0;
}

.resultados-badge-bottom{
    left:26px;
    bottom:0;
    min-width:225px;
}

.resultados-pulse{
    width:11px !important;
    height:11px;
    flex:0 0 11px;
    border-radius:50%;
    background:#79ff00;
    box-shadow:0 0 0 6px rgba(121,255,0,.08), 0 0 20px rgba(121,255,0,.38);
    animation:resultadosPulse 2.2s ease-in-out infinite;
}

.resultados-corner{
    position:absolute;
    z-index:4;
    width:56px;
    height:56px;
    pointer-events:none;
}

.resultados-corner-a{
    left:-8px;
    top:18px;
    border-top:2px solid #79ff00;
    border-left:2px solid #79ff00;
}

.resultados-corner-b{
    right:22px;
    bottom:20px;
    border-right:2px solid #09bde7;
    border-bottom:2px solid #09bde7;
}

.resultados-copy{
    max-width:590px;
    padding-left:22px;
}

.nosotros-home-v2 .resultados-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.resultados-kicker i{
    width:24px;
    height:1px;
    background:linear-gradient(90deg,#79ff00,#08bde7);
    box-shadow:0 0 10px rgba(121,255,0,.22);
}

.nosotros-home-v2 h2{
    margin:0 0 28px;
    max-width:650px;
    color:#f6f8f8;
    font-size:clamp(42px,4.55vw,72px);
    line-height:.94;
    letter-spacing:-.045em;
    font-weight:900;
}

.nosotros-home-v2 h2 strong{
    display:block;
    margin-top:7px;
    color:#08bde7;
    text-shadow:0 0 34px rgba(0,190,230,.12);
}

.nosotros-home-v2 .resultados-lead{
    max-width:545px;
    margin:0 0 31px;
    color:#9ba5aa;
    font-size:15px;
    line-height:1.85;
}

.resultados-pilares{
    display:grid;
    gap:0;
    margin:0 0 34px;
    border-top:1px solid rgba(255,255,255,.09);
}

.resultado-pilar{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:16px;
    align-items:start;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
    transition:padding-left .3s ease, border-color .3s ease;
}

.resultado-pilar:hover{
    padding-left:8px;
    border-color:rgba(0,190,230,.25);
}

.resultado-pilar > span{
    padding-top:2px;
    color:#79ff00;
    font-size:10px;
    font-weight:900;
    letter-spacing:1.8px;
}

.resultado-pilar strong{
    display:block;
    color:#f3f6f5;
    font-size:14px;
    font-weight:850;
    letter-spacing:.01em;
}

.resultado-pilar small{
    display:block;
    margin-top:5px;
    color:#78848a;
    font-size:12px;
    line-height:1.55;
}

.nosotros-home-v2 .resultados-cta{
    margin-top:2px;
}

@keyframes resultadosScan{
    0%,100%{transform:translateY(-95px);opacity:.22}
    50%{transform:translateY(185px);opacity:.68}
}

@keyframes resultadosPulse{
    0%,100%{transform:scale(.92);opacity:.78}
    50%{transform:scale(1.08);opacity:1}
}

@media(max-width:991.98px){
    .nosotros-home-v2{padding:95px 0}
    .resultados-visual{min-height:500px;margin-right:0}
    .resultados-copy{padding-left:0;max-width:none}
    .nosotros-home-v2 h2{font-size:clamp(42px,8vw,66px)}
}

@media(max-width:575.98px){
    .nosotros-home-v2{padding:78px 0}
    .resultados-visual{min-height:410px}
    .resultados-image-wrap{inset:20px 14px 34px 0;border-radius:20px 6px 20px 6px}
    .resultados-badge{min-width:0;padding:12px 13px}
    .resultados-badge-top{right:2px}
    .resultados-badge-bottom{left:14px}
    .resultados-badge strong{font-size:10px}
    .resultados-badge span{font-size:8px}
    .resultados-scanline{width:calc(100% - 14px)}
    .resultados-corner-b{right:8px}
    .nosotros-home-v2 h2{font-size:clamp(38px,12vw,54px)}
    .resultado-pilar{grid-template-columns:38px 1fr;gap:12px}
}

@media(prefers-reduced-motion:reduce){
    .resultados-scanline,.resultados-pulse{animation:none}
    .resultados-image-wrap img{transition:none}
}

/* =========================================================
   MOBILE HERO PERFORMANCE / REPAINT FIX
   Solo aplica en telefono. Desktop queda sin cambios.
   - Evita que AOS deje contenido del hero sin repintar al volver.
   - Reduce capas GPU costosas en Chrome Android.
   - Mantiene una imagen poster debajo del video como respaldo.
   ========================================================= */
@media (max-width: 767px) {
  /* En movil el contenido critico del primer pantallazo siempre queda pintado. */
  .hero-video-layout [data-aos],
  .hero-video-layout [data-aos].aos-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  /* Capas ambientales muy costosas en GPU: se simplifican solo en movil. */
  .hero-video-layout .hero-orb {
    display: none !important;
  }

  .hero-video-layout .hero-particles {
    animation: none !important;
    opacity: .10 !important;
  }

  .hero-video-stage::before {
    filter: none !important;
    opacity: .38 !important;
  }

  /* El poster queda siempre debajo del video. Si Chrome libera el frame,
     nunca aparece un bloque vacio/negro al volver hacia arriba. */
  .hero-video-card {
    background:
      linear-gradient(rgba(2,5,6,.12), rgba(2,5,6,.12)),
      url("../img/hero-industrial.webp") center center / cover no-repeat !important;
    clip-path: none !important;
    contain: paint;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .hero-video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Los blur en overlays flotantes fuerzan composicion extra en Android. */
  .hero-video-badge,
  .hero-video-control {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* =========================================================
   MOBILE NAV FIX - DESPLIEGUE SUPERIOR + SUBMENUS
   Solo movil/tablet (<992px). Desktop no se modifica.
   ========================================================= */
@media (max-width: 991px) {
  /* El panel siempre nace debajo del logo/toggler y ocupa toda la fila. */
  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  #mainNavbar .navbar-collapse {
    flex-basis: 100% !important;
    width: 100% !important;
    order: 3 !important;
    transform-origin: top center !important;
  }

  /* Bootstrap anima la altura: reforzamos apertura de arriba hacia abajo. */
  #mainNavbar .navbar-collapse.collapsing {
    height: 0;
    overflow: hidden !important;
    transition: height .26s ease !important;
  }

  #mainNavbar .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  #mainNavbar .navbar-collapse.collapse.show {
    display: block !important;
  }

  /* Los elementos padre conservan el menu principal abierto al tocarse. */
  #mainNavbar .mega-trigger {
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Submenu en flujo normal: aparece inmediatamente debajo de su padre. */
  #mainNavbar .has-mega-menu > .mega-menu {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  #mainNavbar .has-mega-menu.mega-open > .mega-menu {
    display: block !important;
  }

  /* En movil no usar hover para abrir submenus; solo el toque. */
  #mainNavbar .has-mega-menu:hover > .mega-menu:not(.force-mobile-open) {
    display: none !important;
  }

  #mainNavbar .has-mega-menu.mega-open:hover > .mega-menu {
    display: block !important;
  }
}

/* =========================================================
   MOBILE NAV SCROLL FIX
   El menu movil es un panel independiente con scroll propio.
   Desktop queda intacto.
   ========================================================= */
@media (max-width: 991px) {
  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    max-height: calc(100dvh - 105px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #mainNavbar .navbar-collapse.collapse.show {
    height: auto !important;
  }

  #mainNavbar .navbar-nav,
  #mainNavbar .nav-item,
  #mainNavbar .has-mega-menu,
  #mainNavbar .mega-menu,
  #mainNavbar .mega-menu * {
    flex-shrink: 0 !important;
  }

  #mainNavbar .has-mega-menu > .mega-menu,
  #mainNavbar .has-mega-menu.mega-open > .mega-menu {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html.crl-mobile-menu-open,
  body.crl-mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
}

/* =========================================================
   CRL - Scrollbar del menu movil integrada al diseno
   Solo afecta el panel de navegacion en pantallas moviles.
   ========================================================= */
@media (max-width: 991px) {
  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    scrollbar-width: thin;
    scrollbar-color: #18c7df #071014;
  }

  #mainNavbar .navbar-collapse.collapse.show::-webkit-scrollbar,
  #mainNavbar .navbar-collapse.collapsing::-webkit-scrollbar {
    width: 5px;
  }

  #mainNavbar .navbar-collapse.collapse.show::-webkit-scrollbar-track,
  #mainNavbar .navbar-collapse.collapsing::-webkit-scrollbar-track {
    background: #071014;
    border-radius: 999px;
  }

  #mainNavbar .navbar-collapse.collapse.show::-webkit-scrollbar-thumb,
  #mainNavbar .navbar-collapse.collapsing::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9bea25 0%, #18c7df 100%);
    border-radius: 999px;
    border: 1px solid #071014;
  }
}

/* ENVAL header identity - logo-only change */
#mainNavbar .brand-enval{gap:9px !important;}
#mainNavbar .brand-enval .brand-planet{width:48px;height:48px;object-fit:cover;border-radius:50%;filter:drop-shadow(0 0 8px rgba(0,210,255,.18));flex:0 0 auto;}
#mainNavbar .brand-enval .brand-sub{justify-content:center;}
#mainNavbar .brand-enval .brand-main{font-size:27px !important;line-height:.9 !important;letter-spacing:.035em !important;background:linear-gradient(90deg,#9cff00 0%,#55e36c 42%,#00d2ff 100%) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;}
#mainNavbar .brand-enval .brand-sub small{font-size:7px !important;letter-spacing:1.15px !important;color:#c8d0d3 !important;white-space:nowrap;}
@media(max-width:575.98px){#mainNavbar .brand-enval{gap:6px !important;}#mainNavbar .brand-enval .brand-planet{width:38px;height:38px;}#mainNavbar .brand-enval .brand-main{font-size:23px !important;}#mainNavbar .brand-enval .brand-sub small{font-size:5.7px !important;letter-spacing:.72px !important;}}

/* ENVAL - logo ligeramente mas grande (solo cabecera) */
#mainNavbar .brand-enval .brand-planet{
  width:56px !important;
  height:56px !important;
}
#mainNavbar .brand-enval .brand-main{
  font-size:30px !important;
}
#mainNavbar .brand-enval .brand-sub small{
  font-size:7.2px !important;
}
@media(max-width:575.98px){
  #mainNavbar .brand-enval .brand-planet{
    width:44px !important;
    height:44px !important;
  }
  #mainNavbar .brand-enval .brand-main{
    font-size:25px !important;
  }
  #mainNavbar .brand-enval .brand-sub small{
    font-size:6px !important;
  }
}

/* ============================================================
   ENVAL HERO - CARRUSEL DE 4 IMAGENES
   Mantiene el mismo marco/diseño visual del hero existente.
   Para cambiar fotos, reemplazar img/hero-slide-1.webp ... 4.png.
============================================================ */
.hero-image-carousel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:inherit;
}
.hero-carousel-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .65s ease, transform 2.4s ease;
  pointer-events:none;
}
.hero-carousel-slide.active{
  opacity:1;
  transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .hero-carousel-slide{transition:none;transform:none}
}

/* ENVAL header planet - crisp raster rendering only; visual size unchanged */
#mainNavbar .brand-enval .brand-planet{
  object-fit:contain !important;
  object-position:center !important;
  image-rendering:auto;
  transform:none !important;
  backface-visibility:hidden;
}


/* ============================================================
   ENVAL - PARTICULAS AMBIENTALES GLOBALES
   Capa decorativa sutil; no altera el layout ni los clics.
============================================================ */
.enval-ambient-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    opacity: .78;
}

body > *:not(.enval-ambient-particles):not(.preloader):not(.scroll-progress):not(.social-side):not(.whatsapp) {
    position: relative;
    z-index: 2;
}

.preloader { z-index: 99999; }
.scroll-progress { z-index: 100000; }

@media (max-width: 767.98px) {
    .enval-ambient-particles { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
    .enval-ambient-particles { opacity: .38; }
}


/* ENVAL - mantener accesos flotantes visibles sobre toda la pagina */
.social-side {
    position: fixed !important;
    z-index: 50000 !important;
}

.whatsapp {
    position: fixed !important;
    right: 25px !important;
    bottom: 25px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1000 !important;
}

@media (max-width: 767.98px) {
    .whatsapp {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* ENVAL - redes sociales en capa global del viewport.
   El contenedor se ubica fuera del HERO para evitar que overflow/stacking contexts
   de cada seccion lo oculten durante el scroll. */
body > .social-side {
    position: fixed !important;
    top: 50% !important;
    right: 22px !important;
    transform: translateY(-50%) !important;
    z-index: 2147483000 !important;
    isolation: isolate;
    pointer-events: auto;
}
body > .social-side .social-item {
    position: relative !important;
    z-index: 1;
    width: 46px;
    height: 46px;
    overflow: visible;
}
body > .social-side .social-icon {
    position: relative !important;
    z-index: 2;
}
body > .social-side .social-label {
    position: absolute !important;
    z-index: 1;
    right: 24px !important;
    top: 50%;
    transform: translate(22px, -50%);
}
body > .social-side .social-item:hover .social-label {
    transform: translate(0, -50%);
}
@media (max-width: 991px) {
    body > .social-side { display: none !important; }
}

/* ============================================================
   ENVAL - CORRECCION NAVBAR AL HACER SCROLL
   El HERO quedaba dentro de un stacking context creado por la capa
   global de particulas, haciendo que las secciones posteriores
   pudieran pintar por encima del menu fijo.
   No modifica el diseno; solo libera el navbar al nivel global.
============================================================ */
body > header#inicio {
    z-index: auto !important;
}

#mainNavbar.navbar-scrolled {
    z-index: 6000 !important;
}

/* ============================================================
   ENVAL - CABECERA MOVIL EN UNA SOLA FILA
   Solo responsive: logo a la izquierda + boton menu a la derecha.
   El panel desplegable conserva su comportamiento debajo.
============================================================ */
@media (max-width: 991.98px) {
  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    min-height: 70px !important;
    width: 100% !important;
  }

  #mainNavbar .navbar-brand {
    order: 1 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 68px) !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #mainNavbar .navbar-toggler {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    align-self: center !important;
  }

  #mainNavbar .navbar-collapse {
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  #mainNavbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #mainNavbar .brand-enval {
    max-width: calc(100% - 64px) !important;
  }

  #mainNavbar .brand-enval .brand-planet {
    width: 42px !important;
    height: 42px !important;
  }

  #mainNavbar .brand-enval .brand-main {
    font-size: 24px !important;
  }

  #mainNavbar .brand-enval .brand-sub small {
    font-size: 5.5px !important;
    letter-spacing: .55px !important;
  }
}

/* ============================================================
   ENVAL - AJUSTE DEFINITIVO HEADER MOVIL
   Mantiene logo y boton hamburguesa en la misma fila incluso en
   anchos como Samsung S22+. El boton se ancla al extremo derecho
   y el panel desplegable continua debajo del encabezado.
============================================================ */
@media (max-width: 991.98px) {
  #mainNavbar {
    position: relative !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 72px !important;
    padding-right: 72px !important;
  }

  #mainNavbar .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #mainNavbar .navbar-toggler {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  /* Cuando el menu esta abierto el boton no debe bajar con el panel. */
  #mainNavbar:has(.navbar-collapse.show) .navbar-toggler,
  #mainNavbar:has(.navbar-collapse.collapsing) .navbar-toggler {
    top: 36px !important;
    transform: translateY(-50%) !important;
  }

  #mainNavbar .navbar-collapse {
    flex: 0 0 100% !important;
    width: calc(100% + 72px) !important;
    max-width: none !important;
    margin-right: -72px !important;
  }
}

@media (max-width: 575.98px) {
  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    padding-right: 66px !important;
  }

  #mainNavbar .navbar-collapse {
    width: calc(100% + 66px) !important;
    margin-right: -66px !important;
  }
}

/* ============================================================
   ENVAL - AJUSTE FINAL CABECERA Y MENU MOVIL
   1) Elimina el espacio superior: navbar fijo al borde superior.
   2) El desplegable ocupa el ancho util y queda centrado.
   Solo movil/tablet. Desktop no se modifica.
============================================================ */
@media (max-width: 991.98px) {
  #mainNavbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    z-index: 10000 !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    min-height: 64px !important;
    padding-right: 66px !important;
    margin: 0 auto !important;
  }

  #mainNavbar .navbar-toggler {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  /* Al abrir el menu el boton permanece en la misma posicion. */
  #mainNavbar:has(.navbar-collapse.show) .navbar-toggler,
  #mainNavbar:has(.navbar-collapse.collapsing) .navbar-toggler {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Panel centrado en el viewport, sin hueco lateral derecho. */
  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #mainNavbar .navbar-collapse.collapse.show .navbar-nav,
  #mainNavbar .navbar-collapse.collapsing .navbar-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reserva solo la altura real de la cabecera para el contenido del hero. */
  .hero-video-layout {
    padding-top: 76px !important;
  }
}

@media (max-width: 575.98px) {
  #mainNavbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    min-height: 62px !important;
    padding-right: 62px !important;
  }

  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 82px) !important;
  }

  .hero-video-layout {
    padding-top: 72px !important;
  }
}

/* ============================================================
   ENVAL - AJUSTE MOVIL FINAL: HEADER ESTABLE + REDES SOCIALES
   Solo movil/tablet. No altera la vista desktop.
============================================================ */
@media (max-width: 991.98px) {
  /* Mantener logo y hamburguesa siempre en una sola fila, incluso al hacer scroll. */
  #mainNavbar,
  #mainNavbar.navbar-scrolled,
  #mainNavbar.scrolled,
  #mainNavbar.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 76px !important;
    transform: none !important;
    margin: 0 !important;
    background: rgba(2, 13, 18, .97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 60000 !important;
  }

  #mainNavbar > .container,
  #mainNavbar > .container-fluid {
    position: relative !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    width: 100% !important;
    padding-right: 68px !important;
    overflow: visible !important;
  }

  #mainNavbar .navbar-brand {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 6px) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #mainNavbar .brand-enval .brand-sub {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #mainNavbar .brand-enval .brand-sub small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #mainNavbar .navbar-toggler {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  /* El desplegable aparece centrado debajo del header, nunca sobre el logo. */
  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 60001 !important;
  }

  /* En movil, las redes dejan de ser columna lateral y pasan a una barra compacta. */
  body > .social-side {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: fixed !important;
    left: 14px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    padding: 5px !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 207, 232, .16) !important;
    border-radius: 999px !important;
    background: rgba(2, 13, 18, .82) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 45000 !important;
  }

  body > .social-side .social-item {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    flex: 0 0 40px !important;
  }

  body > .social-side .social-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    transform: none !important;
  }

  /* En movil no se muestran las etiquetas laterales; solo los iconos. */
  body > .social-side .social-label {
    display: none !important;
  }

  body > .social-side .social-item:hover,
  body > .social-side .social-item:focus,
  body > .social-side .social-item:active,
  body > .social-side .social-icon,
  body > .social-side .social-item:hover .social-icon,
  body > .social-side .social-item:focus .social-icon,
  body > .social-side .social-item:active .social-icon {
    border-color: rgba(255,255,255,.20) !important;
    box-shadow: none !important;
  }

  /* WhatsApp se mantiene independiente a la derecha. */
  .whatsapp {
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 45000 !important;
  }

  /* Al abrir el menu ocultamos accesos flotantes para no competir con el panel. */
  html.crl-mobile-menu-open body > .social-side,
  body.crl-mobile-menu-open > .social-side,
  html.crl-mobile-menu-open .whatsapp,
  body.crl-mobile-menu-open .whatsapp {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 575.98px) {
  #mainNavbar,
  #mainNavbar.navbar-scrolled,
  #mainNavbar.scrolled,
  #mainNavbar.sticky {
    min-height: 72px !important;
  }

  #mainNavbar .navbar-collapse.collapse.show,
  #mainNavbar .navbar-collapse.collapsing {
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
  }

  body > .social-side {
    left: 10px !important;
    gap: 5px !important;
    padding: 4px !important;
  }

  body > .social-side .social-item,
  body > .social-side .social-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
}


/* ENVAL - ajuste final MARCAS ESPECIALIZADAS (desktop)
   Centra las 4 marcas y elimina unicamente las sombras laterales del carrusel. */
@media (min-width:768px){
  .brands-tech-section .marcasSwiper{
    overflow:visible !important;
  }
  .brands-tech-section .marcasSwiper::before,
  .brands-tech-section .marcasSwiper::after{
    display:none !important;
    content:none !important;
  }
  .brands-tech-section .marcasSwiper .swiper-wrapper{
    justify-content:center !important;
  }
}


/* ENVAL - LOGOS REALES EN MARCAS ESPECIALIZADAS
   Ajuste aislado para conservar el diseño actual en PC y móvil. */
.brands-tech-section .marca-logo{
  padding:18px 24px !important;
}
.brands-tech-section .marca-logo img{
  display:block;
  width:min(90%,250px);
  height:60px;
  max-width:90%;
  object-fit:contain;
  margin:auto;
  filter:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
@media(hover:hover) and (pointer:fine){
  .brands-tech-section .marca-logo:hover img{transform:scale(1.055);filter:drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 0 15px rgba(0,210,255,.12));}
}
@media(max-width:767px){
  .brands-tech-section .marca-logo{
    padding:14px 18px !important;
  }
  .brands-tech-section .marca-logo img{
    width:min(88%,220px);
    height:48px;
    max-width:88%;
  }
}


/* ENVAL - CLIENTES REALES CON LOGOS
   Ajuste aislado para conservar el diseño existente en PC y móvil. */
.clientes .cliente-logo-img{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}
.clientes .cliente-logo-img img{
  display:block;
  width:auto;
  height:auto;
  max-width:82%;
  max-height:74px;
  object-fit:contain;
  margin:auto;
}
@media(max-width:767px){
  .clientes .cliente-logo-img{
    padding:18px !important;
  }
  .clientes .cliente-logo-img img{
    max-width:84%;
    max-height:60px;
  }
}


/* ENVAL - CLIENTES: etiquetas y descripcion con logos reales */
.clientes .cliente-logo-info{
  position:relative !important;
  flex-direction:column !important;
  gap:8px !important;
}
.clientes .cliente-logo-info .cliente-tag{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
}
.clientes .cliente-logo-info img{
  margin:auto auto 4px !important;
}
.clientes .cliente-logo-info small{
  display:block !important;
  width:100%;
  text-align:center;
  font-size:8px;
  line-height:1.2;
  letter-spacing:1.5px;
  font-weight:700;
  color:#77838a;
  text-transform:uppercase;
}
@media(max-width:767px){
  .clientes .cliente-logo-info .cliente-tag{
    top:10px !important;
    right:10px !important;
  }
  .clientes .cliente-logo-info small{
    font-size:7px;
    letter-spacing:1.1px;
  }
}


/* ENVAL - FOOTER MENU HOVER
   Ajuste aislado solo para enlaces de navegacion del footer. */
footer .footer-links li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:
    color .28s ease,
    transform .28s ease,
    text-shadow .28s ease;
}

footer .footer-links li a::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,#9cff00 0%,#00d2ff 100%);
  box-shadow:0 0 10px rgba(0,210,255,.18);
  transition:transform .32s cubic-bezier(.22,.75,.24,1);
}

footer .footer-links li a::after{
  content:"→";
  display:inline-block;
  opacity:0;
  transform:translateX(-6px);
  color:#00d2ff;
  font-size:.9em;
  transition:
    opacity .25s ease,
    transform .28s ease;
}

@media(hover:hover) and (pointer:fine){
  footer .footer-links li a:hover{
    color:#64e9ff !important;
    transform:translateX(5px);
    text-shadow:0 0 12px rgba(0,210,255,.14);
  }

  footer .footer-links li a:hover::before{
    transform:scaleX(1);
  }

  footer .footer-links li a:hover::after{
    opacity:1;
    transform:translateX(0);
  }
}

@media(max-width:767px){
  footer .footer-links li a{
    transform:none !important;
  }

  footer .footer-links li a::before,
  footer .footer-links li a::after{
    display:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  footer .footer-links li a,
  footer .footer-links li a::before,
  footer .footer-links li a::after{
    transition:none !important;
  }
}

/* ENVAL - LOGO OFICIAL EN FOOTER
   Ajuste aislado: replica la identidad visual del header sin alterar el resto. */
footer .footer-brand-enval{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
footer .footer-brand-enval .footer-brand-planet{
  width:56px;
  height:56px;
  object-fit:contain;
  flex:0 0 auto;
}
footer .footer-brand-enval .brand-sub{
  display:flex;
  flex-direction:column;
}
footer .footer-brand-enval .brand-main{
  line-height:1;
}
@media(max-width:767px){
  footer .footer-brand-enval .footer-brand-planet{
    width:50px;
    height:50px;
  }
}


/* ENVAL - EQUIPOS 3D: tarjetas con igual jerarquia
   Ajuste aislado solo para esta seccion. */
.productos-tech-showcase .equipos3d-showcase .swiper-slide{
  display:flex;
  align-items:stretch;
}
.productos-tech-showcase .equipos3d-showcase .equipo3d-card{
  width:100%;
  transform:none !important;
  border-color:rgba(82,215,255,.18) !important;
  box-shadow:
    0 22px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}
@media(hover:hover) and (pointer:fine){
  .productos-tech-showcase .equipos3d-showcase .equipo3d-card:hover{
    transform:translateY(-10px) !important;
    border-color:rgba(76,220,255,.60) !important;
    box-shadow:
      0 28px 70px rgba(0,0,0,.42),
      0 0 32px rgba(0,195,255,.12),
      inset 0 1px 0 rgba(170,240,255,.10) !important;
  }
}
.productos-tech-showcase .equipos3d-showcase .producto-badge{
  top:16px !important;
  right:16px !important;
  min-height:32px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px !important;
  color:#dcf8ff !important;
  border:1px solid rgba(78,220,255,.48) !important;
  border-radius:999px !important;
  background:rgba(3,27,36,.84) !important;
  box-shadow:0 0 20px rgba(0,204,255,.10) !important;
  letter-spacing:1.1px;
}


/* ENVAL - EQUIPOS 3D: igualar altura y nivel inferior de las 4 tarjetas.
   Ajuste exclusivo de esta seccion. */
.productos-tech-showcase .equipos3d-showcase .swiper-wrapper{
  align-items:stretch !important;
}

.productos-tech-showcase .equipos3d-showcase .swiper-slide{
  height:auto !important;
  align-self:stretch !important;
}

.productos-tech-showcase .equipos3d-showcase .equipo3d-card{
  height:100% !important;
  min-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

.productos-tech-showcase .equipos3d-showcase .equipo3d-card .producto-link{
  margin-top:auto !important;
}

/* En escritorio todas las tarjetas parten y terminan exactamente al mismo nivel. */
@media (min-width: 992px){
  .productos-tech-showcase .equipos3d-showcase .swiper-wrapper{
    display:flex !important;
    align-items:stretch !important;
  }

  .productos-tech-showcase .equipos3d-showcase .swiper-slide{
    display:flex !important;
    height:auto !important;
  }

  .productos-tech-showcase .equipos3d-showcase .equipo3d-card{
    flex:1 1 auto !important;
  }
}

/* =========================================================
   SOFTWARE 3D: LOGOS OFICIALES EN EL DESPLEGABLE
   Aplicado al menú de Software 3D.
   ========================================================= */
#mainNavbar .software-menu-logo{
    position:relative;
    isolation:isolate;
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(0,210,255,.35);
    border-radius:10px;
    background:radial-gradient(circle at 35% 25%,rgba(156,255,0,.18),rgba(0,210,255,.07) 55%,rgba(3,14,18,.94));
    box-shadow:inset 0 0 12px rgba(0,210,255,.08),0 0 0 rgba(0,210,255,0);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;
}

#mainNavbar .software-menu-logo::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-1px;
    border-radius:inherit;
    background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.36) 48%,transparent 72%);
    transform:translateX(-135%);
    transition:transform .55s ease;
}

#mainNavbar .software-menu-logo img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));
    transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}

#mainNavbar .mega-item:hover .software-menu-logo{
    transform:translateY(-2px) rotate(-4deg) scale(1.1);
    border-color:#9cff00;
    background:radial-gradient(circle at 35% 25%,rgba(156,255,0,.34),rgba(0,210,255,.13) 58%,rgba(3,14,18,.96));
    box-shadow:0 0 18px rgba(0,210,255,.28),0 0 8px rgba(156,255,0,.18);
}

#mainNavbar .mega-item:hover .software-menu-logo::before{
    transform:translateX(135%);
}

#mainNavbar .mega-item:hover .software-menu-logo img{
    transform:scale(1.12) rotate(3deg);
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.72)) drop-shadow(0 0 5px rgba(156,255,0,.35));
}

@media(hover:hover) and (pointer:fine){
    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-item:hover{
        transform:translateX(5px);
        color:#fff !important;
        border-color:rgba(78,220,255,.28);
        background:linear-gradient(90deg,rgba(156,255,0,.075),rgba(0,210,255,.075));
        box-shadow:0 0 18px rgba(0,210,255,.045);
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-item:hover strong{
        color:#9ff2ff;
    }
}


/* ENVAL - Menu EQUIPO 3D: cuatro categorias */
@media (min-width: 992px){
  #mainNavbar .mega-grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }
}


/* =========================================================
   ENVAL - MEGA MENU EQUIPO 3D MEJORADO
   Solo afecta el desplegable de EQUIPO 3D.
   ========================================================= */

#mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide{
  border:1px solid rgba(66,220,255,.48) !important;
  outline:1px solid rgba(156,255,0,.10);
  outline-offset:3px;
  background:
    radial-gradient(circle at 12% 10%,rgba(156,255,0,.055),transparent 28%),
    radial-gradient(circle at 88% 16%,rgba(0,210,255,.07),transparent 30%),
    linear-gradient(145deg,rgba(3,18,24,.985),rgba(3,13,18,.985)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 34px rgba(0,210,255,.08) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  backdrop-filter:blur(22px) saturate(135%);
}

#mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(156,255,0,.58),rgba(0,210,255,.58)) top left/100% 2px no-repeat,
    linear-gradient(180deg,rgba(156,255,0,.18),transparent 34%,rgba(0,210,255,.16)) left top/1px 100% no-repeat,
    linear-gradient(180deg,rgba(0,210,255,.18),transparent 34%,rgba(156,255,0,.10)) right top/1px 100% no-repeat;
  opacity:.72;
}

#mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide .mega-menu-head{
  position:relative;
  z-index:2;
}

#mainNavbar .equipos3d-mega-all{
  flex:0 0 auto;
  border:1px solid rgba(74,220,255,.40);
  border-radius:999px;
  padding:11px 16px !important;
  background:linear-gradient(90deg,rgba(156,255,0,.08),rgba(0,210,255,.08));
  box-shadow:0 0 18px rgba(0,210,255,.06);
}

#mainNavbar .mega-grid-4 .mega-column{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(75,210,245,.18);
  background:
    linear-gradient(145deg,rgba(8,31,38,.72),rgba(4,17,22,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    transform .30s ease,
    border-color .30s ease,
    box-shadow .30s ease,
    background .30s ease;
}

#mainNavbar .mega-grid-4 .mega-column::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:2px;
  background:linear-gradient(90deg,#9cff00,#00d2ff);
  opacity:.42;
}

#mainNavbar .mega-grid-4 .mega-item{
  position:relative;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:9px 10px !important;
  margin:2px 0;
  border:1px solid transparent;
  border-radius:10px;
  transition:
    transform .24s ease,
    color .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease;
}

#mainNavbar .mega-grid-4 .mega-item-icon{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,210,255,.18);
  border-radius:8px;
  color:#34dcff;
  background:rgba(0,210,255,.055);
  font-size:12px;
  transition:
    transform .26s ease,
    color .26s ease,
    border-color .26s ease,
    background .26s ease,
    box-shadow .26s ease;
}

#mainNavbar .mega-grid-4 .mega-item strong{
  transition:color .24s ease, transform .24s ease;
}

@media(hover:hover) and (pointer:fine){
  #mainNavbar .mega-grid-4 .mega-column:hover{
    transform:translateY(-4px);
    border-color:rgba(77,220,255,.38);
    box-shadow:
      0 18px 40px rgba(0,0,0,.24),
      0 0 22px rgba(0,210,255,.055),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  #mainNavbar .mega-grid-4 .mega-item:hover{
    transform:translateX(5px);
    color:#fff !important;
    border-color:rgba(78,220,255,.28);
    background:linear-gradient(90deg,rgba(156,255,0,.075),rgba(0,210,255,.075));
    box-shadow:0 0 18px rgba(0,210,255,.045);
  }

  #mainNavbar .mega-grid-4 .mega-item:hover .mega-item-icon{
    transform:scale(1.10) rotate(-4deg);
    color:#061014;
    border-color:transparent;
    background:linear-gradient(135deg,#9cff00,#00d2ff);
    box-shadow:0 0 18px rgba(0,210,255,.18);
  }

  #mainNavbar .mega-grid-4 .mega-item:hover strong{
    color:#9ff2ff;
  }

  #mainNavbar .equipos3d-mega-all:hover{
    transform:translateX(3px);
    border-color:rgba(156,255,0,.50);
    background:linear-gradient(90deg,rgba(156,255,0,.15),rgba(0,210,255,.14));
    box-shadow:0 0 24px rgba(0,210,255,.10);
  }
}

/* En móvil conserva la lógica desplegable existente y solo mejora lectura. */
@media(max-width:991px){
  #mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide{
    border-color:rgba(68,220,255,.34) !important;
    outline:none;
    box-shadow:0 16px 42px rgba(0,0,0,.34) !important;
  }

  #mainNavbar .mega-grid-4{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  #mainNavbar .mega-grid-4 .mega-column{
    transform:none !important;
  }

  #mainNavbar .mega-grid-4 .mega-item{
    grid-template-columns:28px minmax(0,1fr);
  }

  #mainNavbar .equipos3d-mega-all{
    width:100%;
    justify-content:center;
    margin-top:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar .mega-grid-4 .mega-column,
  #mainNavbar .mega-grid-4 .mega-item,
  #mainNavbar .mega-grid-4 .mega-item-icon,
  #mainNavbar .equipos3d-mega-all{
    transition:none !important;
  }
}


/* =========================================================
   ENVAL - REFINAMIENTO FINAL MEGA MENU EQUIPO 3D
   Solo modifica tamano/legibilidad/CTA dentro de EQUIPO 3D.
   ========================================================= */

@media (min-width: 992px){

  #mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide{
    width:min(1060px, calc(100vw - 120px)) !important;
    padding:18px 20px 20px !important;
  }

  #mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide .mega-menu-head{
    margin-bottom:14px !important;
    padding-bottom:14px !important;
  }

  #mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide .mega-menu-head h3{
    font-size:20px !important;
    line-height:1.1 !important;
  }

  #mainNavbar .has-mega-menu > .mega-menu.mega-menu-wide .mega-menu-head p{
    margin-top:5px !important;
    font-size:11px !important;
    line-height:1.45 !important;
    color:rgba(224,240,244,.68) !important;
  }

  #mainNavbar .mega-grid-4{
    gap:14px !important;
  }

  #mainNavbar .mega-grid-4 .mega-column{
    padding:14px 14px 16px !important;
  }

  #mainNavbar .mega-grid-4 .mega-column-title{
    margin-bottom:10px !important;
    padding-bottom:10px !important;
  }

  #mainNavbar .mega-grid-4 .mega-column-title strong{
    font-size:12px !important;
    line-height:1.35 !important;
    letter-spacing:.01em !important;
    color:#fff !important;
  }

  #mainNavbar .mega-grid-4 .mega-column-title small{
    font-size:8px !important;
    color:rgba(210,235,241,.55) !important;
  }

  #mainNavbar .mega-grid-4 .mega-item{
    padding:7px 8px !important;
    gap:8px !important;
  }

  #mainNavbar .mega-grid-4 .mega-item strong{
    font-size:10px !important;
    line-height:1.25 !important;
    color:#f5fbfd !important;
    text-shadow:0 0 1px rgba(255,255,255,.12);
  }

  #mainNavbar .mega-grid-4 .mega-item-icon{
    width:24px !important;
    height:24px !important;
    font-size:11px !important;
  }

  #mainNavbar .equipos3d-mega-all{
    color:#061014 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    border:1px solid rgba(156,255,0,.70) !important;
    background:linear-gradient(90deg,#9cff00 0%,#64e36c 45%,#00d2ff 100%) !important;
    box-shadow:
      0 8px 20px rgba(0,0,0,.20),
      0 0 22px rgba(0,210,255,.12) !important;
  }

  #mainNavbar .equipos3d-mega-all i{
    color:#061014 !important;
  }

  @media(hover:hover) and (pointer:fine){
    #mainNavbar .equipos3d-mega-all:hover{
      color:#061014 !important;
      transform:translateY(-2px) translateX(2px) !important;
      border-color:#baff32 !important;
      background:linear-gradient(90deg,#b7ff22 0%,#71e96b 45%,#18dfff 100%) !important;
      box-shadow:
        0 12px 26px rgba(0,0,0,.24),
        0 0 26px rgba(0,210,255,.18) !important;
    }
  }
}

@media(max-width:991px){
  #mainNavbar .equipos3d-mega-all{
    color:#061014 !important;
    font-weight:900 !important;
    border:1px solid rgba(156,255,0,.70) !important;
    background:linear-gradient(90deg,#9cff00 0%,#64e36c 45%,#00d2ff 100%) !important;
  }

  #mainNavbar .mega-grid-4 .mega-item strong{
    color:#f5fbfd !important;
  }
}


/* =========================================================
   ENVAL - BRILLO CTA "VER TODOS LOS EQUIPOS"
   Efecto inspirado en el boton principal del hero.
   Solo afecta este boton del mega menu EQUIPO 3D.
   ========================================================= */

#mainNavbar .equipos3d-mega-all{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}

#mainNavbar .equipos3d-mega-all::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg,#9cff00 0%,#63e36d 42%,#00d2ff 100%);
  opacity:.98;
}

#mainNavbar .equipos3d-mega-all::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-45%;
  left:-35%;
  width:34%;
  height:190%;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 18%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.10) 82%,
    transparent 100%
  );
  transform:skewX(-20deg);
  filter:blur(.2px);
  animation:equiposMegaCtaShine 3.8s ease-in-out infinite;
}

#mainNavbar .equipos3d-mega-all{
  box-shadow:
    0 8px 22px rgba(0,0,0,.22),
    0 0 18px rgba(156,255,0,.12),
    0 0 26px rgba(0,210,255,.14) !important;
}

#mainNavbar .equipos3d-mega-all > *{
  position:relative;
  z-index:2;
}

@media(hover:hover) and (pointer:fine){
  #mainNavbar .equipos3d-mega-all:hover{
    box-shadow:
      0 10px 26px rgba(0,0,0,.24),
      0 0 26px rgba(156,255,0,.22),
      0 0 38px rgba(0,210,255,.24) !important;
  }
}

@keyframes equiposMegaCtaShine{
  0%,18%{
    left:-38%;
    opacity:0;
  }
  28%{
    opacity:.92;
  }
  48%{
    left:118%;
    opacity:.58;
  }
  58%,100%{
    left:118%;
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  #mainNavbar .equipos3d-mega-all::after{
    animation:none !important;
    display:none !important;
  }
}


/* =========================================================
   ENVAL HERO - TEXTO SINCRONIZADO CON LAS 4 IMAGENES
   Ajuste aislado a la parte inicial.
   ========================================================= */
.hero .hero-dynamic-copy{
  transition:opacity .28s ease, transform .28s ease;
}
.hero .hero-dynamic-copy.is-changing{
  opacity:.18;
  transform:translateY(8px);
}
.hero .hero-dynamic-title{
  font-size:clamp(42px,4.7vw,76px) !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
}
.hero .hero-dynamic-title span{
  background:linear-gradient(90deg,#9cff00,#00d2ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero #heroDynamicDescription{
  max-width:700px;
}
@media(max-width:991px){
  .hero .hero-dynamic-title{
    font-size:clamp(38px,9vw,64px) !important;
    line-height:1 !important;
  }
}
@media(max-width:575px){
  .hero .hero-dynamic-title{
    font-size:clamp(34px,10.2vw,48px) !important;
    line-height:1.02 !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-dynamic-copy{
    transition:none !important;
  }
}


/* =========================================================
   ENVAL HERO - TEXTO MAS COMPACTO + TRANSICION MAS FLUIDA
   Solo afecta el bloque de texto dinamico del hero.
   ========================================================= */

.hero .hero-dynamic-title{
  font-size:clamp(36px,4.15vw,66px) !important;
  line-height:.98 !important;
  letter-spacing:-.038em !important;
  max-width:680px;
}

.hero #heroDynamicDescription{
  max-width:660px;
  font-size:clamp(15px,1.15vw,18px) !important;
  line-height:1.65 !important;
}

.hero .hero-dynamic-copy{
  will-change:opacity, transform, filter;
  transform:translate3d(0,0,0);
  opacity:1;
  filter:blur(0);
  transition:
    opacity .48s cubic-bezier(.22,.61,.36,1),
    transform .58s cubic-bezier(.22,.61,.36,1),
    filter .48s ease;
}

.hero .hero-dynamic-copy.is-changing{
  opacity:0;
  transform:translate3d(0,16px,0);
  filter:blur(4px);
}

.hero .hero-dynamic-copy.is-entering{
  animation:heroCopyEnter .72s cubic-bezier(.16,1,.3,1) both;
}

@keyframes heroCopyEnter{
  0%{
    opacity:0;
    transform:translate3d(0,-12px,0);
    filter:blur(4px);
  }
  60%{
    opacity:1;
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}

@media(max-width:991px){
  .hero .hero-dynamic-title{
    font-size:clamp(34px,8.2vw,56px) !important;
    line-height:1 !important;
  }

  .hero #heroDynamicDescription{
    font-size:15px !important;
    line-height:1.6 !important;
  }
}

@media(max-width:575px){
  .hero .hero-dynamic-title{
    font-size:clamp(31px,9.3vw,43px) !important;
    line-height:1.03 !important;
  }

  .hero #heroDynamicDescription{
    font-size:14px !important;
    line-height:1.55 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-dynamic-copy,
  .hero .hero-dynamic-copy.is-entering{
    animation:none !important;
    transition:none !important;
    filter:none !important;
    transform:none !important;
  }
}


/* =========================================================
   ENVAL HERO - TITULOS AUN MAS COMPACTOS + ANIMACION PREMIUM
   Solo afecta los 4 titulos dinamicos y su entrada/salida.
   ========================================================= */

.hero .hero-dynamic-title{
  font-size:clamp(31px,3.55vw,56px) !important;
  line-height:.99 !important;
  letter-spacing:-.034em !important;
  max-width:640px !important;
}

.hero #heroDynamicDescription{
  max-width:640px;
  font-size:clamp(14px,1.05vw,17px) !important;
  line-height:1.62 !important;
}

.hero .hero-dynamic-copy{
  position:relative;
  will-change:opacity, transform, filter;
  transform-origin:left center;
  backface-visibility:hidden;
  transition:
    opacity .52s cubic-bezier(.16,1,.3,1),
    transform .62s cubic-bezier(.16,1,.3,1),
    filter .50s ease;
}

.hero .hero-dynamic-copy.is-changing{
  opacity:0;
  transform:translate3d(-14px,10px,0) scale(.985);
  filter:blur(3px);
}

.hero .hero-dynamic-copy.is-entering{
  animation:heroCopyPremiumIn .82s cubic-bezier(.16,1,.3,1) both;
}

.hero .hero-dynamic-title{
  position:relative;
}

.hero .hero-dynamic-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#9cff00 0%,#00d2ff 100%);
  box-shadow:0 0 14px rgba(0,210,255,.20);
  opacity:0;
}

.hero .hero-dynamic-copy.is-entering .hero-dynamic-title::after{
  animation:heroTitleLineSweep .72s .12s cubic-bezier(.16,1,.3,1) both;
}

@keyframes heroCopyPremiumIn{
  0%{
    opacity:0;
    transform:translate3d(18px,-8px,0) scale(.985);
    filter:blur(5px);
  }
  45%{
    opacity:.78;
    filter:blur(1.5px);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
  }
}

@keyframes heroTitleLineSweep{
  0%{
    width:0;
    opacity:0;
  }
  35%{
    opacity:.9;
  }
  100%{
    width:44%;
    opacity:.65;
  }
}

@media(max-width:991px){
  .hero .hero-dynamic-title{
    font-size:clamp(31px,7.4vw,50px) !important;
    line-height:1.01 !important;
    max-width:100% !important;
  }
  .hero #heroDynamicDescription{
    font-size:14px !important;
    line-height:1.58 !important;
  }
}

@media(max-width:575px){
  .hero .hero-dynamic-title{
    font-size:clamp(28px,8.5vw,39px) !important;
    line-height:1.04 !important;
  }
  .hero #heroDynamicDescription{
    font-size:13.5px !important;
    line-height:1.55 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-dynamic-copy,
  .hero .hero-dynamic-copy.is-entering{
    animation:none !important;
    transition:none !important;
    filter:none !important;
    transform:none !important;
  }

  .hero .hero-dynamic-title::after{
    animation:none !important;
    display:none !important;
  }
}


/* =========================================================
   ENVAL HERO - TITULOS BALANCEADOS + ANIMACION FLUIDA
   Solo afecta los 4 titulos dinamicos del hero.
   ========================================================= */

.hero .hero-dynamic-title{
  font-size:clamp(30px,3.35vw,54px) !important;
  line-height:1.00 !important;
  letter-spacing:-.032em !important;
  max-width:620px !important;
  text-wrap:balance;
}

.hero .hero-dynamic-title br{
  display:block;
}

.hero #heroDynamicDescription{
  max-width:620px !important;
  margin-top:24px !important;
}

.hero .hero-dynamic-copy{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:none !important;
  will-change:opacity, transform;
  transition:
    opacity .34s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1) !important;
}

.hero .hero-dynamic-copy.is-changing{
  opacity:0;
  transform:translate3d(-18px,0,0);
  filter:none !important;
}

.hero .hero-dynamic-copy.is-entering{
  animation:heroCopyCleanIn .68s cubic-bezier(.16,1,.3,1) both !important;
}

.hero .hero-dynamic-title::after{
  display:none !important;
  content:none !important;
}

@keyframes heroCopyCleanIn{
  0%{
    opacity:0;
    transform:translate3d(22px,0,0);
  }
  58%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

@media(max-width:991px){
  .hero .hero-dynamic-title{
    font-size:clamp(30px,7vw,48px) !important;
    line-height:1.02 !important;
    max-width:100% !important;
  }

  .hero #heroDynamicDescription{
    margin-top:20px !important;
  }
}

@media(max-width:575px){
  .hero .hero-dynamic-title{
    font-size:clamp(27px,8vw,38px) !important;
    line-height:1.05 !important;
  }

  .hero #heroDynamicDescription{
    margin-top:18px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-dynamic-copy,
  .hero .hero-dynamic-copy.is-entering{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   ENVAL HERO - CAPA TECNOLOGICA SOBRE IMAGEN
   Solo afecta las imagenes del carrusel principal.
   ========================================================= */

.hero-video-card .hero-tech-hud{
  position:absolute;
  inset:0;
  z-index:6;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  opacity:.72;
}

.hero-video-card .hud-grid{
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(67,225,255,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(67,225,255,.28) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 22%,#000 78%,transparent 98%);
  mask-image:linear-gradient(to bottom,transparent 3%,#000 22%,#000 78%,transparent 98%);
  animation:hudGridDrift 12s linear infinite;
}

.hero-video-card .hud-corner{
  position:absolute;
  width:48px;
  height:48px;
  opacity:.70;
}
.hero-video-card .hud-corner::before,
.hero-video-card .hud-corner::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,#9cff00,#00d2ff);
  box-shadow:0 0 10px rgba(0,210,255,.25);
}
.hero-video-card .hud-corner::before{width:28px;height:1px;}
.hero-video-card .hud-corner::after{width:1px;height:28px;}

.hero-video-card .hud-corner-tl{top:18px;left:18px;}
.hero-video-card .hud-corner-tr{top:18px;right:18px;transform:rotate(90deg);}
.hero-video-card .hud-corner-bl{bottom:18px;left:18px;transform:rotate(-90deg);}
.hero-video-card .hud-corner-br{bottom:18px;right:18px;transform:rotate(180deg);}

.hero-video-card .hud-target{
  position:absolute;
  width:54px;
  height:54px;
  border:1px solid rgba(69,225,255,.42);
  border-radius:50%;
  box-shadow:
    0 0 0 7px rgba(0,210,255,.035),
    0 0 16px rgba(0,210,255,.10);
  animation:hudTargetPulse 2.8s ease-in-out infinite;
}
.hero-video-card .hud-target::before,
.hero-video-card .hud-target::after{
  content:"";
  position:absolute;
  background:rgba(156,255,0,.70);
}
.hero-video-card .hud-target::before{
  left:50%;top:-7px;bottom:-7px;width:1px;
}
.hero-video-card .hud-target::after{
  top:50%;left:-7px;right:-7px;height:1px;
}
.hero-video-card .hud-target i{
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#00d2ff;
  box-shadow:0 0 12px #00d2ff;
}
.hero-video-card .hud-target-a{left:24%;top:33%;}
.hero-video-card .hud-target-b{
  right:19%;bottom:25%;
  width:38px;height:38px;
  animation-delay:-1.3s;
}

.hero-video-card .hud-node{
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:#9cff00;
  box-shadow:0 0 10px rgba(156,255,0,.9);
  animation:hudNodePulse 2.2s ease-in-out infinite;
}
.hero-video-card .hud-node-a{left:15%;top:62%;}
.hero-video-card .hud-node-b{right:30%;top:19%;animation-delay:-.7s;}
.hero-video-card .hud-node-c{right:13%;top:55%;animation-delay:-1.4s;}

.hero-video-card .hud-track{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,210,255,.68),transparent);
  opacity:.50;
  transform-origin:left center;
}
.hero-video-card .hud-track-a{
  width:30%;
  left:15%;top:62%;
  transform:rotate(-16deg);
}
.hero-video-card .hud-track-b{
  width:25%;
  right:13%;top:55%;
  transform:rotate(21deg);
}

.hero-video-card .hud-scan-beam{
  position:absolute;
  left:4%;
  right:4%;
  height:2px;
  top:-6%;
  opacity:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(156,255,0,.18) 14%,
    rgba(0,210,255,.92) 50%,
    rgba(156,255,0,.18) 86%,
    transparent 100%);
  box-shadow:
    0 0 9px rgba(0,210,255,.48),
    0 8px 30px rgba(0,210,255,.12);
  animation:hudScanSweep 5.2s cubic-bezier(.4,0,.2,1) infinite;
}

.hero-video-card .hud-data{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:6px 8px;
  border-left:1px solid rgba(0,210,255,.55);
  background:linear-gradient(90deg,rgba(2,18,24,.48),transparent);
  opacity:.62;
  animation:hudDataFloat 4s ease-in-out infinite;
}
.hero-video-card .hud-data b{
  font-size:8px;
  line-height:1;
  letter-spacing:.16em;
  color:#9cff00;
}
.hero-video-card .hud-data small{
  font-size:6px;
  line-height:1.2;
  letter-spacing:.12em;
  color:rgba(225,249,255,.82);
}
.hero-video-card .hud-data-a{left:7%;bottom:19%;}
.hero-video-card .hud-data-b{right:7%;top:18%;animation-delay:-2s;}

@keyframes hudScanSweep{
  0%,10%{top:-5%;opacity:0;}
  17%{opacity:.72;}
  62%{top:105%;opacity:.62;}
  70%,100%{top:105%;opacity:0;}
}
@keyframes hudTargetPulse{
  0%,100%{transform:scale(.94);opacity:.45;}
  50%{transform:scale(1.06);opacity:.90;}
}
@keyframes hudNodePulse{
  0%,100%{transform:scale(.75);opacity:.35;}
  50%{transform:scale(1.35);opacity:1;}
}
@keyframes hudDataFloat{
  0%,100%{transform:translateY(0);opacity:.48;}
  50%{transform:translateY(-4px);opacity:.76;}
}
@keyframes hudGridDrift{
  from{background-position:0 0,0 0;}
  to{background-position:0 42px,42px 0;}
}

@media(max-width:767px){
  .hero-video-card .hero-tech-hud{opacity:.58;}
  .hero-video-card .hud-grid{background-size:34px 34px;}
  .hero-video-card .hud-data{display:none;}
  .hero-video-card .hud-target-a{left:20%;top:34%;}
  .hero-video-card .hud-target-b{right:17%;bottom:24%;}
}

@media(prefers-reduced-motion:reduce){
  .hero-video-card .hud-grid,
  .hero-video-card .hud-target,
  .hero-video-card .hud-node,
  .hero-video-card .hud-scan-beam,
  .hero-video-card .hud-data{
    animation:none !important;
  }
}


/* =========================================================
   ENVAL HERO - TONO TECNOLOGICO OSCURO EN LAS 4 IMAGENES
   Solo modifica visualmente las imagenes del carrusel hero.
   ========================================================= */

.hero-video-card .hero-image-carousel{
  position:relative;
}

/* Oscurecimiento suave con matiz azul/cyan, sin alterar los archivos originales. */
.hero-video-card .hero-video-overlay{
  background:
    linear-gradient(135deg,
      rgba(1,10,15,.18) 0%,
      rgba(0,22,30,.13) 48%,
      rgba(1,12,18,.22) 100%) !important;
  opacity:1 !important;
}

/* Conserva detalle, baja ligeramente luminosidad y refuerza el acabado tecnico. */
.hero-video-card .hero-carousel-slide{
  filter:
    brightness(.84)
    contrast(1.06)
    saturate(.92)
    sepia(.02)
    hue-rotate(2deg) !important;
}

/* Ligero viñeteado técnico para concentrar la atención en el equipo. */
.hero-video-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 45%,
      transparent 42%,
      rgba(0,10,15,.08) 72%,
      rgba(0,8,13,.20) 100%);
}

/* El HUD debe seguir visible por encima del oscurecimiento. */
.hero-video-card .hero-tech-hud{
  z-index:6 !important;
}

@media(max-width:767px){
  .hero-video-card .hero-carousel-slide{
    filter:
      brightness(.86)
      contrast(1.05)
      saturate(.94) !important;
  }

  .hero-video-card::after{
    background:
      radial-gradient(circle at 50% 45%,
        transparent 48%,
        rgba(0,10,15,.07) 76%,
        rgba(0,8,13,.16) 100%);
  }
}


/* =========================================================
   ENVAL HERO - CORRECCION OSCURECIMIENTO
   Elimina el tinte verde/cyan fuerte y conserva solo
   un oscurecimiento suave de las 4 imagenes.
   ========================================================= */

.hero-video-card .hero-video-overlay{
  background:rgba(0,0,0,.10) !important;
  opacity:1 !important;
}

.hero-video-card .hero-carousel-slide{
  filter:
    brightness(.88)
    contrast(1.03)
    saturate(.96) !important;
}

.hero-video-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(
    circle at 50% 48%,
    transparent 58%,
    rgba(0,0,0,.045) 82%,
    rgba(0,0,0,.10) 100%
  ) !important;
}

.hero-video-card .hero-tech-hud{
  z-index:6 !important;
}

@media(max-width:767px){
  .hero-video-card .hero-video-overlay{
    background:rgba(0,0,0,.08) !important;
  }

  .hero-video-card .hero-carousel-slide{
    filter:
      brightness(.90)
      contrast(1.02)
      saturate(.97) !important;
  }

  .hero-video-card::after{
    background:radial-gradient(
      circle at 50% 48%,
      transparent 64%,
      rgba(0,0,0,.04) 84%,
      rgba(0,0,0,.08) 100%
    ) !important;
  }
}


/* =========================================================
   ENVAL HERO - RED GEOMETRICA INTERACTIVA
   ========================================================= */
.hero-video-card .hero-video-overlay{
  background:rgba(0,0,0,.08) !important;
  opacity:1 !important;
}

.hero-video-card .hero-carousel-slide{
  filter:brightness(.86) contrast(1.04) saturate(.98) !important;
}

/* Desactiva la capa que estaba generando el tinte verde/cyan */
.hero-video-card::after{
  display:none !important;
  content:none !important;
}

/* Retira los textos/indicadores artificiales SCAN y QC */
.hero-tech-hud,
.hero-video-card .hero-tech-hud,
.hero-video-card [class*="tech-hud"],
.hero-video-card [class*="scan-label"],
.hero-video-card [class*="qc-label"]{
  display:none !important;
}

/* Canvas tecnológico: no bloquea clicks ni controles */
.hero-network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  opacity:.72;
  mix-blend-mode:screen;
}

/* Los controles originales siguen por encima */
.hero-video-card .hero-carousel-pause,
.hero-video-card .hero-badge,
.hero-video-card .hero-precision-badge{
  position:relative;
  z-index:7;
}

@media(max-width:767px){
  .hero-video-card .hero-video-overlay{
    background:rgba(0,0,0,.06) !important;
  }
  .hero-video-card .hero-carousel-slide{
    filter:brightness(.89) contrast(1.03) saturate(.98) !important;
  }
  .hero-network-canvas{
    opacity:.58;
  }
}


/* =========================================================
   ENVAL - FIX FINAL HERO: FOTOS VISIBLES + RED INTERACTIVA
   ========================================================= */

/* Las cuatro fotografias originales deben ser la base visible */
.hero-video-card .hero-carousel-slide{
  opacity:1 !important;
  visibility:visible !important;
  filter:brightness(.82) contrast(1.04) saturate(.96) !important;
  background-color:transparent !important;
  background-blend-mode:normal !important;
}

/* Quita cualquier capa verde/cyan/degradado que cubra las fotos */
.hero-video-card .hero-video-overlay{
  display:none !important;
  opacity:0 !important;
  background:none !important;
  background-image:none !important;
}

.hero-video-card::before,
.hero-video-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* Quita HUD/textos SCAN, QC y elementos decorativos anteriores */
.hero-tech-hud,
.hero-video-card .hero-tech-hud,
.hero-video-card [class*="scan-label"],
.hero-video-card [class*="qc-label"],
.hero-video-card [class*="scan-tag"],
.hero-video-card [class*="qc-tag"]{
  display:none !important;
}

/* Red geometrica: queda encima sin ocultar la fotografia */
.hero-network-canvas{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:5 !important;
  pointer-events:none !important;
  opacity:.68 !important;
  mix-blend-mode:screen !important;
  background:transparent !important;
}

/* Los badges y controles originales permanecen visibles */
.hero-video-card .hero-carousel-pause,
.hero-video-card .hero-badge,
.hero-video-card .hero-precision-badge{
  z-index:8 !important;
}

/* Movil: un poco mas luminosa para no perder detalle */
@media(max-width:767px){
  .hero-video-card .hero-carousel-slide{
    filter:brightness(.86) contrast(1.03) saturate(.97) !important;
  }
  .hero-network-canvas{
    opacity:.56 !important;
  }
}


/* =========================================================
   ENVAL - CORRECCION DEFINITIVA VISIBILIDAD CARRUSEL HERO
   Restaura el contenedor absoluto y la logica active/inactive.
   ========================================================= */

.hero-video-card .hero-image-carousel{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  border-radius:inherit !important;
  background:transparent !important;
}

.hero-video-card .hero-carousel-slide{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:scale(1.015);
  transition:opacity .65s ease, transform 2.4s ease !important;
  filter:brightness(.84) contrast(1.04) saturate(.97) !important;
  z-index:1 !important;
}

.hero-video-card .hero-carousel-slide.active{
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1) !important;
  z-index:2 !important;
}

/* Sin capas de color sobre la foto */
.hero-video-card .hero-video-overlay{
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* Red geometrica por encima de la imagen */
.hero-network-canvas{
  z-index:5 !important;
  background:transparent !important;
}

/* Badges y control por encima */
.hero-video-card .hero-video-control,
.hero-video-card .hero-video-badge{
  z-index:8 !important;
}

@media(max-width:767px){
  .hero-video-card .hero-carousel-slide{
    filter:brightness(.88) contrast(1.03) saturate(.98) !important;
  }
}


/* =========================================================
   ENVAL HERO - MALLA GEOMETRICA INTERACTIVA CON MOUSE
   Solo afecta la capa sobre las imagenes del hero.
   ========================================================= */

.hero-video-card .hero-network-canvas{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:5 !important;
  pointer-events:none !important;
  opacity:.74 !important;
  mix-blend-mode:screen !important;
  background:transparent !important;
  border-radius:inherit !important;
}

@media(max-width:767px){
  .hero-video-card .hero-network-canvas{
    opacity:.54 !important;
  }
}


/* =========================================================
   ENVAL HERO - TRANSICION TECNOLOGICA SUAVE ENTRE IMAGENES
   Solo modifica el cambio visual de las 4 imagenes del hero.
   ========================================================= */

/* Fondo neutro para evitar cualquier flash verde/cyan entre slides */
.hero-video-card .hero-image-carousel{
  background:#03090c !important;
  isolation:isolate;
}

/* Crossfade limpio y continuo */
.hero-video-card .hero-carousel-slide{
  opacity:0 !important;
  visibility:visible !important;
  transform:scale(1.025) !important;
  transition:
    opacity 1.15s cubic-bezier(.22,.61,.36,1),
    transform 3.8s cubic-bezier(.22,.61,.36,1) !important;
  will-change:opacity,transform;
  backface-visibility:hidden;
}

.hero-video-card .hero-carousel-slide.active{
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1) !important;
}

/* Barrido tecnológico discreto durante cada cambio */
.hero-video-card .hero-image-carousel::after{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  left:-24%;
  width:18%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(156,255,0,.035) 22%,
    rgba(0,210,255,.20) 50%,
    rgba(255,255,255,.09) 58%,
    transparent 100%
  );
  transform:skewX(-10deg);
  filter:blur(.2px);
}

/* La clase se activa desde el mismo cambio de slide */
.hero-video-card .hero-image-carousel.is-transitioning::after{
  animation:envalHeroTechWipe 1.05s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes envalHeroTechWipe{
  0%{
    left:-24%;
    opacity:0;
  }
  18%{
    opacity:.60;
  }
  72%{
    opacity:.34;
  }
  100%{
    left:112%;
    opacity:0;
  }
}

/* La malla permanece por encima sin parpadear */
.hero-video-card .hero-network-canvas{
  z-index:5 !important;
}

@media(max-width:767px){
  .hero-video-card .hero-carousel-slide{
    transition:
      opacity .95s cubic-bezier(.22,.61,.36,1),
      transform 3.2s cubic-bezier(.22,.61,.36,1) !important;
  }

  .hero-video-card .hero-image-carousel::after{
    width:22%;
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-video-card .hero-carousel-slide{
    transition:opacity .35s ease !important;
    transform:none !important;
  }

  .hero-video-card .hero-image-carousel::after{
    display:none !important;
  }
}


/* =========================================================
   ENVAL HERO - OPTIMIZACION MOVIL
   Desktop queda intacto. Solo <= 767px.
   ========================================================= */
.hero-slide-picture{
  position:static;
}

@media(max-width:767px){

  /* Reduce trabajo de composición sin cambiar el diseño visual */
  .hero-video-stage,
  .hero-video-card{
    transform:none !important;
    will-change:auto !important;
  }

  /* Transición algo más corta y liviana en móvil */
  .hero-video-card .hero-carousel-slide{
    transition:
      opacity .72s ease,
      transform 2.4s ease !important;
    will-change:opacity;
  }

  /* Barrido tecnológico más ligero */
  .hero-video-card .hero-image-carousel::after{
    filter:none !important;
    width:18% !important;
  }

  /* Malla más discreta y barata de componer */
  .hero-video-card .hero-network-canvas{
    opacity:.46 !important;
    mix-blend-mode:normal !important;
  }

  /* Evita efectos de hover/tilt que no aportan en pantalla táctil */
  .hero-video-stage.interactive-media,
  .hero-video-card.interactive-media{
    transition:none !important;
  }
}


/* =========================================================
   ENVAL HERO - INDICADOR DESCUBRE MAS
   Solo agrega una guía visual de scroll en la parte inferior.
   ========================================================= */

.hero{
  position:relative;
}

.hero-scroll-indicator{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:rgba(228,247,251,.72);
  text-decoration:none;
  letter-spacing:.20em;
  font-size:9px;
  font-weight:700;
  transition:
    opacity .35s ease,
    transform .35s ease,
    color .25s ease;
}

.hero-scroll-indicator.is-hidden{
  opacity:0;
  transform:translate(-50%,12px);
  pointer-events:none;
}

.scroll-mouse{
  position:relative;
  display:block;
  width:26px;
  height:40px;
  border:1px solid rgba(75,220,255,.48);
  border-radius:18px;
  background:rgba(2,14,19,.42);
  box-shadow:
    0 0 14px rgba(0,210,255,.08),
    inset 0 0 0 1px rgba(156,255,0,.05);
}

.scroll-wheel{
  position:absolute;
  top:8px;
  left:50%;
  width:3px;
  height:7px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(#9cff00,#00d2ff);
  box-shadow:0 0 10px rgba(0,210,255,.45);
  animation:envalScrollWheel 1.65s ease-in-out infinite;
}

.hero-scroll-indicator i{
  font-size:12px;
  color:#00d2ff;
  opacity:.70;
  animation:envalScrollChevron 1.65s ease-in-out infinite;
}

.scroll-text{
  white-space:nowrap;
}

@media(hover:hover) and (pointer:fine){
  .hero-scroll-indicator:hover{
    color:#fff;
    transform:translateX(-50%) translateY(-3px);
  }

  .hero-scroll-indicator:hover .scroll-mouse{
    border-color:rgba(156,255,0,.64);
    box-shadow:
      0 0 18px rgba(0,210,255,.14),
      0 0 12px rgba(156,255,0,.08);
  }
}

@keyframes envalScrollWheel{
  0%,100%{
    opacity:.35;
    transform:translate(-50%,0);
  }
  45%{
    opacity:1;
    transform:translate(-50%,10px);
  }
  70%{
    opacity:.20;
    transform:translate(-50%,13px);
  }
}

@keyframes envalScrollChevron{
  0%,100%{
    opacity:.30;
    transform:translateY(0);
  }
  50%{
    opacity:.90;
    transform:translateY(5px);
  }
}

@media(max-width:767px){
  .hero-scroll-indicator{
    bottom:14px;
    gap:5px;
    font-size:8px;
  }

  .scroll-mouse{
    width:23px;
    height:35px;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-wheel,
  .hero-scroll-indicator i{
    animation:none !important;
  }
}


/* =========================================================
   ENVAL HERO - RESPONSIVE FINO PARA LOS 4 TITULOS DINAMICOS
   Solo ajusta tipografia/espaciado del bloque de titulos.
   ========================================================= */

.hero .hero-dynamic-copy,
.hero .hero-dynamic-title{
  min-width:0;
  max-width:100%;
}

.hero .hero-dynamic-title{
  width:100%;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* Desktop grande: conserva el aspecto aprobado */
@media (min-width: 1440px){
  .hero .hero-dynamic-title{
    font-size:clamp(34px,3.35vw,54px) !important;
    line-height:1.00 !important;
    letter-spacing:-.032em !important;
    max-width:620px !important;
  }
}

/* Desktop / laptop mediano */
@media (min-width: 1200px) and (max-width: 1439px){
  .hero .hero-dynamic-title{
    font-size:clamp(31px,3.15vw,46px) !important;
    line-height:1.015 !important;
    letter-spacing:-.028em !important;
    max-width:100% !important;
  }

  .hero #heroDynamicDescription{
    font-size:clamp(13.5px,1vw,16px) !important;
    line-height:1.58 !important;
    max-width:100% !important;
  }
}

/* Laptop pequeno / desktop compacto */
@media (min-width: 992px) and (max-width: 1199px){
  .hero .hero-content .row{
    column-gap:0 !important;
  }

  .hero .hero-dynamic-title{
    font-size:clamp(28px,3.45vw,40px) !important;
    line-height:1.025 !important;
    letter-spacing:-.024em !important;
    max-width:100% !important;
  }

  .hero #heroDynamicDescription{
    font-size:13.5px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px){
  .hero .hero-dynamic-title{
    font-size:clamp(31px,6.2vw,46px) !important;
    line-height:1.025 !important;
    letter-spacing:-.026em !important;
    max-width:100% !important;
  }

  .hero #heroDynamicDescription{
    font-size:14px !important;
    line-height:1.58 !important;
  }
}

/* Movil */
@media (max-width: 767px){
  .hero .hero-dynamic-title{
    font-size:clamp(27px,8vw,38px) !important;
    line-height:1.045 !important;
    letter-spacing:-.022em !important;
    max-width:100% !important;
  }

  .hero #heroDynamicDescription{
    font-size:13.5px !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }
}

/* Movil muy estrecho */
@media (max-width: 420px){
  .hero .hero-dynamic-title{
    font-size:clamp(25px,7.8vw,34px) !important;
    line-height:1.055 !important;
    letter-spacing:-.018em !important;
  }
}


/* =========================================================
   ENVAL - RESPONSIVE GENERAL FLUIDO
   Mantiene el diseno aprobado en desktop grande y adapta
   imagenes, tarjetas, espacios y tipografia en resoluciones menores.
   ========================================================= */

/* Base fluida y segura */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

img, video, canvas, svg{
  max-width:100%;
  height:auto;
}

.container,
.container-fluid{
  min-width:0;
}

.row > *,
[class*="col-"]{
  min-width:0;
}

/* Espaciado general fluido sin alterar desktop grande */
section{
  scroll-margin-top:90px;
}

@media (max-width:1439px){
  .container{
    max-width:min(94vw, 1180px) !important;
  }

  .section-heading h2,
  .servicios h2,
  .nosotros-home h2,
  .soluciones-home h2,
  .clientes h2,
  .contact-cta h2{
    font-size:clamp(30px,3.2vw,46px) !important;
  }

  .section-description,
  .servicios p,
  .nosotros-home p,
  .soluciones-home p,
  .clientes p{
    font-size:clamp(13px,1.05vw,16px);
  }

  .producto-card,
  .exp-tech-card,
  .solucion-home-card,
  .cliente-logo{
    min-width:0;
  }
}

/* Laptop mediana */
@media (min-width:1200px) and (max-width:1439px){
  .hero-content{
    padding-left:clamp(18px,2.2vw,34px);
    padding-right:clamp(18px,2.2vw,34px);
  }

  .hero-video-stage{
    max-width:100%;
  }

  .hero-video-card{
    width:100%;
  }

  .producto-card{
    min-height:auto !important;
  }

  .producto-img{
    height:clamp(230px,21vw,285px) !important;
  }
}

/* Laptop pequena / desktop compacto */
@media (min-width:992px) and (max-width:1199px){
  .container{
    max-width:94vw !important;
  }

  .hero-content .row{
    --bs-gutter-x:1.8rem !important;
  }

  .hero-buttons{
    gap:10px !important;
    flex-wrap:wrap;
  }

  .hero-buttons a{
    padding:clamp(11px,1.1vw,14px) clamp(18px,1.7vw,26px) !important;
  }

  .hero-stats{
    gap:clamp(12px,1.8vw,22px) !important;
  }

  .hero-video-stage{
    max-width:100%;
  }

  .producto-img{
    height:230px !important;
  }

  .producto-info h3{
    font-size:19px !important;
  }

  .producto-info p{
    font-size:12.5px !important;
  }

  .marcasSwiper,
  .clientesSwiper,
  .productosSwiper{
    max-width:100%;
  }
}

/* Tablet */
@media (min-width:768px) and (max-width:991px){
  .hero-content .row{
    min-height:auto !important;
    padding-top:110px;
    padding-bottom:60px;
  }

  .hero-content .col-lg-6{
    width:100%;
  }

  .hero-video-stage{
    margin-top:24px;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  .hero-buttons{
    flex-wrap:wrap;
    gap:10px !important;
  }

  .hero-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .producto-img{
    height:240px !important;
  }

  .clientes .row,
  .nosotros-home .row{
    row-gap:26px;
  }
}

/* Movil */
@media (max-width:767px){
  .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero-content .row{
    min-height:auto !important;
    padding-top:96px;
    padding-bottom:46px;
  }

  .hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px !important;
  }

  .hero-buttons a{
    width:100%;
    justify-content:center;
  }

  .hero-video-stage{
    margin-top:20px;
    width:100%;
  }

  .hero-video-card{
    width:100%;
    aspect-ratio:16/10;
  }

  .hero-stats{
    grid-template-columns:1fr;
    gap:8px;
  }

  .producto-card{
    min-height:auto !important;
  }

  .producto-img{
    height:220px !important;
  }

  .section-heading,
  .marcas-title,
  .clientes .col-lg-4{
    text-align:center;
  }

  .contact-cta-box{
    padding:30px 20px !important;
  }
}


/* =========================================================
   ENVAL - EXPERIENCIA A SU SERVICIO MAS COMPACTA
   Mantiene el diseno y reduce solo el espacio vertical.
   ========================================================= */

.exp-command-section{
  padding-top:clamp(58px,5vw,82px) !important;
  padding-bottom:clamp(58px,5vw,82px) !important;
}

.exp-command-shell{
  max-width:min(94vw, 1260px);
  margin:0 auto;
}

.exp-command-head{
  margin-bottom:clamp(22px,2vw,34px) !important;
}

.exp-command-titleblock p{
  margin-top:10px !important;
  margin-bottom:0 !important;
}

.exp-command-grid{
  gap:clamp(18px,1.8vw,28px) !important;
}

.exp-main-card,
.exp-tech-card{
  min-width:0;
}

.exp-main-media{
  min-height:clamp(360px,31vw,500px) !important;
}

.exp-main-copy{
  padding:clamp(22px,2.2vw,34px) !important;
}

.exp-main-copy h3{
  margin-top:7px !important;
  margin-bottom:10px !important;
}

.exp-side-stack{
  gap:clamp(10px,1vw,16px) !important;
}

.exp-tech-card{
  padding:clamp(16px,1.35vw,22px) !important;
}

.exp-tech-card h4{
  margin:6px 0 8px !important;
}

.exp-tech-card p{
  margin-bottom:8px !important;
  line-height:1.55 !important;
}

.exp-command-footer{
  margin-top:clamp(18px,1.8vw,28px) !important;
  min-height:auto !important;
}

@media (min-width:1200px) and (max-width:1439px){
  .exp-command-section{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }

  .exp-main-media{
    min-height:400px !important;
  }

  .exp-tech-card{
    padding:16px 18px !important;
  }
}

@media (min-width:992px) and (max-width:1199px){
  .exp-command-section{
    padding-top:50px !important;
    padding-bottom:50px !important;
  }

  .exp-command-head{
    margin-bottom:20px !important;
  }

  .exp-command-grid{
    gap:16px !important;
  }

  .exp-main-media{
    min-height:360px !important;
  }

  .exp-tech-card{
    padding:14px 16px !important;
  }

  .exp-command-footer{
    margin-top:18px !important;
  }
}

@media (max-width:991px){
  .exp-command-section{
    padding-top:46px !important;
    padding-bottom:46px !important;
  }

  .exp-command-head{
    gap:14px !important;
    margin-bottom:18px !important;
  }

  .exp-command-grid{
    gap:16px !important;
  }

  .exp-main-media{
    min-height:340px !important;
  }

  .exp-side-stack{
    gap:10px !important;
  }

  .exp-tech-card{
    padding:15px !important;
  }

  .exp-command-footer{
    margin-top:16px !important;
  }
}

@media (max-width:575px){
  .exp-command-section{
    padding-top:38px !important;
    padding-bottom:38px !important;
  }

  .exp-main-media{
    min-height:300px !important;
  }

  .exp-main-copy{
    padding:20px !important;
  }

  .exp-command-footer{
    gap:6px !important;
  }
}


/* =========================================================
   ENVAL - EXPERIENCIA A SU SERVICIO / VISTA COMPACTA
   Objetivo: mostrar la seccion completa en una sola pantalla
   en desktop/laptop, sin alterar el resto del sitio.
   ========================================================= */

@media (min-width: 992px) {
  .exp-command-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
    min-height: auto !important;
  }

  .exp-command-shell {
    max-width: min(94vw, 1260px) !important;
  }

  .exp-command-head {
    margin-bottom: 14px !important;
    gap: 12px !important;
  }

  .exp-command-titleblock h2 {
    font-size: clamp(34px, 3.1vw, 48px) !important;
    line-height: .92 !important;
    margin-bottom: 8px !important;
  }

  .exp-command-titleblock p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
  }

  .exp-command-grid {
    gap: 14px !important;
    align-items: stretch !important;
  }

  .exp-main-card {
    min-height: 0 !important;
  }

  .exp-main-media {
    min-height: 0 !important;
    height: clamp(390px, 51vh, 505px) !important;
  }

  .exp-main-copy {
    padding: 18px 22px !important;
  }

  .exp-main-copy h3 {
    font-size: clamp(28px, 2.45vw, 39px) !important;
    line-height: .98 !important;
    margin: 5px 0 8px !important;
  }

  .exp-main-copy p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
  }

  .exp-side-stack {
    gap: 10px !important;
    height: 100% !important;
  }

  .exp-tech-card {
    padding: 13px 16px !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
  }

  .exp-tech-card h4 {
    font-size: clamp(17px, 1.45vw, 21px) !important;
    line-height: 1.1 !important;
    margin: 4px 0 6px !important;
  }

  .exp-tech-card p {
    font-size: 11.5px !important;
    line-height: 1.42 !important;
    margin-bottom: 5px !important;
  }

  .exp-command-footer {
    margin-top: 12px !important;
    min-height: 0 !important;
  }
}

/* Laptop de poca altura: compactar aun mas para evitar scroll */
@media (min-width: 992px) and (max-height: 800px) {
  .exp-command-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .exp-command-head {
    margin-bottom: 10px !important;
  }

  .exp-command-titleblock h2 {
    font-size: clamp(31px, 2.8vw, 42px) !important;
  }

  .exp-command-titleblock p {
    font-size: 12px !important;
  }

  .exp-main-media {
    height: clamp(350px, 49vh, 430px) !important;
  }

  .exp-main-copy {
    padding: 15px 18px !important;
  }

  .exp-main-copy h3 {
    font-size: clamp(25px, 2.15vw, 34px) !important;
  }

  .exp-tech-card {
    padding: 11px 14px !important;
  }

  .exp-tech-card h4 {
    font-size: 17px !important;
  }

  .exp-tech-card p {
    font-size: 10.8px !important;
  }

  .exp-command-footer {
    margin-top: 8px !important;
  }
}

/* Tablet/movil conserva la disposicion responsive existente */


/* =========================================================
   ENVAL - EQUIPOS 3D / VISTA COMPACTA EN UNA SOLA PANTALLA
   Solo afecta la seccion principal de EQUIPOS 3D del index.
   ========================================================= */

@media (min-width: 992px) {

  .productos-tech-showcase{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
    min-height: auto !important;
  }

  .productos-tech-showcase .section-heading{
    margin-bottom: 14px !important;
  }

  .productos-tech-showcase .section-heading h2{
    font-size: clamp(34px, 3vw, 46px) !important;
    line-height: .95 !important;
    margin-bottom: 8px !important;
  }

  .productos-tech-showcase .section-description{
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  .productos-tech-showcase .equipos3d-techline{
    margin-top: 8px !important;
    margin-bottom: 10px !important;
  }

  .productos-tech-showcase .productosSwiper{
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }

  .productos-tech-showcase .equipos3d-showcase .swiper-slide{
    height: auto !important;
  }

  .productos-tech-showcase .equipos3d-showcase .equipo3d-card{
    min-height: 0 !important;
    height: clamp(515px, 66vh, 620px) !important;
    padding: 14px !important;
  }

  .productos-tech-showcase .equipo3d-media{
    margin-top: 18px !important;
    height: clamp(210px, 28vh, 285px) !important;
  }

  .productos-tech-showcase .producto-img{
    height: clamp(210px, 28vh, 285px) !important;
  }

  .productos-tech-showcase .producto-info{
    padding: 14px 4px 4px !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    flex:1 1 auto !important;
  }

  .productos-tech-showcase .producto-info > span{
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }

  .productos-tech-showcase .producto-info h3{
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height:1.08 !important;
    margin: 6px 0 9px !important;
  }

  .productos-tech-showcase .equipo3d-tags{
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .productos-tech-showcase .equipo3d-tags small{
    font-size: 8px !important;
    padding: 5px 8px !important;
  }

  .productos-tech-showcase .producto-info p{
    min-height: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.48 !important;
    margin-bottom: 8px !important;
  }

  .productos-tech-showcase .producto-info a{
    margin-top:auto !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size:10px !important;
  }

  .productos-tech-showcase .producto-badge{
    top: 11px !important;
    right: 11px !important;
    min-height: 27px !important;
    padding: 6px 10px !important;
    font-size: 8px !important;
  }

  .productos-tech-showcase .equipo3d-index{
    top: 18px !important;
    left: 18px !important;
    font-size: 8px !important;
  }
}

/* Laptop / monitor con poca altura */
@media (min-width: 992px) and (max-height: 800px) {

  .productos-tech-showcase{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .productos-tech-showcase .section-heading{
    margin-bottom: 8px !important;
  }

  .productos-tech-showcase .section-heading h2{
    font-size: clamp(30px, 2.65vw, 40px) !important;
    margin-bottom: 5px !important;
  }

  .productos-tech-showcase .section-description{
    font-size: 12px !important;
    line-height:1.4 !important;
  }

  .productos-tech-showcase .equipos3d-techline{
    margin-top: 5px !important;
    margin-bottom: 6px !important;
  }

  .productos-tech-showcase .equipos3d-showcase .equipo3d-card{
    height: clamp(470px, 63vh, 545px) !important;
    padding: 12px !important;
  }

  .productos-tech-showcase .equipo3d-media,
  .productos-tech-showcase .producto-img{
    height: clamp(185px, 25vh, 240px) !important;
  }

  .productos-tech-showcase .producto-info{
    padding-top: 10px !important;
  }

  .productos-tech-showcase .producto-info h3{
    font-size: 17px !important;
    margin: 4px 0 7px !important;
  }

  .productos-tech-showcase .equipo3d-tags{
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  .productos-tech-showcase .equipo3d-tags small{
    font-size: 7.5px !important;
    padding: 4px 7px !important;
  }

  .productos-tech-showcase .producto-info p{
    font-size: 10.8px !important;
    line-height:1.42 !important;
    margin-bottom: 6px !important;
  }

  .productos-tech-showcase .producto-info a{
    font-size: 9.5px !important;
  }
}

/* Tablet y movil conservan el responsive existente */


/* =========================================================
   ENVAL - HERO AJUSTADO PARA MONITORES 19" EN ADELANTE
   ========================================================= */

@media (min-width: 1200px) {
  .hero {
    min-height: 100vh !important;
    height: auto !important;
    padding-bottom: 34px !important;
  }

  .hero .hero-content .row {
    min-height: calc(100vh - 88px) !important;
    padding-top: 76px !important;
    padding-bottom: 86px !important;
    align-items: center !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator {
    bottom: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20 !important;
  }

  .exp-command-section {
    margin-top: 18px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero .hero-content .row {
    padding-top: 62px !important;
    padding-bottom: 82px !important;
  }

  .hero .hero-dynamic-title {
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: 1.015 !important;
  }

  .hero #heroDynamicDescription {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .hero .hero-video-stage {
    transform: scale(.96);
    transform-origin: center center;
  }

  .hero .hero-stats {
    margin-top: 24px !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator {
    bottom: 16px !important;
  }

  .exp-command-section {
    margin-top: 24px !important;
  }
}

@media (min-width: 1200px) and (max-height: 820px) {
  .hero {
    min-height: 100vh !important;
    padding-bottom: 22px !important;
  }

  .hero .hero-content .row {
    min-height: calc(100vh - 76px) !important;
    padding-top: 48px !important;
    padding-bottom: 74px !important;
  }

  .hero .hero-small {
    margin-bottom: 14px !important;
  }

  .hero .hero-dynamic-title {
    font-size: clamp(29px, 2.85vw, 41px) !important;
    line-height: 1.01 !important;
  }

  .hero #heroDynamicDescription {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 16px !important;
  }

  .hero .hero-buttons {
    margin-top: 18px !important;
  }

  .hero .hero-stats {
    margin-top: 20px !important;
  }

  .hero .hero-stat strong {
    font-size: clamp(18px, 1.7vw, 24px) !important;
  }

  .hero .hero-stat span {
    font-size: 9px !important;
  }

  .hero .hero-video-stage {
    transform: scale(.91);
    transform-origin: center center;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator {
    bottom: 10px !important;
    transform: translateX(-50%) scale(.92) !important;
  }

  .exp-command-section {
    margin-top: 36px !important;
    padding-top: 36px !important;
  }
}

@media (min-width: 1440px) {
  .hero .hero-content .row {
    padding-bottom: 96px !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator {
    bottom: 22px !important;
  }

  .exp-command-section {
    margin-top: 28px !important;
  }
}

@media (min-width: 1200px) and (min-height: 900px) {
  .hero .hero-content .row {
    padding-bottom: 104px !important;
  }

  .exp-command-section {
    margin-top: 34px !important;
  }
}


/* =========================================================
   ENVAL - HERO / REDUCCION DE ESPACIO LIBRE INFERIOR
   Solo ajusta posicion vertical del contenido principal y
   acerca "DESCUBRE MAS" a las estadisticas.
   ========================================================= */

@media (min-width: 1200px) {

  .hero .hero-content .row{
    padding-top: 92px !important;
    padding-bottom: 54px !important;
  }

  .hero .hero-stats{
    margin-bottom: 0 !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator{
    bottom: 22px !important;
  }

  .hero{
    padding-bottom: 0 !important;
  }

  .exp-command-section{
    margin-top: 6px !important;
  }
}

/* 19" / 20" / laptop: bajar un poco el contenido y eliminar
   el gran vacio inferior sin cortar "DESCUBRE MAS". */
@media (min-width: 1200px) and (max-width: 1439px){

  .hero .hero-content .row{
    padding-top: 78px !important;
    padding-bottom: 48px !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator{
    bottom: 16px !important;
  }

  .exp-command-section{
    margin-top: 4px !important;
  }
}

/* Resoluciones de poca altura, ej. 1366x768 */
@media (min-width: 1200px) and (max-height: 820px){

  .hero .hero-content .row{
    padding-top: 64px !important;
    padding-bottom: 42px !important;
  }

  .hero .hero-stats{
    margin-top: 18px !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator{
    bottom: 10px !important;
  }

  .exp-command-section{
    margin-top: 0 !important;
  }
}

/* Monitores grandes: conservar proporcion pero sin zona vacia excesiva */
@media (min-width: 1440px){

  .hero .hero-content .row{
    padding-top: 96px !important;
    padding-bottom: 60px !important;
  }

  .hero .scroll-indicator,
  .hero .discover-more,
  .hero .hero-scroll-indicator{
    bottom: 20px !important;
  }

  .exp-command-section{
    margin-top: 8px !important;
  }
}


/* =========================================================
   ENVAL - RESPONSIVE DESKTOP 19" / 20" / 22" / 24"+
   SOLO secciones solicitadas:
   EXPERIENCIA, MARCAS, EQUIPOS 3D, RESULTADOS, CLIENTES,
   PRE-FOOTER / CTA y FOOTER.
   ========================================================= */

/* ---------- Base desktop 19" en adelante ---------- */
@media (min-width:1200px){

  /* EXPERIENCIA A SU SERVICIO */
  .exp-command-section{
    padding-top:clamp(30px,3.2vw,54px) !important;
    padding-bottom:clamp(30px,3.2vw,54px) !important;
  }
  .exp-command-head{
    margin-bottom:clamp(12px,1.4vw,22px) !important;
  }
  .exp-command-grid{
    gap:clamp(12px,1.3vw,20px) !important;
  }
  .exp-main-media{
    height:clamp(360px,48vh,500px) !important;
    min-height:0 !important;
  }
  .exp-tech-card{
    padding:clamp(12px,1vw,18px) !important;
  }
  .exp-command-footer{
    margin-top:clamp(10px,1vw,18px) !important;
  }

  /* MARCAS ESPECIALIZADAS */
  .brands-tech-section{
    padding-top:clamp(34px,3.5vw,58px) !important;
    padding-bottom:clamp(34px,3.5vw,58px) !important;
  }
  .brands-tech-section .marcas-title{
    margin-bottom:clamp(18px,1.8vw,28px) !important;
  }
  .brands-tech-section .marcas-title strong{
    font-size:clamp(28px,2.7vw,42px) !important;
  }
  .brands-tech-section .marcasSwiper{
    max-width:min(1100px,92vw) !important;
    margin-inline:auto !important;
  }
  .brands-tech-section .marca-fake{
    min-height:clamp(86px,8vw,116px) !important;
  }
  .brands-tech-section .brand-caption{
    margin-top:clamp(16px,1.4vw,22px) !important;
  }

  /* EQUIPOS 3D */
  .productos-tech-showcase{
    padding-top:clamp(30px,3vw,50px) !important;
    padding-bottom:clamp(30px,3vw,50px) !important;
  }
  .productos-tech-showcase .section-heading{
    margin-bottom:clamp(10px,1.2vw,18px) !important;
  }
  .productos-tech-showcase .section-heading h2{
    font-size:clamp(32px,2.8vw,44px) !important;
    line-height:.98 !important;
  }
  .productos-tech-showcase .productosSwiper{
    padding-top:8px !important;
    padding-bottom:14px !important;
  }
  .productos-tech-showcase .equipo3d-card{
    height:clamp(500px,64vh,610px) !important;
  }
  .productos-tech-showcase .equipo3d-media,
  .productos-tech-showcase .producto-img{
    height:clamp(200px,27vh,275px) !important;
  }

  /* INGENIERIA PARA RESULTADOS REALES */
  .nosotros-home-v2{
    padding-top:clamp(34px,3.5vw,58px) !important;
    padding-bottom:clamp(34px,3.5vw,58px) !important;
  }
  .nosotros-home-v2 .row{
    --bs-gutter-x:clamp(24px,3vw,48px) !important;
  }
  .nosotros-home-v2 .resultados-visual{
    max-width:100% !important;
  }
  .nosotros-home-v2 .resultados-image-wrap{
    min-height:0 !important;
    height:clamp(360px,46vh,500px) !important;
  }
  .nosotros-home-v2 .resultados-copy h2{
    font-size:clamp(34px,3.2vw,50px) !important;
    line-height:.96 !important;
    margin-bottom:clamp(16px,1.5vw,24px) !important;
  }
  .nosotros-home-v2 .resultados-lead{
    font-size:clamp(13px,1vw,16px) !important;
    line-height:1.55 !important;
  }
  .nosotros-home-v2 .resultado-pilar{
    padding-top:clamp(10px,.9vw,14px) !important;
    padding-bottom:clamp(10px,.9vw,14px) !important;
  }
  .nosotros-home-v2 .resultados-cta{
    margin-top:clamp(14px,1.2vw,20px) !important;
  }

  /* CONFIANZA / NUESTROS CLIENTES */
  .clientes{
    padding-top:clamp(34px,3.5vw,58px) !important;
    padding-bottom:clamp(34px,3.5vw,58px) !important;
  }
  .clientes h2{
    font-size:clamp(34px,3vw,48px) !important;
    line-height:.95 !important;
  }
  .clientes p{
    font-size:clamp(13px,1vw,16px) !important;
    line-height:1.55 !important;
  }
  .clientes .clientesSwiper{
    max-width:100% !important;
  }
  .clientes .cliente-logo{
    min-height:clamp(130px,12vw,170px) !important;
    padding:clamp(16px,1.5vw,24px) !important;
  }
  .clientes .cliente-logo img{
    max-height:clamp(50px,4.5vw,72px) !important;
  }

  /* ENVAL 3D METROLOGY + CONECTEMOS PRECISION CON RESULTADOS */
  .footer-prelude-v2{
    padding-top:clamp(38px,4vw,66px) !important;
    padding-bottom:clamp(38px,4vw,66px) !important;
  }
  .footer-prelude-inner-v2{
    max-width:min(1180px,92vw) !important;
    gap:clamp(28px,4vw,70px) !important;
  }
  .footer-prelude-copy h2{
    font-size:clamp(36px,3.8vw,58px) !important;
    line-height:.96 !important;
    margin-bottom:clamp(14px,1.4vw,22px) !important;
  }
  .footer-prelude-copy p{
    font-size:clamp(13px,1vw,16px) !important;
    line-height:1.55 !important;
  }
  .footer-prelude-action{
    min-width:min(360px,34vw) !important;
  }

  /* FOOTER */
  .enval-footer-motion{
    padding-top:clamp(34px,3.5vw,58px) !important;
    padding-bottom:clamp(22px,2.5vw,40px) !important;
  }
  .footer-motion-wrap{
    max-width:100% !important;
  }
  .enval-footer-motion .container{
    max-width:min(1180px,92vw) !important;
  }
  .enval-footer-motion .row{
    --bs-gutter-x:clamp(22px,2.6vw,42px) !important;
  }
  .enval-footer-motion .footer-brand{
    margin-bottom:clamp(14px,1.2vw,20px) !important;
  }
  .enval-footer-motion p,
  .enval-footer-motion a,
  .enval-footer-motion li{
    font-size:clamp(12px,.92vw,14px);
  }
}

/* ---------- 19" / 20" y resoluciones compactas ---------- */
@media (min-width:1200px) and (max-width:1439px){

  .exp-main-media{
    height:clamp(340px,46vh,430px) !important;
  }
  .exp-command-titleblock h2{
    font-size:clamp(32px,2.8vw,42px) !important;
  }
  .exp-command-titleblock p{
    font-size:12px !important;
  }

  .brands-tech-section .marca-fake{
    min-height:88px !important;
  }

  .productos-tech-showcase .equipo3d-card{
    height:clamp(470px,61vh,545px) !important;
  }
  .productos-tech-showcase .equipo3d-media,
  .productos-tech-showcase .producto-img{
    height:clamp(185px,24vh,235px) !important;
  }

  .nosotros-home-v2 .resultados-image-wrap{
    height:clamp(335px,43vh,420px) !important;
  }
  .nosotros-home-v2 .resultados-copy h2{
    font-size:clamp(31px,2.8vw,42px) !important;
  }

  .clientes .cliente-logo{
    min-height:130px !important;
  }

  .footer-prelude-copy h2{
    font-size:clamp(34px,3.2vw,46px) !important;
  }
}

/* ---------- 1366x768 / poca altura ---------- */
@media (min-width:1200px) and (max-height:820px){

  .exp-command-section,
  .brands-tech-section,
  .productos-tech-showcase,
  .nosotros-home-v2,
  .clientes,
  .footer-prelude-v2{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }

  .exp-main-media{
    height:350px !important;
  }

  .brands-tech-section .marcas-title{
    margin-bottom:14px !important;
  }
  .brands-tech-section .marca-fake{
    min-height:78px !important;
  }

  .productos-tech-showcase .equipo3d-card{
    height:475px !important;
  }
  .productos-tech-showcase .equipo3d-media,
  .productos-tech-showcase .producto-img{
    height:185px !important;
  }

  .nosotros-home-v2 .resultados-image-wrap{
    height:340px !important;
  }
  .nosotros-home-v2 .resultado-pilar{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .clientes .cliente-logo{
    min-height:112px !important;
  }

  .footer-prelude-inner-v2{
    gap:24px !important;
  }
  .footer-prelude-copy h2{
    font-size:36px !important;
  }

  .enval-footer-motion{
    padding-top:28px !important;
    padding-bottom:24px !important;
  }
}

/* ---------- Monitores 22", 24" y superiores ---------- */
@media (min-width:1440px){

  .exp-command-shell,
  .brands-tech-section .container,
  .productos-tech-showcase .container,
  .nosotros-home-v2 .container,
  .clientes .container,
  .enval-footer-motion .container{
    max-width:min(1320px,90vw) !important;
  }

  .footer-prelude-inner-v2{
    max-width:min(1280px,90vw) !important;
  }
}


/* =========================================================
   ENVAL - LOGO OFICIAL OP1
   Header + loading. Mantiene únicamente la línea hover.
   ========================================================= */

.navbar-brand.brand-enval-new{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:4px 0 8px !important;
    overflow:visible;
}

.navbar-brand.brand-enval-new .brand-logo-full{
    display:block;
    width:auto;
    height:clamp(43px,3.7vw,58px);
    max-width:min(390px,31vw);
    object-fit:contain;
}

/* Línea tecnológica debajo del logo al pasar el cursor */
.navbar-brand.brand-enval-new::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg,transparent 0%,#82ff00 18%,#00d8ff 72%,transparent 100%);
    transform:scaleX(0);
    transform-origin:center;
    opacity:0;
    transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .28s ease;
    box-shadow:0 0 8px rgba(0,216,255,.45);
}

.navbar-brand.brand-enval-new:hover::after{
    transform:scaleX(1);
    opacity:1;
}

/* Loading usando el mismo logo completo */
.preloader-brand-image{
    display:flex !important;
    justify-content:center;
    align-items:center;
}

.preloader-brand-image .preloader-logo-full{
    display:block;
    width:min(430px,72vw);
    height:auto;
    object-fit:contain;
}

/* Evita estilos anteriores del logo compuesto dentro del nuevo loading */
.preloader-brand-image::before,
.preloader-brand-image::after{
    content:none !important;
}

@media (max-width:1439px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:clamp(39px,3.5vw,50px);
        max-width:min(330px,29vw);
    }
}

@media (max-width:991px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:42px;
        max-width:min(300px,65vw);
    }
}

@media (max-width:575px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:36px;
        max-width:72vw;
    }
    .preloader-brand-image .preloader-logo-full{
        width:min(340px,82vw);
    }
}


/* =========================================================
   ENVAL v25 - Ajuste de nitidez y tamaño del logo
   Solo header + preloader.
   ========================================================= */

/* HEADER: más grande para que el slogan sea legible */
.navbar-brand.brand-enval-new{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:2px 0 10px !important;
    overflow:visible !important;
    isolation:isolate;
}

.navbar-brand.brand-enval-new .brand-logo-full{
    display:block;
    width:auto !important;
    height:clamp(54px,4.15vw,68px) !important;
    max-width:min(455px,34vw) !important;
    object-fit:contain;
    image-rendering:auto;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
    backface-visibility:hidden;
}

/* Línea visible al hover: más marcada y separada del PNG */
.navbar-brand.brand-enval-new::after{
    content:"" !important;
    position:absolute !important;
    z-index:5;
    left:2% !important;
    right:2% !important;
    bottom:1px !important;
    width:96% !important;
    height:2px !important;
    border-radius:999px;
    background:linear-gradient(90deg,
        transparent 0%,
        #91ff00 14%,
        #6dff28 34%,
        #00e5ff 72%,
        transparent 100%) !important;
    transform:scaleX(0) !important;
    transform-origin:center !important;
    opacity:0 !important;
    transition:transform .42s cubic-bezier(.22,.61,.36,1),
               opacity .22s ease,
               box-shadow .22s ease !important;
    box-shadow:0 0 0 rgba(0,229,255,0) !important;
    pointer-events:none;
}

.navbar-brand.brand-enval-new:hover::after,
.navbar-brand.brand-enval-new:focus-visible::after{
    transform:scaleX(1) !important;
    opacity:1 !important;
    box-shadow:
        0 0 7px rgba(145,255,0,.75),
        0 0 13px rgba(0,229,255,.55) !important;
}

/* PRELOADER: logo considerablemente mayor para slogan más claro */
.preloader-content.preloader-enval{
    width:min(650px,88vw) !important;
}

.preloader-brand-image .preloader-logo-full{
    display:block;
    width:min(590px,84vw) !important;
    max-width:none !important;
    height:auto !important;
    object-fit:contain;
    image-rendering:auto;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
}

@media (max-width:1439px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:clamp(50px,4vw,61px) !important;
        max-width:min(410px,34vw) !important;
    }
    .preloader-brand-image .preloader-logo-full{
        width:min(540px,84vw) !important;
    }
}

@media (max-width:1199px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:50px !important;
        max-width:min(360px,34vw) !important;
    }
}

@media (max-width:991px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:48px !important;
        max-width:min(340px,68vw) !important;
    }
    .preloader-brand-image .preloader-logo-full{
        width:min(500px,86vw) !important;
    }
}

@media (max-width:575px){
    .navbar-brand.brand-enval-new .brand-logo-full{
        height:42px !important;
        max-width:76vw !important;
    }
    .preloader-brand-image .preloader-logo-full{
        width:min(420px,90vw) !important;
    }
}


/* =========================================================
   ENVAL v26 - SOLO LOGO DEL MENU
   - Mejor nitidez del logo/slogan
   - Línea tecnológica visible al hover
   - Loading NO modificado
   ========================================================= */

#mainNavbar .navbar-brand.brand-enval-new{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:clamp(300px,24vw,410px) !important;
    height:auto !important;
    padding:5px 0 12px !important;
    margin-right:24px !important;
    overflow:visible !important;
    transform:none !important;
    filter:none !important;
}

#mainNavbar .navbar-brand.brand-enval-new .brand-logo-full{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
    image-rendering:auto !important;
    backface-visibility:visible !important;
}

/* Línea debajo del logo */
#mainNavbar .navbar-brand.brand-enval-new::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:20 !important;
    left:0 !important;
    right:auto !important;
    bottom:3px !important;
    width:100% !important;
    height:2px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(
        90deg,
        transparent 0%,
        #94ff00 10%,
        #72ff1d 34%,
        #16e7b6 60%,
        #00dfff 86%,
        transparent 100%
    ) !important;
    transform:scaleX(0) !important;
    transform-origin:left center !important;
    opacity:0 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transition:
        transform .48s cubic-bezier(.22,.61,.36,1),
        opacity .22s ease,
        box-shadow .3s ease !important;
}

#mainNavbar .navbar-brand.brand-enval-new:hover::after,
#mainNavbar .navbar-brand.brand-enval-new:focus-visible::after{
    transform:scaleX(1) !important;
    opacity:1 !important;
    box-shadow:
        0 0 6px rgba(148,255,0,.7),
        0 0 13px rgba(0,223,255,.55) !important;
}

@media (max-width:1439px){
    #mainNavbar .navbar-brand.brand-enval-new{
        width:clamp(280px,25vw,365px) !important;
    }
}

@media (max-width:1199px){
    #mainNavbar .navbar-brand.brand-enval-new{
        width:300px !important;
        margin-right:14px !important;
    }
}

@media (max-width:991px){
    #mainNavbar .navbar-brand.brand-enval-new{
        width:min(330px,68vw) !important;
        padding-bottom:10px !important;
    }
}

@media (max-width:575px){
    #mainNavbar .navbar-brand.brand-enval-new{
        width:min(285px,72vw) !important;
    }
}


/* =========================================================
   ENVAL v27 - SOLO POSICION DE LINEA HOVER DEL LOGO MENU
   Logo y loading intactos.
   ========================================================= */

#mainNavbar .navbar-brand.brand-enval-new::after{
    top:auto !important;
    bottom:-1px !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    z-index:50 !important;
}

#mainNavbar .navbar-brand.brand-enval-new{
    overflow:visible !important;
}


/* =========================================================
   ENVAL v28 - AJUSTES PUNTUALES SOLICITADOS
   1) Quitar completamente la línea hover del logo del menú.
   2) Compactar EXPERIENCIA A SU SERVICIO eliminando espacio inferior.
   3) Reducir altura de tarjetas laterales.
   ========================================================= */

/* 1) Logo del menú: sin línea animada */
#mainNavbar .navbar-brand.brand-enval-new::after,
#mainNavbar .navbar-brand.brand-enval-new:hover::after,
#mainNavbar .navbar-brand.brand-enval-new:focus-visible::after{
    content:none !important;
    display:none !important;
}

/* 2) Sección EXPERIENCIA: eliminar espacio inferior dentro del bloque principal */
@media (min-width: 992px){

    .exp-command-section{
        padding-top:28px !important;
        padding-bottom:28px !important;
    }

    .exp-command-head{
        margin-bottom:12px !important;
    }

    .exp-command-grid{
        gap:12px !important;
        align-items:stretch !important;
    }

    .exp-main-card{
        display:flex !important;
        min-height:0 !important;
        height:auto !important;
    }

    .exp-main-media{
        min-height:0 !important;
        height:clamp(360px,46vh,455px) !important;
        flex:1 1 auto !important;
    }

    .exp-main-copy{
        padding:16px 20px !important;
    }

    .exp-main-copy h3{
        margin:4px 0 7px !important;
    }

    .exp-main-copy p{
        margin-bottom:0 !important;
    }

    /* elimina el bloque visual vacío que quedaba debajo de la imagen */
    .exp-main-card::after,
    .exp-main-card > .exp-command-footer{
        display:none !important;
        content:none !important;
    }

    /* 3) Tarjetas laterales más bajas/compactas */
    .exp-side-stack{
        gap:8px !important;
        height:auto !important;
        align-self:stretch !important;
    }

    .exp-tech-card{
        min-height:0 !important;
        height:auto !important;
        padding:10px 14px !important;
        flex:1 1 0 !important;
    }

    .exp-tech-card .exp-card-top{
        margin-bottom:4px !important;
    }

    .exp-tech-card small{
        font-size:8px !important;
        line-height:1.1 !important;
    }

    .exp-tech-card h4{
        font-size:17px !important;
        line-height:1.08 !important;
        margin:4px 0 5px !important;
    }

    .exp-tech-card p{
        font-size:10.5px !important;
        line-height:1.35 !important;
        margin:0 0 5px !important;
    }

    .exp-tech-line{
        margin-top:4px !important;
    }

    .exp-command-footer{
        margin-top:10px !important;
    }
}

/* Pantallas con poca altura: aún más compacto */
@media (min-width: 992px) and (max-height: 820px){

    .exp-command-section{
        padding-top:22px !important;
        padding-bottom:22px !important;
    }

    .exp-main-media{
        height:340px !important;
    }

    .exp-tech-card{
        padding:9px 12px !important;
    }

    .exp-tech-card h4{
        font-size:16px !important;
    }

    .exp-tech-card p{
        font-size:10px !important;
        line-height:1.3 !important;
    }
}


/* =========================================================
   ENVAL v29 - NUESTROS CLIENTES / LOGOS + CARRUSEL 2s
   Solo afecta la sección clientes.
   ========================================================= */

.clientes .cliente-logo-only{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
    background:rgba(255,255,255,.97) !important;
    border-radius:18px !important;
    overflow:hidden !important;
}

.clientes .cliente-logo-only img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:110px !important;
    object-fit:contain !important;
    object-position:center !important;
}

@media (min-width:1200px){
    .clientes .cliente-logo-only{
        min-height:140px !important;
    }
}

@media (max-width:767px){
    .clientes .cliente-logo-only{
        min-height:120px !important;
        padding:14px !important;
    }
    .clientes .cliente-logo-only img{
        max-height:90px !important;
    }
}


/* =========================================================
   ENVAL v30 - NUESTROS CLIENTES / mayor presencia visual
   Mantiene la altura general y el carrusel existente.
   ========================================================= */

.clientes{
    position:relative;
    overflow:hidden;
}

.clientes .cliente-logo-only{
    position:relative !important;
    min-height:132px !important;
    height:132px !important;
    padding:8px 10px !important;
    background:rgba(255,255,255,.985) !important;
    border:1px solid rgba(0,215,255,.34) !important;
    border-radius:18px !important;
    box-shadow:
        0 12px 30px rgba(0,25,40,.13),
        inset 0 0 0 1px rgba(133,255,0,.10) !important;
    transition:
        transform .38s cubic-bezier(.2,.75,.25,1),
        box-shadow .38s ease,
        border-color .38s ease !important;
    isolation:isolate;
}

.clientes .cliente-logo-only::before{
    content:"";
    position:absolute;
    top:0;
    left:18%;
    width:64%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#8df000,#00d8ff,transparent);
    opacity:.72;
    transform:scaleX(.68);
    transition:transform .4s ease, opacity .4s ease;
}

.clientes .cliente-logo-only::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(120deg,transparent 30%,rgba(0,216,255,.07) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .65s ease;
}

.clientes .cliente-logo-only:hover{
    transform:translateY(-4px) scale(1.015) !important;
    border-color:rgba(0,216,255,.68) !important;
    box-shadow:
        0 16px 34px rgba(0,40,60,.18),
        0 0 20px rgba(0,216,255,.12),
        inset 0 0 0 1px rgba(133,255,0,.16) !important;
}

.clientes .cliente-logo-only:hover::before{
    opacity:1;
    transform:scaleX(1);
}

.clientes .cliente-logo-only:hover::after{
    transform:translateX(120%);
}

.clientes .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
    margin:0 !important;
    transform:scale(1.13);
    transition:transform .38s cubic-bezier(.2,.75,.25,1);
    filter:contrast(1.03) saturate(1.03);
}

.clientes .cliente-logo-only:hover img{
    transform:scale(1.18);
}

/* Barra tecnologica discreta para indicar continuidad del carrusel */
.clientes .clientesSwiper{
    position:relative;
    padding-bottom:15px !important;
}

.clientes .clientesSwiper::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:1px;
    height:2px;
    border-radius:999px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(139,239,0,.35) 16%,
            rgba(0,216,255,.95) 48%,
            rgba(139,239,0,.48) 82%,
            transparent 100%);
    opacity:.62;
    animation:envalClientsTrack 2s ease-in-out infinite;
    transform-origin:center;
}

@keyframes envalClientsTrack{
    0%,100%{transform:scaleX(.42); opacity:.34}
    50%{transform:scaleX(1); opacity:.88}
}

@media (min-width:1400px){
    .clientes .cliente-logo-only{
        min-height:138px !important;
        height:138px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.16);
    }
    .clientes .cliente-logo-only:hover img{
        transform:scale(1.21);
    }
}

@media (max-width:1199px){
    .clientes .cliente-logo-only{
        min-height:124px !important;
        height:124px !important;
        padding:7px 9px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.12);
    }
}

@media (max-width:767px){
    .clientes .cliente-logo-only{
        min-height:116px !important;
        height:116px !important;
        padding:7px !important;
        border-radius:15px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.10);
    }
    .clientes .cliente-logo-only:hover img{
        transform:scale(1.14);
    }
}


/* =========================================================
   ENVAL v31 - CLIENTES / logos mucho mas grandes
   Solo modifica la escala visual de los logos.
   ========================================================= */

.clientes .cliente-logo-only{
    padding:2px 4px !important;
}

.clientes .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
    transform:scale(1.48) !important;
}

.clientes .cliente-logo-only:hover img{
    transform:scale(1.54) !important;
}

@media (min-width:1400px){
    .clientes .cliente-logo-only img{
        transform:scale(1.52) !important;
    }
    .clientes .cliente-logo-only:hover img{
        transform:scale(1.58) !important;
    }
}

@media (max-width:1199px){
    .clientes .cliente-logo-only img{
        transform:scale(1.42) !important;
    }
    .clientes .cliente-logo-only:hover img{
        transform:scale(1.48) !important;
    }
}

@media (max-width:767px){
    .clientes .cliente-logo-only img{
        transform:scale(1.34) !important;
    }
    .clientes .cliente-logo-only:hover img{
        transform:scale(1.40) !important;
    }
}


/* =========================================================
   ENVAL v32 - NUESTROS CLIENTES DINAMICO + RESPONSIVE
   Solo afecta la sección .clientes
   ========================================================= */

.clientes{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

/* Fondo más dinámico sin aumentar la altura */
.clientes::before{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 42%, rgba(138,255,0,.10), transparent 22%),
        radial-gradient(circle at 82% 35%, rgba(0,216,255,.14), transparent 28%),
        linear-gradient(110deg, transparent 20%, rgba(255,255,255,.025) 46%, transparent 72%);
    animation:envalClientsBgMove 12s ease-in-out infinite alternate;
}

.clientes > .container{
    position:relative;
    z-index:2;
}

.clientes .clientesSwiper{
    overflow:visible !important;
    padding:8px 4px 18px !important;
}

/* Las tarjetas se sienten más ligeras y tecnológicas */
.clientes .cliente-logo-only{
    position:relative !important;
    min-height:126px !important;
    height:126px !important;
    padding:2px 4px !important;
    border-radius:16px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.995), rgba(247,252,255,.985)) !important;
    border:1px solid rgba(0,216,255,.34) !important;
    box-shadow:
        0 10px 24px rgba(0,30,45,.12),
        inset 0 0 0 1px rgba(140,255,0,.08) !important;
    transform:translateY(0);
    transition:
        transform .38s cubic-bezier(.2,.75,.25,1),
        border-color .32s ease,
        box-shadow .32s ease !important;
}

/* Línea superior viva */
.clientes .cliente-logo-only::before{
    content:"";
    position:absolute;
    top:0;
    left:10%;
    width:80%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,#8eff00 20%,#00dfff 72%,transparent);
    opacity:.72;
    transform:scaleX(.72);
    transform-origin:center;
    transition:transform .35s ease, opacity .35s ease;
}

/* Barrido sutil */
.clientes .cliente-logo-only::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(118deg,
        transparent 26%,
        rgba(0,216,255,.05) 43%,
        rgba(255,255,255,.24) 50%,
        rgba(139,255,0,.05) 57%,
        transparent 74%);
    transform:translateX(-125%);
    animation:envalClientShine 7.5s ease-in-out infinite;
}

/* Logos grandes pero contenidos */
.clientes .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
    margin:0 !important;
    transform:scale(1.43) !important;
    filter:contrast(1.04) saturate(1.04);
    transition:transform .35s cubic-bezier(.2,.75,.25,1), filter .35s ease !important;
}

/* Hover elegante */
@media(hover:hover) and (pointer:fine){
    .clientes .cliente-logo-only:hover{
        transform:translateY(-6px) scale(1.015) !important;
        border-color:rgba(0,216,255,.68) !important;
        box-shadow:
            0 16px 32px rgba(0,35,55,.18),
            0 0 22px rgba(0,216,255,.13),
            inset 0 0 0 1px rgba(139,255,0,.14) !important;
    }

    .clientes .cliente-logo-only:hover::before{
        transform:scaleX(1);
        opacity:1;
    }

    .clientes .cliente-logo-only:hover img{
        transform:scale(1.50) !important;
        filter:contrast(1.06) saturate(1.06);
    }
}

/* Indicador de movimiento continuo */
.clientes .clientesSwiper::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:1px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,
        transparent 0%,
        rgba(139,255,0,.30) 18%,
        rgba(0,216,255,.95) 50%,
        rgba(139,255,0,.34) 82%,
        transparent 100%);
    opacity:.72;
    transform-origin:left center;
    animation:envalClientsProgress 2s cubic-bezier(.4,0,.2,1) infinite;
}

/* Desktop grande: más marcas visibles */
@media (min-width:1600px){
    .clientes .cliente-logo-only{
        height:128px !important;
        min-height:128px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.46) !important;
    }
}

/* 19", 20", 22", 24" */
@media (min-width:1200px) and (max-width:1599px){
    .clientes .cliente-logo-only{
        height:122px !important;
        min-height:122px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.40) !important;
    }
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
    .clientes .cliente-logo-only{
        height:116px !important;
        min-height:116px !important;
        border-radius:14px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.34) !important;
    }
}

/* Móvil */
@media (max-width:767px){
    .clientes{
        padding-top:34px !important;
        padding-bottom:34px !important;
    }

    .clientes .clientesSwiper{
        padding-left:6px !important;
        padding-right:6px !important;
        padding-bottom:16px !important;
    }

    .clientes .cliente-logo-only{
        height:108px !important;
        min-height:108px !important;
        border-radius:13px !important;
    }

    .clientes .cliente-logo-only img{
        transform:scale(1.28) !important;
    }
}

/* Móvil estrecho: tarjeta principal grande, siguiente asomando */
@media (max-width:420px){
    .clientes .cliente-logo-only{
        height:104px !important;
        min-height:104px !important;
    }
    .clientes .cliente-logo-only img{
        transform:scale(1.24) !important;
    }
}

@keyframes envalClientsBgMove{
    0%{transform:translate3d(-1%,0,0) scale(1);}
    100%{transform:translate3d(1.5%,-1%,0) scale(1.025);}
}

@keyframes envalClientShine{
    0%,72%{transform:translateX(-125%); opacity:0;}
    78%{opacity:.75;}
    88%{transform:translateX(125%); opacity:.45;}
    100%{transform:translateX(125%); opacity:0;}
}

@keyframes envalClientsProgress{
    0%{transform:scaleX(.12); opacity:.35;}
    70%{transform:scaleX(1); opacity:.92;}
    100%{transform:scaleX(1); opacity:.20;}
}

@media(prefers-reduced-motion:reduce){
    .clientes::before,
    .clientes .cliente-logo-only::after,
    .clientes .clientesSwiper::after{
        animation:none !important;
    }
}


/* =========================================================
   ENVAL v33 - NUESTROS CLIENTES / DISENO MODERNO
   Solo afecta .clientes-modern
   ========================================================= */

.clientes.clientes-modern{
    position:relative;
    overflow:hidden;
    padding:clamp(42px,4vw,68px) 0 !important;
    background:
      radial-gradient(circle at 12% 25%, rgba(138,255,0,.055), transparent 24%),
      radial-gradient(circle at 88% 18%, rgba(0,216,255,.085), transparent 30%),
      linear-gradient(110deg,#07161d 0%,#062634 50%,#073044 100%) !important;
}

.clientes.clientes-modern::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:46px 46px;
    opacity:.28;
}

.clientes-modern .container{
    position:relative;
    z-index:2;
}

.clientes-modern-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:clamp(22px,2.2vw,34px);
}

.clientes-modern-copy{
    max-width:720px;
}

.clientes-modern-kicker{
    display:inline-block;
    margin-bottom:8px;
    color:#9cff00;
    font-size:11px;
    font-weight:800;
    letter-spacing:.28em;
}

.clientes-modern h2{
    margin:0;
    font-size:clamp(38px,3.6vw,58px) !important;
    line-height:.92 !important;
    color:#fff;
    letter-spacing:-.04em;
}

.clientes-modern h2 strong{
    display:inline-block;
    background:linear-gradient(90deg,#9cff00,#00d2ff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.clientes-modern-copy p{
    margin:14px 0 0;
    max-width:620px;
    color:rgba(229,242,247,.76);
    font-size:clamp(14px,1vw,16px);
    line-height:1.55;
}

.clientes-modern-meta{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:6px;
    color:rgba(214,238,244,.52);
    font-size:9px;
    letter-spacing:.18em;
    white-space:nowrap;
}

.clientes-modern-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#00d2ff;
    box-shadow:0 0 12px rgba(0,210,255,.85);
}

.clientes-modern-carousel{
    position:relative;
}

.clientes-modern .clientesSwiper{
    overflow:hidden !important;
    padding:8px 2px 16px !important;
}

.clientes-modern .cliente-logo-only{
    position:relative !important;
    height:150px !important;
    min-height:150px !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    border-radius:18px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.995),rgba(247,251,253,.99)) !important;
    border:1px solid rgba(0,216,255,.22) !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.16),
      inset 0 0 0 1px rgba(156,255,0,.06) !important;
    transition:
      transform .34s cubic-bezier(.2,.75,.25,1),
      border-color .34s ease,
      box-shadow .34s ease !important;
}

.clientes-modern .cliente-logo-only::before{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    top:0;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#9cff00,#00d2ff);
    opacity:.55;
}

.clientes-modern .cliente-logo-only::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(118deg,transparent 32%,rgba(0,216,255,.06) 47%,rgba(255,255,255,.20) 50%,transparent 66%);
    transform:translateX(-130%);
    transition:transform .65s ease;
}

.clientes-modern .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:scale(1.34) !important;
    filter:contrast(1.04) saturate(1.03);
    transition:transform .34s cubic-bezier(.2,.75,.25,1),filter .34s ease !important;
}

@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover{
        transform:translateY(-5px) !important;
        border-color:rgba(0,216,255,.52) !important;
        box-shadow:
          0 18px 36px rgba(0,0,0,.20),
          0 0 24px rgba(0,216,255,.10),
          inset 0 0 0 1px rgba(156,255,0,.10) !important;
    }

    .clientes-modern .cliente-logo-only:hover::after{
        transform:translateX(130%);
    }

    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.40) !important;
        filter:contrast(1.06) saturate(1.06);
    }
}

/* Barra inferior elegante */
.clientes-modern-progress{
    position:relative;
    width:min(420px,46vw);
    height:2px;
    margin:14px auto 0;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.clientes-modern-progress span{
    position:absolute;
    inset:0 auto 0 0;
    width:34%;
    border-radius:999px;
    background:linear-gradient(90deg,#9cff00,#00d2ff);
    box-shadow:0 0 14px rgba(0,210,255,.35);
    animation:clientesModernProgress 2s linear infinite;
}

@keyframes clientesModernProgress{
    from{transform:translateX(-115%);}
    to{transform:translateX(295%);}
}

/* 19", 20", 22", 24" */
@media (min-width:1200px) and (max-width:1599px){
    .clientes-modern .cliente-logo-only{
        height:138px !important;
        min-height:138px !important;
    }
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.30) !important;
    }
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
    .clientes-modern-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }
    .clientes-modern-meta{
        padding-bottom:0;
    }
    .clientes-modern .cliente-logo-only{
        height:128px !important;
        min-height:128px !important;
    }
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.26) !important;
    }
}

/* Movil */
@media (max-width:767px){
    .clientes.clientes-modern{
        padding:34px 0 !important;
    }

    .clientes-modern-head{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        margin-bottom:18px;
    }

    .clientes-modern h2{
        font-size:clamp(34px,10vw,46px) !important;
    }

    .clientes-modern-meta{
        display:none;
    }

    .clientes-modern .cliente-logo-only{
        height:118px !important;
        min-height:118px !important;
        border-radius:14px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.22) !important;
    }

    .clientes-modern-progress{
        width:68vw;
        margin-top:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .clientes-modern-progress span{
        animation:none !important;
        width:100%;
    }
}


/* =========================================================
   ENVAL v34 - CLIENTES
   8 logos visibles en desktop + logos más grandes + bolitas
   animadas recorriendo el borde.
   Solo afecta la sección .clientes-modern
   ========================================================= */

.clientes-modern .clientesSwiper{
    overflow:hidden !important;
    padding:6px 0 14px !important;
}

.clientes-modern .cliente-logo-only{
    height:118px !important;
    min-height:118px !important;
    padding:0 !important;
    border-radius:15px !important;
    overflow:visible !important;
}

/* Logo más grande, usando mejor el área blanca */
.clientes-modern .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
    margin:0 !important;
    transform:scale(1.62) !important;
}

/* Quitar línea superior y usar dos puntos que recorren el perímetro */
.clientes-modern .cliente-logo-only::before,
.clientes-modern .cliente-logo-only::after{
    content:"" !important;
    position:absolute !important;
    z-index:5 !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    pointer-events:none !important;
    inset:auto !important;
    transform:none !important;
    opacity:1 !important;
    background:#9cff00 !important;
    box-shadow:
      0 0 6px rgba(156,255,0,.95),
      0 0 14px rgba(156,255,0,.55) !important;

    /* Chromium/Edge/Chrome: recorre el borde real de la tarjeta */
    offset-path: inset(3px round 13px);
    offset-rotate:0deg;
    animation:clienteDotOrbit 5.6s linear infinite !important;
}

.clientes-modern .cliente-logo-only::after{
    background:#00d8ff !important;
    box-shadow:
      0 0 6px rgba(0,216,255,.95),
      0 0 14px rgba(0,216,255,.55) !important;
    animation-duration:7.2s !important;
    animation-delay:-3.6s !important;
}

@keyframes clienteDotOrbit{
    from{ offset-distance:0%; }
    to{ offset-distance:100%; }
}

@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.68) !important;
    }

    .clientes-modern .cliente-logo-only:hover::before{
        animation-duration:4.2s !important;
    }

    .clientes-modern .cliente-logo-only:hover::after{
        animation-duration:5.2s !important;
    }
}

/* Desktop grande: 8 tarjetas completas y logos grandes */
@media (min-width:1366px){
    .clientes-modern .cliente-logo-only{
        height:116px !important;
        min-height:116px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.58) !important;
    }

    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.64) !important;
    }
}

/* 19"/20" más compactos */
@media (min-width:1200px) and (max-width:1365px){
    .clientes-modern .cliente-logo-only{
        height:112px !important;
        min-height:112px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.52) !important;
    }
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
    .clientes-modern .cliente-logo-only{
        height:112px !important;
        min-height:112px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.42) !important;
    }
}

/* Móvil */
@media (max-width:767px){
    .clientes-modern .cliente-logo-only{
        height:106px !important;
        min-height:106px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.34) !important;
    }
}

/* Fallback: si el navegador no soporta offset-path, mostrar bolitas estáticas */
@supports not (offset-path: inset(3px round 13px)){
    .clientes-modern .cliente-logo-only::before{
        top:6px !important;
        left:10px !important;
    }
    .clientes-modern .cliente-logo-only::after{
        right:10px !important;
        bottom:6px !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .clientes-modern .cliente-logo-only::before,
    .clientes-modern .cliente-logo-only::after{
        animation:none !important;
    }
}


/* =========================================================
   ENVAL v35 - CLIENTES
   5 logos visibles, separados, sin bolitas animadas.
   Solo afecta la sección .clientes-modern
   ========================================================= */

.clientes-modern .clientesSwiper{
    overflow:hidden !important;
    padding:8px 2px 16px !important;
}

.clientes-modern .cliente-logo-only{
    height:142px !important;
    min-height:142px !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    overflow:hidden !important;
}

/* Retirar completamente las bolitas/barridos anteriores */
.clientes-modern .cliente-logo-only::before,
.clientes-modern .cliente-logo-only::after{
    content:none !important;
    display:none !important;
    animation:none !important;
}

/* Logos grandes pero sin invadir la tarjeta */
.clientes-modern .cliente-logo-only img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:0 !important;
    margin:0 !important;
    transform:scale(1.34) !important;
}

@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.40) !important;
    }
}

/* 19", 20", 22", 24" */
@media (min-width:1200px) and (max-width:1599px){
    .clientes-modern .cliente-logo-only{
        height:136px !important;
        min-height:136px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.30) !important;
    }
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
    .clientes-modern .cliente-logo-only{
        height:124px !important;
        min-height:124px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.24) !important;
    }
}

/* Móvil */
@media (max-width:767px){
    .clientes-modern .cliente-logo-only{
        height:114px !important;
        min-height:114px !important;
        border-radius:14px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.18) !important;
    }
}

/* =========================================================
   ENVAL v36 - CLIENTES / borde tecnológico animado
   Solo afecta las tarjetas de logos en .clientes-modern
   ========================================================= */

.clientes-modern .cliente-logo-only{
    position:relative !important;
    isolation:isolate;
    border:1px solid rgba(0,216,255,.28) !important;
    box-shadow:
      0 12px 28px rgba(0,20,34,.14),
      inset 0 0 0 1px rgba(156,255,0,.05) !important;
}

/* halo de borde tecnológico, sin bolitas */
.clientes-modern .cliente-logo-only > *{
    position:relative;
    z-index:2;
}

.clientes-modern .cliente-logo-only{
    background:
      linear-gradient(#ffffff,#f9fcfd) padding-box,
      linear-gradient(100deg,
        rgba(156,255,0,.18),
        rgba(0,216,255,.78),
        rgba(156,255,0,.30),
        rgba(0,216,255,.18)) border-box !important;
    border:1px solid transparent !important;
    background-size:100% 100%, 260% 260% !important;
    animation:clienteBorderFlow 5.8s linear infinite;
}

@keyframes clienteBorderFlow{
    0%   { background-position:0 0, 0% 50%; }
    50%  { background-position:0 0, 100% 50%; }
    100% { background-position:0 0, 0% 50%; }
}

@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover{
        animation-duration:2.9s;
        box-shadow:
          0 16px 34px rgba(0,25,42,.18),
          0 0 18px rgba(0,216,255,.16),
          0 0 12px rgba(156,255,0,.09),
          inset 0 0 0 1px rgba(255,255,255,.45) !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .clientes-modern .cliente-logo-only{
        animation:none !important;
        background-position:0 0,50% 50% !important;
    }
}


/* =========================================================
   ENVAL v37 - BORDE TECNOLOGICO VISIBLE EN CLIENTES
   Corrección: el borde ahora usa el propio background/border
   de la tarjeta, evitando conflictos con pseudo-elementos.
   Solo afecta .clientes-modern.
   ========================================================= */

.clientes-modern .cliente-logo-only{
    position:relative !important;
    border:2px solid transparent !important;

    /* capa blanca interior + borde degradado animado */
    background:
        linear-gradient(#ffffff,#ffffff) padding-box,
        linear-gradient(
            110deg,
            #92ff00 0%,
            #92ff00 12%,
            #00e5ff 34%,
            #0a7f9c 52%,
            #92ff00 72%,
            #00e5ff 92%,
            #92ff00 100%
        ) border-box !important;

    background-size:
        100% 100%,
        320% 320% !important;

    background-position:
        center,
        0% 50% !important;

    animation:envalClientBorderFlow 4.2s linear infinite !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.16),
        0 0 10px rgba(0,216,255,.08) !important;

    overflow:hidden !important;
}

/* Desactiva cualquier borde/punto anterior que pueda interferir */
.clientes-modern .cliente-logo-only::before,
.clientes-modern .cliente-logo-only::after{
    content:none !important;
    display:none !important;
}

/* El logo queda por encima y mantiene el tamaño aprobado */
.clientes-modern .cliente-logo-only img{
    position:relative !important;
    z-index:2 !important;
}

/* Hover: el flujo se hace más vivo y el marco resalta */
@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover{
        animation-duration:2.2s !important;
        box-shadow:
            0 16px 34px rgba(0,0,0,.20),
            0 0 14px rgba(146,255,0,.20),
            0 0 22px rgba(0,229,255,.18) !important;
    }
}

@keyframes envalClientBorderFlow{
    0%{
        background-position:center,0% 50%;
    }
    50%{
        background-position:center,100% 50%;
    }
    100%{
        background-position:center,0% 50%;
    }
}

/* En móvil el borde se mantiene visible pero más sutil */
@media(max-width:767px){
    .clientes-modern .cliente-logo-only{
        border-width:1.5px !important;
        animation-duration:5s !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .clientes-modern .cliente-logo-only{
        animation:none !important;
        background-position:center,50% 50% !important;
    }
}

/* =========================================================
   ENVAL v38 - CLIENTES / LOGOS MAS GRANDES
   Unico cambio: aumenta la presencia visual del logo dentro
   de las tarjetas existentes. No cambia carrusel ni layout.
   ========================================================= */
.clientes-modern .cliente-logo-only img{
    transform:scale(1.68) !important;
}
@media(hover:hover) and (pointer:fine){
    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.74) !important;
    }
}
@media (min-width:1200px) and (max-width:1599px){
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.62) !important;
    }
    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.68) !important;
    }
}
@media (min-width:768px) and (max-width:1199px){
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.48) !important;
    }
}
@media (max-width:767px){
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.34) !important;
    }
}


/* =========================================================
   ENVAL v39 - AJUSTES SOLO MOVIL
   1) Clientes: 2 logos completos, sin cortes.
   2) Hero: reducir espacio superior y subir contenido.
   Desktop/tablet grande permanecen intactos.
   ========================================================= */

@media (max-width: 767px){

    /* ---- HERO MOVIL: eliminar espacio vacío superior ---- */
    .hero{
        min-height:auto !important;
        height:auto !important;
        padding-top:0 !important;
    }

    .hero .hero-content{
        padding-top:0 !important;
        margin-top:0 !important;
    }

    .hero .hero-content .row{
        min-height:auto !important;
        padding-top:24px !important;
        padding-bottom:38px !important;
        margin-top:0 !important;
        align-items:flex-start !important;
    }

    .hero .hero-small,
    .hero .hero-eyebrow{
        margin-top:0 !important;
    }

    /* ---- CLIENTES MOVIL: 2 tarjetas completas ---- */
    .clientes-modern .clientesSwiper{
        overflow:hidden !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .clientes-modern .cliente-logo-only{
        width:auto !important;
        min-width:0 !important;
        height:108px !important;
        min-height:108px !important;
        padding:5px 6px !important;
        border-radius:13px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.18) !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
    }

    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.18) !important;
    }
}

/* Móviles muy estrechos: mantener dos logos completos */
@media (max-width: 420px){
    .clientes-modern .cliente-logo-only{
        height:102px !important;
        min-height:102px !important;
        padding:4px 5px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.12) !important;
    }

    .hero .hero-content .row{
        padding-top:18px !important;
    }
}


/* =========================================================
   ENVAL v40 - CORRECCIONES SOLO MOVIL
   1) Hero: el texto ya no queda detrás del menú.
   2) En la primera pantalla móvil solo se ve hasta VER EQUIPOS.
      La imagen del hero queda más abajo.
   3) Clientes: exactamente 2 logos completos, sin tercero cortado.
   Desktop y tablet permanecen intactos.
   ========================================================= */

@media (max-width: 767px){

    /* Altura real del navbar movil + respiro */
    .hero{
        min-height:auto !important;
        height:auto !important;
        padding-top:0 !important;
    }

    .hero .hero-content{
        padding-top:0 !important;
        margin-top:0 !important;
    }

    .hero .hero-content .row{
        min-height:auto !important;
        padding-top:92px !important;
        padding-bottom:28px !important;
        margin-top:0 !important;
        align-items:flex-start !important;
    }

    /* Bloque de texto siempre debajo del menú */
    .hero .hero-copy,
    .hero .hero-dynamic-copy{
        position:relative !important;
        z-index:2 !important;
    }

    /* La imagen debe aparecer después de los botones/estadísticas,
       no en la primera vista del móvil */
    .hero .hero-video-stage{
        margin-top:72px !important;
        width:100% !important;
    }

    /* Un poco de aire tras los botones para que la imagen no suba */
    .hero .hero-buttons{
        margin-bottom:18px !important;
    }

    .hero .hero-stats{
        margin-top:22px !important;
    }

    /* CLIENTES: dos tarjetas completas exactas */
    .clientes-modern .clientesSwiper{
        overflow:hidden !important;
        width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
    }

    .clientes-modern .clientesSwiper .swiper-wrapper{
        align-items:stretch !important;
    }

    .clientes-modern .cliente-logo-only{
        box-sizing:border-box !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        flex-shrink:0 !important;
        height:108px !important;
        min-height:108px !important;
        padding:5px 6px !important;
        overflow:hidden !important;
    }

    .clientes-modern .cliente-logo-only img{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
        transform:scale(1.14) !important;
    }
}

@media (max-width: 420px){
    .hero .hero-content .row{
        padding-top:86px !important;
    }

    .hero .hero-video-stage{
        margin-top:68px !important;
    }

    .clientes-modern .cliente-logo-only{
        height:102px !important;
        min-height:102px !important;
    }

    .clientes-modern .cliente-logo-only img{
        transform:scale(1.10) !important;
    }
}


/* =========================================================
   ENVAL v41 - CLIENTES MOVIL: 2 LOGOS EXACTOS
   Solo afecta <= 767px. Desktop permanece intacto.
   ========================================================= */
@media (max-width: 767px){
    .clientes-modern .clientesSwiper{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
        padding:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }

    .clientes-modern .clientesSwiper .swiper-wrapper{
        box-sizing:border-box !important;
    }

    .clientes-modern .clientesSwiper .swiper-slide{
        min-width:0 !important;
        max-width:none !important;
        box-sizing:border-box !important;
        margin-left:0 !important;
    }

    .clientes-modern .cliente-logo-only{
        width:100% !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }
}


/* =========================================================
   ENVAL v42 - SOLO MOVIL
   Logos de clientes +50% dentro de la tarjeta.
   No modifica tamaño de tarjeta, carrusel ni desktop.
   ========================================================= */
@media (max-width: 767px){
    .clientes-modern .cliente-logo-only img{
        transform:scale(1.65) !important;
        transform-origin:center center !important;
        object-fit:contain !important;
    }

    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.65) !important;
    }
}

@media (max-width: 420px){
    .clientes-modern .cliente-logo-only img,
    .clientes-modern .cliente-logo-only:hover img{
        transform:scale(1.65) !important;
    }
}

/* =========================================================
   ENVAL - EQUIPOS 3D: navegación externa sin mostrar
   tarjetas parciales. Ajuste aislado solo para este carrusel.
   ========================================================= */
.productos-tech-showcase .equipos3d-carousel-shell{
  position:relative;
  width:100%;
}

.productos-tech-showcase .equipos3d-carousel-shell .equipos3d-showcase{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-prev,
.productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  margin-top:0 !important;
}

/* Escritorio: flechas completamente fuera de las tarjetas. */
@media (min-width: 1200px){
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-prev{
    left:-58px !important;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-next{
    right:-58px !important;
  }
}

/* Laptop/tablet: siguen fuera de las tarjetas, dentro del ancho seguro. */
@media (min-width: 768px) and (max-width: 1199px){
  .productos-tech-showcase .equipos3d-carousel-shell{
    padding-left:42px;
    padding-right:42px;
    box-sizing:border-box;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-prev{
    left:0 !important;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-next{
    right:0 !important;
  }
}

/* Móvil: una tarjeta completa; controles laterales sin recortar otra tarjeta. */
@media (max-width: 767px){
  .productos-tech-showcase .equipos3d-carousel-shell{
    padding-left:34px;
    padding-right:34px;
    box-sizing:border-box;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-prev,
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-next{
    width:36px;
    height:36px;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-prev{
    left:-2px !important;
  }
  .productos-tech-showcase .equipos3d-carousel-shell > .swiper-button-next{
    right:-2px !important;
  }
}

/* =========================================================
   ENVAL - MEGA MENUS COMPACTOS
   Ajuste visual: texto mas legible y menor espacio ocupado.
   No modifica estructura, contenido ni comportamiento.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .mega-menu{
    padding:16px !important;
  }

  #mainNavbar .mega-menu-wide{
    width:min(1000px, calc(100vw - 64px)) !important;
    max-width:1000px !important;
  }

  #mainNavbar .mega-menu-medium{
    width:min(680px, calc(100vw - 64px)) !important;
    max-width:680px !important;
  }

  #mainNavbar .mega-menu-small{
    width:min(370px, calc(100vw - 64px)) !important;
    max-width:370px !important;
  }

  #mainNavbar .mega-menu-head{
    gap:16px !important;
    margin-bottom:12px !important;
    padding-bottom:11px !important;
  }

  #mainNavbar .mega-kicker{
    margin-bottom:3px !important;
    font-size:9px !important;
    letter-spacing:1.6px !important;
  }

  #mainNavbar .mega-menu-head h3{
    font-size:19px !important;
  }

  #mainNavbar .mega-menu-head p{
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  #mainNavbar .mega-all-link,
  #mainNavbar .equipos3d-mega-all{
    padding:8px 12px !important;
    font-size:10px !important;
  }

  #mainNavbar .mega-grid{
    gap:10px !important;
  }

  #mainNavbar .mega-grid-4{
    gap:10px !important;
  }

  #mainNavbar .mega-column{
    padding:10px !important;
    border-radius:14px !important;
  }

  #mainNavbar .mega-column-title{
    gap:8px !important;
    margin-bottom:6px !important;
    padding:2px 2px 8px !important;
  }

  #mainNavbar .mega-icon{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    font-size:15px !important;
    border-radius:10px !important;
  }

  #mainNavbar .mega-column-title small{
    font-size:8px !important;
    letter-spacing:1px !important;
  }

  #mainNavbar .mega-column-title strong{
    font-size:13px !important;
  }

  #mainNavbar .mega-item{
    gap:8px !important;
    min-height:40px !important;
    margin-top:2px !important;
    padding:5px 7px !important;
    border-radius:10px !important;
  }

  #mainNavbar .mega-item > i{
    width:25px !important;
    height:25px !important;
    flex-basis:25px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }

  #mainNavbar .mega-item strong{
    font-size:11px !important;
  }

  #mainNavbar .mega-item small{
    margin-top:1px !important;
    font-size:9px !important;
  }

  #mainNavbar .mega-item em{
    padding:3px 6px !important;
    font-size:7px !important;
  }
}

/* =========================================================
   ENVAL - SERVICIOS: MENU MAS COMPACTO
   Solo ajusta el desplegable de Servicios en escritorio.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium{
    width:min(610px, calc(100vw - 64px)) !important;
    max-width:610px !important;
    padding:14px !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-menu-head{
    margin-bottom:10px !important;
    padding-bottom:9px !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-grid{
    gap:8px !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-feature{
    min-height:60px !important;
    gap:10px !important;
    padding:9px 11px !important;
    border-radius:13px !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-feature > i{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    font-size:16px !important;
    border-radius:10px !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-feature strong{
    font-size:11.5px !important;
    line-height:1.2 !important;
  }

  #mainNavbar .has-mega-menu > a[href="servicios.html"] + .mega-menu-medium .mega-feature small{
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1.25 !important;
  }
}

/* =========================================================
   ENVAL - SOFTWARE: MENU MAS COMPACTO
   Solo reduce el espacio sobrante del desplegable Software.
   Mantiene contenido, estructura y comportamiento responsive.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide{
    width:min(700px, calc(100vw - 64px)) !important;
    max-width:700px !important;
    padding:14px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-menu-head{
    margin-bottom:9px !important;
    padding-bottom:9px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-grid-2{
    gap:8px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-column{
    padding:8px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-column-title{
    margin-bottom:4px !important;
    padding:1px 1px 6px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-item{
    min-height:36px !important;
    padding:4px 6px !important;
  }
}

/* =========================================================
   ENVAL - ACADEMIA: MENU MAS COMPACTO
   Solo reduce el espacio sobrante del desplegable Academia.
   Mantiene contenido, estructura y comportamiento responsive.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .mega-anchor-academia > .mega-menu-small{
    width:min(315px, calc(100vw - 64px)) !important;
    max-width:315px !important;
    padding:10px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature{
    min-height:56px !important;
    gap:9px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature > i{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
    font-size:15px !important;
    border-radius:10px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature strong{
    font-size:11px !important;
    line-height:1.18 !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature small{
    margin-top:1px !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
  }
}

/* =========================================================
   ENVAL - SOFTWARE: COMPACTO TOTAL TIPO SERVICIOS
   Ajuste exclusivo del desplegable Software en escritorio.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide{
    width:min(590px, calc(100vw - 48px)) !important;
    max-width:590px !important;
    padding:12px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-menu-head{
    gap:10px !important;
    margin-bottom:8px !important;
    padding-bottom:8px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-menu-head h3{
    font-size:18px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-menu-head p{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-column{
    min-width:0 !important;
    padding:7px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-column-title{
    gap:7px !important;
    margin-bottom:3px !important;
    padding:0 0 5px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-item{
    gap:6px !important;
    min-height:32px !important;
    margin-top:1px !important;
    padding:3px 5px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-item > i{
    width:23px !important;
    height:23px !important;
    flex-basis:23px !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-item strong{
    font-size:11px !important;
    line-height:1.12 !important;
  }

  #mainNavbar .has-mega-menu > a[data-no-navigation="true"] + .mega-menu-wide .mega-item small{
    font-size:8px !important;
    line-height:1.15 !important;
  }
}

/* =========================================================
   ENVAL - ACADEMIA Y NOSOTROS: COMPACTO TOTAL TIPO SERVICIOS
   Ajuste exclusivo de estos dos desplegables en escritorio.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .mega-anchor-academia > .mega-menu-small,
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small{
    width:min(285px, calc(100vw - 48px)) !important;
    max-width:285px !important;
    padding:8px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature,
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small .mega-feature{
    min-height:50px !important;
    gap:8px !important;
    padding:7px 9px !important;
    border-radius:11px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature > i,
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small .mega-feature > i{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    font-size:14px !important;
    border-radius:9px !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature strong,
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small .mega-feature strong{
    font-size:11.5px !important;
    line-height:1.16 !important;
  }

  #mainNavbar .mega-anchor-academia > .mega-menu-small .mega-feature small,
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small .mega-feature small{
    margin-top:1px !important;
    font-size:8.5px !important;
    line-height:1.16 !important;
  }
}

/* =========================================================
   ENVAL - ACADEMIA: ANCHO AJUSTADO AL CONTENIDO
   Reduce exclusivamente el espacio vacio derecho del menu.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .mega-anchor-academia > .mega-menu-small{
    width:225px !important;
    max-width:225px !important;
  }
}

/* ENVAL - ACADEMIA: ancho final compacto */
@media (min-width: 992px){
  #mainNavbar .mega-anchor-academia > .mega-menu-small{
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;
    padding:8px !important;
  }
}

/* =========================================================
   ENVAL - NOSOTROS: ANCHO FINAL COMPACTO
   Solo reduce el espacio vacio derecho del submenu Nosotros.
   ========================================================= */
@media (min-width: 992px){
  #mainNavbar .mega-anchor-nosotros > .mega-menu-small{
    width:225px !important;
    min-width:225px !important;
    max-width:225px !important;
    padding:8px !important;
  }
}


/* ENVAL - subtitulos de categorias del menu EQUIPOS 3D */
#mainNavbar .mega-grid-4 .mega-column-subtitle{
    display:block;
    margin-top:3px;
    color:#16b8c7;
    font-size:9px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:.02em;
    text-transform:none;
}

@media(max-width:991px){
    #mainNavbar .mega-grid-4 .mega-column-subtitle{
        font-size:8px;
    }
}


/* =========================================================
   ENVAL v29 - SOLO MENU EQUIPOS 3D / DESKTOP
   Corrige el corte derecho desplazando el mega menu hacia
   la izquierda y limitando su ancho al viewport.
   ========================================================= */
@media (min-width: 992px){
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) > .mega-menu{
        left:auto !important;
        right:0 !important;
        transform:none !important;
        width:min(1180px, calc(100vw - 40px)) !important;
        max-width:calc(100vw - 40px) !important;
    }
}


/* =========================================================
   ENVAL v30 - SOLO MEGA MENU EQUIPOS 3D / DESKTOP
   - Titulos de las 4 categorias en 2 lineas.
   - Columnas mas compactas, ajustadas al contenido.
   - Mantiene intactos los demas menus y responsive movil.
   ========================================================= */
@media (min-width: 992px){

    /* Grid mas compacto y con menos separacion */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-grid-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    /* Cada recuadro mas corto en altura y menos estirado */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column{
        padding: 11px 12px !important;
        min-height: 220px !important;
        height: auto !important;
        border-radius: 15px !important;
    }

    /* Cabecera de cada categoria */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-title{
        display:grid !important;
        grid-template-columns: 34px minmax(0,1fr) !important;
        align-items:start !important;
        gap: 9px !important;
        margin-bottom: 8px !important;
        padding: 2px 2px 9px !important;
    }

    /* Titulo forzado visualmente a dos lineas */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-title strong{
        display:block !important;
        max-width: 150px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        font-size: 12px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Subtitulo un poco mas compacto */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-subtitle{
        margin-top: 3px !important;
        font-size: 8.5px !important;
        line-height: 1.25 !important;
    }

    /* Items internos con menos altura para que el cuadro se ajuste */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item{
        min-height: 38px !important;
        padding: 6px 7px !important;
        gap: 8px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item strong{
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item-icon{
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
        font-size: 10px !important;
    }

    /* Ajuste especifico para que los titulos largos queden en 2 filas limpias */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column:nth-child(1) .mega-column-title strong{
        max-width: 120px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column:nth-child(4) .mega-column-title strong{
        max-width: 135px !important;
    }
}


/* =========================================================
   ENVAL v31 - SOLO MEGA MENU EQUIPOS 3D / DESKTOP
   Reduce los espacios entre las 4 columnas y las junta.
   No modifica otros menús ni el resto de la web.
   ========================================================= */
@media (min-width: 992px){

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-grid-4{
        grid-template-columns: repeat(4, minmax(205px, 1fr)) !important;
        gap: 6px !important;
        column-gap: 6px !important;
        row-gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column{
        margin: 0 !important;
        padding: 10px 10px !important;
        min-height: 210px !important;
        width: 100% !important;
    }

    /* Elimina aire lateral extra dentro de la zona de columnas */
    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-menu{
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-title{
        margin-bottom: 6px !important;
        padding-bottom: 7px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item{
        margin: 0 !important;
    }
}


/* =========================================================
   ENVAL v32 - SOLO SUBMENU EQUIPOS 3D / DESKTOP
   Recuadros mas angostos y mega-menu ajustado al contenido.
   ========================================================= */
@media (min-width: 992px){

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) > .mega-menu{
        width: min(980px, calc(100vw - 32px)) !important;
        max-width: min(980px, calc(100vw - 32px)) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-grid-4{
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column{
        min-width: 0 !important;
        width: auto !important;
        padding: 10px 9px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-title{
        grid-template-columns: 31px minmax(0,1fr) !important;
        gap: 7px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-icon{
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-title strong{
        max-width: 125px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-column-subtitle{
        font-size: 7.8px !important;
        line-height: 1.2 !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item{
        padding-left: 5px !important;
        padding-right: 5px !important;
        gap: 6px !important;
    }
}


/* =========================================================
   ENVAL v33 - SOLO SUBMENU SERVICIOS
   3 servicios en una sola columna, compactos y alineados.
   ========================================================= */
@media (min-width: 992px){
    #mainNavbar .servicios-mega-list{
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
    }

    #mainNavbar .servicios-mega-list .mega-feature{
        width: 100% !important;
        min-height: 54px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
    }

    #mainNavbar .servicios-mega-list .mega-feature strong{
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    #mainNavbar .servicios-mega-list .mega-feature small{
        margin-top: 2px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
    }
}


/* =========================================================
   ENVAL v34 - SOLO SUBMENU SERVICIOS / DESKTOP
   - Reduce el ancho total del desplegable.
   - Subtitulos cyan como EQUIPOS 3D.
   - Aumenta ligeramente el tamaño de los subtitulos.
   ========================================================= */
@media (min-width: 992px){

    /* Solo el mega-menu que contiene la lista de Servicios */
    #mainNavbar .nav-item.has-mega-menu:has(.servicios-mega-list) > .mega-menu{
        width: min(500px, calc(100vw - 32px)) !important;
        max-width: min(500px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    #mainNavbar .servicios-mega-list{
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }

    #mainNavbar .servicios-mega-list .mega-feature{
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Igualar el color de los subtitulos al cyan de EQUIPOS 3D */
    #mainNavbar .servicios-mega-list .mega-feature small{
        color: #16b8c7 !important;
        font-size: 9.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   ENVAL v35 - SOLO SUBMENU SOFTWARE 3D / DESKTOP
   - Evita corte derecho moviendo el desplegable a la izquierda.
   - Subtitulos con mismo cyan, fuente y tamaño de los otros menus.
   ========================================================= */
@media (min-width: 992px){

    /* Identifica exclusivamente el mega-menu SOFTWARE 3D */
    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) > .mega-menu{
        left:auto !important;
        right:0 !important;
        transform:none !important;
        width:min(760px, calc(100vw - 32px)) !important;
        max-width:calc(100vw - 32px) !important;
    }

    /* Subtitulos de POLYWORKS y GEOMAGIC */
    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-column-subtitle{
        display:block !important;
        margin-top:3px !important;
        color:#16b8c7 !important;
        font-size:9.5px !important;
        font-weight:600 !important;
        line-height:1.3 !important;
        letter-spacing:.02em !important;
        text-transform:none !important;
        font-family:inherit !important;
        opacity:1 !important;
    }
}


/* =========================================================
   ENVAL v36 - SOLO SUBMENU SOFTWARE 3D / DESKTOP
   Reduce ancho total y ancho de las dos columnas.
   ========================================================= */
@media (min-width: 992px){

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) > .mega-menu{
        width:min(650px, calc(100vw - 32px)) !important;
        max-width:min(650px, calc(100vw - 32px)) !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-grid-2{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:7px !important;
        width:100% !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-column{
        min-width:0 !important;
        width:auto !important;
        padding:10px 9px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-column-title{
        grid-template-columns:31px minmax(0,1fr) !important;
        gap:7px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-item{
        padding-left:5px !important;
        padding-right:5px !important;
        gap:6px !important;
    }

    #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-item strong{
        font-size:9.5px !important;
        white-space:normal !important;
        line-height:1.15 !important;
    }
}

/* ENVAL v37 - SOLO MOVIL: subtitulos cyan y submenus sin cortes */
@media(max-width:991px){
 #mainNavbar .mega-menu{width:100%!important;max-width:100%!important;min-width:0!important;left:auto!important;right:auto!important;transform:none!important;overflow:hidden!important;box-sizing:border-box!important}
 #mainNavbar .mega-grid-4,#mainNavbar .mega-grid-2{grid-template-columns:1fr!important;width:100%!important;min-width:0!important;gap:9px!important}
 #mainNavbar .mega-column{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden!important}
 #mainNavbar .mega-column-title{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:start!important;gap:10px!important}
 #mainNavbar .mega-column-title>div{min-width:0!important;width:100%!important}
 #mainNavbar .mega-column-title strong{display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important;line-height:1.18!important}
 #mainNavbar .mega-column-subtitle{display:block!important;width:100%!important;max-width:100%!important;margin-top:4px!important;color:#16b8c7!important;font-size:10px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:.01em!important;text-transform:none!important;white-space:normal!important;overflow-wrap:break-word!important;opacity:1!important}
 #mainNavbar .servicios-mega-list{grid-template-columns:1fr!important;width:100%!important;min-width:0!important}
 #mainNavbar .servicios-mega-list .mega-feature{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 #mainNavbar .servicios-mega-list .mega-feature span{min-width:0!important}
 #mainNavbar .servicios-mega-list .mega-feature small{display:block!important;color:#16b8c7!important;font-size:10px!important;font-weight:600!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:break-word!important;opacity:1!important}
 #mainNavbar .mega-item,#mainNavbar .mega-feature,#mainNavbar .mega-item span,#mainNavbar .mega-feature span{min-width:0!important;max-width:100%!important}
 #mainNavbar .mega-item strong,#mainNavbar .mega-feature strong{white-space:normal!important;overflow-wrap:break-word!important}
}
@media(max-width:575px){
 #mainNavbar .mega-menu{padding-left:10px!important;padding-right:10px!important}
 #mainNavbar .mega-column{padding-left:10px!important;padding-right:10px!important}
 #mainNavbar .mega-column-title{grid-template-columns:40px minmax(0,1fr)!important;gap:9px!important}
}


/* =========================================================
   ENVAL v43 - FOOTER COMPACTO
   SOLO equipos-3d.html
   ========================================================= */

.enval-footer-v4{
  position:relative;
  overflow:hidden;
  padding:24px 0 12px;
  background:
    linear-gradient(180deg,rgba(2,13,17,.98),rgba(1,8,11,1));
  border-top:1px solid rgba(0,215,243,.16);
  isolation:isolate;
}

.enval-footer-v4 .footer-v4-ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.enval-footer-v4 .footer-v4-grid{
  position:absolute;
  inset:0;
  opacity:.13;
  background-image:
    linear-gradient(rgba(0,215,243,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,215,243,.035) 1px,transparent 1px);
  background-size:46px 46px;
  animation:footerV4Grid 18s linear infinite;
}
@keyframes footerV4Grid{
  to{background-position:46px 46px}
}

.enval-footer-v4 .footer-v4-glow{
  position:absolute;
  width:330px;
  height:190px;
  right:12%;
  top:-95px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,215,243,.13),transparent 68%);
  filter:blur(14px);
  opacity:.45;
}

.enval-footer-v4 .footer-v4-scan{
  position:absolute;
  left:-20%;
  top:0;
  width:32%;
  height:1px;
  background:linear-gradient(90deg,transparent,#9cff00,#00d7f3,transparent);
  box-shadow:0 0 12px rgba(0,215,243,.55);
  animation:footerV4Scan 6s ease-in-out infinite;
}
@keyframes footerV4Scan{
  0%{left:-25%;opacity:.25}
  50%{opacity:1}
  100%{left:110%;opacity:.25}
}

.enval-footer-v4 .footer-v4-shell{
  position:relative;
  z-index:2;
  min-height:76px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:24px;
  align-items:center;
  padding:14px 18px;
  border:1px solid rgba(0,215,243,.14);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(5,24,30,.62),rgba(2,15,20,.72));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.01),
    0 18px 40px rgba(0,0,0,.16);
}

.enval-footer-v4 .footer-v4-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width:220px;
}
.enval-footer-v4 .footer-v4-brand img{
  width:46px;
  height:46px;
  object-fit:contain;
  transition:.3s ease;
}
.enval-footer-v4 .footer-v4-brand strong{
  display:block;
  color:#dfff16;
  font-size:23px;
  line-height:.9;
  letter-spacing:.02em;
}
.enval-footer-v4 .footer-v4-brand small{
  display:block;
  margin-top:4px;
  color:#6c8188;
  font-size:6px;
  letter-spacing:.11em;
  white-space:nowrap;
}

.enval-footer-v4 .footer-v4-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
}
.enval-footer-v4 .footer-v4-nav a{
  position:relative;
  padding:9px 11px;
  border-radius:10px;
  color:#93a7ad;
  text-decoration:none;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  transition:.24s ease;
  white-space:nowrap;
}
.enval-footer-v4 .footer-v4-nav a:hover{
  color:#fff;
  background:rgba(0,215,243,.045);
}
.enval-footer-v4 .footer-v4-nav a.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(156,255,0,.07),rgba(0,215,243,.05));
  box-shadow:inset 0 0 0 1px rgba(0,215,243,.14);
}
.enval-footer-v4 .footer-v4-nav a.active::after{
  content:"";
  position:absolute;
  left:24%;
  right:24%;
  bottom:3px;
  height:1px;
  background:linear-gradient(90deg,#9cff00,#00d7f3);
  box-shadow:0 0 8px rgba(0,215,243,.45);
}

.enval-footer-v4 .footer-v4-contact{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.enval-footer-v4 .footer-v4-contact a{
  display:flex;
  align-items:center;
  gap:7px;
  color:#83979e;
  text-decoration:none;
  font-size:7px;
  font-weight:700;
  white-space:nowrap;
  transition:.22s ease;
}
.enval-footer-v4 .footer-v4-contact a i{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:7px;
  border:1px solid rgba(0,215,243,.12);
  background:rgba(0,215,243,.035);
  color:#00d7f3;
  font-size:11px;
}
.enval-footer-v4 .footer-v4-contact a:hover{
  color:#dfffff;
}

.enval-footer-v4 .footer-v4-social{
  display:flex;
  align-items:center;
  gap:6px;
}
.enval-footer-v4 .footer-v4-social a{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(0,215,243,.14);
  background:rgba(0,215,243,.025);
  color:#c9dadd;
  transition:.24s ease;
}
.enval-footer-v4 .footer-v4-social a:hover{
  transform:translateY(-2px);
  color:#041014;
  border-color:transparent;
  background:linear-gradient(135deg,#9cff00,#00d7f3);
}

.enval-footer-v4 .footer-v4-bottom{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:10px 4px 0;
  color:#445f67;
  font-size:6px;
  letter-spacing:.08em;
}
.enval-footer-v4 .footer-v4-online{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.enval-footer-v4 .footer-v4-online i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9cff00;
  box-shadow:0 0 8px rgba(156,255,0,.9);
  animation:footerV4Online 1.7s ease-in-out infinite;
}
@keyframes footerV4Online{
  50%{transform:scale(1.3);opacity:.55}
}

@media(max-width:1100px){
  .enval-footer-v4 .footer-v4-shell{
    grid-template-columns:auto 1fr auto;
  }
  .enval-footer-v4 .footer-v4-contact{
    display:none;
  }
}

@media(max-width:767px){
  .enval-footer-v4{
    padding-top:18px;
  }

  .enval-footer-v4 .footer-v4-shell{
    grid-template-columns:1fr auto;
    gap:14px;
    padding:14px;
  }

  .enval-footer-v4 .footer-v4-brand{
    min-width:0;
  }

  .enval-footer-v4 .footer-v4-nav{
    grid-column:1/-1;
    justify-content:flex-start;
    overflow-x:auto;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.04);
    scrollbar-width:none;
  }
  .enval-footer-v4 .footer-v4-nav::-webkit-scrollbar{
    display:none;
  }

  .enval-footer-v4 .footer-v4-social{
    justify-self:end;
  }

  .enval-footer-v4 .footer-v4-bottom{
    font-size:5.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .enval-footer-v4 *,
  .enval-footer-v4 *::before,
  .enval-footer-v4 *::after{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   ENVAL v44 - MAYOR LEGIBILIDAD FOOTER COMPACTO
   Solo tamaños de fuente del footer v4.
   ========================================================= */
.enval-footer-v4 .footer-v4-brand strong{font-size:28px}
.enval-footer-v4 .footer-v4-brand small{font-size:7.5px}
.enval-footer-v4 .footer-v4-nav a{font-size:10px}
.enval-footer-v4 .footer-v4-contact a{font-size:9px}
.enval-footer-v4 .footer-v4-bottom{font-size:8px}

/* Enlaces legales del footer: estilos aislados para no afectar el menú principal */
.enval-footer-v4 .footer-v4-bottom-copy{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.enval-footer-v4 .footer-legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.enval-footer-v4 .footer-legal a{position:relative;color:#71888b;text-decoration:none;letter-spacing:.08em;transition:color .25s ease}
.enval-footer-v4 .footer-legal a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:linear-gradient(90deg,#89ff27,#09d7e5);transition:right .25s ease}
.enval-footer-v4 .footer-legal a:hover{color:#dceced}
.enval-footer-v4 .footer-legal a:hover::after{right:0}
@media(max-width:767px){
  .enval-footer-v4 .footer-v4-bottom-copy{justify-content:center;gap:10px}
  .enval-footer-v4 .footer-legal{justify-content:center;gap:10px 14px;width:100%}
}
@media(prefers-reduced-motion:reduce){.enval-footer-v4 .footer-legal a,.enval-footer-v4 .footer-legal a::after{transition:none}}

@media(max-width:767px){
  .enval-footer-v4 .footer-v4-brand strong{font-size:26px}
  .enval-footer-v4 .footer-v4-brand small{font-size:7px}
  .enval-footer-v4 .footer-v4-nav a{font-size:9px}
  .enval-footer-v4 .footer-v4-bottom{font-size:7px}
}

/* Rendimiento de Inicio: pospone el render de secciones fuera de pantalla */
body.home-page section{
  content-visibility:auto;
  contain-intrinsic-size:auto 760px;
}
body.home-page .hero,
body.home-page .hero-video-card,
body.home-page .site-advice-cta{
  content-visibility:visible;
}
@media(max-width:767px){
  body.home-page .enval-ambient-particles{opacity:.55}
  body.home-page section{contain-intrinsic-size:auto 640px}
}

/* CTA unificado antes del footer en Inicio y Quiénes Somos */
.site-advice-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(48px,7vh,76px) 0;
  border-top:1px solid rgba(9,215,229,.18);
  background:
    radial-gradient(circle at 18% 25%,rgba(137,255,39,.08),transparent 30%),
    radial-gradient(circle at 82% 75%,rgba(9,215,229,.1),transparent 34%),
    #020b0e;
}
.site-advice-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:linear-gradient(rgba(9,215,229,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(9,215,229,.055) 1px,transparent 1px);
  background-size:58px 58px;
}
.site-advice-cta-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:clamp(28px,3vw,42px);
  border:1px solid rgba(9,215,229,.34);
  border-radius:26px;
  background:radial-gradient(circle at 82% 18%,rgba(9,215,229,.12),transparent 32%),linear-gradient(145deg,rgba(7,26,33,.96),rgba(4,16,20,.96));
  box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 0 35px rgba(9,215,229,.03);
}
.site-advice-kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:10px;color:#89ff27;
  font-size:.68rem;font-weight:900;letter-spacing:.18em;
}
.site-advice-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:#09d7e5;box-shadow:0 0 13px #09d7e5}
.site-advice-cta h2{max-width:900px;margin:0;color:#f3ffff;font-size:clamp(2rem,3.65vw,3.55rem);font-weight:950;line-height:1.05;letter-spacing:-.045em}
.site-advice-cta p{margin:12px 0 0;color:#91a6aa;font-size:clamp(.88rem,1.05vw,1.02rem)}
.site-advice-btn{
  position:relative;overflow:hidden;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:22px;
  min-height:58px;max-width:250px;padding:0 25px;border-radius:999px;color:#00110e;text-decoration:none;
  background:linear-gradient(90deg,#89ff27,#09d7e5);font-size:.72rem;font-weight:950;letter-spacing:.045em;
  transition:transform .35s ease,box-shadow .35s ease;
}
.site-advice-btn::before{content:"";position:absolute;inset:-80% auto -80% -35%;width:26%;background:rgba(255,255,255,.5);transform:rotate(20deg);transition:left .55s ease}
.site-advice-btn:hover{color:#00110e;transform:translateY(-4px);box-shadow:0 16px 40px rgba(9,215,229,.22)}
.site-advice-btn:hover::before{left:120%}
@media(max-width:767px){
  .site-advice-cta{padding:48px 0}
  .site-advice-cta-box{align-items:flex-start;flex-direction:column;border-radius:20px}
  .site-advice-btn{width:100%;max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .site-advice-btn,.site-advice-btn::before{transition:none!important}
}

/* Redes sociales del footer: visibles y cómodas en escritorio y móvil */
.enval-footer-v4 .footer-v4-social{
  gap:9px;
  padding-left:12px;
  border-left:1px solid rgba(0,215,243,.11);
}
.enval-footer-v4 .footer-v4-social a{
  position:relative;
  width:40px;
  height:40px;
  border-radius:12px;
  border-color:rgba(0,215,243,.28);
  background:linear-gradient(145deg,rgba(0,215,243,.09),rgba(4,16,20,.72));
  color:#eaffff;
  font-size:17px;
  box-shadow:inset 0 0 16px rgba(0,215,243,.035),0 8px 22px rgba(0,0,0,.16);
}
.enval-footer-v4 .footer-v4-social a::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(156,255,0,.08);
  border-radius:8px;
  pointer-events:none;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.enval-footer-v4 .footer-v4-social a:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 12px 28px rgba(0,215,243,.2),0 0 18px rgba(156,255,0,.1);
}
.enval-footer-v4 .footer-v4-social a:hover::before{
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 0 10px rgba(255,255,255,.18);
}
@media(max-width:767px){
  .enval-footer-v4 .footer-v4-shell{grid-template-columns:1fr}
  .enval-footer-v4 .footer-v4-social{
    grid-column:1/-1;
    justify-self:stretch;
    justify-content:center;
    gap:14px;
    padding:13px 0 0;
    border-left:0;
    border-top:1px solid rgba(0,215,243,.13);
  }
  .enval-footer-v4 .footer-v4-social a{
    width:46px;
    height:46px;
    border-radius:14px;
    font-size:19px;
  }
}

/* Prueba visual aislada: miniaturas de equipos en el mega menú.
   Solo actúa cuando el elemento incluye .mega-equipment-thumb. */
#mainNavbar .mega-grid-4 .mega-equipment-thumb{
  position:relative;
  isolation:isolate;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(0,210,255,.35);
  border-radius:11px;
  background:radial-gradient(circle at 35% 25%,rgba(156,255,0,.18),rgba(0,210,255,.07) 55%,rgba(3,14,18,.94));
  box-shadow:inset 0 0 12px rgba(0,210,255,.08),0 0 0 rgba(0,210,255,0);
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
#mainNavbar .mega-grid-4 .mega-item:has(.mega-equipment-thumb){
  grid-template-columns:40px minmax(0,1fr);
  min-height:46px;
}
#mainNavbar .mega-grid-4 .mega-equipment-thumb::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.36) 48%,transparent 72%);
  transform:translateX(-135%);
  transition:transform .55s ease;
}
#mainNavbar .mega-grid-4 .mega-equipment-thumb img{
  display:block;
  width:38px;
  height:37px;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));
  transform:scale(1.14) translateY(1px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
@media(hover:hover) and (pointer:fine){
  #mainNavbar .mega-grid-4 .mega-item:hover .mega-equipment-thumb{
    transform:translateY(-2px) rotate(-4deg) scale(1.1);
    border-color:#9cff00;
    background:radial-gradient(circle at 35% 25%,rgba(156,255,0,.34),rgba(0,210,255,.13) 58%,rgba(3,14,18,.96));
    box-shadow:0 0 18px rgba(0,210,255,.28),0 0 8px rgba(156,255,0,.18);
  }
  #mainNavbar .mega-grid-4 .mega-item:hover .mega-equipment-thumb::before{transform:translateX(135%)}
  #mainNavbar .mega-grid-4 .mega-item:hover .mega-equipment-thumb img{
    transform:scale(1.27) translateY(0) rotate(3deg);
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.72)) drop-shadow(0 0 5px rgba(156,255,0,.35));
  }
}
@media(max-width:991px){
  #mainNavbar .mega-grid-4 .mega-equipment-thumb{
    width:34px;
    height:34px;
    border-radius:9px;
    animation:megaEquipmentPulse 3.4s ease-in-out infinite;
  }
  #mainNavbar .mega-grid-4 .mega-item:has(.mega-equipment-thumb){
    grid-template-columns:34px minmax(0,1fr);
    min-height:44px;
  }
  #mainNavbar .mega-grid-4 .mega-equipment-thumb img{width:32px;height:31px}
}
@keyframes megaEquipmentPulse{
  50%{border-color:rgba(156,255,0,.65);box-shadow:0 0 11px rgba(0,210,255,.2)}
}
@media(prefers-reduced-motion:reduce){
  #mainNavbar .mega-grid-4 .mega-equipment-thumb{animation:none!important;transition:none!important}
  #mainNavbar .mega-grid-4 .mega-equipment-thumb::before,
  #mainNavbar .mega-grid-4 .mega-equipment-thumb img{transition:none!important}
}

/* =========================================================
   ENVAL | MINIATURAS EQUIPOS 3D LIGERAMENTE AMPLIADAS
   Mantiene la proporción del mega menú en escritorio y móvil.
   ========================================================= */
@media(min-width:992px){
  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-equipment-thumb{
    width:46px;
    height:46px;
  }

  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item:has(.mega-equipment-thumb){
    grid-template-columns:46px minmax(0,1fr);
    min-height:52px;
  }

  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-equipment-thumb img{
    width:44px;
    height:43px;
  }
}

@media(max-width:991px){
  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-equipment-thumb{
    width:38px;
    height:38px;
  }

  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-item:has(.mega-equipment-thumb){
    grid-template-columns:38px minmax(0,1fr);
    min-height:48px;
  }

  #mainNavbar .nav-item.has-mega-menu:has(.equipos3d-mega-all[href="equipos-3d.html"]) .mega-equipment-thumb img{
    width:36px;
    height:35px;
  }
}

/* =========================================================
   ENVAL | CTA FINAL UNIFICADO CON EL ESTÁNDAR DE EQUIPOS 3D
   Se aplica a Inicio, Nosotros, Servicios y servicios internos.
   ========================================================= */
.site-advice-cta{
  padding:70px 0 90px;
}

.site-advice-cta-box{
  isolation:isolate;
  min-height:236px;
  padding:35px;
  gap:30px;
  border:1px solid rgba(0,210,255,.24);
  border-radius:26px;
  background:
    radial-gradient(circle at 80% 20%,rgba(0,210,255,.10),transparent 30%),
    linear-gradient(145deg,#071a21,#041014);
  box-shadow:0 22px 65px rgba(0,0,0,.28),inset 0 0 35px rgba(9,215,229,.03);
  overflow:hidden;
}

.sv-page .scan-final-cta .site-advice-cta-box{
  background:
    radial-gradient(circle at 80% 20%,rgba(0,210,255,.10),transparent 30%),
    linear-gradient(145deg,#071a21,#041014);
}

.site-advice-cta-box::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-45%;
  pointer-events:none;
  background:conic-gradient(from 0deg,transparent,rgba(156,255,0,.08),transparent,rgba(0,215,243,.10),transparent);
  animation:siteAdviceAura 15s linear infinite;
}

.site-advice-cta-box::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-38%;
  bottom:-38%;
  left:23%;
  width:47%;
  pointer-events:none;
  opacity:.48;
  transform:skewX(39deg);
  background:linear-gradient(135deg,rgba(137,255,39,.075),rgba(9,215,229,.09));
}

.site-advice-cta h2{
  font-size:clamp(34px,3.35vw,54px);
  line-height:1;
  letter-spacing:-.032em;
}

.site-advice-cta p{
  margin:14px 0 0;
}

.site-advice-btn{
  min-width:250px;
}

@keyframes siteAdviceAura{
  to{transform:rotate(360deg)}
}

@media(min-width:1200px) and (max-width:1439px){
  .site-advice-cta h2{font-size:clamp(30px,3vw,44px)}
}

@media(min-width:1200px) and (max-height:820px){
  .site-advice-cta h2{font-size:clamp(29px,2.85vw,41px)}
}

@media(max-width:767px){
  .site-advice-cta{padding:48px 0 64px}
  .site-advice-cta-box{min-height:0;padding:24px;align-items:flex-start;flex-direction:column}
  .site-advice-cta-box::after{left:15%;width:70%}
  .site-advice-cta h2{font-size:clamp(27px,8vw,38px);line-height:1.045}
  .site-advice-btn{width:100%;min-width:0;max-width:none}
}

@media(max-width:420px){
  .site-advice-cta h2{font-size:clamp(25px,7.8vw,34px)}
}

@media(prefers-reduced-motion:reduce){
  .site-advice-cta-box::before{animation:none!important}
}

/* =========================================================
   TIPOGRAFÍA GLOBAL DE TÍTULOS
   Uniformiza la familia sin alterar tamaños, colores ni efectos.
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6{
  font-family:"Montserrat",sans-serif !important;
}

h1,
h2{
  font-weight:900 !important;
}

/* ENVAL 2026-10-08: Software 3D en tres familias, una sola fila */
@media (min-width:992px){
  #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) > .mega-menu.mega-menu-wide{
    width:min(930px,calc(100vw - 32px)) !important;
    max-width:min(930px,calc(100vw - 32px)) !important;
  }

  #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .mega-grid.mega-grid-2:has(.creaform-menu-column){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch;
  }

  #mainNavbar .nav-item.has-mega-menu:has(> .mega-trigger[data-no-navigation="true"]) .creaform-menu-column{
    grid-column:auto !important;
  }
}