/* Estructura de lemondata.com.ar con la paleta del logo de Endi (azul marino + blanco) */
:root {
    --endi-50: #EEF3F9;
    --endi-100: #D9E3F0;
    --endi-200: #B3C7E1;
    --endi-300: #7F9FC9;
    --endi-400: #4D77AE;
    --endi-500: #2A5690;
    --endi-600: #1A4072;
    --endi-700: #0F2D52; /* color del logo */
    --endi-800: #0A2140;
    --endi-900: #06152B;
    /* Acentos: color fuerte (fondos claros) y fosforescente (fondos oscuros) */
    --accent-strong: #1D4ED8;   /* azul eléctrico */
    --accent-strong-2: #2563EB; /* azul eléctrico al pasar el mouse */
    --accent-neon: #00E5FF;     /* cian neón */
    --neon-glow: 0 0 18px rgba(0, 229, 255, .55);
    --text: #4B4F58;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { color: var(--text); background: #fff; font-size: 15px; overflow-x: hidden; padding-top: 80px; }

/* ---------- Header (barra blanca fija) ---------- */
.site-header { background: #fff; transition: box-shadow .3s; }
.site-header .navbar { min-height: 80px; padding: 0; }
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .12); }
.brand-logo { height: 50px; width: auto; }
.site-header .nav-link {
    position: relative; color: #343434; font-family: Quicksand, sans-serif; font-weight: 700; font-size: 15px;
    padding: 1.1rem 1.25rem !important; transition: color .2s;
}
.site-header .nav-link::after { /* barra inferior del ítem activo */
    content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: .55rem; height: 3px;
    background: var(--endi-500); transform: scaleX(0); transition: transform .3s;
}
.site-header .nav-link:hover { color: var(--endi-500); }
.site-header .nav-link.active { color: var(--endi-500); }
.site-header .nav-link.active::after { transform: scaleX(1); }
.nav-caret { font-size: .7rem; margin-left: .45rem; }
.site-header .dropdown-menu { border: 0; border-top: 3px solid var(--endi-500); border-radius: 0; font-size: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.site-header .dropdown-item { padding: .6rem 1.25rem; }
.site-header .dropdown-item:hover { background: var(--endi-700); color: #fff; }
@media (min-width: 992px) {
    .site-header .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { padding-bottom: 1rem; }
    .site-header .nav-link::after { display: none; }
}

/* ---------- Hero ---------- */
/* La portada ocupa toda la primera pantalla (alto de la ventana menos los 80px del menú) */
.hero {
    position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--endi-900);
    min-height: max(520px, calc(100vh - 80px));
    min-height: max(520px, calc(100svh - 80px)); /* en celular descuenta la barra del navegador */
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.hero-video.is-switching { opacity: 0; } /* fundido corto al pasar de un video al otro */
/* Capa sobre el video: negro arriba que baja gradualmente a azul marino (mismo color con que empieza Servicios) */
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .62) 40%,
        rgba(6, 21, 43, .78) 70%,
        rgba(10, 33, 64, .95) 90%,
        #0A2140 100%);
}

.hero-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4rem 1rem 1rem; }
.hero-title { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 400; text-transform: uppercase; margin-bottom: 1.6rem; }
.hero-subtitle { color: var(--endi-200); font-family: Quicksand, sans-serif; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; margin: 0; }
/* Franja animada al pie de la portada (enlace al contacto) */
.hero-ticker {
    position: relative; z-index: 2; display: block; overflow: hidden; text-decoration: none;
    background: linear-gradient(90deg, var(--endi-200), #fff 50%, var(--endi-200));
    border-top: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
    transition: background .3s;
}
.ticker-track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.ticker-group { display: flex; align-items: center; flex-shrink: 0; }
.ticker-item {
    padding: .95rem 1.6rem; white-space: nowrap; color: var(--endi-800);
    font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(.95rem, 1.3vw, 1.15rem);
    text-transform: uppercase; letter-spacing: .08em;
}
.ticker-sep { color: var(--endi-400); font-size: 1rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* Al pasar el mouse: se detiene, se ilumina y aparece "Ir al contacto" */
.ticker-cta {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: .5rem;
    padding: 0 1.6rem 0 3rem; color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; white-space: nowrap;
    background: linear-gradient(90deg, rgba(15, 45, 82, 0), var(--endi-700) 35%);
    opacity: 0; transform: translateX(30px); transition: opacity .3s, transform .35s cubic-bezier(.34, 1.6, .5, 1);
}
.ticker-cta i { font-size: 1.25rem; }
.hero-ticker:hover .ticker-track, .hero-ticker:focus-visible .ticker-track { animation-play-state: paused; }
.hero-ticker:hover, .hero-ticker:focus-visible { background: linear-gradient(90deg, #fff, var(--endi-100) 50%, #fff); }
.hero-ticker:hover .ticker-cta, .hero-ticker:focus-visible .ticker-cta { opacity: 1; transform: none; }
.hero-ticker:hover .ticker-item { color: var(--endi-600); }
[data-theme="dark"] .hero-ticker { background: linear-gradient(90deg, var(--endi-300), var(--endi-100) 50%, var(--endi-300)); }
/* En celular (sin mouse): sin texto ni bloque oscuro; solo un circulito con flecha que invita a tocar */
@media (hover: none) {
    .ticker-cta {
        opacity: 1; transform: none; gap: 0; padding: 0 .7rem 0 2rem !important;
        background: linear-gradient(90deg, rgba(179, 199, 225, 0), var(--endi-200) 55%);
    }
    .ticker-cta-text { display: none; }
    .ticker-cta i {
        display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
        background: var(--endi-700); color: #fff; font-size: 0;
        box-shadow: 0 0 0 0 rgba(15, 45, 82, .45); animation: tap-pulse 2s ease-out infinite;
    }
    .ticker-cta i::before { content: "\F138"; font-size: .95rem; } /* bi-arrow-right */
    [data-theme="dark"] .ticker-cta { background: linear-gradient(90deg, rgba(127, 159, 201, 0), var(--endi-300) 55%); }
}
@keyframes tap-pulse { 70% { box-shadow: 0 0 0 9px rgba(15, 45, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 45, 82, 0); } }
@media (max-width: 575.98px) {
    .ticker-item { padding: .8rem 1.1rem; font-size: .85rem; }
    .ticker-cta { font-size: .85rem; padding-right: 1rem; }
    .ticker-track { animation-duration: 24s; }
}

/* Carrusel inferior del hero */
.hero-carousel { position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; padding-bottom: 1.5rem; max-width: 1180px; }
.hc-arrow { background: none; border: 0; color: #fff; font-size: 1.4rem; padding: .25rem .5rem; opacity: .9; }
.hc-arrow:hover { opacity: 1; color: var(--endi-200); }
.hc-viewport { overflow: hidden; flex: 1; }
.hc-track { display: flex; transition: transform .6s ease; }
.hc-item {
    flex: 0 0 calc(100% / 6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    padding: .5rem; height: 80px; color: rgba(255, 255, 255, .7); font-family: Quicksand, sans-serif; font-weight: 700;
    font-size: .95rem; line-height: 1.15; text-align: center; transition: color .3s;
}
.hc-item i { font-size: 1.7rem; }
.hc-item img { max-height: 60px; max-width: 100%; filter: grayscale(1) brightness(1.8); opacity: .8; }
.hc-item:hover { color: #fff; }
@media (max-width: 991.98px) { .hc-item { flex-basis: calc(100% / 3); } }
@media (max-width: 575.98px) { .hc-item { flex-basis: 50%; font-size: .9rem; } }

/* ---------- Títulos de sección ---------- */
.section-title {
    font-weight: 700; font-size: clamp(2rem, 5vw, 3.1rem);
    color: #3A3A3A; text-align: center; margin-bottom: 4rem;
}
.title-highlight { position: relative; display: inline-block; white-space: nowrap; }
.title-stroke { position: absolute; left: -2%; bottom: -.45em; width: 104%; height: .45em; overflow: visible; }
.title-stroke path {
    fill: none; stroke: var(--endi-400); stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.1s ease .4s;
}
.section-title.visible .title-stroke path { stroke-dashoffset: 0; }

/* ---------- Servicios (fondo azul + tarjetas giratorias) ---------- */
.services-section {
    position: relative; overflow: hidden; padding: 5.5rem 0 6rem;
    background: linear-gradient(180deg, var(--endi-800) 0%, var(--endi-700) 55%, var(--endi-600) 100%);
}
.services-section .title-stroke path { stroke: var(--endi-200); }
/* Paso suave portada → servicios: el video se funde en degradado con el azul de arriba de Servicios,
   y Servicios termina en un azul uniforme igual al de la primera onda de Productos (sin bordes rectos) */
.services-section { background: linear-gradient(180deg, var(--endi-800) 0%, var(--endi-700) 70%, var(--endi-700) 100%); }
.services-glow { /* luz suave arriba a la izquierda; abajo queda azul uniforme para empalmar con la onda */
    position: absolute; inset: 0; pointer-events: none;
    /* tamaño fijo y más abajo: el borde de arriba queda en azul marino puro, sin corte con el video */
    background: radial-gradient(700px 360px at 15% 55%, rgba(127, 159, 201, .16), transparent 70%);
}
.services-container { position: relative; max-width: 1140px; }

.flip-card { perspective: 1200px; height: 274px; outline: none; cursor: pointer; }
.flip-inner {
    position: relative; width: 100%; height: 100%; border-radius: 28px;
    transition: transform .8s cubic-bezier(.34, 1.3, .5, 1); transform-style: preserve-3d;
}
.flip-card:hover .flip-inner,
.flip-card:focus-visible .flip-inner,
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 28px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.75rem; text-align: center;
}
.flip-front {
    background: linear-gradient(160deg, #fff 0%, var(--endi-50) 60%, var(--endi-100) 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.flip-front::before { /* brillo diagonal que recorre la tarjeta */
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: skewX(-20deg); animation: shine 6s ease-in-out infinite;
}
.col-lg-3:nth-child(2n) .flip-front::before { animation-delay: 1.5s; }
.col-lg-3:nth-child(3n) .flip-front::before { animation-delay: 3s; }
@keyframes shine { 0%, 70% { left: -75%; } 100% { left: 130%; } }

.flip-icon {
    display: grid; place-items: center; width: 88px; height: 88px; border-radius: 26px; margin-bottom: 1.25rem;
    background: var(--endi-700); color: #fff; font-size: 2.6rem;
    box-shadow: 0 12px 24px rgba(15, 45, 82, .35);
    animation: bob 3.5s ease-in-out infinite;
}
.col-lg-3:nth-child(even) .flip-icon { animation-delay: -1.7s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-4deg); } }
.flip-title { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; text-transform: uppercase; color: var(--endi-800); margin: 0; }
.flip-hint {
    position: absolute; bottom: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--endi-100); color: var(--endi-500); font-size: .9rem;
    animation: spin-hint 4s linear infinite;
}
@keyframes spin-hint { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.flip-back {
    background: linear-gradient(145deg, var(--endi-400) 0%, var(--endi-600) 100%);
    color: #fff; font-size: 15px; line-height: 1.55; transform: rotateY(180deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .15);
}
.flip-back-icon { position: absolute; right: -14px; bottom: -22px; font-size: 7.5rem; color: rgba(255, 255, 255, .1); }
.flip-cta {
    position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.2rem; border-radius: 999px;
    background: #fff; color: var(--endi-700); font-weight: 700; font-size: 14px; text-decoration: none; transition: gap .25s, transform .25s;
}
.flip-cta:hover { gap: .8rem; transform: scale(1.05); color: var(--endi-700); }

/* Botón flotante de WhatsApp (en todas las páginas) */
.whatsapp-float {
    position: fixed; right: 18px; bottom: 22px; z-index: 1031;
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: #25D366; color: #fff; font-size: 2rem; text-decoration: none;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .45); transition: transform .3s cubic-bezier(.34, 1.6, .5, 1);
}
.whatsapp-float::before { /* pulso suave para llamar la atención */
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1;
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.whatsapp-float:hover { color: #fff; transform: scale(1.1); }
/* En la portada del inicio queda oculto y aparece al bajar */
.whatsapp-float { transition: transform .35s cubic-bezier(.34, 1.6, .5, 1), opacity .3s ease; }
.whatsapp-float.is-hidden { opacity: 0; transform: translateY(24px) scale(.6); pointer-events: none; }
.whatsapp-label {
    position: absolute; right: 72px; white-space: nowrap; padding: .5rem 1rem; border-radius: 999px;
    background: #fff; color: #1f2937; font-family: Quicksand, sans-serif; font-weight: 700; font-size: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15); opacity: 0; transform: translateX(10px); pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.whatsapp-float:hover .whatsapp-label { opacity: 1; transform: none; }
@media (max-width: 575.98px) {
    .whatsapp-float { width: 54px; height: 54px; font-size: 1.75rem; right: 14px; bottom: 16px; }
}

/* ---------- Productos (ondas + tarjetas con borde) ---------- */
.products-section { position: relative; background: #fff; padding: 200px 0 150px; overflow: hidden; }
.wave { position: absolute; left: 0; width: 100%; pointer-events: none; }
.wave-top { top: -3px; height: 203px; } /* se monta 3px sobre Servicios para tapar la línea de redondeo */
.products-section { margin-top: -1px; }
.wave-top .w1 { fill: var(--endi-700); }               /* mismo azul con el que termina Servicios */
.wave-top .w2 { fill: var(--endi-400); opacity: .55; }
.wave-top .w3 { fill: var(--endi-200); opacity: .5; }
.wave-top .w2 { animation: drift 9s ease-in-out infinite alternate; }
.wave-top .w3 { animation: drift 12s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translateX(-40px); } }
.wave-bottom { bottom: -1px; height: 110px; }
.wave-bottom .w1 { fill: var(--endi-100); opacity: .7; }
.wave-bottom .w2 { fill: #F1F4F8; } /* empalma con el fondo de Tecnologías */

/* ---------- Tecnologías (filas que se mueven con el scroll) ---------- */
.tech-section { position: relative; overflow: hidden; background: #F1F4F8; padding: 4.5rem 0 9rem; }
.tech-rows { display: flex; flex-direction: column; align-items: center; gap: 2.6rem; }
.tech-row {
    display: flex; align-items: center; gap: clamp(1.75rem, 3.5vw, 3.5rem); white-space: nowrap;
    will-change: transform; transition: transform .15s linear;
}
.tech-item {
    display: inline-flex; align-items: center; gap: .65rem; cursor: default;
    filter: grayscale(1) contrast(.9); opacity: .6;
    transition: filter .35s, opacity .35s, transform .35s cubic-bezier(.34, 1.6, .5, 1);
}
.tech-item img { width: 54px; height: 54px; object-fit: contain; }
.tech-item img[src*="wordmark"] { width: 86px; }
.tech-item span { font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.9rem); color: #3f4650; }
.tech-item:hover { filter: none; opacity: 1; transform: scale(1.12); }
.tech-item:hover span { color: var(--endi-700); }
.tech-wave { bottom: -1px; height: 120px; }
.tech-wave .w1 { fill: var(--endi-200); opacity: .5; }
.tech-wave .w2 { fill: var(--endi-300); opacity: .45; }
.tech-wave .w3 { fill: #fff; } /* empalma con el fondo blanco del contacto */
@media (max-width: 767.98px) {
    .tech-rows { gap: 1.8rem; }
    .tech-item img { width: 40px; height: 40px; }
    .tech-item span { font-size: 1.1rem; }
}

.product-card {
    position: relative; height: 100%; min-height: 250px; padding: 2rem 1.5rem 1.6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
    background: #fff; border: 2.5px solid var(--endi-300); border-radius: 26px;
    text-decoration: none; text-align: center; overflow: hidden;
    transition: transform .4s cubic-bezier(.34, 1.4, .5, 1), border-color .3s, box-shadow .3s;
}
.product-card::before { /* relleno suave que sube al pasar el mouse */
    content: ""; position: absolute; inset: auto 0 0 0; height: 0; z-index: 0;
    background: linear-gradient(180deg, var(--endi-50), var(--endi-100)); transition: height .45s ease;
}
.product-card > * { position: relative; z-index: 1; }
.product-card:hover { transform: translateY(-10px); border-color: var(--endi-700); box-shadow: 0 22px 40px rgba(15, 45, 82, .18); }
.product-card:hover::before { height: 100%; }

.product-badge {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
    background: linear-gradient(145deg, var(--endi-500), var(--endi-700)); color: #fff; font-size: 1.8rem;
    box-shadow: 0 10px 20px rgba(15, 45, 82, .3); transition: transform .5s cubic-bezier(.34, 1.6, .5, 1);
}
.product-card:hover .product-badge { transform: rotate(-10deg) scale(1.12); }
.product-wordmark { font-family: Quicksand, sans-serif; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; }
.product-wordmark b { color: var(--endi-700); font-weight: 700; }
.product-wordmark em { color: var(--endi-400); font-style: normal; font-weight: 700; margin-left: .15em; }
.product-desc { font-family: Quicksand, sans-serif; font-weight: 700; color: #343434; font-size: 15px; }
.product-cta {
    margin-top: .35rem; font-size: 13px; font-weight: 700; color: var(--endi-500);
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.product-card:hover .product-cta, .product-card:focus-visible .product-cta { opacity: 1; transform: none; }
@media (hover: none) { .product-cta { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { .products-section { padding: 140px 0 110px; } .wave-top { height: 120px; } }

/* ---------- Contacto ---------- */
.contact-section { padding: 5rem 0 5.5rem; background: #fff; }
.contact-title { color: var(--endi-500); font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: .5rem; }
.contact-subtitle { color: #555; font-size: 1.05rem; margin-bottom: 1.8rem; }
#contactForm .form-control,
#contactForm .form-select {
    border-radius: 14px; border: 2px solid var(--endi-200); background-color: #fff;
    padding: .8rem 1.1rem; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
#contactForm .form-control::placeholder { color: #8a94a3; }
#contactForm .form-control:hover,
#contactForm .form-select:hover { border-color: var(--endi-300); }
#contactForm .form-control:focus,
#contactForm .form-select:focus { border-color: var(--endi-500); box-shadow: 0 0 0 .25rem rgba(77, 119, 174, .2); }
#contactForm textarea.form-control { min-height: 150px; resize: vertical; }
.btn-endi {
    background: var(--endi-700); color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; border: 0;
    border-radius: 999px; padding: .7rem 2.2rem; transition: transform .25s cubic-bezier(.34, 1.6, .5, 1), background .2s, box-shadow .2s;
}
.btn-endi:hover, .btn-endi:focus { background: var(--endi-500); color: #fff; transform: scale(1.06); box-shadow: 0 10px 22px rgba(15, 45, 82, .25); }

/* Mapa en marco oscuro (como el de lemondata, en azul marino) */
.map-frame {
    position: relative; height: 100%; min-height: 460px; padding: 14px; border-radius: 26px;
    background: var(--endi-900); box-shadow: 0 24px 50px rgba(6, 21, 43, .3);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 432px; border: 0; border-radius: 16px; filter: saturate(.85); }
.map-badge {
    position: absolute; left: 32px; right: 32px; bottom: 32px; display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}
.map-pin {
    flex-shrink: 0; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px;
    background: var(--endi-700); color: #fff; font-size: 1.4rem; animation: bob 3s ease-in-out infinite;
}
.map-badge strong { display: block; color: var(--endi-800); letter-spacing: .2em; text-transform: uppercase; font-size: 14px; }
.map-badge p { margin: 0; color: #555; font-size: 14px; }
@media (max-width: 991.98px) { .map-frame { min-height: 380px; } .map-frame iframe { min-height: 352px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--endi-900); }
.footer-logo { height: 70px; width: auto; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.75rem; }
.footer-links a { color: var(--endi-100); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* ---------- Animación al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s ease var(--delay, 0ms), transform .7s cubic-bezier(.34, 1.4, .5, 1) var(--delay, 0ms); }
.reveal.visible { opacity: 1; transform: none; }

/* =========================================================
   Navbar: enlace "Productos" + flecha para el desplegable
   ========================================================= */
.nav-caret-btn { background: none; border: 0; padding: .25rem .5rem .25rem 0; color: #343434; font-size: .7rem; }
.nav-caret-btn:hover { color: var(--endi-500); }
.nav-caret-btn i { display: inline-block; transition: transform .25s; }
.nav-caret-btn.open i { transform: rotate(180deg); }
.site-header .dropdown .nav-link { padding-right: .35rem !important; }
.site-header .dropdown .nav-link::after { right: .35rem; }

/* Botón píldora reutilizable */
.btn-pill {
    display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.6rem; border-radius: 999px;
    background: var(--pc, var(--endi-700)); color: #fff; font-family: Quicksand, sans-serif; font-weight: 700;
    text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.34, 1.6, .5, 1), box-shadow .25s, filter .25s;
}
.btn-pill:hover { color: #fff; transform: scale(1.07); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); filter: brightness(1.1); }
.btn-pill-light { background: #fff; color: var(--pc); }
.btn-pill-light:hover { color: var(--pc); }
.btn-pill-dark { background: var(--endi-900); color: var(--endi-200); }
.btn-pill-dark:hover { color: #fff; }

/* =========================================================
   Página Productos (listado)
   ========================================================= */
.products-list-page { min-height: calc(100vh - 80px); padding: 4rem 0 5rem; background: linear-gradient(180deg, var(--endi-800), var(--endi-700)); }
.products-list-title { text-align: center; color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 3rem; }
.products-list { max-width: 960px; margin: 0 auto; display: grid; gap: 1.25rem; }
.product-row {
    display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 2rem;
    padding: 1.75rem 2.5rem; border-radius: 26px; background: #F4F7FB;
    border: 3px solid var(--pc); box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}
.product-row.visible { transition: transform .4s cubic-bezier(.34, 1.4, .5, 1), box-shadow .3s, opacity .7s; }
.product-row:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pc2) 45%, transparent), 0 20px 40px rgba(0, 0, 0, .3); }
.product-row-logo { display: flex; align-items: center; justify-content: center; gap: .8rem; text-decoration: none; }
.product-row .product-badge { background: linear-gradient(145deg, var(--pc2), var(--pc)); }
.product-row .product-wordmark b { color: var(--pc); }
.product-row .product-wordmark em { color: var(--pc2); }
.product-row:hover .product-badge { transform: rotate(-10deg) scale(1.1); }
.product-row-text { margin: 0; text-align: center; color: #555; font-size: 14px; line-height: 1.7; }
.product-row-text b { color: #333; }
@media (max-width: 767.98px) {
    .product-row { grid-template-columns: 1fr; text-align: center; padding: 1.75rem 1.5rem; gap: 1rem; }
    .product-row .btn-pill { justify-self: center; }
}

/* Las tarjetas del inicio usan el color de cada producto */
.product-card { border-color: color-mix(in srgb, var(--pc, var(--endi-300)) 55%, white); }
.product-card:hover { border-color: var(--pc, var(--endi-700)); }
.product-card .product-badge { background: linear-gradient(145deg, color-mix(in srgb, var(--pc) 60%, white), var(--pc)); }
.product-card .product-wordmark b { color: var(--pc); }

/* =========================================================
   Página de detalle de producto
   ========================================================= */
.pp-hero {
    position: relative; padding: 4.5rem 0 7rem; overflow: hidden;
    background: linear-gradient(120deg, var(--pc) 0%, color-mix(in srgb, var(--pc) 70%, var(--pc2)) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}
.pp-hero::before { /* forma diagonal decorativa */
    content: ""; position: absolute; top: 0; bottom: 0; right: -10%; width: 60%;
    background: rgba(255, 255, 255, .08); transform: skewX(-20deg);
}
.pp-hero .row { position: relative; z-index: 1; }
.pp-tag {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
    background: rgba(255, 255, 255, .15); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.pp-title { color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; margin-bottom: 1.2rem; }
.pp-text { color: rgba(255, 255, 255, .92); font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin-bottom: 2rem; max-width: 620px; }

.pp-collage { position: relative; height: 430px; max-width: 620px; margin: 0 auto; }
.pp-shape { position: absolute; border-radius: 48px; transform: rotate(-35deg); }
.pp-shape-1 { width: 260px; height: 160px; top: 10px; right: 20px; background: var(--pc2); opacity: .85; animation: float-shape 7s ease-in-out infinite; }
.pp-shape-2 { width: 220px; height: 140px; bottom: 10px; left: 30px; background: #fff; opacity: .25; animation: float-shape 9s ease-in-out infinite reverse; }
@keyframes float-shape { 50% { transform: rotate(-30deg) translateY(-14px); } }
.pp-photo {
    position: absolute; object-fit: cover; border-radius: 40px; border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .3); transition: transform .5s cubic-bezier(.34, 1.4, .5, 1);
}
.pp-photo-1 { width: 58%; height: 300px; top: 20px; left: 0; transform: rotate(-6deg); }
.pp-photo-2 { width: 55%; height: 320px; bottom: 0; right: 0; transform: rotate(5deg); }
.pp-collage:hover .pp-photo-1 { transform: rotate(-9deg) translateX(-10px); }
.pp-collage:hover .pp-photo-2 { transform: rotate(8deg) translateX(10px); }
.pp-logo {
    position: absolute; top: 0; left: 42%; z-index: 2; padding: .5rem 1.2rem; border-radius: 18px; background: #fff;
    font-family: Quicksand, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.1;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .25); animation: bob 4s ease-in-out infinite;
}
.pp-logo b { color: var(--pc); }
.pp-logo em { color: var(--pc2); font-style: normal; margin-left: .1em; }
@media (max-width: 575.98px) { .pp-collage { height: 320px; } .pp-photo-1 { height: 210px; } .pp-photo-2 { height: 230px; } }

/* Carrusel de funcionalidades */
.pp-features { padding: 3.5rem 0 4.5rem; }
.feat-carousel { display: flex; align-items: center; gap: .75rem; max-width: 1060px; margin: 0 auto; }
.feat-arrow { background: none; border: 0; color: var(--pc); font-size: 1.6rem; padding: .25rem; transition: transform .2s; }
.feat-arrow:hover { transform: scale(1.25); }
.feat-viewport { overflow: hidden; flex: 1; padding: 1rem 0 1.5rem; }
.feat-track { display: flex; transition: transform .6s cubic-bezier(.34, 1.2, .5, 1); }
.feat-item { flex: 0 0 calc(100% / 3); padding: 0 .9rem; }
@media (max-width: 991.98px) { .feat-item { flex-basis: 50%; } }
@media (max-width: 575.98px) { .feat-item { flex-basis: 100%; } }
.feat-card {
    height: 100%; min-height: 290px; padding: 2.2rem 1.8rem; border-radius: 32px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--pc2) 35%, white), color-mix(in srgb, var(--pc2) 60%, white));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 25%, white), 0 14px 30px rgba(15, 45, 82, .12);
    transition: transform .4s cubic-bezier(.34, 1.5, .5, 1), box-shadow .3s;
}
.feat-card:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: 0 6px 0 var(--pc), 0 24px 40px rgba(15, 45, 82, .2); }
.feat-icon {
    display: inline-grid; place-items: center; width: 70px; height: 62px; margin-bottom: 1.3rem;
    border-radius: 18px 36px 36px 18px; background: var(--pc); color: #fff; font-size: 1.9rem;
    transition: transform .5s cubic-bezier(.34, 1.6, .5, 1);
}
.feat-card:hover .feat-icon { transform: scale(1.12) rotate(-8deg); }
.feat-card h3 { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--pc); margin-bottom: .6rem; }
.feat-card p { margin: 0; font-family: Quicksand, sans-serif; font-weight: 700; color: #343434; font-size: 15.5px; line-height: 1.4; }
.feat-card p em { font-style: normal; color: var(--pc); }
.feat-dots { display: flex; justify-content: center; gap: .5rem; }
.feat-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--pc) 30%, white); transition: width .3s, background .3s; }
.feat-dots button.active { width: 24px; background: var(--pc); }

/* Franja con dispositivos */
.pp-band {
    padding: 6rem 0 0; overflow: hidden;
    background: linear-gradient(160deg, var(--pc), color-mix(in srgb, var(--pc) 75%, black));
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
.pp-band-title { color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.3; margin-bottom: 1.5rem; }
.pp-checks { list-style: none; padding: 0; margin: 0 0 3rem; }
.pp-checks li { color: #fff; font-weight: 700; margin-bottom: .6rem; }
.pp-checks i { color: var(--pc2); margin-right: .4rem; }

.devices { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-left: 60px; }
.laptop { width: min(520px, 100%); }
.laptop-screen { background: #1d1f24; border: 12px solid #1d1f24; border-bottom-width: 18px; border-radius: 18px 18px 0 0; aspect-ratio: 16 / 10; overflow: hidden; }
.laptop-base { height: 16px; margin: 0 -40px; background: linear-gradient(#d9dde3, #aeb4bd); border-radius: 0 0 14px 14px; }
.phone {
    position: absolute; left: 0; bottom: 0; width: 150px; height: 290px; padding: 10px; border-radius: 28px;
    background: #1d1f24; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); animation: bob 5s ease-in-out infinite;
}
.phone-screen { height: 100%; border-radius: 20px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; }
.phone .product-badge { background: linear-gradient(145deg, var(--pc2), var(--pc)); }
.pp-logo-sm { position: static; font-size: 1.3rem; padding: 0; box-shadow: none; animation: none; }
@media (max-width: 575.98px) { .phone { width: 110px; height: 210px; } .devices { padding-left: 40px; } }

/* Interfaz dentro de la laptop */
.screen-ui { height: 100%; background: #F4F7FB; padding: 1rem; font-size: 11px; color: #333; overflow: hidden; }
.screen-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; color: var(--pc); font-size: 13px; }
.screen-pill { background: #fff; color: var(--pc); padding: .2rem .6rem; border-radius: 999px; font-weight: 700; font-size: 10px; }
.screen-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .7rem; }
.screen-kpis div { background: #fff; border-radius: 10px; padding: .6rem .8rem; display: flex; flex-direction: column; }
.screen-kpis small { font-size: 9px; font-weight: 800; letter-spacing: .1em; color: var(--pc2); }
.screen-kpis b { font-size: 20px; color: var(--pc); }
.screen-kpis i { font-style: normal; color: #16a34a; font-weight: 700; font-size: 10px; }
.screen-list { list-style: none; padding: 0; margin: 0; }
.screen-list li { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 8px; padding: .4rem .6rem; margin-bottom: .35rem; font-weight: 600; }
.screen-list span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #fff; font-size: 8px; font-weight: 800; }
.screen-list em { margin-left: auto; font-style: normal; color: #999; font-size: 9px; }
.screen-bars { display: flex; align-items: flex-end; gap: .35rem; height: 70px; background: #fff; border-radius: 10px; padding: .6rem; margin-bottom: .6rem; }
.screen-bars span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(var(--pc2), var(--pc)); transform-origin: bottom; animation: grow 1.2s ease-out both; }
@keyframes grow { from { transform: scaleY(0); } }
.screen-alert { background: #FFF4DC; color: #8A5A00; border-radius: 8px; padding: .45rem .6rem; font-weight: 700; }
.screen-pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.screen-pipeline small { display: block; font-size: 8.5px; font-weight: 800; color: var(--pc2); text-transform: uppercase; margin-bottom: .3rem; }
.screen-pipeline p { margin: 0 0 .35rem; background: #fff; border-left: 3px solid var(--pc); border-radius: 6px; padding: .35rem .45rem; font-size: 9.5px; }
.screen-pipeline p b { display: block; color: var(--pc); }

/* Franja final de contacto */
.pp-cta { background: var(--endi-600); color: var(--endi-50); padding: 2.5rem 0; font-size: 15px; line-height: 1.6; }
.pp-cta b { color: #fff; }

/* =========================================================
   Página Nosotros
   ========================================================= */
/* 1. Foto con forma de "tazón": ocupa todo el ancho arriba y deja color en las esquinas inferiores */
.ab-hero {
    position: relative; height: clamp(460px, 34vw, 680px); overflow: hidden;
    background: linear-gradient(180deg, var(--endi-500), var(--endi-400));
}
.ab-circle {
    /* la foto cubre todo el hero y se recorta con un círculo de radio 57vw
       cuyo centro queda 48vw por encima del borde inferior */
    position: absolute; inset: 0;
    background: linear-gradient(rgba(10, 33, 64, .2), rgba(10, 33, 64, .55)), var(--photo) center 30% / cover;
    filter: grayscale(1) contrast(1.05);
    clip-path: circle(57vw at 50% calc(100% - 48vw));
}
.ab-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ab-lines path {
    fill: none; stroke: var(--endi-200); stroke-width: 5; stroke-linecap: round;
    stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw 2.2s ease forwards .3s;
}
.ab-lines path:nth-child(2) { animation-delay: .6s; }
.ab-lines path:nth-child(3) { animation-delay: .9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ab-hero-text {
    position: absolute; left: 50%; bottom: 15%; z-index: 2; width: min(1100px, 86vw); transform: translateX(-50%);
    margin: 0; color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; text-align: center;
    font-size: clamp(1.15rem, 1.5vw, 1.75rem); line-height: 1.45; text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.ab-hero-text.reveal { transform: translate(-50%, 30px); }
.ab-hero-text.reveal.visible { transform: translateX(-50%); }
@media (max-width: 767.98px) {
    .ab-circle { clip-path: circle(100vw at 50% calc(100% - 88vw)); } /* deja esquinas de color también en celular */
    .ab-hero-text { bottom: 12%; }
}

/* 2. Franja de valores */
.ab-values { background: var(--endi-900); padding: 3.5rem 0; }
.ab-values-text { color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.75rem); margin-bottom: 1.4rem; }
.ab-formula { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.1rem; }
.ab-formula span { color: var(--endi-200); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; }
.ab-formula i { color: var(--endi-400); font-style: normal; font-weight: 800; font-size: 1.3rem; }
.ab-formula strong { background: #fff; color: var(--endi-800); padding: .35rem 1.1rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; }

/* 3. Bloque dividido */
.ab-split { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 520px; background: #fff; }
.ab-split-content { padding: 4rem clamp(1.5rem, 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.ab-split-title { font-family: Quicksand, sans-serif; font-weight: 700; color: var(--endi-700); font-size: clamp(1.9rem, 2.8vw, 2.6rem); margin-bottom: 2.25rem; }
.ab-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.ab-reason { display: flex; gap: 1.1rem; align-items: flex-start; }
.ab-reason-icon {
    flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
    background: var(--endi-50); color: var(--endi-700); font-size: 1.65rem; transition: background .3s, color .3s, transform .4s cubic-bezier(.34, 1.6, .5, 1);
}
.ab-reason:hover .ab-reason-icon { background: var(--endi-700); color: #fff; transform: rotate(-8deg) scale(1.08); }
.ab-reason h3 { font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--endi-800); margin-bottom: .3rem; }
.ab-reason p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #555; }
.ab-split-photo { position: relative; background: var(--photo) center / cover; filter: grayscale(1); }
.ab-split-photo::after { /* tinte azul que se funde con el blanco */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 30%), rgba(77, 119, 174, .55);
}
@media (max-width: 991.98px) {
    .ab-split { grid-template-columns: 1fr; }
    .ab-split-photo { min-height: 300px; order: -1; }
    .ab-split-photo::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 35%), rgba(77, 119, 174, .55); }
}
@media (max-width: 575.98px) { .ab-reasons { grid-template-columns: 1fr; } }

/* 4. Bloque de la forma de trabajar */
.ab-method { padding: 5rem 0 5.5rem; background: linear-gradient(180deg, var(--endi-400), var(--endi-500)); }
.ab-method-intro { max-width: 860px; margin: 0 auto 2.75rem; color: var(--endi-900); font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.5; }
.ab-eyebrow { display: inline-block; padding: .4rem 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, .25); color: var(--endi-900); font-weight: 800; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; }
.ab-eyebrow-light { background: rgba(255, 255, 255, .12); color: var(--endi-100); }
.ab-method-title { color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin: 1rem 0 3rem; }
.ab-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; max-width: 1180px; margin: 0 auto; }
.ab-step {
    position: relative; padding: 2.25rem 1.5rem; border-radius: 30px; background: var(--endi-900); color: var(--endi-100); outline: none;
    transition: transform .4s cubic-bezier(.34, 1.5, .5, 1), box-shadow .3s;
}
.ab-step:hover, .ab-step:focus-visible { transform: translateY(-10px); box-shadow: 0 24px 42px rgba(6, 21, 43, .42); }
.ab-step-num { position: absolute; top: 1rem; right: 1.3rem; font-weight: 800; color: rgba(255, 255, 255, .15); font-size: 1.9rem; }
.ab-step-icon {
    display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; margin-bottom: 1.2rem;
    border: 2px solid var(--endi-300); color: var(--endi-200); font-size: 2.3rem; transition: background .3s, color .3s, transform .5s cubic-bezier(.34, 1.6, .5, 1);
}
.ab-step:hover .ab-step-icon { background: var(--endi-200); color: var(--endi-900); transform: rotate(-10deg) scale(1.08); }
.ab-step h3 { color: #fff; font-family: Quicksand, sans-serif; font-weight: 700; font-size: 1.3rem; margin-bottom: .6rem; }
.ab-step p { margin: 0; font-size: 15px; line-height: 1.55; }
@media (max-width: 1199.98px) { .ab-steps { grid-template-columns: repeat(2, 1fr); max-width: 720px; } }
@media (max-width: 575.98px) { .ab-steps { grid-template-columns: 1fr; } }

/* 5. Cierre con foto */
.ab-closing {
    position: relative; min-height: 460px; display: flex; align-items: center; padding: 5rem 0; overflow: hidden;
    background: linear-gradient(rgba(10, 33, 64, .72), rgba(10, 33, 64, .72)), var(--photo) center 22% / cover; /* encuadre en las caras */
}
.ab-closing::before { content: ""; position: absolute; inset: 0; backdrop-filter: grayscale(1); }
.ab-closing-title { color: var(--endi-200); font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); margin: 1rem 0 .85rem; }
.ab-closing-text { color: #fff; font-size: clamp(1.05rem, 1.4vw, 1.25rem); margin-bottom: 2.2rem; }
.ab-closing .btn-pill { font-size: 1.05rem; padding: .75rem 2.1rem; }

/* =========================================================
   Ajustes responsivos (tablet y celular)
   ========================================================= */
.flip-mobile-text { display: none; }

/* Evita cualquier desplazamiento lateral en celulares reales (clip no crea barra de scroll) */
html, body { overflow-x: hidden; overflow-x: clip; } /* "hidden" para navegadores que no entienden "clip" */
img, video, iframe, svg { max-width: 100%; }

/* Botón ☰ / ✕ */
.navbar-toggler { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; box-shadow: none !important; }
.navbar-toggler .toggler-close { display: none; }
.navbar-toggler.is-open .toggler-open { display: none; }
.navbar-toggler.is-open .toggler-close { display: inline-block; }

/* Menú desplegado en celular/tablet */
@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        max-height: calc(100vh - 80px); overflow-y: auto; padding: .25rem 0 1rem;
        border-top: 1px solid var(--endi-100);
    }
    .site-header .navbar-nav .nav-item { border-bottom: 1px solid var(--endi-50); }
    .site-header .nav-link { padding: .9rem .25rem !important; font-size: 16px; }
    .site-header .dropdown > div { justify-content: space-between; }
    .nav-caret-btn { padding: .9rem .75rem; font-size: .85rem; }
    .site-header .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 .5rem .75rem; background: transparent; }
    .site-header .dropdown-item { padding: .6rem .75rem; border-radius: 10px; font-size: 15px; }

    .services-section { padding: 4rem 0 4.5rem; }
    .section-title { margin-bottom: 2.75rem; }
}

@media (max-width: 767.98px) {
    /* Tecnologías: en celular los logos se acomodan en varias líneas y no se desplazan */
    .tech-section { padding: 3.5rem 0 7rem; }
    .tech-rows { gap: 1rem; padding: 0 1rem; }
    .tech-row { flex-wrap: wrap; justify-content: center; gap: .9rem 1.4rem; white-space: normal; transform: none !important; }
    .tech-item { opacity: .75; }
    .tech-item img { width: 32px; height: 32px; }
    .tech-item img[src*="wordmark"] { width: 52px; }
    .tech-item span { font-size: .95rem; }

    /* Productos del inicio */
    .products-section { padding: 130px 0 100px; }
    .product-card { min-height: 0; padding: 1.5rem 1.25rem; }
    .product-wordmark { font-size: 1.7rem; }

    /* La animación de entrada solo desliza (achicar con scale deja el texto borroso en celular) */
    .reveal { transform: translateY(24px); }
    .reveal.visible { transform: none; }

    /* Contacto */
    .contact-section { padding: 3.5rem 0 4rem; }

    /* Títulos largos: más chicos y pueden partirse en dos líneas */
    .section-title { font-size: clamp(1.65rem, 7.5vw, 2.1rem); }
    .title-highlight { white-space: normal; }

    /* Pie compacto: logo y lema chicos, enlaces en dos filas, espacio justo para el botón de WhatsApp */
    .site-footer { padding-top: 2.25rem !important; padding-bottom: 5rem !important; }
    .footer-logo { height: 42px; }
    .site-footer p { font-size: 14px !important; margin-top: .6rem !important; margin-bottom: 1.1rem !important; }
    .footer-links { gap: .45rem 1.3rem; font-size: 14px; }
    .site-footer hr { margin: 1.1rem 0 !important; }
    .site-footer p:last-child { font-size: 12px !important; margin: 0 !important; }
}

@media (max-width: 575.98px) {
    /* Servicios: tarjeta horizontal compacta con el texto visible (en celular no hay "hover" para girarlas).
       Sin efectos 3D: la perspectiva y las caras ocultas hacen que el navegador dibuje el texto borroso. */
    .flip-card { height: auto; cursor: default; perspective: none; }
    .flip-inner, .flip-card:hover .flip-inner, .flip-card.flipped .flip-inner {
        transform: none !important; height: auto; transform-style: flat; transition: none;
    }
    .flip-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
    .flip-front::before { display: none; } /* sin brillo animado encima del texto */
    .flip-back, .flip-hint { display: none; }
    .flip-front {
        position: relative; flex-direction: row; align-items: center; justify-content: flex-start;
        gap: 1rem; padding: 1.1rem 1.2rem; text-align: left; border-radius: 22px;
    }
    /* Acordeón: filas cortas (ícono + título + flecha); al tocar se despliega la descripción */
    .flip-front { padding: .75rem 2.8rem .75rem .85rem; gap: .85rem; border-radius: 18px; cursor: pointer; }
    .flip-front::after {
        content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 1rem; top: 1.35rem;
        color: var(--endi-500); font-size: .95rem; transition: transform .3s;
    }
    .flip-card.is-open .flip-front::after { transform: rotate(180deg); }
    .flip-card.is-open .flip-front { align-items: flex-start; }
    .flip-icon { flex-shrink: 0; width: 44px; height: 44px; margin: 0; border-radius: 14px; font-size: 1.25rem; animation: none; box-shadow: none; }
    .flip-body { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    .flip-title { font-size: 14.5px; }
    .flip-mobile-text {
        display: block; max-height: 0; overflow: hidden; opacity: 0; margin: 0;
        font-size: 13.5px; line-height: 1.5; color: #4b5563; transition: max-height .35s ease, opacity .3s ease, margin .3s ease;
    }
    .flip-card.is-open .flip-mobile-text { max-height: 160px; opacity: 1; margin-top: .35rem; }
    .services-section .row { --bs-gutter-y: .6rem; }
    .services-section .reveal { transition-delay: 0ms !important; }

    /* Productos del inicio: tarjeta horizontal compacta (ícono a la izquierda, textos a la derecha) */
    .products-section .row { --bs-gutter-y: .9rem; }
    .product-card {
        display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center;
        column-gap: 1rem; row-gap: .1rem; padding: 1rem 1.1rem; text-align: left; border-radius: 22px; border-width: 2px;
    }
    .product-card::before { display: none; }
    .product-card:hover { transform: none; }
    .product-badge { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; font-size: 1.45rem; }
    .product-wordmark { grid-column: 2; font-size: 1.35rem; }
    .product-desc { grid-column: 2; font-size: 13.5px; font-weight: 600; color: #555; }
    .product-cta { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 0; opacity: 1; transform: none; }
    .product-cta i {
        display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
        font-size: 1rem; color: #fff; background: var(--pc, var(--endi-700));
    }

    /* Página Productos (listado): fila compacta. Arriba logo + botón, abajo la descripción */
    .products-list-page { min-height: 0; padding: 2rem 0 3rem; }
    .products-list-title { font-size: 2rem; margin-bottom: 1.5rem; }
    .products-list { gap: .85rem; }
    .product-row {
        grid-template-columns: 1fr auto; gap: .6rem .75rem; align-items: center; text-align: left;
        padding: 1rem 1.1rem; border-width: 2px; border-radius: 20px; box-shadow: none;
    }
    .product-row:hover { transform: none; }
    .product-row-logo { justify-content: flex-start; gap: .6rem; }
    .product-row .product-badge { width: 42px; height: 42px; border-radius: 13px; font-size: 1.2rem; box-shadow: none; }
    .product-row .product-wordmark { font-size: 1.35rem; }
    .product-row .btn-pill { grid-column: 2; grid-row: 1; justify-self: end; padding: .4rem .95rem; font-size: 13px; }
    .product-row-text {
        grid-column: 1 / -1; text-align: left; font-size: 13.5px; line-height: 1.5; color: #4b5563;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Página de producto: el celular dibujado no tapa la laptop */
    .devices { padding-left: 78px; }
    .phone { width: 92px; height: 180px; padding: 7px; border-radius: 20px; }
    .phone-screen { border-radius: 14px; gap: .4rem; }
    .phone .product-badge { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 12px; }
    .pp-logo-sm { font-size: .95rem; }
    .laptop-screen { border-width: 8px 8px 12px; }
    .screen-ui { padding: .6rem; font-size: 9px; }
    .screen-kpis b { font-size: 15px; }

    /* Nosotros: tarjetas de "forma de trabajar" compactas */
    .ab-step { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; text-align: left; padding: 1.25rem 1.3rem; border-radius: 24px; }
    .ab-step-icon { grid-row: span 2; width: 60px; height: 60px; margin: 0; border-radius: 18px; font-size: 1.7rem; }
    .ab-step h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
    .ab-step p { font-size: 14px; }
    .ab-step-num { top: .7rem; right: 1rem; font-size: 1.3rem; }
    .ab-steps { gap: 1rem; }

    /* Hero del inicio */
    .hero { min-height: max(480px, calc(100svh - 80px)); }
    .hero-content { padding-top: 2.5rem; }
    .hero-carousel { padding-bottom: 1rem; }
}

/* =========================================================
   Acentos: azul eléctrico (fuerte) + cian neón (fosforescente)
   Regla: el neón va sobre fondos oscuros; el azul eléctrico sobre fondos claros.
   ========================================================= */
/* Menú */
.site-header .nav-link:hover, .site-header .nav-link.active { color: var(--accent-strong); }
.site-header .nav-link::after { background: var(--accent-strong); height: 3px; border-radius: 3px; }

/* Portada (fondo oscuro → neón) */
.hero-subtitle { color: var(--accent-neon); text-shadow: 0 0 22px rgba(0, 229, 255, .45); }
.hc-arrow:hover { color: var(--accent-neon); }
.hc-item:hover { color: var(--accent-neon); }
.hc-item:hover i { filter: drop-shadow(0 0 8px rgba(0, 229, 255, .7)); }

/* Franja animada: fondo cian neón con texto azul marino */
.hero-ticker {
    background: linear-gradient(90deg, #00C2FF, var(--accent-neon) 50%, #00C2FF);
    border-top-color: rgba(255, 255, 255, .7);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25), 0 0 26px rgba(0, 229, 255, .35);
}
.ticker-item { color: var(--endi-900); }
.ticker-sep { color: var(--accent-strong); }
.hero-ticker:hover, .hero-ticker:focus-visible { background: linear-gradient(90deg, #fff, #CFFAFF 50%, #fff); }
.hero-ticker:hover .ticker-item { color: var(--accent-strong); }
.ticker-cta { background: linear-gradient(90deg, rgba(29, 78, 216, 0), var(--accent-strong) 35%); }
@media (hover: none) { /* celular: el circulito se funde con el cian de la franja */
    .ticker-cta, [data-theme="dark"] .ticker-cta { background: linear-gradient(90deg, rgba(0, 229, 255, 0), var(--accent-neon) 55%); }
    .ticker-cta i { background: var(--accent-strong); }
}

/* Títulos: trazo azul eléctrico en fondos claros, neón en fondos oscuros */
.title-stroke path { stroke: var(--accent-strong); }
.services-section .title-stroke path { stroke: var(--accent-neon); filter: drop-shadow(0 0 6px rgba(0, 229, 255, .8)); }

/* Servicios (fondo oscuro) */
.flip-icon { background: linear-gradient(145deg, var(--accent-strong-2), var(--accent-strong)); box-shadow: 0 12px 24px rgba(29, 78, 216, .4); }
.flip-card:hover .flip-front { box-shadow: 0 18px 40px rgba(0, 0, 0, .25), 0 0 0 2px var(--accent-neon), var(--neon-glow); }
.flip-back { background: linear-gradient(145deg, var(--accent-strong) 0%, var(--endi-700) 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(0, 229, 255, .5); }
.flip-cta { color: var(--accent-strong); }
.flip-cta:hover { background: var(--accent-neon); color: var(--endi-900); }
.flip-front::after, .flip-hint { color: var(--accent-strong); }

/* Productos y tecnologías (fondo claro → azul eléctrico) */
.product-cta { color: var(--accent-strong); }
.tech-item:hover span { color: var(--accent-strong); }

/* Botones principales */
.btn-endi { background: var(--accent-strong); }
.btn-endi:hover, .btn-endi:focus { background: var(--accent-strong-2); box-shadow: 0 10px 24px rgba(29, 78, 216, .35), 0 0 0 3px rgba(0, 229, 255, .35); }

/* Contacto */
.contact-title { color: var(--accent-strong); }
#contactForm .form-control:focus,
#contactForm .form-select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 .25rem rgba(0, 229, 255, .28); }

/* Pie (fondo oscuro → neón) */
.footer-links a:hover { color: var(--accent-neon); text-decoration: none; text-shadow: 0 0 10px rgba(0, 229, 255, .6); }

/* Modo oscuro: los trazos de los títulos pasan a neón (el resto de acentos oscuros está en la sección "Modo nocturno") */
[data-theme="dark"] .title-stroke path { stroke: var(--accent-neon); filter: drop-shadow(0 0 6px rgba(0, 229, 255, .7)); }

/* =========================================================
   Más vistoso: luces, degradados en movimiento y brillos neón
   (todo se desactiva con "reducir movimiento" del sistema)
   ========================================================= */
/* Barra de progreso neón bajo el menú */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.scroll-progress span {
    display: block; height: 100%; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent-neon), #7C3AED);
    box-shadow: 0 0 10px rgba(0, 229, 255, .8);
}

/* "Hablemos" como botón llamativo */
.site-header .nav-link.nav-cta {
    margin-left: .5rem; padding: .55rem 1.25rem !important; border-radius: 999px; color: #fff !important;
    background: linear-gradient(90deg, var(--accent-strong), #0EA5E9, var(--accent-strong)); background-size: 200% 100%;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .35); animation: gradient-move 4s linear infinite;
    transition: transform .25s cubic-bezier(.34, 1.6, .5, 1), box-shadow .25s;
}
.site-header .nav-link.nav-cta::after { display: none; }
.site-header .nav-link.nav-cta:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 22px rgba(29, 78, 216, .45), 0 0 0 3px rgba(0, 229, 255, .45), var(--neon-glow); }
.site-header .nav-link.nav-cta i { font-size: 1.2rem; vertical-align: -3px; transition: transform .25s; }
.site-header .nav-link.nav-cta:hover i { transform: translateX(3px); }
@keyframes gradient-move { to { background-position: 200% 0; } }
@media (max-width: 991.98px) {
    .site-header .navbar-nav .nav-item-cta { border-bottom: 0; padding: .75rem 0 .25rem; }
    .site-header .nav-link.nav-cta { display: block; text-align: center; margin: 0; padding: .8rem 1rem !important; }
}

/* Portada: subtítulo con degradado neón en movimiento + luces flotantes */
.hero-subtitle {
    background: linear-gradient(90deg, var(--accent-neon), #93C5FD, #FFFFFF, var(--accent-neon));
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none; filter: drop-shadow(0 0 14px rgba(0, 229, 255, .45));
    animation: gradient-move 6s linear infinite;
}
.hero-title { text-shadow: 0 2px 18px rgba(0, 0, 0, .5), 0 0 30px rgba(0, 229, 255, .18); letter-spacing: .02em; }
.hero-content::before, .hero-content::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none;
}
.hero-content::before { width: 340px; height: 340px; top: 12%; left: 8%; background: var(--accent-strong); animation: orb-1 14s ease-in-out infinite alternate; }
.hero-content::after { width: 280px; height: 280px; bottom: 6%; right: 10%; background: var(--accent-neon); opacity: .3; animation: orb-2 17s ease-in-out infinite alternate; }
@keyframes orb-1 { to { transform: translate(120px, 60px) scale(1.15); } }
@keyframes orb-2 { to { transform: translate(-140px, -50px) scale(.9); } }
@media (max-width: 575.98px) { .hero-content::before { width: 220px; height: 220px; } .hero-content::after { width: 180px; height: 180px; } }

/* Franja: destello que la recorre */
.hero-ticker::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 25%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: ticker-shine 3.8s ease-in-out infinite;
}
@keyframes ticker-shine { 0%, 40% { left: -30%; } 100% { left: 130%; } }

/* Palabra destacada de los títulos con texto en degradado */
.title-highlight {
    background: linear-gradient(90deg, var(--accent-strong), #0891B2, var(--accent-strong));
    background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: gradient-move 5s linear infinite;
}
.services-section .title-highlight,
[data-theme="dark"] .title-highlight {
    background-image: linear-gradient(90deg, var(--accent-neon), #93C5FD, var(--accent-neon));
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, .35));
}

/* Botones: degradado que se mueve + pulso de luz */
.btn-endi {
    background: linear-gradient(90deg, var(--accent-strong), #0EA5E9, var(--accent-strong)) !important;
    background-size: 200% 100% !important; animation: gradient-move 4s linear infinite, btn-pulse 2.6s ease-out infinite;
}
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(0, 229, 255, 0); } }

/* Servicios: luces que se mueven y cuadrícula tecnológica suave */
.services-glow {
    background:
        radial-gradient(420px 260px at 15% 30%, rgba(29, 78, 216, .45), transparent 70%),
        radial-gradient(380px 240px at 85% 45%, rgba(0, 229, 255, .18), transparent 70%);
    animation: glow-drift 16s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate(40px, -20px); filter: hue-rotate(15deg); } }
.services-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}
.flip-icon { position: relative; }
.flip-icon::after { /* anillo neón que late */
    content: ""; position: absolute; inset: -6px; border-radius: 30px; border: 2px solid rgba(0, 229, 255, .55);
    animation: ring-pulse 2.8s ease-out infinite;
}
@keyframes ring-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* Productos: borde con degradado animado y brillo al pasar el mouse */
.product-card:hover {
    border-color: transparent;
    background: linear-gradient(var(--card-bg, #fff), var(--card-bg, #fff)) padding-box,
                linear-gradient(120deg, var(--accent-strong), var(--accent-neon), #7C3AED, var(--accent-strong)) border-box;
    background-size: 100% 100%, 300% 300%;
    animation: border-flow 3s linear infinite;
    box-shadow: 0 22px 40px rgba(15, 45, 82, .18), 0 0 26px rgba(0, 229, 255, .3);
}
[data-theme="dark"] .product-card { --card-bg: var(--dk-surface); }
@keyframes border-flow { to { background-position: 0 0, 300% 0; } }
.product-card:hover .product-badge { box-shadow: 0 10px 20px rgba(15, 45, 82, .3), 0 0 22px rgba(0, 229, 255, .55); }

/* Tecnologías: brillo neón al pasar el mouse */
.tech-item:hover img { filter: drop-shadow(0 0 10px rgba(0, 229, 255, .6)); }

/* =========================================================
   Aún más llamativo — en TODAS las páginas
   ========================================================= */
/* Luz que sigue al mouse (la crea main.js solo en computadora) */
.cursor-spotlight {
    position: fixed; inset: 0; z-index: 1040; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 229, 255, .13), transparent 65%);
    mix-blend-mode: screen;
}
.cursor-spotlight.on { opacity: 1; }

/* Tarjetas 3D con reflejo de luz (main.js agrega la clase .tilt y la inclinación) */
.tilt { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .3s, border-color .3s; will-change: transform; }
.tilt::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), rgba(0, 229, 255, .12) 30%, transparent 60%);
    mix-blend-mode: soft-light;
}
.tilt:hover::after { opacity: 1; }
.tilt:hover { box-shadow: 0 26px 50px rgba(15, 45, 82, .25), 0 0 0 2px rgba(0, 229, 255, .55), 0 0 30px rgba(0, 229, 255, .35); }

/* Títulos grandes de todas las páginas con texto en degradado animado */
.products-list-title, .pp-title, .pp-band-title, .ab-method-title, .ab-closing-title, .ab-values-text {
    background: linear-gradient(90deg, #FFFFFF, var(--accent-neon), #93C5FD, #FFFFFF);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: gradient-move 7s linear infinite; filter: drop-shadow(0 0 12px rgba(0, 229, 255, .3));
}
.ab-split-title, .contact-title, .notfound-title {
    background: linear-gradient(90deg, var(--accent-strong), #0891B2, #7C3AED, var(--accent-strong));
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: gradient-move 7s linear infinite;
}
[data-theme="dark"] .ab-split-title, [data-theme="dark"] .contact-title, [data-theme="dark"] .notfound-title {
    background-image: linear-gradient(90deg, var(--accent-neon), #93C5FD, #C4B5FD, var(--accent-neon));
}

/* Todos los botones: degradado en movimiento + destello al pasar el mouse */
.btn-pill { position: relative; overflow: hidden; isolation: isolate; }
.btn-pill:not(.btn-pill-light):not(.btn-pill-outline) {
    background-image: linear-gradient(90deg, var(--pc, var(--accent-strong)), color-mix(in srgb, var(--pc, var(--accent-strong)) 55%, var(--accent-neon)), var(--pc, var(--accent-strong)));
    background-size: 200% 100%; animation: gradient-move 4s linear infinite;
}
.btn-pill::after, .btn-endi::after, .site-header .nav-link.nav-cta::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn-endi, .site-header .nav-link.nav-cta { position: relative; overflow: hidden; }
.btn-pill:hover::after, .btn-endi:hover::after, .site-header .nav-link.nav-cta:hover::before { left: 130%; }
.btn-pill:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .2), 0 0 0 3px rgba(0, 229, 255, .45), var(--neon-glow); }
.btn-pill-light { box-shadow: 0 0 0 2px rgba(255, 255, 255, .4), 0 0 24px rgba(0, 229, 255, .45); }

/* Fondos oscuros con estrellitas que titilan */
.products-list-page, .pp-band, .ab-method, .ab-closing { position: relative; }
.products-list-page::before, .pp-band::before, .ab-method::before, .services-section::after, .ab-closing::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 20%, rgba(0, 229, 255, .9), transparent),
        radial-gradient(1.4px 1.4px at 28% 72%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1.8px 1.8px at 47% 35%, rgba(0, 229, 255, .85), transparent),
        radial-gradient(1.3px 1.3px at 63% 82%, rgba(147, 197, 253, .9), transparent),
        radial-gradient(1.7px 1.7px at 78% 18%, rgba(255, 255, 255, .85), transparent),
        radial-gradient(1.5px 1.5px at 90% 60%, rgba(0, 229, 255, .9), transparent);
    background-size: 340px 340px; animation: twinkle 3.5s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: .35; } 100% { opacity: 1; } }
.products-list-page > .container, .pp-band > .container, .ab-method > .container { position: relative; z-index: 1; }

/* Nosotros */
.ab-lines path { stroke: var(--accent-neon); filter: drop-shadow(0 0 6px rgba(0, 229, 255, .9)); }
.ab-formula strong { background: linear-gradient(90deg, var(--accent-neon), #93C5FD); color: var(--endi-900); box-shadow: var(--neon-glow); }
.ab-formula i { color: var(--accent-neon); text-shadow: 0 0 10px rgba(0, 229, 255, .8); }
.ab-step-icon { border-color: var(--accent-neon); color: var(--accent-neon); box-shadow: 0 0 16px rgba(0, 229, 255, .3), inset 0 0 12px rgba(0, 229, 255, .15); }
.ab-reason-icon { background: linear-gradient(145deg, var(--accent-strong-2), var(--accent-strong)); color: #fff; box-shadow: 0 10px 22px rgba(29, 78, 216, .3); }
.ab-reason:hover .ab-reason-icon { box-shadow: 0 0 0 3px rgba(0, 229, 255, .5), var(--neon-glow); }

/* Página de producto */
.pp-tag { border: 1px solid rgba(0, 229, 255, .6); box-shadow: 0 0 16px rgba(0, 229, 255, .35); }
.pp-photo { border-color: rgba(255, 255, 255, .95); }
.pp-collage:hover .pp-photo { box-shadow: 0 25px 50px rgba(0, 0, 0, .3), 0 0 0 3px var(--accent-neon), 0 0 34px rgba(0, 229, 255, .5); }
.pp-logo { box-shadow: 0 12px 26px rgba(0, 0, 0, .25), 0 0 24px rgba(0, 229, 255, .45); }
.feat-icon { box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 60%, transparent); }
.feat-dots button.active { box-shadow: 0 0 10px var(--pc2); }
.laptop-screen { box-shadow: 0 0 40px rgba(0, 229, 255, .25); }

/* Listado de productos: borde neón animado al pasar el mouse */
.product-row:hover { border-color: var(--accent-neon); }

/* Contacto: mapa con borde neón animado */
.map-frame {
    background: linear-gradient(var(--endi-900), var(--endi-900)) padding-box,
                linear-gradient(120deg, var(--accent-strong), var(--accent-neon), #7C3AED, var(--accent-strong)) border-box;
    border: 3px solid transparent; background-size: 100% 100%, 300% 300%;
    animation: border-flow 5s linear infinite; box-shadow: 0 24px 50px rgba(6, 21, 43, .3), 0 0 30px rgba(0, 229, 255, .25);
}
[data-theme="dark"] .map-frame { background: linear-gradient(#040C19, #040C19) padding-box, linear-gradient(120deg, var(--accent-strong), var(--accent-neon), #7C3AED, var(--accent-strong)) border-box; background-size: 100% 100%, 300% 300%; }
.map-pin { box-shadow: 0 0 0 4px rgba(0, 229, 255, .25), var(--neon-glow); }

/* Pie: línea neón animada arriba y logo con brillo */
.site-footer { position: relative; }
.site-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent-neon), #7C3AED, var(--accent-strong));
    background-size: 300% 100%; animation: gradient-move 6s linear infinite; box-shadow: 0 0 16px rgba(0, 229, 255, .6);
}
.footer-logo { filter: drop-shadow(0 0 14px rgba(0, 229, 255, .45)); }

/* Página 404: número con brillo neón */
.notfound-code {
    background: linear-gradient(90deg, var(--accent-strong), var(--accent-neon), #7C3AED, var(--accent-strong));
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: gradient-move 5s linear infinite; filter: drop-shadow(0 0 22px rgba(0, 229, 255, .45));
}

/* Página 404 */
.notfound { min-height: calc(100vh - 80px); display: flex; align-items: center; padding: 4rem 0; background: linear-gradient(180deg, var(--endi-50), #fff); }
.notfound-code { display: block; font-family: Quicksand, sans-serif; font-weight: 700; font-size: clamp(5rem, 18vw, 9rem); line-height: 1; color: var(--endi-200); }
.notfound-title { font-family: Quicksand, sans-serif; font-weight: 700; color: var(--endi-800); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: .5rem 0 .75rem; }
.notfound-text { color: #555; margin-bottom: 2rem; }
.btn-pill-outline { background: transparent; color: var(--endi-700); box-shadow: inset 0 0 0 2px var(--endi-300); }
.btn-pill-outline:hover { color: #fff; background: var(--endi-700); }
[data-theme="dark"] .notfound { background: linear-gradient(180deg, #0A1A33, var(--dk-bg)); }
[data-theme="dark"] .notfound-code { color: var(--endi-600); }
[data-theme="dark"] .notfound-title { color: var(--dk-heading); }
[data-theme="dark"] .notfound-text { color: var(--dk-text); }
[data-theme="dark"] .btn-pill-outline { color: var(--endi-200); box-shadow: inset 0 0 0 2px var(--endi-500); }

/* =========================================================
   Modo nocturno
   ========================================================= */
/* Botón ☾ / ☀ (en celular va junto al ☰; en computadora al final del menú) */
.theme-toggle {
    order: 2; margin-left: auto; margin-right: .5rem; width: 42px; height: 42px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--endi-100);
    background: transparent; color: var(--endi-700); font-size: 1.1rem; cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, transform .4s cubic-bezier(.34, 1.6, .5, 1);
}
.theme-toggle:hover { background: var(--endi-50); transform: rotate(-20deg); }
.theme-toggle .icon-sun { display: none; }
.navbar-toggler { order: 3; }
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { order: 4; } /* el menú desplegado va debajo del logo y los botones ☾ / ☰ */
}
@media (min-width: 992px) {
    .navbar-collapse { order: 2; }
    .theme-toggle { order: 3; margin: 0 0 0 1rem; }
}
.logo-dark { display: none; }

/* Transición suave de colores solo al usar el botón */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important;
}

[data-theme="dark"] {
    --dk-bg: #071326;        /* fondo general */
    --dk-surface: #0E2141;   /* tarjetas */
    --dk-surface-2: #142C52; /* tarjetas destacadas / campos */
    --dk-text: #C6D3E6;
    --dk-heading: #EEF3F9;
    --dk-muted: #93A6C2;
    --dk-border: rgba(179, 199, 225, .18);
    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }

/* Cabecera y menú */
[data-theme="dark"] .site-header { background: #0A1A33; }
[data-theme="dark"] .site-header.scrolled { box-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline-block; }
[data-theme="dark"] .site-header .nav-link,
[data-theme="dark"] .nav-caret-btn { color: var(--dk-text); }
[data-theme="dark"] .site-header .nav-link:hover,
[data-theme="dark"] .site-header .nav-link.active { color: var(--accent-neon); }
[data-theme="dark"] .site-header .nav-link::after { background: var(--accent-neon); box-shadow: var(--neon-glow); }
[data-theme="dark"] .site-header .dropdown-menu { background: var(--dk-surface); border-top-color: var(--endi-400); }
[data-theme="dark"] .site-header .dropdown-item { color: var(--dk-text); }
[data-theme="dark"] .navbar-toggler i { color: var(--dk-heading) !important; }
[data-theme="dark"] .theme-toggle { color: #FFD66B; border-color: var(--dk-border); }
[data-theme="dark"] .theme-toggle:hover { background: var(--dk-surface-2); }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
@media (max-width: 991.98px) {
    [data-theme="dark"] .site-header .navbar-collapse { border-top-color: var(--dk-border); }
    [data-theme="dark"] .site-header .navbar-nav .nav-item { border-bottom-color: var(--dk-border); }
    [data-theme="dark"] .site-header .dropdown-menu { background: transparent; }
}

/* Títulos */
[data-theme="dark"] .section-title { color: var(--dk-heading); }

/* Servicios (tarjetas) */
[data-theme="dark"] .flip-front {
    background: linear-gradient(160deg, var(--dk-surface-2) 0%, var(--dk-surface) 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--dk-border);
}
[data-theme="dark"] .flip-front::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); }
[data-theme="dark"] .flip-icon { background: linear-gradient(145deg, var(--accent-strong-2), var(--accent-strong)); }
[data-theme="dark"] .flip-title { color: var(--dk-heading); }
[data-theme="dark"] .flip-mobile-text { color: var(--dk-text); }
[data-theme="dark"] .flip-hint { background: var(--dk-surface); color: var(--accent-neon); }
[data-theme="dark"] .flip-front::after { color: var(--accent-neon); }

/* Productos del inicio */
[data-theme="dark"] .products-section { background: var(--dk-bg); }
[data-theme="dark"] .wave-bottom .w1 { fill: var(--endi-600); opacity: .5; }
[data-theme="dark"] .wave-bottom .w2 { fill: #0A182F; } /* = fondo de Tecnologías en oscuro */
[data-theme="dark"] .product-card { background: var(--dk-surface); border-color: color-mix(in srgb, var(--pc, var(--endi-300)) 60%, #7F9FC9); }
[data-theme="dark"] .product-card::before { background: linear-gradient(180deg, var(--dk-surface-2), color-mix(in srgb, var(--pc, var(--endi-500)) 35%, var(--dk-surface))); }
[data-theme="dark"] .product-wordmark b { color: color-mix(in srgb, var(--pc, var(--endi-700)) 35%, white); }
[data-theme="dark"] .product-wordmark em { color: var(--endi-300); }
[data-theme="dark"] .product-desc { color: var(--dk-text); }
[data-theme="dark"] .product-cta { color: var(--accent-neon); }

/* Tecnologías */
[data-theme="dark"] .tech-section { background: #0A182F; }
[data-theme="dark"] .tech-item { filter: grayscale(1) brightness(1.7); opacity: .7; }
[data-theme="dark"] .tech-item:hover { filter: brightness(1.15); opacity: 1; }
[data-theme="dark"] .tech-item span { color: var(--dk-text); }
[data-theme="dark"] .tech-item:hover span { color: var(--accent-neon); }
[data-theme="dark"] .tech-wave .w1 { fill: var(--endi-500); opacity: .35; }
[data-theme="dark"] .tech-wave .w2 { fill: var(--endi-400); opacity: .25; }
[data-theme="dark"] .tech-wave .w3 { fill: var(--dk-bg); } /* = fondo del contacto en oscuro */

/* Contacto */
[data-theme="dark"] .contact-section { background: var(--dk-bg); }
[data-theme="dark"] .contact-title { color: var(--accent-neon); }
[data-theme="dark"] .contact-subtitle { color: var(--dk-text); }
[data-theme="dark"] #contactForm .form-control,
[data-theme="dark"] #contactForm .form-select { background-color: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-heading); }
[data-theme="dark"] #contactForm .form-control::placeholder { color: var(--dk-muted); }
[data-theme="dark"] #contactForm .form-control:focus,
[data-theme="dark"] #contactForm .form-select:focus { border-color: var(--endi-300); background-color: var(--dk-surface-2); }
[data-theme="dark"] .btn-endi { background: var(--accent-strong); }
[data-theme="dark"] .btn-endi:hover { background: var(--accent-strong-2); box-shadow: 0 0 0 3px rgba(0, 229, 255, .4), var(--neon-glow); }
[data-theme="dark"] .map-frame { background: #040C19; }
[data-theme="dark"] .map-frame iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7); } /* mapa en tonos oscuros */
[data-theme="dark"] .map-badge { background: rgba(14, 33, 65, .96); }
[data-theme="dark"] .map-badge strong { color: var(--dk-heading); }
[data-theme="dark"] .map-badge p { color: var(--dk-text); }
[data-theme="dark"] .map-pin { background: var(--endi-500); }

/* Pie */
[data-theme="dark"] .site-footer { background: #040C19; }

/* Página Productos (listado) */
[data-theme="dark"] .products-list-page { background: linear-gradient(180deg, var(--dk-bg), #0A1A33); }
[data-theme="dark"] .product-row { background: var(--dk-surface); }
[data-theme="dark"] .product-row .product-wordmark b { color: color-mix(in srgb, var(--pc) 35%, white); }
[data-theme="dark"] .product-row-text { color: var(--dk-text); }
[data-theme="dark"] .product-row-text b { color: var(--dk-heading); }

/* Página de cada producto */
[data-theme="dark"] .pp-features { background: var(--dk-bg); }
[data-theme="dark"] .feat-card {
    background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 30%, var(--dk-surface)), var(--dk-surface));
    box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 50%, black), 0 14px 30px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .feat-card h3,
[data-theme="dark"] .feat-card p em { color: color-mix(in srgb, var(--pc2) 60%, white); }
[data-theme="dark"] .feat-card p { color: var(--dk-text); }
[data-theme="dark"] .feat-arrow { color: color-mix(in srgb, var(--pc2) 60%, white); }
[data-theme="dark"] .feat-dots button { background: var(--dk-border); }
[data-theme="dark"] .feat-dots button.active { background: var(--pc2); }
[data-theme="dark"] .pp-cta { background: #0A1A33; }

/* Página Nosotros */
[data-theme="dark"] .ab-split { background: var(--dk-bg); }
[data-theme="dark"] .ab-split-title { color: var(--endi-200); }
[data-theme="dark"] .ab-reason-icon { background: var(--dk-surface-2); color: var(--endi-200); }
[data-theme="dark"] .ab-reason h3 { color: var(--dk-heading); }
[data-theme="dark"] .ab-reason p { color: var(--dk-text); }
[data-theme="dark"] .ab-split-photo::after { background: linear-gradient(90deg, var(--dk-bg) 0%, rgba(7, 19, 38, 0) 30%), rgba(10, 33, 64, .55); }
@media (max-width: 991.98px) {
    [data-theme="dark"] .ab-split-photo::after { background: linear-gradient(0deg, var(--dk-bg) 0%, rgba(7, 19, 38, 0) 35%), rgba(10, 33, 64, .55); }
}
[data-theme="dark"] .ab-method { background: linear-gradient(180deg, var(--endi-700), var(--endi-800)); }
[data-theme="dark"] .ab-method-intro { color: var(--dk-text); }
[data-theme="dark"] .ab-eyebrow { background: rgba(255, 255, 255, .1); color: var(--endi-100); }
[data-theme="dark"] .ab-step { background: var(--dk-surface); box-shadow: inset 0 0 0 1px var(--dk-border); }
[data-theme="dark"] .ab-values, [data-theme="dark"] .ab-closing { filter: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}