/*
Theme Name: INGTECHNOL Campus Digital
Author: INGTECHNOL
Version: 1.0
*/

:root {
    --azul-noche: #071426;
    --azul-profundo: #0d2740;
    --azul-electrico: #147dcc;
    --turquesa: #21c4c8;
    --oro: #d4af37;
    --grafito: #111820;
    --blanco: #f4f7f9;
    --verde: #5e8b68;
    --madera: #8a6845;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--azul-noche);
    color: var(--blanco);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.campus-entrance {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 125, 204, .18), transparent 38%),
        var(--azul-noche);
}

/* ENCABEZADO */

.site-header {
    position: relative;
    z-index: 10;
    background: rgba(7, 20, 38, .96);
    border-bottom: 1px solid rgba(212, 175, 55, .25);
}

.site-header .wrap,
.site-header .container {
    max-width: 1200px;
    margin: auto;
    padding: 18px 24px;
}

/* HERO */

.campus-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1672 / 941;
    min-height: 560px;
    overflow: hidden;

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

    background-image:
        linear-gradient(
            rgba(4, 15, 28, .08),
            rgba(4, 15, 28, .18)
        ),
        url("https://dev.ingtechnol.com/wp-content/uploads/2026/09/ingtechnol-porteria-master.webp");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.campus-hero::before,
.campus-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.campus-hero::before {
    inset: 0;
    background:
        linear-gradient(115deg, transparent 48%, rgba(33, 196, 200, .08) 49%, transparent 50%),
        linear-gradient(65deg, transparent 48%, rgba(212, 175, 55, .08) 49%, transparent 50%);
    background-size: 160px 160px;
    opacity: .7;
    z-index: -1;
}

.campus-hero::after {
    width: 100%;
    height: 180px;
    bottom: -90px;
    left: 0;
    background: linear-gradient(180deg, transparent, rgba(33, 196, 200, .08));
    transform: skewY(-3deg);
}

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

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 28, .08) 0%,
            transparent 28%,
            transparent 78%,
            rgba(4, 15, 28, .20) 100%
        );
}

.campus-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 40px 24px;
}

.campus-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--oro);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.campus-hero h1 {
    margin: 0;
    color: var(--blanco);
    font-size: clamp(2.5rem, 6vw, 5.8rem);
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.05;
    text-shadow: 0 0 28px rgba(33, 196, 200, .2);
}

.campus-hero p {
    margin: 22px 0 34px;
    color: #b7d5df;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.campus-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.campus-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 14px 24px;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: .25s ease;
}

.campus-button-primary {
    background: var(--oro);
    color: #151515;
    box-shadow: 0 0 24px rgba(212, 175, 55, .15);
}

.campus-button-primary:hover {
    background: #f0cd58;
    transform: translateY(-2px);
}

.campus-button-secondary {
    border: 1px solid rgba(33, 196, 200, .7);
    color: var(--blanco);
    background: rgba(33, 196, 200, .08);
}

.campus-button-secondary:hover {
    background: rgba(33, 196, 200, .18);
    transform: translateY(-2px);
}

/* ESCUDO PROVISIONAL */

.campus-shield-placeholder {
    position: absolute;
    top: 30px;
    right: 7%;
    width: 150px;
    z-index: 3;
    text-align: center;
}

.campus-shield-placeholder img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 28px rgba(212, 175, 55, .18);
}

/* SECCIONES */

.campus-reception,
.campus-modules,
.campus-central-plaza {
    max-width: 1200px;
    margin: auto;
    padding: 100px 24px;
}

.campus-section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.campus-section-heading > span {
    display: block;
    margin-bottom: 8px;
    color: var(--turquesa);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.campus-section-heading h2 {
    margin: 0 0 16px;
    color: var(--blanco);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.15;
}

.campus-section-heading p {
    margin: 0;
    color: #a8bac5;
    font-size: 1.05rem;
}

/* RECEPCIÓN */

.campus-reception-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.campus-reception-card {
    min-height: 240px;
    padding: 32px;
    background: linear-gradient(145deg, rgba(20, 52, 77, .85), rgba(9, 28, 47, .85));
    border: 1px solid rgba(33, 196, 200, .15);
    border-top: 3px solid var(--turquesa);
    transition: .25s ease;
}

.campus-reception-card:hover {
    transform: translateY(-6px);
    border-color: rgba(33, 196, 200, .55);
}

.campus-icon {
    display: block;
    margin-bottom: 20px;
    color: var(--oro);
    font-size: 2rem;
}

.campus-reception-card h3 {
    margin: 0 0 12px;
    color: var(--blanco);
    font-size: 1.35rem;
}

.campus-reception-card p {
    margin: 0;
    color: #9fb5c1;
}

/* PLAZA CENTRAL */

.campus-central-plaza {
    position: relative;
    max-width: none;
    padding-left: max(24px, calc((100% - 1200px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1200px) / 2 + 24px));
    background:
        linear-gradient(135deg, rgba(13, 39, 64, .9), rgba(7, 20, 38, .98)),
        radial-gradient(circle at center, rgba(33, 196, 200, .12), transparent 55%);
    border-top: 1px solid rgba(212, 175, 55, .18);
    border-bottom: 1px solid rgba(212, 175, 55, .18);
}

.campus-plaza-content {
    max-width: 1200px;
    margin: auto;
}

.campus-plaza-content h2 {
    margin: 0 0 18px;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
}

.campus-plaza-content > p {
    max-width: 650px;
    color: #b7cbd4;
    font-size: 1.1rem;
}

.campus-plaza-elements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.plaza-element {
    padding: 24px;
    border-left: 2px solid var(--oro);
    background: rgba(0, 0, 0, .18);
}

.plaza-element strong {
    display: block;
    margin-bottom: 8px;
    color: var(--oro);
    font-size: .9rem;
    letter-spacing: .1em;
}

.plaza-element span {
    color: #a7bdc7;
    font-size: .95rem;
}

/* MÓDULOS */

.campus-module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.campus-module-card {
    min-height: 220px;
    padding: 26px;
    background: rgba(13, 39, 64, .72);
    border: 1px solid rgba(212, 175, 55, .16);
    transition: .25s ease;
}

.campus-module-card:hover {
    transform: translateY(-5px);
    background: rgba(20, 65, 91, .8);
    border-color: rgba(212, 175, 55, .65);
}

.campus-module-card > span {
    display: block;
    margin-bottom: 24px;
    color: var(--turquesa);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.campus-module-card h3 {
    margin: 0 0 12px;
    color: var(--blanco);
    font-size: 1.15rem;
}

.campus-module-card p {
    margin: 0;
    color: #91aab6;
    font-size: .92rem;
}

/* CINTA */

.campus-information-ribbon {
    overflow: hidden;
    padding: 18px 0;
    background: var(--grafito);
    border-top: 1px solid rgba(33, 196, 200, .3);
    border-bottom: 1px solid rgba(33, 196, 200, .3);
}

.campus-ribbon-track {
    display: flex;
    width: max-content;
    gap: 30px;
    color: #9ecbd0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    white-space: nowrap;
    animation: campus-marquee 42s linear infinite;
}

.campus-information-ribbon:hover .campus-ribbon-track {
    animation-play-state: paused;
}

@keyframes campus-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-35%);
    }
}

/* PIE */

.site-footer {
    background: #050d16;
    color: #8499a5;
    border-top: 1px solid rgba(212, 175, 55, .16);
}

.site-footer a {
    color: var(--oro);
}

/* RESPONSIVE */

@media (max-width: 900px) {
    .campus-reception-grid,
    .campus-plaza-elements {
        grid-template-columns: 1fr;
    }

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

    .campus-hero {
        min-height: 570px;
    }

    .campus-shield-placeholder {
        right: 24px;
        width: 70px;
        height: 84px;
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .campus-reception,
    .campus-modules,
    .campus-central-plaza {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .campus-module-grid {
        grid-template-columns: 1fr;
    }

    .campus-hero-content {
        padding: 30px 20px;
    }

    .campus-hero h1 {
        font-size: 2.4rem;
        letter-spacing: .04em;
    }

    .campus-hero p {
        font-size: .85rem;
        letter-spacing: .08em;
    }

    .campus-button {
        width: 100%;
    }

    .campus-shield-placeholder {
        top: 20px;
        right: 20px;
    }
}
/* =========================================
   CORRECCIÓN DE PORTERÍA DIGITAL
   ========================================= */

body {
    margin: 0;
    padding: 0;
}

.campus-entrance {
    width: 100%;
    overflow: hidden;
}

.campus-hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    padding: 80px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campus-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 30px;
    text-align: center;
}

.campus-hero h1,
.campus-hero p {
    text-align: center;
}

.campus-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Escudo institucional */

.campus-shield-placeholder {
    position: absolute !important;
    top: 30px !important;
    right: 6% !important;
    left: auto !important;
    width: 150px !important;
    height: auto !important;
    z-index: 5 !important;
    display: block !important;
    border: none !important;
    clip-path: none !important;
    background: transparent !important;
    text-align: center;
}

.campus-shield-placeholder img {
    display: block !important;
    width: 150px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 8px;
    box-shadow: 0 0 28px rgba(212, 175, 55, .18);
}

/* Márgenes generales */

.campus-reception,
.campus-modules,
.campus-central-plaza {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Tarjetas */

.campus-reception-grid,
.campus-module-grid,
.campus-plaza-elements {
    width: 100%;
}

/* Ajuste móvil */

@media (max-width: 600px) {

    .campus-hero {
        min-height: 580px;
        padding: 100px 18px 60px;
    }

    .campus-hero-content {
        padding: 20px 10px;
    }

    .campus-shield-placeholder {
        top: 18px !important;
        right: 20px !important;
        width: 85px !important;
    }

    .campus-shield-placeholder img {
        width: 85px !important;
    }

    .campus-reception,
    .campus-modules,
    .campus-central-plaza {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

/* =========================================
   PORTERÍA MASTER — INGTECHNOL
   ========================================= */

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

.campus-shield-placeholder {
    z-index: 5 !important;
}

/* Mantener proporción de la escena en pantallas grandes */

@media (min-width: 1400px) {
    .campus-hero {
        min-height: 720px;
    }
}

/* Adaptación móvil */

@media (max-width: 768px) {

    .campus-hero {
        aspect-ratio: auto;
        min-height: 620px;

        background-size: cover;
        background-position: center center;
    }

    .campus-hero-content {
        padding: 30px 20px;
    }
}