/* =========================================================
   OE SISTEMAS
   Hoja de estilos principal
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    /* Colores principales */
    --oe-blue: #007BFF;
    --oe-blue-dark: #0056B3;
    --oe-dark: #0B1220;

    /* Colores neutros */
    --oe-white: #FFFFFF;
    --oe-light: #F4F6F8;
    --oe-text: #172033;
    --oe-text-muted: #667085;
    --oe-border: #E4E7EC;

    /* Tipografía */
    --font-primary: Arial, Helvetica, sans-serif;

    /* Layout */
    --container-width: 1200px;
    --container-padding: 24px;

    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Sombras */
    --shadow-sm: 0 4px 12px rgba(11, 18, 32, 0.06);
    --shadow-md: 0 10px 30px rgba(11, 18, 32, 0.10);

}


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--font-primary);
    color: var(--oe-text);
    background-color: var(--oe-white);
    line-height: 1.6;
}


/* =========================================================
   ELEMENTOS GENERALES
   ========================================================= */

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


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


button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   CONTENEDOR
   ========================================================= */

.container {
    width: min(
        100% - (var(--container-padding) * 2),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    width: 100%;
    height: 76px;

    background-color: var(--oe-white);

    border-bottom: 1px solid var(--oe-border);

    position: relative;
    z-index: 1000;
}


.header-container {
    height: 100%;

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

    gap: 32px;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-logo {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}


.logo-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background-color: var(--oe-blue);

    color: var(--oe-white);

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

    letter-spacing: -1px;

    border-radius: 9px;
}


.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.logo-text strong {
    font-size: 17px;
    font-weight: 800;

    color: var(--oe-dark);
}


.logo-text span {
    margin-top: 3px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--oe-text-muted);
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.main-nav {
    display: flex;
    align-items: center;

    gap: 28px;

    margin-left: auto;
}


.main-nav a {
    position: relative;

    font-size: 14px;
    font-weight: 500;

    color: var(--oe-text);

    transition:
        color 0.2s ease;
}


.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background-color: var(--oe-blue);

    transition:
        width 0.2s ease;
}


.main-nav a:hover {
    color: var(--oe-blue);
}


.main-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   BOTÓN COTIZACIÓN
   ========================================================= */

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    background-color: var(--oe-blue);

    color: var(--oe-white);

    border-radius: var(--radius-sm);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.header-cta:hover {
    background-color: var(--oe-blue-dark);

    transform: translateY(-1px);

    box-shadow: var(--shadow-sm);
}


/* =========================================================
   MENÚ MOBILE
   ========================================================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--oe-border);

    border-radius: var(--radius-sm);

    background-color: var(--oe-white);

    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;
}


.menu-toggle span {
    display: block;

    width: 20px;
    height: 2px;

    background-color: var(--oe-dark);

    border-radius: 2px;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    background-color: var(--oe-white);

    overflow: hidden;
}


.hero-container {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(420px, 0.9fr);

    align-items: center;

    gap: 55px;

    padding-top: 70px;
    padding-bottom: 70px;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    max-width: 650px;
}


.hero-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 20px;

    color: var(--oe-blue);

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

    letter-spacing: 2px;
}


.hero-eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    margin-right: 10px;

    background-color: var(--oe-blue);
}


.hero h1 {
    max-width: 720px;

    margin-bottom: 24px;

    color: var(--oe-dark);

    font-size: clamp(42px, 4.5vw, 62px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.5px;
}


.hero-title-main,
.hero-title-accent {
    display: block;
}


.hero-title-main {
    color: var(--oe-dark);
}


.hero-title-accent {
    color: var(--oe-blue);
}


.hero-description {
    max-width: 560px;

    margin-bottom: 34px;

    color: var(--oe-text-muted);

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
    display: flex;
    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 22px;

    border-radius: var(--radius-sm);

    font-size: 14px;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.btn-primary {
    background-color: var(--oe-blue);

    color: var(--oe-white);
}


.btn-primary:hover {
    background-color: var(--oe-blue-dark);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


.btn-secondary {
    background-color: var(--oe-white);

    color: var(--oe-dark);

    border: 1px solid var(--oe-border);
}


.btn-secondary:hover {
    border-color: var(--oe-blue);

    color: var(--oe-blue);

    transform: translateY(-2px);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
    width: 100%;

    display: flex;
    justify-content: center;
}


.tech-panel {
    position: relative;

    width: min(100%, 500px);

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background-color: var(--oe-dark);

    border-radius: 28px;

    box-shadow:
        0 30px 80px rgba(11, 18, 32, 0.20);
}


/* =========================================================
   GRID TECNOLÓGICO
   ========================================================= */

.tech-grid {
    position: absolute;

    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 40px 40px;
}


/* =========================================================
   NÚCLEO OE
   ========================================================= */

.tech-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 130px;
    height: 130px;

    transform: translate(-50%, -50%);

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

    background-color: var(--oe-blue);

    border-radius: 50%;

    box-shadow:
        0 0 0 12px rgba(0, 123, 255, 0.10),
        0 0 45px rgba(0, 123, 255, 0.40);

    z-index: 5;
}


.core-symbol {
    color: var(--oe-white);

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

    letter-spacing: -2px;

    line-height: 1;
}


.tech-core span {
    margin-top: 5px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   CONEXIONES
   ========================================================= */

.connection {
    position: absolute;

    height: 2px;

    background-color: rgba(0, 123, 255, 0.45);

    transform-origin: left center;

    z-index: 2;
}


.connection-1 {
    width: 145px;

    top: 37%;
    left: 36%;

    transform: rotate(-35deg);
}


.connection-2 {
    width: 145px;

    top: 37%;
    left: 55%;

    transform: rotate(35deg);
}


.connection-3 {
    width: 145px;

    top: 63%;
    left: 36%;

    transform: rotate(35deg);
}


.connection-4 {
    width: 145px;

    top: 63%;
    left: 55%;

    transform: rotate(-35deg);
}


/* =========================================================
   NODOS
   ========================================================= */

.tech-node {
    position: absolute;

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

    width: 125px;
    height: 75px;

    background-color: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    color: var(--oe-white);

    backdrop-filter: blur(8px);

    z-index: 4;
}


.node-icon {
    margin-bottom: 5px;

    color: var(--oe-blue);

    font-size: 18px;
}


.tech-node span:last-child {
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


.node-1 {
    top: 13%;
    left: 8%;
}


.node-2 {
    top: 13%;
    right: 8%;
}


.node-3 {
    bottom: 13%;
    left: 5%;
}


.node-4 {
    bottom: 13%;
    right: 5%;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.tech-status {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 7px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;
}


.tech-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: #32D583;

    box-shadow: 0 0 8px rgba(50, 213, 131, 0.8);
}


.status-1 {
    top: 30px;
    left: 30px;
}


.status-2 {
    right: 30px;
    bottom: 30px;
}
/* =========================================================
   SECCIÓN: ¿QUÉ NECESITAS?
   ========================================================= */

.audience-section {
    padding: 110px 0;

    background-color: var(--oe-light);
}


/* =========================================================
   ENCABEZADO DE SECCIÓN
   ========================================================= */

.section-heading {
    max-width: 680px;

    margin-bottom: 55px;
}


.section-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 14px;

    color: var(--oe-blue);

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

    letter-spacing: 2px;
}


.section-eyebrow::before {
    content: "";

    width: 24px;
    height: 2px;

    margin-right: 9px;

    background-color: var(--oe-blue);
}


.section-heading h2 {
    margin-bottom: 15px;

    color: var(--oe-dark);

    font-size: clamp(34px, 4vw, 48px);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.8px;
}


.section-heading p {
    max-width: 600px;

    color: var(--oe-text-muted);

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.audience-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 24px;
}


/* =========================================================
   TARJETA BASE
   ========================================================= */

.audience-card {
    position: relative;

    min-height: 470px;

    padding: 38px;

    overflow: hidden;

    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 24px;

    box-shadow: var(--shadow-sm);

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


.audience-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   PARTE SUPERIOR
   ========================================================= */

.audience-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 65px;
}


.audience-label {
    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}


.audience-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    font-size: 22px;
    font-weight: 700;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.audience-content {
    position: relative;

    z-index: 3;
}


.audience-content h3 {
    max-width: 450px;

    margin-bottom: 16px;

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

    line-height: 1.15;

    letter-spacing: -1px;
}


.audience-content p {
    max-width: 460px;

    margin-bottom: 24px;

    color: var(--oe-text-muted);

    font-size: 15px;

    line-height: 1.7;
}

.audience-business {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}
/* =========================================================
   SERVICIOS
   ========================================================= */

.audience-services {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px 20px;

    margin-bottom: 30px;

    padding: 0;

    list-style: none;
}


.audience-services li {
    position: relative;

    padding-left: 17px;

    color: var(--oe-text);

    font-size: 13px;
    font-weight: 600;
}


.audience-services li::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;
}


/* =========================================================
   LINK
   ========================================================= */

.audience-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

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

    transition:
        gap 0.2s ease;
}


.audience-link span {
    font-size: 20px;

    line-height: 1;
}


.audience-link:hover {
    gap: 15px;
}


/* =========================================================
   OE HOME
   ========================================================= */

.audience-home {
    border-top: 3px solid var(--oe-blue);
}


.audience-home .audience-label,
.audience-home .audience-link {
    color: var(--oe-blue);
}


.audience-home .audience-icon {
    background-color: rgba(0, 123, 255, 0.08);

    color: var(--oe-blue);
}


.audience-home .audience-services li::before {
    background-color: var(--oe-blue);
}


/* =========================================================
   OE BUSINESS
   ========================================================= */

.audience-business {
    border-top: 3px solid #123B5D;
}


.audience-business .audience-label,
.audience-business .audience-link {
    color: #123B5D;
}


.audience-business .audience-icon {
    background-color: rgba(18, 59, 93, 0.08);

    color: #123B5D;
}


.audience-business .audience-services li::before {
    background-color: #123B5D;
}


/* =========================================================
   DECORACIÓN
   ========================================================= */

.audience-decoration {
    position: absolute;

    right: 18px;
    bottom: 0px;

    font-size: 58px;
    font-weight: 900;

    letter-spacing: -3px;
    line-height: 0.8;

    user-select: none;
    pointer-events: none;

    z-index: 1;
}
.audience-home .audience-decoration {
    color: rgba(0, 123, 255, 0.12);
}


.audience-business .audience-decoration {
    color: rgba(18, 59, 93, 0.12);
}

/* =========================================================
   SOLUCIONES TECNOLÓGICAS
   ========================================================= */

.solutions-section {
    padding: 115px 0;

    background-color: var(--oe-white);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.solutions-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.8fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 55px;
}


.solutions-header .section-heading {
    margin-bottom: 0;
}


.solutions-header .section-heading h2 {
    max-width: 620px;

    margin-bottom: 0;
}


.solutions-intro {
    max-width: 460px;

    margin-left: auto;

    color: var(--oe-text-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.solutions-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


/* =========================================================
   TARJETA
   ========================================================= */

.solution-card {
    position: relative;

    min-height: 360px;

    display: flex;
    flex-direction: column;

    padding: 32px;

    overflow: hidden;

    background-color: var(--oe-light);

    border: 1px solid var(--oe-border);

    border-radius: 20px;

    color: var(--oe-dark);

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


.solution-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

    border-color: rgba(0, 123, 255, 0.25);
}


/* =========================================================
   NÚMERO
   ========================================================= */

.solution-number {
    position: relative;

    z-index: 2;

    color: var(--oe-text-muted);

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

    letter-spacing: 1px;
}


/* =========================================================
   ICONO
   ========================================================= */

.solution-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-top: 35px;
    margin-bottom: 24px;

    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 14px;

    box-shadow: var(--shadow-sm);
}


.solution-icon span {
    font-size: 25px;
    font-weight: 700;

    color: var(--oe-blue);
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.solution-content {
    position: relative;

    z-index: 2;

    max-width: 430px;
}


.solution-content h3 {
    margin-bottom: 12px;

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

    line-height: 1.1;

    letter-spacing: -1px;
}


.solution-content p {
    max-width: 410px;

    color: var(--oe-text-muted);

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   SERVICIOS
   ========================================================= */

.solution-services {
    position: relative;

    z-index: 2;

    margin-top: auto;
    padding-top: 28px;

    color: var(--oe-text-muted);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.solution-services span {
    margin: 0 5px;

    color: var(--oe-blue);
}


/* =========================================================
   FLECHA
   ========================================================= */

.solution-arrow {
    position: absolute;

    right: 30px;
    bottom: 27px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 50%;

    color: var(--oe-blue);

    font-size: 20px;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.solution-card:hover .solution-arrow {
    transform: translateX(4px);

    background-color: var(--oe-blue);

    color: var(--oe-white);
}


/* =========================================================
   DECORACIÓN DE TARJETAS
   ========================================================= */

.solution-card::before {
    content: "";

    position: absolute;

    right: -90px;
    top: -90px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background-color: rgba(0, 123, 255, 0.05);

    transition:
        transform 0.4s ease;
}


.solution-card:hover::before {
    transform: scale(1.25);
}


/* =========================================================
   ACENTOS INDIVIDUALES
   ========================================================= */

.solution-network {
    border-top: 3px solid #007BFF;
}


.solution-security {
    border-top: 3px solid #1565C0;
}


.solution-support {
    border-top: 3px solid #00897B;
}


.solution-infrastructure {
    border-top: 3px solid #5E35B1;
}


.solution-security .solution-icon span {
    color: #1565C0;
}


.solution-support .solution-icon span {
    color: #00897B;
}


.solution-infrastructure .solution-icon span {
    color: #5E35B1;
}
/* =========================================================
   OE ERP
   ========================================================= */

.erp-section {
    padding: 120px 0;

    background-color: var(--oe-dark);

    overflow: hidden;
}


.erp-wrapper {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(500px, 1.15fr);

    align-items: center;

    gap: 80px;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.erp-content {
    position: relative;

    z-index: 2;

    max-width: 560px;
}


.erp-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;

    color: var(--oe-blue);

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

    letter-spacing: 2px;
}


.erp-eyebrow::before {
    content: "";

    width: 26px;
    height: 2px;

    margin-right: 10px;

    background-color: var(--oe-blue);
}


.erp-content h2 {
    margin-bottom: 24px;

    color: var(--oe-white);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;
}


.erp-content h2 span {
    display: block;

    color: var(--oe-blue);
}


.erp-description {
    max-width: 530px;

    margin-bottom: 30px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   MÓDULOS
   ========================================================= */

.erp-modules {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 34px;
}


.erp-modules span {
    padding: 7px 11px;

    background-color: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 6px;

    color: rgba(255, 255, 255, 0.72);

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

    letter-spacing: 0.3px;
}


/* =========================================================
   BOTÓN ERP
   ========================================================= */

.erp-button {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    min-height: 48px;

    padding: 0 20px;

    background-color: var(--oe-blue);

    border-radius: var(--radius-sm);

    color: var(--oe-white);

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

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.erp-button span {
    font-size: 20px;

    line-height: 1;
}


.erp-button:hover {
    background-color: var(--oe-blue-dark);

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(0, 123, 255, 0.25);
}


/* =========================================================
   VISUAL ERP
   ========================================================= */

.erp-visual {
    position: relative;

    min-width: 0;
}


.erp-window {
    position: relative;

    width: 100%;

    background-color: #111A2B;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.35),

        0 0 0 1px rgba(0, 123, 255, 0.08);
}


/* =========================================================
   BARRA DEL ERP
   ========================================================= */

.erp-window-bar {
    height: 42px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    background-color: rgba(255, 255, 255, 0.025);
}


.erp-window-dots {
    display: flex;

    gap: 5px;
}


.erp-window-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.25);
}


.erp-window-title {
    margin-left: auto;
    margin-right: auto;

    color: rgba(255, 255, 255, 0.5);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.erp-dashboard {
    display: grid;

    grid-template-columns: 62px 1fr;

    min-height: 390px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.erp-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 17px;

    padding-top: 20px;

    background-color: rgba(0, 0, 0, 0.14);

    border-right: 1px solid rgba(255, 255, 255, 0.06);
}


.erp-sidebar-logo {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    margin-bottom: 8px;

    background-color: var(--oe-blue);

    border-radius: 7px;

    color: var(--oe-white);

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


.erp-sidebar > span {
    width: 17px;
    height: 17px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 4px;
}


.erp-sidebar > span:first-of-type {
    border-color: rgba(0, 123, 255, 0.7);

    background-color: rgba(0, 123, 255, 0.12);
}


/* =========================================================
   MAIN DASHBOARD
   ========================================================= */

.erp-main {
    padding: 25px;
}


.erp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}


.erp-dashboard-header small {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.35);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1px;
}


.erp-dashboard-header strong {
    display: block;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;
}


.erp-avatar {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    background-color: rgba(0, 123, 255, 0.15);

    border: 1px solid rgba(0, 123, 255, 0.3);

    border-radius: 50%;

    color: var(--oe-blue);

    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.erp-metrics {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 14px;
}


.erp-metric {
    padding: 15px;

    background-color: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;
}


.erp-metric small {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.35);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


.erp-metric strong {
    color: var(--oe-white);

    font-size: 21px;
    font-weight: 700;
}


/* =========================================================
   GRÁFICA
   ========================================================= */

.erp-chart {
    height: 170px;

    padding: 17px;

    background-color: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 8px;
}


.erp-chart-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 20px;
}


.erp-chart-header span {
    color: rgba(255, 255, 255, 0.75);

    font-size: 9px;
    font-weight: 700;
}


.erp-chart-header small {
    color: rgba(255, 255, 255, 0.3);

    font-size: 7px;
}


.erp-chart-lines {
    height: 105px;

    display: flex;
    align-items: flex-end;

    gap: 12px;

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


.erp-chart-lines span {
    flex: 1;

    background-color: rgba(0, 123, 255, 0.45);

    border-radius: 3px 3px 0 0;

    transition:
        height 0.4s ease;
}


.erp-chart-lines span:nth-child(1) {
    height: 30%;
}


.erp-chart-lines span:nth-child(2) {
    height: 48%;
}


.erp-chart-lines span:nth-child(3) {
    height: 42%;
}


.erp-chart-lines span:nth-child(4) {
    height: 68%;
}


.erp-chart-lines span:nth-child(5) {
    height: 55%;
}


.erp-chart-lines span:nth-child(6) {
    height: 82%;
}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.erp-activity {
    display: flex;

    gap: 8px;

    margin-top: 14px;
}


.erp-activity span {
    width: 32%;

    height: 7px;

    background-color: rgba(255, 255, 255, 0.07);

    border-radius: 4px;
}
/* =========================================================
   PROYECTOS
   ========================================================= */

.projects-section {
    padding: 115px 0;

    background-color: var(--oe-light);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.projects-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.8fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 50px;
}


.projects-header .section-heading {
    margin-bottom: 0;
}


.projects-intro {
    max-width: 460px;

    margin-left: auto;

    color: var(--oe-text-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   PROYECTO DESTACADO
   ========================================================= */

.project-featured {
    display: grid;

    grid-template-columns: 1.35fr 0.65fr;

    min-height: 430px;

    margin-bottom: 20px;

    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.project-featured:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   IMÁGENES
   ========================================================= */

.project-image {
    position: relative;

    min-height: 250px;

    overflow: hidden;

    background-color: var(--oe-dark);
}


.project-image-featured {
    min-height: 430px;
}


.project-placeholder {
    position: absolute;

    inset: 0;

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

    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #0B1220 0%,
            #12233B 100%
        );

    color: var(--oe-white);
}


.project-placeholder::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(0, 123, 255, 0.20);

    border-radius: 50%;
}


.project-placeholder::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border: 1px solid rgba(0, 123, 255, 0.15);

    border-radius: 50%;
}


.project-placeholder strong,
.project-placeholder small,
.placeholder-number {
    position: relative;

    z-index: 2;
}


.placeholder-number {
    margin-bottom: 12px;

    color: var(--oe-blue);

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

    letter-spacing: 2px;
}


.project-placeholder strong {
    font-size: 18px;
    font-weight: 800;

    letter-spacing: 1px;
}


.project-placeholder small {
    max-width: 260px;

    margin-top: 8px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 10px;

    line-height: 1.5;
}


/* =========================================================
   PROYECTO DESTACADO - CONTENIDO
   ========================================================= */

.project-featured-content {
    display: flex;
    flex-direction: column;

    padding: 42px;
}


.project-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;
}


.project-meta span {
    padding: 6px 9px;

    background-color: rgba(0, 123, 255, 0.07);

    border-radius: 5px;

    color: var(--oe-blue);

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

    letter-spacing: 0.8px;
}


.project-featured-content h3 {
    max-width: 400px;

    margin-bottom: 17px;

    color: var(--oe-dark);

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

    line-height: 1.1;

    letter-spacing: -1px;
}


.project-featured-content p {
    max-width: 400px;

    color: var(--oe-text-muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   TAGS
   ========================================================= */

.project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}


.project-tags span {
    padding: 7px 10px;

    border: 1px solid var(--oe-border);

    border-radius: 5px;

    color: var(--oe-text-muted);

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


/* =========================================================
   LINK
   ========================================================= */

.project-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: auto;
    padding-top: 30px;

    color: var(--oe-dark);

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

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.project-link span {
    color: var(--oe-blue);

    font-size: 20px;
}


.project-link:hover {
    gap: 14px;

    color: var(--oe-blue);
}


/* =========================================================
   GRID SECUNDARIO
   ========================================================= */

.projects-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


.project-card {
    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.project-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}


.project-card .project-image {
    aspect-ratio: 16 / 8;

    min-height: 0;
}


.project-card-content {
    padding: 27px 30px 30px;
}


.project-card-content .project-meta {
    margin-bottom: 14px;
}


.project-card-content h3 {
    margin-bottom: 10px;

    color: var(--oe-dark);

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

    line-height: 1.15;
}


.project-card-content p {
    max-width: 450px;

    color: var(--oe-text-muted);

    font-size: 13px;

    line-height: 1.65;
}


.project-card-content .project-link {
    padding-top: 20px;
}


/* =========================================================
   CTA
   ========================================================= */

.projects-cta {
    display: flex;
    justify-content: center;

    margin-top: 40px;
}

/* =========================================================
   POR QUÉ OE SISTEMAS
   ========================================================= */

.why-section {
    padding: 120px 0;

    background-color: var(--oe-white);
}


.why-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(500px, 1.15fr);

    gap: 90px;

    align-items: start;
}


/* =========================================================
   INTRO
   ========================================================= */

.why-intro {
    max-width: 500px;

    position: sticky;

    top: 120px;
}


.why-intro h2 {
    margin-bottom: 22px;

    color: var(--oe-dark);

    font-size: clamp(38px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -2px;
}


.why-intro > p {
    max-width: 470px;

    color: var(--oe-text-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   EXPERIENCIA
   ========================================================= */

.experience-number {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 45px;
}


.experience-number strong {
    color: var(--oe-blue);

    font-size: 70px;
    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -4px;
}


.experience-number span {
    max-width: 130px;

    color: var(--oe-text-muted);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: 0.8px;
}


/* =========================================================
   CARACTERÍSTICAS
   ========================================================= */

.why-features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--oe-border);

    border-left: 1px solid var(--oe-border);
}


.why-feature {
    min-height: 235px;

    padding: 30px;

    border-right: 1px solid var(--oe-border);

    border-bottom: 1px solid var(--oe-border);

    transition:
        background-color 0.25s ease;
}


.why-feature:hover {
    background-color: var(--oe-light);
}


.why-number {
    display: block;

    margin-bottom: 40px;

    color: var(--oe-blue);

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

    letter-spacing: 1px;
}


.why-feature h3 {
    margin-bottom: 10px;

    color: var(--oe-dark);

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

    line-height: 1.2;
}


.why-feature p {
    color: var(--oe-text-muted);

    font-size: 13px;

    line-height: 1.65;
}

/* =========================================================
   NUESTRA HISTORIA
   ========================================================= */

.history-section {
    padding: 120px 0;

    background-color: var(--oe-light);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.history-header {
    max-width: 700px;

    margin-bottom: 80px;
}


.history-header h2 {
    margin-bottom: 20px;

    color: var(--oe-dark);

    font-size: clamp(38px, 4vw, 52px);

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -2px;
}


.history-header p {
    max-width: 620px;

    color: var(--oe-text-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.history-timeline {
    position: relative;

    max-width: 900px;

    margin-inline: auto;

    padding-left: 145px;
}


.history-timeline::before {
    content: "";

    position: absolute;

    top: 15px;
    bottom: 15px;

    left: 104px;

    width: 1px;

    background-color: var(--oe-border);
}


/* =========================================================
   ITEM
   ========================================================= */

.history-item {
    position: relative;

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 45px;

    min-height: 190px;

    padding-bottom: 55px;
}


.history-item:last-child {
    padding-bottom: 0;
}


/* =========================================================
   MARCADOR
   ========================================================= */

.history-marker {
    position: absolute;

    top: 7px;
    left: -45px;

    width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    background-color: var(--oe-white);

    border: 2px solid var(--oe-blue);

    border-radius: 50%;

    z-index: 2;
}


.history-marker span {
    width: 5px;
    height: 5px;

    background-color: var(--oe-blue);

    border-radius: 50%;
}


/* =========================================================
   AÑO
   ========================================================= */

.history-year {
    color: var(--oe-blue);

    font-size: 16px;
    font-weight: 900;

    letter-spacing: -0.5px;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.history-content {
    max-width: 550px;

    padding: 26px 30px;

    background-color: var(--oe-white);

    border: 1px solid var(--oe-border);

    border-radius: 14px;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.history-content:hover {
    transform: translateX(5px);

    box-shadow: var(--shadow-md);
}


.history-label {
    display: block;

    margin-bottom: 9px;

    color: var(--oe-blue);

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

    letter-spacing: 1.5px;
}


.history-content h3 {
    margin-bottom: 10px;

    color: var(--oe-dark);

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

    line-height: 1.2;

    letter-spacing: -0.6px;
}


.history-content p {
    color: var(--oe-text-muted);

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   MOMENTO ACTUAL
   ========================================================= */

.history-current .history-content {
    border-color: rgba(0, 123, 255, 0.25);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fbff 100%
        );
}


.history-current .history-marker {
    width: 19px;
    height: 19px;

    left: -47px;

    background-color: var(--oe-blue);

    border-color: var(--oe-blue);

    box-shadow:
        0 0 0 7px rgba(0, 123, 255, 0.10);
}


.history-current .history-marker span {
    background-color: var(--oe-white);
}
/* =========================================================
   CONTACTO
   ========================================================= */

.contact-section {
    padding: 115px 0;

    background-color: var(--oe-dark);

    color: var(--oe-white);

    overflow: hidden;
}


.contact-wrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(480px, 1.15fr);

    gap: 90px;

    align-items: start;
}


/* =========================================================
   INTRO
   ========================================================= */

.contact-intro {
    max-width: 550px;

    padding-top: 20px;
}


.contact-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 20px;

    color: var(--oe-blue);

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

    letter-spacing: 2px;
}


.contact-eyebrow::before {
    content: "";

    width: 26px;
    height: 2px;

    margin-right: 10px;

    background-color: var(--oe-blue);
}


.contact-intro h2 {
    margin-bottom: 22px;

    color: var(--oe-white);

    font-size: clamp(42px, 5vw, 62px);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2.5px;
}


.contact-intro > p {
    max-width: 500px;

    margin-bottom: 45px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   DATOS DIRECTOS
   ========================================================= */

.contact-direct {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}


.contact-direct-item {
    display: flex;
    flex-direction: column;

    padding: 18px 0;

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


.contact-direct-label {
    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.32);

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

    letter-spacing: 1.5px;
}


.contact-direct-item strong {
    color: rgba(255, 255, 255, 0.85);

    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.contact-form-wrapper {
    padding: 38px;

    background-color: var(--oe-white);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 18px;

    color: var(--oe-dark);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25);
}


.contact-form-header {
    margin-bottom: 28px;
}


.contact-form-header > span {
    display: block;

    margin-bottom: 7px;

    color: var(--oe-dark);

    font-size: 17px;
    font-weight: 800;
}


.contact-form-header p {
    color: var(--oe-text-muted);

    font-size: 13px;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.contact-form {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px 15px;
}


.form-group {
    display: flex;
    flex-direction: column;
}


.form-group-full {
    grid-column: 1 / -1;
}


.form-group label {
    margin-bottom: 7px;

    color: var(--oe-dark);

    font-size: 11px;
    font-weight: 800;
}


.form-group label span {
    margin-left: 5px;

    color: var(--oe-text-muted);

    font-size: 9px;
    font-weight: 500;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 12px 13px;

    background-color: #FAFBFC;

    border: 1px solid var(--oe-border);

    border-radius: 7px;

    outline: none;

    color: var(--oe-dark);

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


.form-group textarea {
    min-height: 120px;

    resize: vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9BA3AF;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background-color: var(--oe-white);

    border-color: var(--oe-blue);

    box-shadow:
        0 0 0 3px rgba(0, 123, 255, 0.08);
}


/* =========================================================
   PRIVACIDAD
   ========================================================= */

.form-privacy {
    grid-column: 1 / -1;

    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-top: 2px;
}


.form-privacy input {
    width: 15px;
    height: 15px;

    margin-top: 1px;

    accent-color: var(--oe-blue);
}


.form-privacy label {
    color: var(--oe-text-muted);

    font-size: 10px;

    line-height: 1.5;
}


.form-privacy a {
    color: var(--oe-blue);

    font-weight: 700;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.contact-submit {
    grid-column: 1 / -1;

    width: 100%;

    min-height: 50px;

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

    gap: 10px;

    margin-top: 5px;

    padding: 0 20px;

    background-color: var(--oe-blue);

    border: none;

    border-radius: 8px;

    color: var(--oe-white);

    font-family: inherit;

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

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.contact-submit span {
    font-size: 19px;
}


.contact-submit:hover {
    background-color: var(--oe-blue-dark);

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 123, 255, 0.25);
}


/* =========================================================
   MENSAJE DEL FORMULARIO
   ========================================================= */

.form-message {
    grid-column: 1 / -1;

    min-height: 18px;

    color: var(--oe-text-muted);

    font-size: 11px;

    text-align: center;
}
.form-message-success {
    color: #16803C;
}


.form-message-error {
    color: #C62828;
}
.contact-submit:disabled {
    opacity: 0.7;

    cursor: wait;

    transform: none;
}
/* =========================================================
   FOOTER
   ========================================================= */

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding-top: 70px;

    background-color: #080E19;

    color: var(--oe-white);
}


.footer-main {
    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1fr
        1.2fr;

    gap: 45px;

    padding-bottom: 60px;
}


/* =========================================================
   MARCA
   ========================================================= */

.footer-logo {
    display: inline-flex;

    align-items: baseline;

    margin-bottom: 16px;

    color: var(--oe-white);

    font-size: 32px;
    font-weight: 900;

    letter-spacing: -2px;
}


.footer-logo span {
    color: var(--oe-blue);
}


.footer-brand p {
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   COLUMNAS
   ========================================================= */

.footer-column h3 {
    margin-bottom: 18px;

    color: var(--oe-white);

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


.footer-column ul {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-column a {
    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;

    transition:
        color 0.2s ease;
}


.footer-column a:hover {
    color: var(--oe-blue);
}


/* =========================================================
   CONTACTO
   ========================================================= */

.footer-contact p {
    max-width: 180px;

    margin-bottom: 18px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;

    line-height: 1.6;
}


.footer-contact-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--oe-white) !important;

    font-size: 12px !important;
    font-weight: 800;
}


.footer-contact-link span {
    color: var(--oe-blue);

    font-size: 18px;
}


.footer-contact-link:hover {
    gap: 13px;
}


/* =========================================================
   BARRA INFERIOR
   ========================================================= */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 70px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.footer-bottom p {
    color: rgba(255, 255, 255, 0.30);

    font-size: 10px;
}


.footer-bottom-links {
    display: flex;

    gap: 20px;
}


.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.30);

    font-size: 10px;

    transition:
        color 0.2s ease;
}


.footer-bottom-links a:hover {
    color: var(--oe-blue);
}
/* Honeypot anti-bot */
.form-honeypot {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.form-honeypot input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   BOTÓN WHATSAPP - CONTACTO
   ========================================================= */

a.contact-whatsapp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    min-width: 210px !important;

    margin-top: 18px !important;
    padding: 13px 22px !important;

    background-color: #25D366 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}

a.contact-whatsapp-btn:hover {
    background-color: #20bd5a !important;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.25);
}

a.contact-whatsapp-btn:active {
    transform: translateY(0);
}

a.contact-whatsapp-btn i {
    display: inline-block !important;
    font-size: 18px !important;
    color: #ffffff !important;
}

@media (max-width: 600px) {

    a.contact-whatsapp-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px 18px !important;
    }

}
/* =========================================================
   FOOTER OE SISTEMAS
   ========================================================= */

.site-footer {
    background: #030817;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
    gap: 60px;

    padding: 70px 0 55px;
}


/* =========================================================
   MARCA
   ========================================================= */

.footer-brand {
    max-width: 280px;
    text-align: center;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.footer-logo img {
    display: block;

    width: 250px;
    height: auto;

    max-width: 100%;
    margin: 0 auto;
}

.footer-brand p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;
    line-height: 1.8;
    text-align: center;

}


/* =========================================================
   COLUMNAS
   ========================================================= */

.footer-column h3 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.5px;
}

.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column li a {
    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.footer-column li a:hover {
    color: #ffffff;
    padding-left: 4px;
}


/* =========================================================
   CONTACTO
   ========================================================= */

.footer-contact p {
    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.6;
}


.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-bottom: 13px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;

    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-contact-item i {
    width: 18px;

    color: #1683ff;

    font-size: 16px;

    text-align: center;
}

.footer-contact-item:hover {
    color: #ffffff;

    transform: translateX(3px);
}


/* =========================================================
   REDES SOCIALES
   ========================================================= */

.footer-social {
    display: flex;
    gap: 10px;

    margin-top: 22px;
}

.footer-social a {
    display: flex;

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

    width: 36px;
    height: 36px;

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

    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;

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

.footer-social a:hover {
    background-color: #1683ff;

    border-color: #1683ff;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   BARRA INFERIOR
   ========================================================= */

.footer-bottom {
    display: flex;

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

    gap: 20px;

    padding: 22px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.45);

    font-size: 12px;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.55);

    font-size: 12px;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;

        gap: 40px;
    }

    .footer-contact {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 38px;

        padding: 50px 0 40px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-logo img {
        width: 200px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        padding: 20px 0;
    }

}
/* =========================================================
   LOGO OFICIAL - HEADER
   ========================================================= */

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    display: block;

    width: 170px;
    height: auto;

    max-width: 100%;
}


/* =========================================================
   LOGO HEADER - MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .site-logo img {
        width: 145px;
    }

}
/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-content {
        width: 100%;
    }

    .hero-visual {
        width: 100%;
        display: flex;
        justify-content: center;

        margin-top: 40px;
    }

    .tech-panel {
        width: min(100%, 560px);
        margin: 0 auto;

        transform: none;
    }

}


@media (max-width: 600px) {

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-content {
        width: 100%;
    }

    .hero-visual {
        width: 100%;
        margin-top: 35px;

        display: flex;
        justify-content: center;
    }

    .tech-panel {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        transform: scale(0.82);
        transform-origin: center top;
    }

}