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

:root {


--negro: #0d0e10;
--negro-secundario: #111318;
--negro-card: #151820;

--azul: #1677ff;
--azul-claro: #3b9cff;
--azul-oscuro: #0b4ea2;

--blanco: #ffffff;
--gris: #a8adb7;
--gris-oscuro: #707680;

--borde: rgba(255, 255, 255, 0.08);

--sombra:
    0 20px 50px rgba(0, 0, 0, 0.35);


}

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

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

html {
scroll-behavior: smooth;
}

body {


font-family: "Segoe UI", Arial, sans-serif;

background: var(--negro);

color: var(--blanco);

line-height: 1.6;


}

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

img,
video {
max-width: 100%;
}

button {
font-family: inherit;
}

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

.contenedor {


width: min(1150px, 92%);

margin: auto;


}

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

.header {


position: fixed;

top: 0;
left: 0;

width: 100%;

z-index: 1000;

background: rgba(13, 14, 16, 0.92);

backdrop-filter: blur(15px);

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


}

.header-contenido {


min-height: 75px;

display: flex;

align-items: center;

justify-content: space-between;


}

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

.logo {


display: flex;

align-items: center;

gap: 10px;

font-size: 20px;

font-weight: 800;

letter-spacing: 1px;


}

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

    object-fit: contain;
    display: block;

    background: transparent;

    border-radius: 0;

    box-shadow: none;
}

/* =========================================================
MENÚ DESKTOP
========================================================= */

.menu {


display: flex;

align-items: center;

gap: 8px;


}

.menu-link {


position: relative;

padding: 10px 15px;

color: var(--gris);

font-size: 14px;

font-weight: 600;

transition: 0.3s;


}

.menu-link:hover,
.menu-link.activo {


color: var(--blanco);


}

.menu-link::after {


content: "";

position: absolute;

left: 15px;
right: 15px;

bottom: 3px;

height: 2px;

background: var(--azul);

transform: scaleX(0);

transition: transform 0.3s;


}

.menu-link:hover::after,
.menu-link.activo::after {


transform: scaleX(1);


}

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

.menu-toggle {


display: none;

width: 45px;
height: 45px;

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

border-radius: 10px;

background: var(--negro-card);

cursor: pointer;

padding: 10px;


}

.menu-toggle span {


display: block;

height: 2px;

margin: 5px 0;

background: var(--blanco);

border-radius: 5px;


}

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

.hero {


position: relative;

min-height: 720px;

display: flex;

align-items: center;

overflow: hidden;

padding-top: 75px;


}

.hero-fondo {


position: absolute;

inset: 0;

background:

    radial-gradient(
        circle at 75% 35%,
        rgba(22, 119, 255, 0.25),
        transparent 35%
    ),

    radial-gradient(
        circle at 15% 80%,
        rgba(11, 78, 162, 0.18),
        transparent 30%
    );


}

.hero::before {


content: "";

position: absolute;

width: 500px;
height: 500px;

right: -200px;
top: 100px;

border: 1px solid rgba(59, 156, 255, 0.15);

border-radius: 50%;


}

.hero-contenido {


position: relative;

z-index: 1;

display: grid;

grid-template-columns: 1.2fr 0.8fr;

gap: 80px;

align-items: center;


}

.hero-texto {


max-width: 700px;


}

.hero-etiqueta,
.contacto-etiqueta {


display: inline-block;

margin-bottom: 18px;

color: var(--azul-claro);

font-size: 13px;

font-weight: 800;

letter-spacing: 2px;


}

.hero h1 {


font-size: clamp(42px, 6vw, 72px);

line-height: 1.05;

letter-spacing: -2px;

margin-bottom: 25px;


}

.hero h1 span {


display: block;

color: var(--azul-claro);


}

.hero-texto p {


max-width: 620px;

color: var(--gris);

font-size: 18px;

margin-bottom: 35px;


}

/* =========================================================
BOTONES
========================================================= */

.hero-botones {


display: flex;

gap: 15px;

flex-wrap: wrap;


}

.btn {


display: inline-flex;

align-items: center;

justify-content: center;

min-height: 48px;

padding: 0 24px;

border-radius: 9px;

font-size: 14px;

font-weight: 700;

transition: 0.3s;


}

.btn-principal {


background:
    linear-gradient(
        135deg,
        var(--azul),
        var(--azul-claro)
    );

box-shadow:
    0 10px 30px rgba(22, 119, 255, 0.25);


}

.btn-principal:hover {


transform: translateY(-3px);

box-shadow:
    0 15px 35px rgba(22, 119, 255, 0.4);


}

.btn-secundario {


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

background: rgba(255, 255, 255, 0.03);

color: var(--blanco);


}

.btn-secundario:hover {


background: rgba(255, 255, 255, 0.08);


}

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

.hero-card {


padding: 35px;

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

border-radius: 22px;

background:
    linear-gradient(
        145deg,
        rgba(22, 119, 255, 0.12),
        rgba(255, 255, 255, 0.025)
    );

box-shadow: var(--sombra);


}

.hero-card-icono {


width: 65px;
height: 65px;

display: flex;

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

margin-bottom: 25px;

border-radius: 17px;

background: rgba(22, 119, 255, 0.15);

border: 1px solid rgba(59, 156, 255, 0.2);

font-size: 28px;


}

.hero-card h3 {


font-size: 25px;

margin-bottom: 12px;


}

.hero-card p {


color: var(--gris);

margin-bottom: 25px;


}

.hero-card-linea {


height: 1px;

background: var(--borde);

margin-bottom: 25px;


}

.hero-card-datos {


display: flex;

gap: 50px;


}

.hero-card-datos strong {


display: block;

color: var(--azul-claro);

font-size: 25px;


}

.hero-card-datos small {


color: var(--gris-oscuro);


}

/* =========================================================
TÍTULOS DE SECCIÓN
========================================================= */

.seccion-titulo {


max-width: 700px;

margin: 0 auto 55px;

text-align: center;


}

.seccion-titulo > span {


color: var(--azul-claro);

font-size: 12px;

font-weight: 800;

letter-spacing: 2px;


}

.seccion-titulo h2 {


margin: 10px 0 15px;

font-size: clamp(32px, 5vw, 48px);

line-height: 1.15;


}

.seccion-titulo p {


color: var(--gris);


}

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

.servicios {


padding: 110px 0;

background: var(--negro-secundario);


}

.servicios-grid {


display: grid;

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

gap: 20px;


}

.servicio-card {


position: relative;

padding: 30px 25px;

min-height: 330px;

display: flex;

flex-direction: column;

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

border-radius: 16px;

background: var(--negro-card);

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


}

.servicio-card:hover {


transform: translateY(-8px);

border-color:
    rgba(59, 156, 255, 0.35);

box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.3);


}

.servicio-icono {


width: 60px;
height: 60px;

display: flex;

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

margin-bottom: 25px;

border-radius: 15px;

background:
    linear-gradient(
        135deg,
        rgba(22, 119, 255, 0.2),
        rgba(59, 156, 255, 0.06)
    );

border:
    1px solid rgba(59, 156, 255, 0.15);

font-size: 25px;


}

.servicio-card h3 {


font-size: 20px;

line-height: 1.25;

margin-bottom: 15px;


}

.servicio-card p {


color: var(--gris);

font-size: 14px;

margin-bottom: 25px;


}

.servicio-link {


margin-top: auto;

color: var(--azul-claro);

font-size: 14px;

font-weight: 700;


}

.servicio-link span {


margin-left: 5px;

transition: 0.3s;


}

.servicio-link:hover span {


margin-left: 10px;


}

/* =========================================================
VIDEO
========================================================= */

.video-seccion {


padding: 110px 0;

background: var(--negro);


}

.video-contenedor {


position: relative;

overflow: hidden;

max-width: 950px;

margin: auto;

border-radius: 18px;

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

background: #000;

box-shadow: var(--sombra);


}

.video-contenedor video {


display: block;

width: 100%;

aspect-ratio: 16 / 9;

object-fit: cover;


}

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

.contacto {


padding: 90px 0;

background:

    radial-gradient(
        circle at 80% 50%,
        rgba(22, 119, 255, 0.18),
        transparent 35%
    ),

    var(--negro-secundario);


}

.contacto-contenido {


display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;


}

.contacto h2 {


font-size: clamp(30px, 4vw, 45px);

margin-bottom: 10px;


}

.contacto p {


color: var(--gris);


}

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

.footer {


padding: 45px 0;

background: #090a0c;

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


}

.footer-contenido {


text-align: center;


}

.footer-logo {


font-size: 20px;

font-weight: 800;

margin-bottom: 10px;


}

.footer p {


color: var(--gris-oscuro);

font-size: 14px;


}

.copyright {

margin-top: 20px;


}

/* =========================================================
RESPONSIVE - TABLETS
========================================================= */

@media (max-width: 1000px) {


.servicios-grid {

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

}


.hero-contenido {

    grid-template-columns: 1fr;

    gap: 50px;

}


.hero {

    padding-top: 120px;

    padding-bottom: 80px;

}


.hero-card {

    max-width: 600px;

}


}

/* =========================================================
RESPONSIVE - CELULARES
========================================================= */

@media (max-width: 768px) {


/* HEADER */

.header-contenido {

    min-height: 68px;

}


/* MOSTRAR HAMBURGUESA */

.menu-toggle {

    display: block;

}


/* OCULTAR MENÚ */

.menu {

    position: absolute;

    top: 68px;

    left: 4%;

    width: 92%;

    padding: 12px;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

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

    border-radius: 14px;

    background:
        rgba(17, 19, 24, 0.98);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4);

}


/* MOSTRAR MENÚ */

.menu.mostrar {

    display: flex;

}


.menu-link {

    padding: 14px 15px;

    border-radius: 8px;

}


.menu-link:hover {

    background:
        rgba(22, 119, 255, 0.1);

}


.menu-link::after {

    display: none;

}


/* HERO */

.hero {

    min-height: auto;

    padding-top: 120px;

    padding-bottom: 70px;

}


.hero-contenido {

    gap: 40px;

}


.hero h1 {

    font-size: 45px;

    letter-spacing: -1.5px;

}


.hero-texto p {

    font-size: 16px;

}


.hero-card {

    padding: 25px;

}


/* SERVICIOS */

.servicios,
.video-seccion {

    padding: 80px 0;

}


.servicios-grid {

    grid-template-columns: 1fr;

}


.servicio-card {

    min-height: auto;

}


.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}




/* CONTACTO */

.contacto {

    padding: 70px 0;

}


.contacto-contenido {

    flex-direction: column;

    align-items: flex-start;

}


}

/* =========================================================
CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 450px) {


.contenedor {

    width: 90%;

}


.logo {

    font-size: 17px;

}





.hero h1 {

    font-size: 38px;

}


.hero-botones {

    flex-direction: column;

    align-items: stretch;

}


.btn {

    width: 100%;

}


.hero-card-datos {

    gap: 30px;

}


.seccion-titulo {

    margin-bottom: 40px;

}


}