/* ------------------------------------------------------------------
   PRISMAIX Enterprise — sitio corporativo
   Dark premium sobre la paleta real del logotipo. El brief proponía
   #071D5A / #1E6CFF; se conservan los del archivo vectorial, que es
   la fuente de verdad de la marca.
   ------------------------------------------------------------------ */

:root {
    /* Marca */
    --marino: #051C51;
    --marino-2: #0B2A6E;
    --azul: #0459FB;
    --azul-2: #0341C4;
    --azul-luz: #6E9BFF;
    --verde: #1FAE5C;
    --naranja: #FB9504;
    --rojo: #FB2436;

    /* Superficies oscuras, todas derivadas del marino */
    --fondo: #04122F;
    --fondo-2: #061A3F;
    --panel: rgba(255, 255, 255, .045);
    --panel-alto: rgba(255, 255, 255, .075);
    --filete: rgba(255, 255, 255, .11);
    --filete-fuerte: rgba(255, 255, 255, .2);

    /* Texto sobre oscuro */
    --texto: #EAF0FB;
    --texto-2: #A8B8D4;
    --texto-3: #7387A8;

    --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-texto: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    --r-chico: 12px;
    --r: 18px;
    --r-grande: 24px;
    --track: .14em;
    --ancho: 1320px;
    --alto-header: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

body.corp {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--f-texto);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--f-display);
    letter-spacing: -.025em;
    text-wrap: balance;
    margin: 0;
    line-height: 1.06;
}

p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--azul-luz); text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--azul-luz);
    outline-offset: 3px;
    border-radius: 4px;
}

.contenedor {
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
}

.mono {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--texto-3);
}

/* ---------- Arco de marca ---------- */
.arco { display: flex; height: 3px; }
.arco i { flex: 1; }
.arco i:nth-child(1) { background: var(--azul); }
.arco i:nth-child(2) { background: var(--rojo); }
.arco i:nth-child(3) { background: var(--naranja); }
.arco i:nth-child(4) { background: var(--verde); }

/* ---------- Barra de utilidad ---------- */
.corp-utilidad {
    background: #030D24;
    border-bottom: 1px solid var(--filete);
    font-size: .8rem;
}

.corp-utilidad .contenedor {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.corp-utilidad nav { display: flex; align-items: center; gap: 1.3rem; }

.corp-utilidad a {
    color: var(--texto-3);
    text-decoration: none;
    white-space: nowrap;
}

.corp-utilidad a:hover { color: var(--texto-2); }

.corp-utilidad a.destacado { color: var(--azul-luz); font-weight: 500; }
.corp-utilidad a.destacado:hover { color: #fff; }

@media (max-width: 620px) {
    .corp-utilidad .contenedor > .mono { display: none; }
    .corp-utilidad .contenedor { justify-content: flex-end; }
}

/* ---------- Encabezado fijo ---------- */
.corp-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(4, 18, 47, .82);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--filete);
}

.corp-header .barra {
    height: var(--alto-header);
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.corp-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.corp-marca__simbolo { height: 34px; width: auto; display: block; flex: 0 0 auto; }

.corp-marca__nombre {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .17em;
    color: var(--texto);
    white-space: nowrap;
}

/* `overflow: hidden` es la red de seguridad: si el menú no cabe, se recorta
   en lugar de montarse encima de los botones de acción. */
.corp-nav {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.corp-nav > a,
.corp-nav > .tiene-mega > button {
    appearance: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: .9rem;
    color: var(--texto-2);
    text-decoration: none;
    padding: .5rem .58rem;
    border-radius: var(--r-chico);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color .15s, background .15s;
}

.corp-nav > a:hover,
.corp-nav > .tiene-mega > button:hover,
.corp-nav > .tiene-mega[data-abierto="si"] > button {
    color: var(--texto);
    background: var(--panel);
}

.corp-nav .flecha {
    width: 9px; height: 9px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}

.tiene-mega[data-abierto="si"] .flecha { transform: rotate(-135deg) translate(-3px, -3px); }

.corp-acciones {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}

/* ---------- Botones ---------- */
.btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: -.005em;
    padding: .62rem 1.15rem;
    border-radius: var(--r-chico);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}

.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-2); color: #fff; transform: translateY(-1px); }

.btn-lineal { background: transparent; color: var(--texto); border-color: var(--filete-fuerte); }
.btn-lineal:hover { border-color: var(--texto-2); color: var(--texto); background: var(--panel); }

.btn-fantasma { background: transparent; color: var(--texto-2); padding-inline: .55rem; }
.btn-fantasma:hover { color: var(--texto); }

.btn-grande { font-size: 1rem; padding: .85rem 1.6rem; border-radius: var(--r); }

/* ---------- Mega menú ---------- */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: linear-gradient(180deg, #061A3F 0%, #04122F 100%);
    border-top: 1px solid var(--filete);
    border-bottom: 1px solid var(--filete);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    padding: 2.2rem 0 1.6rem;
    display: none;
}

.tiene-mega { position: static; }
.tiene-mega[data-abierto="si"] .mega { display: block; }

.mega-rejilla {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem 2rem;
}

.mega-col h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--texto);
}

.mega-col > p {
    font-size: .8rem;
    color: var(--texto-3);
    line-height: 1.45;
    margin-bottom: .7rem;
}

.mega-col ul { list-style: none; margin: 0; padding: 0; }

.mega-col li a {
    display: block;
    padding: .28rem 0;
    font-size: .87rem;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: 6px;
    transition: color .14s, padding-left .14s;
}

.mega-col li a:hover { color: var(--texto); padding-left: .3rem; }

.mega-icono {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    margin-bottom: .6rem;
    background: var(--panel-alto);
    border: 1px solid var(--filete);
}

.mega-icono svg { width: 17px; height: 17px; }

/* Color por familia de servicio: el icono lo lleva, el texto no. */
.c-azul    { color: var(--azul-luz); }
.c-marino  { color: #9DB6FF; }
.c-verde   { color: var(--verde); }
.c-naranja { color: var(--naranja); }
.c-rojo    { color: #FF6B78; }

.mega-cta {
    grid-column: 1 / -1;
    margin-top: .6rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--r);
    border: 1px solid var(--filete);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.mega-cta strong { font-family: var(--f-display); font-size: 1rem; }
.mega-cta span { color: var(--texto-3); font-size: .88rem; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 5.5rem 0 5rem;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    background:
        radial-gradient(58% 48% at 72% 18%, rgba(4, 89, 251, .22), transparent 62%),
        radial-gradient(42% 38% at 18% 78%, rgba(31, 174, 92, .12), transparent 64%);
    pointer-events: none;
}

.hero-rejilla {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3.5rem;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.9rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.hero h1 em { font-style: normal; color: var(--azul-luz); }

.hero .entrada {
    margin-top: 1.4rem;
    font-size: 1.08rem;
    color: var(--texto-2);
    max-width: 56ch;
}

.hero .acciones {
    margin-top: 2.1rem;
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

.hero .avales {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--filete);
    display: flex;
    gap: 2.4rem;
    flex-wrap: wrap;
}

.hero .avales div strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.hero .avales div span { font-size: .78rem; color: var(--texto-3); }

/* ---------- Prisma del hero ---------- */
.prisma { position: relative; aspect-ratio: 1; width: 100%; }
.prisma svg { width: 100%; height: 100%; overflow: visible; }

.prisma .nodo-caja {
    fill: rgba(255, 255, 255, .05);
    stroke: rgba(255, 255, 255, .16);
}

.prisma .etiqueta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    fill: #A8B8D4;
}

.prisma .haz {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 5 9;
    animation: fluir 2.6s linear infinite;
}

@keyframes fluir { to { stroke-dashoffset: -28; } }

.prisma .pulso { animation: latir 3.4s ease-in-out infinite; transform-origin: center; }

@keyframes latir {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 5rem 0; }
.seccion + .seccion { border-top: 1px solid var(--filete); }

.seccion-cabeza { max-width: 62ch; margin-bottom: 2.6rem; }
.seccion-cabeza .mono { margin-bottom: .8rem; display: block; }

.seccion-cabeza h2 {
    font-size: clamp(1.7rem, 3.1vw, 2.5rem);
    font-weight: 700;
}

.seccion-cabeza p {
    margin-top: .9rem;
    color: var(--texto-2);
    font-size: 1.02rem;
}

/* ---------- Tarjetas de servicio ---------- */
.rejilla-servicios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.6rem 1.5rem;
    border-radius: var(--r-grande);
    border: 1px solid var(--filete);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
    overflow: hidden;
    transition: border-color .18s, transform .18s, background .18s;
}

.tarjeta:hover {
    border-color: var(--filete-fuerte);
    transform: translateY(-3px);
}

.tarjeta.ancha { grid-column: span 2; }

.tarjeta .icono {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-chico);
    background: var(--panel-alto);
    border: 1px solid var(--filete);
    margin-bottom: 1rem;
}

.tarjeta .icono svg { width: 21px; height: 21px; }

.tarjeta h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.tarjeta p { color: var(--texto-2); font-size: .93rem; }

.tarjeta .tecnologias {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1.1rem 0 1.2rem;
}

.tarjeta .tecnologias span {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-3);
    border: 1px solid var(--filete);
    border-radius: 999px;
    padding: .22rem .55rem;
}

.tarjeta .ver-mas {
    margin-top: auto;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--azul-luz);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tarjeta .ver-mas:hover { color: #fff; }

/* ---------- Plataforma ---------- */
.plataforma {
    background:
        linear-gradient(180deg, rgba(4, 89, 251, .10) 0%, transparent 70%);
}

.pasos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: paso;
}

.paso {
    padding: 1.5rem 1.4rem;
    border-radius: var(--r);
    border: 1px solid var(--filete);
    background: var(--panel);
    counter-increment: paso;
}

.paso::before {
    content: counter(paso, decimal-leading-zero);
    display: block;
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: var(--track);
    color: var(--azul-luz);
    margin-bottom: .7rem;
}

.paso h3 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.paso p { font-size: .88rem; color: var(--texto-2); }

/* ---------- Cierre ---------- */
.cierre {
    border-radius: var(--r-grande);
    border: 1px solid var(--filete);
    background:
        radial-gradient(70% 120% at 80% 0%, rgba(4, 89, 251, .3), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    padding: 3rem clamp(1.6rem, 4vw, 3.4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.cierre h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; max-width: 18ch; }
.cierre p { color: var(--texto-2); margin-top: .8rem; max-width: 46ch; }

/* ---------- Pagina de redes: proceso ---------- */
.proceso-redes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
}

.etapa-redes {
    position: relative;
    padding: 1.5rem 1.5rem 1.4rem;
    border-radius: var(--r-grande);
    border: 1px solid var(--filete);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

.etapa-num {
    display: block;
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: var(--track);
    color: var(--verde);
    margin-bottom: .7rem;
}

.etapa-redes h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .45rem; }
.etapa-redes p { font-size: .9rem; color: var(--texto-2); }

/* Lo que se entrega al cerrar la etapa: es el compromiso, no un adorno. */
.etapa-entrega {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-3);
    border: 1px solid var(--filete);
    border-radius: 999px;
    padding: .25rem .65rem;
}

/* ---------- Pagina de redes: entregables ---------- */
.entregables {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 2rem;
}

.entregables li {
    position: relative;
    padding: .85rem 0 .85rem 1.9rem;
    border-bottom: 1px solid var(--filete);
    color: var(--texto-2);
}

.entregables li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.15rem;
    width: 10px;
    height: 11px;
    background: var(--verde);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

@media (max-width: 980px) {
    .proceso-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entregables { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .proceso-redes { grid-template-columns: 1fr; }
}

/* ---------- Pie ---------- */
.corp-footer {
    border-top: 1px solid var(--filete);
    padding: 3.4rem 0 2rem;
    margin-top: 1rem;
}

.footer-rejilla {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 2rem;
}

.corp-footer h4 {
    font-family: var(--f-mono);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    color: var(--texto-3);
    margin-bottom: .9rem;
}

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

.corp-footer li a,
.corp-footer .dato {
    display: block;
    padding: .22rem 0;
    font-size: .9rem;
    color: var(--texto-2);
    text-decoration: none;
}

.corp-footer li a:hover { color: var(--texto); }

.footer-marca img { height: 34px; width: auto; margin-bottom: .9rem; }
.footer-marca p { font-size: .9rem; color: var(--texto-2); max-width: 34ch; }

.footer-legal {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--filete);
    display: flex;
    justify-content: space-between;
    gap: 1rem 1.6rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--texto-3);
}

.footer-legal nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-legal a { color: var(--texto-3); text-decoration: none; }
.footer-legal a:hover { color: var(--texto-2); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
    .mega-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-rejilla { grid-template-columns: 1fr; gap: 2.5rem; }
    .prisma { max-width: 460px; margin-inline: auto; }
    .rejilla-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-rejilla { grid-template-columns: 1fr 1fr; }
}

.corp-menu-boton { display: none; }

/* Por debajo de este ancho los nueve enlaces no caben en una fila: la
   navegación pasa a un panel desplegable en vez de desaparecer. */
@media (max-width: 1300px) {
    .corp-menu-boton { display: inline-flex; }

    .corp-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: .7rem 0 1rem;
        background: linear-gradient(180deg, #061A3F 0%, #04122F 100%);
        border-bottom: 1px solid var(--filete);
        box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
        max-height: calc(100vh - var(--alto-header) - 38px);
        overflow-y: auto;
    }

    body.corp[data-menu="abierto"] .corp-nav { display: flex; }

    .corp-nav > a,
    .corp-nav > .tiene-mega > button {
        width: 100%;
        justify-content: space-between;
        padding: .72rem clamp(1.25rem, 4vw, 3rem);
        border-radius: 0;
        font-size: .95rem;
    }

    .mega {
        position: static;
        display: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: .2rem 0 .8rem;
    }

    .tiene-mega[data-abierto="si"] .mega { display: block; }

    .mega-rejilla { grid-template-columns: 1fr; gap: 1.4rem; }
    .mega-cta { flex-direction: column; align-items: flex-start; }

    .corp-nav__acciones {
        display: flex;
        gap: .6rem;
        flex-wrap: wrap;
        padding: 1rem clamp(1.25rem, 4vw, 3rem) .2rem;
        margin-top: .5rem;
        border-top: 1px solid var(--filete);
    }
}

.corp-nav__acciones { display: none; }

/* En pantallas estrechas la marca y dos botones no caben en la fila:
   en el encabezado queda sólo el botón de menú. */
@media (max-width: 700px) {
    .corp-acciones > .btn:not(.corp-menu-boton) { display: none; }
}

@media (max-width: 1180px) {
    .rejilla-servicios { grid-template-columns: 1fr; }
    .tarjeta.ancha { grid-column: span 1; }
    .pasos { grid-template-columns: 1fr; }
    .footer-rejilla { grid-template-columns: 1fr; }
    .btn-oculto-movil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .prisma .haz, .prisma .pulso { animation: none; }
    .tarjeta, .btn { transition: none; }
    .prisma .haz { stroke-dasharray: none; }
}