/* =========================================================
   PÁGINA CIBERSEGURIDAD — TEMA MATRIX COMPLETO
   Fondo negro, tipografía de consola, verde fósforo.
   1) Hero matriz que se parte como cortina
   2) Qué es · Qué ofrecemos · 4 Tips (todo con estética matrix)
   ========================================================= */

/* La página entera en modo oscuro/matrix.
   Se aplica al body sólo en esta página vía la clase .cib-page */
body.cib-page {
    background: #000;
    background-image:
        linear-gradient(rgba(0,255,106,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,106,.06) 1px, transparent 1px);
    background-size: 34px 34px;
    background-attachment: fixed;   /* la malla queda fija de fondo en toda la página */
}

/* Tipografía de consola para toda la página de ciber */
.cib-page,
.cib-page .section h2,
.cib-page .eyebrow,
.cib-page h1, .cib-page h3 {
    font-family: 'Courier New', 'Consolas', monospace;
}

/* fondo (casi negro, ligeramente translúcido para dejar ver la malla del body) */
.cib-page .section { background: rgba(5, 10, 7, .82); position: relative; }
.cib-page .section.bg-white { background: rgba(5, 10, 7, .82); }

/* rejilla tenue de fondo, tipo "terminal" */
.cib-page .section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,255,106,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,106,.08) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
.cib-page .container { position: relative; z-index: 1; }

/* encabezados de sección en verde matrix */
.cib-page .section-head .eyebrow {
    color: #00ff6a;
    border-color: rgba(0,255,106,.4);
}
.cib-page .section-head h2 {
    color: #eafff1;
    text-shadow: 0 0 12px rgba(0,255,106,.4);
}
.cib-page .section-head h2::before { content: '> '; color: #00ff6a; }
.cib-page .section-head p { color: #7acaA0; color: #86d9ac; }

/* ---------- Hero matriz (desvanecido + glitch) ---------- */
.cib-hero {
    position: relative;
    height: 100vh;
}
.cib-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #000;
    will-change: opacity;
}
.cib-sticky canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
}

/* título sobre la lluvia */
.cib-titulo {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    will-change: opacity;
    font-family: 'Courier New', 'Consolas', monospace;
}
.cib-titulo h1 {
    color: #eafff1;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    margin: 0;
    letter-spacing: .06em;
    text-shadow: 0 0 18px rgba(0, 255, 106, .7), 0 0 40px rgba(0, 255, 106, .35);
}
/* cursor parpadeante tipo consola */
.cib-titulo h1::after {
    content: '_';
    animation: cib-cursor 1s steps(1) infinite;
    color: #00ff6a;
}
@keyframes cib-cursor { 50% { opacity: 0; } }
.cib-titulo p {
    color: #7dffb0;
    font-size: clamp(.9rem, 2vw, 1.15rem);
    margin-top: 14px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* ---------- Qué es ---------- */
/* ---------- Qué es: texto solo (a lo ancho) + video centrado debajo ---------- */
.cib-quees {
    max-width: none;
    margin: 0;
    background: rgba(0, 20, 10, .5);
    border: 1px solid rgba(0,255,106,.25);
    border-radius: 10px;
    padding: 30px 32px;
    box-shadow: 0 0 30px rgba(0,255,106,.08), inset 0 0 30px rgba(0,255,106,.04);
}
.cib-quees p {
    text-align: justify;
    hyphens: auto;
    color: #b6e6c8;
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0;
}
.cib-quees p::before { content: '$ '; color: #00ff6a; font-weight: 700; }

/* video del bloque "qué es": debajo del texto, centrado, proporción 16:9 */
.cib-quees-video {
    max-width: 760px;
    margin: 28px auto 0;        /* separado del texto y centrado */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0,255,106,.25);
    background: #020a06;
    box-shadow: 0 0 30px rgba(0,255,106,.08);
    aspect-ratio: 16 / 9;
    position: relative;
}
.cib-quees-video video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: absolute; inset: 0;
}

/* respaldo cuando no hay video (ambas secciones) */
.cib-video-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: #6fce9a;
    font-family: 'Courier New', monospace;
    font-size: .95rem;
    padding: 20px;
}
.cib-video-ph small { color: #3f8a63; font-size: .8rem; }

/* ---------- Qué ofrecemos: video vertical izquierda + 4 cuadros derecha ---------- */
.cib-ofrecemos-fila {
    display: grid;
    grid-template-columns: 300px 1fr;   /* video 300px, cuadros el resto */
    gap: 30px;
    align-items: center;
}
/* video vertical a la izquierda */
.cib-ofrecemos-video {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,255,106,.25);
    background: #020a06;
    box-shadow: 0 0 30px rgba(0,255,106,.08);
    position: relative;
    width: 300px;              /* ancho fijo del video vertical */
    aspect-ratio: 9 / 16;      /* alto = 300 x 16/9 ≈ 533px */
    flex: 0 0 auto;
    justify-self: center;
}
.cib-ofrecemos-video video {
    width: 100%; height: 100%;
    object-fit: cover;          /* llena el marco vertical (video 9:16 encaja) */
    display: block;
    position: absolute; inset: 0;
}
/* los 4 cuadros en 2 columnas (2x2) a la derecha */
.cib-ofrecemos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.cib-serv {
    background: rgba(0, 20, 10, .55);
    border: 1px solid rgba(0,255,106,.22);
    border-radius: 14px;
    padding: 22px 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cib-serv:hover {
    transform: translateY(-5px);
    border-color: #00ff6a;
    box-shadow: 0 0 30px rgba(0,255,106,.25);
}
.cib-serv-icono {
    width: 52px; height: 52px;
    border-radius: 12px;
    background: rgba(0,255,106,.1);
    border: 1px solid rgba(0,255,106,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.cib-serv h3 { font-size: 1.05rem; color: #eafff1; margin: 0 0 10px; }
.cib-serv h3::before { content: '# '; color: #00ff6a; }
.cib-serv p { font-size: .92rem; color: #9fd7b8; line-height: 1.6; margin: 0; }

/* en móvil las filas se apilan */
@media (max-width: 780px) {
    /* tips: el carrusel vertical va arriba, centrado, y los tips debajo */
    .cib-tips-fila { grid-template-columns: 1fr; justify-items: center; }
    .cib-tips-fila .cib-tips {                 /* al apilar: sin alto forzado ni separación extra */
        width: 100%;
        min-height: 0;
        align-content: initial;
    }
    .cib-carrusel--vertical { width: 240px; }          /* video un poco más chico */

    /* soluciones: cuadros arriba (2x2) y video horizontal debajo */
    .cib-ofrecemos-sol-fila { grid-template-columns: 1fr; }

    /* soporte antiguo (por si queda alguna fila con video vertical) */
    .cib-ofrecemos-fila { grid-template-columns: 1fr; justify-items: center; }
    .cib-ofrecemos { grid-template-columns: 1fr 1fr; width: 100%; }
    .cib-ofrecemos-video { width: 240px; }
}

/* en pantallas muy chicas, los tips a una sola columna (los cuadros siguen 2x2) */
@media (max-width: 480px) {
    .cib-tips-fila .cib-tips { grid-template-columns: 1fr; }
}

/* ---------- 4 Tips ---------- */
.cib-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    counter-reset: tip;
}
.cib-tip {
    position: relative;
    background: linear-gradient(160deg, #06251a, #030f0a);
    color: #fff;
    border-radius: 14px;
    padding: 30px 24px 26px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 106, .3);
}
.cib-tip::before {
    counter-increment: tip;
    content: '0' counter(tip);
    position: absolute;
    top: 10px; right: 16px;
    font-family: 'Courier New', monospace;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(0, 255, 106, .14);
    line-height: 1;
}
.cib-tip-icono { font-size: 1.8rem; margin-bottom: 12px; }
.cib-tip h3 { color: #7dffb0; font-size: 1.05rem; margin: 0 0 8px; position: relative; z-index: 2; }
.cib-tip p { color: #a9d8bd; font-size: .92rem; line-height: 1.6; margin: 0; position: relative; z-index: 2; }

/* fila: carrusel vertical (izq) + 4 tips en 2x2 (der) */
.cib-tips-fila {
    display: grid;
    grid-template-columns: 300px 1fr;   /* video 300px + tips más anchos (como estaba) */
    gap: 34px;
    align-items: start;                 /* los tips se anclan arriba, a la altura del video */
}
.cib-tips-fila .cib-tips {
    grid-template-columns: 1fr 1fr;              /* 2x2 */
    align-content: space-between;               /* fila de arriba al inicio y la de abajo al final del video */
    min-height: calc(300px * 16 / 9);           /* mismo alto que el cuadro del video (9:16 → ~533px) */
    margin: 0;
}

/* Soluciones: 4 cuadros 2x2 (izquierda) + video horizontal (derecha) en una fila */
.cib-ofrecemos-sol-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
}
/* el carrusel deja de estar centrado/limitado: ocupa su columna */
.cib-ofrecemos-sol-fila .cib-carrusel--horizontal {
    max-width: none;
    margin: 0;
}

/* =========================================================
   CARRUSEL DE VIDEOS (estética matrix)
   Usado en "4 tips" (vertical 9:16) y "Soluciones" (horizontal 16:9).
   ========================================================= */
.cib-carrusel { position: relative; }

/* marco/ventana que recorta los videos */
.cib-car-viewport {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(0,255,106,.25);
    background: #020a06;
    box-shadow: 0 0 30px rgba(0,255,106,.08);
    position: relative;
}
/* pista que se desliza */
.cib-car-track {
    display: flex;
    height: 100%;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.cib-car-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}
.cib-car-slide video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: absolute; inset: 0;
}

/* variante vertical: mismo tamaño que tenía el video de "Soluciones" */
.cib-carrusel--vertical {
    width: 300px;
    justify-self: center;
}
.cib-carrusel--vertical .cib-car-viewport { aspect-ratio: 9 / 16; }

/* variante horizontal: a lo ancho, centrado, con tope para no crecer de más */
.cib-carrusel--horizontal {
    width: 100%;
    max-width: 900px;
    margin: 34px auto 0;
}
.cib-carrusel--horizontal .cib-car-viewport { aspect-ratio: 16 / 9; }

/* barra de controles debajo del video (los botones quedan FUERA del cuadro) */
.cib-car-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
}

/* botones ‹ › para recorrer izquierda / derecha */
.cib-car-btn {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,106,.5);
    background: rgba(3,15,10,.85);
    color: #00ff6a;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cib-car-btn:hover {
    background: rgba(0,255,106,.22);
    box-shadow: 0 0 16px rgba(0,255,106,.4);
}
.cib-car-btn:active { transform: scale(.92); }

/* puntos indicadores */
.cib-car-puntos {
    display: flex;
    gap: 9px;
    justify-content: center;
}
.cib-car-punto {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,106,.5);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, box-shadow .2s ease;
}
.cib-car-punto.activo {
    background: #00ff6a;
    box-shadow: 0 0 8px rgba(0,255,106,.6);
}

/* ---------- Banner CTA en modo matrix ---------- */
.cib-page .cta-banner {
    background: linear-gradient(135deg, #06251a, #030f0a);
    border: 1px solid rgba(0,255,106,.3);
    box-shadow: 0 0 40px rgba(0,255,106,.1);
}
.cib-page .cta-banner h2 { color: #eafff1; }
.cib-page .cta-banner p { color: #9fd7b8; }

@media (prefers-reduced-motion: reduce) {
    .cib-hero { height: auto; }
    .cib-sticky { position: relative; height: 70vh; }
    .cib-titulo h1::after { animation: none; }
}

/* =========================================================
   HEADER y FOOTER en modo MATRIX (solo en esta página)
   Todo va prefijado con body.cib-page para no afectar
   el header/footer de las demás páginas.
   ========================================================= */

/* ---------- NAVBAR ---------- */
body.cib-page .navbar {
    background: #030f0a;
    border-bottom: 1px solid rgba(0, 255, 106, .3);
    box-shadow: 0 0 24px rgba(0, 255, 106, .12);
}
/* enlaces del menú en verde matrix */
body.cib-page .nav-links a {
    color: #86d9ac;
    font-family: 'Courier New', 'Consolas', monospace;
}
body.cib-page .nav-links a:hover { color: #00ff6a; text-shadow: 0 0 8px rgba(0,255,106,.6); }
/* enlace activo */
body.cib-page .nav-links a.activo { color: #00ff6a; }

/* botón Contáctanos del navbar */
body.cib-page .nav-contacto {
    background: rgba(0, 255, 106, .12);
    border: 1px solid rgba(0, 255, 106, .5);
    color: #00ff6a;
    font-family: 'Courier New', 'Consolas', monospace;
}
body.cib-page .nav-contacto:hover {
    background: rgba(0, 255, 106, .25);
    box-shadow: 0 0 16px rgba(0, 255, 106, .3);
}

/* hamburguesa (móvil) */
body.cib-page .nav-toggle span { background: #00ff6a; }

/* caret del mega-menú */
body.cib-page .nav-caret { color: #00ff6a; }

/* mega-menú desplegable en modo oscuro matrix */
body.cib-page .mega-menu { background: #030f0a; border: 1px solid rgba(0,255,106,.25); }
body.cib-page .mega-col-cuerpo h4 { color: #eafff1; font-family: 'Courier New', monospace; }
body.cib-page .mega-col-cuerpo p { color: #9fd7b8; }

/* ---------- Submenú "Nosotros" en modo matrix ---------- */
/* Este desplegable usa .sub-menu (no .mega-menu) y por defecto es
   blanco; aquí lo pasamos a fondo negro/verde como el resto. */
body.cib-page .sub-menu {
    background: #030f0a;
    border: 1px solid rgba(0, 255, 106, .25);
    box-shadow: 0 0 24px rgba(0, 255, 106, .12);
}
body.cib-page .sub-menu li a {
    color: #86d9ac;
    font-family: 'Courier New', 'Consolas', monospace;
}
body.cib-page .sub-menu li a:hover {
    background: rgba(0, 255, 106, .1);
    color: #00ff6a;
}

/* sublinks móviles */
body.cib-page .sub-movil a { color: #86d9ac; }

/* ---------- FOOTER ---------- */
body.cib-page .site-footer {
    background: #030f0a;
    border-top: 1px solid rgba(0, 255, 106, .3);
    color: #86d9ac;
    box-shadow: 0 0 24px rgba(0, 255, 106, .1);
}
body.cib-page .site-footer,
body.cib-page .footer-centro p,
body.cib-page .footer-bottom p {
    font-family: 'Courier New', 'Consolas', monospace;
    color: #86d9ac;
}
/* texto Contáctanos + teléfonos del footer */
body.cib-page .footer-contacto-titulo {
    font-family: 'Courier New', 'Consolas', monospace;
    color: #00ff6a;
}
body.cib-page .footer-telefonos a { color: #86d9ac; }
body.cib-page .footer-telefonos a:hover {
    color: #00ff6a;
    text-shadow: 0 0 8px rgba(0, 255, 106, .5);
}
/* borde superior de la franja inferior */
body.cib-page .footer-bottom { border-top-color: rgba(0, 255, 106, .2); }

/* ---------- Iconos de redes ---------- */
/* Los iconos ya tienen brillo neón azul que resalta muy bien sobre el
   fondo negro, así que NO les aplicamos filtro verde (los volvía una
   mancha). Solo les damos un marco y un resplandor sutil al pasar el cursor. */
body.cib-page .footer-red {
    border-radius: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}
body.cib-page .footer-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(0, 255, 106, .35);
}

/* ---------- Mega-menú: fondo oscuro en los cuadros ---------- */
/* Los cuadros de productos/servicios/soluciones traían fondo blanco
   propio; aquí los pasamos a oscuro matrix. */
body.cib-page .mega-col {
    background: rgba(0, 20, 10, .6);
    border: 1px solid rgba(0, 255, 106, .18);
    border-radius: 10px;
    overflow: hidden;
}
/* la zona de imagen del cuadro (si no hay imagen, degradado oscuro) */
body.cib-page .mega-col-img {
    background-color: #06251a;
}
body.cib-page .mega-col-img .ph-texto {
    color: #7dffb0;
}
/* botón dentro del mega-menú en verde matrix */
body.cib-page .mega-btn {
    background: rgba(0, 255, 106, .12) !important;
    border: 1px solid rgba(0, 255, 106, .5) !important;
    color: #00ff6a !important;
}
body.cib-page .mega-btn:hover {
    background: rgba(0, 255, 106, .25) !important;
    box-shadow: 0 0 16px rgba(0, 255, 106, .3);
}