/* =========================================
   PORTAFOLIO - GERALDO ROSADO
   Variables de diseño
   ========================================= */

:root {
    --color-fondo: #050807;
    --color-fondo-secundario: #0b110f;

    --color-verde: #39ff88;
    --color-verde-suave: #1ed760;

    --color-texto: #ffffff;
    --color-texto-secundario: #a7afab;

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

    --ancho-contenido: 1200px;

    --radio: 16px;

    --transicion: 0.3s ease;
}


/* =========================================
   CONFIGURACIÓN GENERAL
   ========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    line-height: 1.6;
}


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

.contenedor {
    width: min(90%, var(--ancho-contenido));
    margin: 0 auto;
}

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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(5, 8, 7, 0.75);
    backdrop-filter: blur(12px);

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

.header-contenido {
    height: 80px;

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

.logo {
    color: var(--color-texto);
    text-decoration: none;

    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.logo span {
    color: var(--color-verde);
}

.navegacion {
    display: flex;
    gap: 2rem;
}

.navegacion a {
    color: var(--color-texto-secundario);
    text-decoration: none;

    font-size: 0.9rem;

    transition: color var(--transicion);
}

.navegacion a:hover {
    color: var(--color-verde);
}


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

.hero {
    min-height: 100vh;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    padding-top: 80px;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(57, 255, 136, 0.08),
            transparent 30%
        );
}

.hero-contenido {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    gap: 5rem;

    align-items: center;
}


/* =========================================
   TEXTO DEL HERO
   ========================================= */

.hero-etiqueta {
    color: var(--color-verde);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 1.5rem;
}

.hero h1 {
    max-width: 700px;

    font-size: clamp(3rem, 5vw, 5.5rem);

    line-height: 0.98;

    letter-spacing: -0.04em;

    margin-bottom: 2rem;
}

.hero h1 span {
    color: var(--color-verde);
}

.hero-descripcion {
    max-width: 600px;

    color: var(--color-texto-secundario);

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 2.5rem;
}


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

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

    gap: 1rem;

    flex-wrap: wrap;
}

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

    gap: 0.8rem;

    padding: 0.95rem 1.4rem;

    border-radius: 8px;

    text-decoration: none;

    font-size: 0.9rem;
    font-weight: 700;

    transition:
        transform var(--transicion),
        background var(--transicion),
        border-color var(--transicion);
}

.boton:hover {
    transform: translateY(-3px);
}

.boton-principal {
    background: var(--color-verde);
    color: #031008;
}

.boton-principal:hover {
    background: #65ffa2;
}

.boton-secundario {
    color: var(--color-texto);

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

    background: rgba(255, 255, 255, 0.02);
}

.boton-secundario:hover {
    border-color: rgba(57, 255, 136, 0.4);
}


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

.hero-visual {
    position: relative;

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

    min-height: 500px;
}

.visual-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    background: var(--color-verde);

    filter: blur(120px);

    opacity: 0.12;
}


/* =========================================
   PANEL TECNOLOGICO
   ========================================= */

.visual-panel {
    position: relative;

    width: 100%;
    max-width: 480px;

    padding: 1.5rem;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.01)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(20px);
}

.panel-cabecera {
    display: flex;
    gap: 0.5rem;

    padding-bottom: 1.5rem;

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

.panel-cabecera span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);
}

.proceso {
    padding: 2rem 0;
}

.proceso-item {
    display: grid;

    grid-template-columns: 50px 1fr;

    column-gap: 1rem;

    padding: 1rem;

    border: 1px solid transparent;

    border-radius: 12px;

    transition:
        background var(--transicion),
        border-color var(--transicion);
}

.proceso-item:hover,
.proceso-item.activo {
    background: rgba(57, 255, 136, 0.05);

    border-color: rgba(57, 255, 136, 0.15);
}

.proceso-numero {
    grid-row: span 2;

    color: var(--color-verde);

    font-family: monospace;

    font-size: 0.8rem;
}

.proceso-item strong {
    font-size: 1rem;
}

.proceso-item small {
    color: var(--color-texto-secundario);

    margin-top: 0.25rem;
}

.proceso-linea {
    width: 1px;
    height: 25px;

    margin-left: 25px;

    background: rgba(57, 255, 136, 0.2);
}

.panel-footer {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    padding-top: 1.2rem;

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

    color: var(--color-texto-secundario);

    font-size: 0.75rem;
}

.panel-footer span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-verde);

    box-shadow: 0 0 12px var(--color-verde);
}

@media(max-width:900px){

    .header-contenido{
        height:70px;
    }

    .navegacion{
        display:none;
    }


    .hero-contenido{
        grid-template-columns:1fr;
        gap:3rem;
    }


    .hero{
        padding-top:120px;
    }


    .hero-visual{
        min-height:350px;
    }


    .hero h1{
        font-size:3rem;
    }

}

/* =========================================
   SOLUCIONES
   ========================================= */

.soluciones {
    padding: 140px 0;

    background:
        linear-gradient(
            180deg,
            var(--color-fondo),
            var(--color-fondo-secundario)
        );
}


/* CABECERA */

.seccion-cabecera {
    max-width: 720px;

    margin-bottom: 70px;
}

.seccion-etiqueta {
    color: var(--color-verde);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 1.2rem;
}

.seccion-cabecera h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1;

    letter-spacing: -0.04em;

    margin-bottom: 1.5rem;
}

.seccion-cabecera h2 span {
    color: var(--color-verde);
}

.seccion-descripcion {
    max-width: 650px;

    color: var(--color-texto-secundario);

    font-size: 1.05rem;

    line-height: 1.8;
}


/* GRID */

.soluciones-grid {
    display: grid;

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

    gap: 1rem;
}


/* CARD */

.solucion-card {
    position: relative;

    padding: 2.5rem;

    min-height: 360px;

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

    border-radius: var(--radio);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    overflow: hidden;

    transition:
        transform var(--transicion),
        border-color var(--transicion),
        background var(--transicion);
}


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

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -80px;

    background: var(--color-verde);

    filter: blur(100px);

    opacity: 0;

    transition: opacity var(--transicion);
}


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

    border-color: rgba(57,255,136,0.25);

    background:
        linear-gradient(
            145deg,
            rgba(57,255,136,0.05),
            rgba(255,255,255,0.01)
        );
}


.solucion-card:hover::before {
    opacity: 0.08;
}


/* NUMERO */

.solucion-numero {
    position: absolute;

    top: 2rem;
    right: 2rem;

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

    font-family: monospace;

    font-size: 0.8rem;
}


/* ICONO */

.solucion-icono {
    width: 52px;
    height: 52px;

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

    margin-bottom: 2rem;

    border: 1px solid rgba(57,255,136,0.2);

    border-radius: 12px;

    color: var(--color-verde);

    background: rgba(57,255,136,0.04);

    font-family: monospace;

    font-size: 1.2rem;
}


/* TITULO */

.solucion-card h3 {
    font-size: 1.35rem;

    margin-bottom: 1rem;
}


/* DESCRIPCION */

.solucion-card p {
    max-width: 450px;

    color: var(--color-texto-secundario);

    line-height: 1.7;
}


/* LINK */

.solucion-link {
    position: absolute;

    left: 2.5rem;
    bottom: 2rem;

    color: var(--color-verde);

    font-size: 0.85rem;

    font-weight: 600;
}


/* =========================================
   RESPONSIVE - SOLUCIONES
   ========================================= */

@media (max-width: 900px) {

    .soluciones {
        padding: 100px 0;
    }

    .soluciones-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .solucion-card {
        min-height: 330px;

        padding: 2rem;
    }

    .solucion-link {
        left: 2rem;
        bottom: 1.7rem;
    }

}
/* =========================================
   PROYECTOS
   ========================================= */

.proyectos {
    padding: 140px 0;

    background: var(--color-fondo);
}

.proyectos-cabecera {
    margin-bottom: 80px;
}


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

.proyecto-destacado {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    min-height: 560px;

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

    border-radius: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    margin-bottom: 1rem;
}


.proyecto-destacado-contenido {

    padding: 3.5rem;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.proyecto-meta {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 2rem;
}


.proyecto-numero {

    color: var(--color-verde);

    font-family: monospace;

    font-size: 0.8rem;
}


.proyecto-categoria {

    color: var(--color-texto-secundario);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.proyecto-destacado h3 {

    max-width: 650px;

    font-size: clamp(2.4rem, 4vw, 4rem);

    line-height: 1;

    letter-spacing: -0.04em;

    margin-bottom: 2rem;
}


.proyecto-destacado h3 span {

    color: var(--color-verde);
}


.proyecto-descripcion {

    max-width: 620px;

    color: var(--color-texto-secundario);

    line-height: 1.8;

    margin-bottom: 1rem;
}


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

.proyecto-caracteristicas {

    display: flex;

    flex-wrap: wrap;

    gap: 0.6rem;

    margin-top: 1.5rem;

    margin-bottom: 2rem;
}


.proyecto-caracteristicas span {

    padding: 0.45rem 0.7rem;

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

    border-radius: 6px;

    color: var(--color-texto-secundario);

    font-size: 0.7rem;
}


/* =========================================
   PIE DEL PROYECTO
   ========================================= */

.proyecto-pie {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding-top: 1.5rem;

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

    color: var(--color-texto-secundario);

    font-size: 0.72rem;
}


/* =========================================
   VISUAL DEL PROYECTO
   ========================================= */

.proyecto-destacado-visual {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(57,255,136,0.08),
            transparent 55%
        );
}


.proyecto-visual-glow {

    position: absolute;

    width: 260px;

    height: 260px;

    background: var(--color-verde);

    filter: blur(130px);

    opacity: 0.12;
}


/* =========================================
   DIAGRAMA
   ========================================= */

.proyecto-diagrama {

    position: relative;

    width: 75%;

    z-index: 2;
}


.diagrama-item {

    padding: 1.3rem;

    display: grid;

    grid-template-columns: 40px 1fr;

    column-gap: 1rem;

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

    border-radius: 12px;

    background: rgba(5,8,7,0.7);

    backdrop-filter: blur(10px);

    transition:
        border-color var(--transicion),
        background var(--transicion);
}


.diagrama-item.activo {

    border-color: rgba(57,255,136,0.18);

}


.diagrama-item span {

    grid-row: span 2;

    color: var(--color-verde);

    font-family: monospace;

    font-size: 0.75rem;
}


.diagrama-item strong {

    font-size: 0.9rem;
}


.diagrama-item small {

    color: var(--color-texto-secundario);

    margin-top: 0.2rem;

    font-size: 0.72rem;
}


.diagrama-linea {

    width: 1px;

    height: 35px;

    margin-left: 20px;

    background: rgba(57,255,136,0.2);
}


/* =========================================
   PLATAFORMA COMERCIAL
   ========================================= */

.proyecto-comercial {

    padding: 3.5rem;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(57,255,136,0.035),
            rgba(255,255,255,0.01)
        );

    margin-bottom: 1rem;
}


.proyecto-titulo-linea {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;
}


.proyecto-titulo-linea h3 {

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1;

    letter-spacing: -0.04em;
}


.proyecto-titulo-linea h3 span {

    color: var(--color-verde);
}


/* =========================================
   ESTADO
   ========================================= */

.estado-desarrollo {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.55rem 0.8rem;

    border: 1px solid rgba(57,255,136,0.2);

    border-radius: 20px;

    color: var(--color-verde);

    font-size: 0.65rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    white-space: nowrap;
}


.estado-desarrollo span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--color-verde);

    box-shadow: 0 0 10px var(--color-verde);

    animation: estado-pulso 2s infinite;
}


@keyframes estado-pulso {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }

}


/* =========================================
   MÓDULOS DE LA PLATAFORMA
   ========================================= */

.plataforma-modulos {

    display: grid;

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

    gap: 0.7rem;

    margin: 2rem 0;
}


.modulo {

    padding: 1.2rem;

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

    border-radius: 10px;

    background: rgba(255,255,255,0.015);
}


.modulo strong {

    display: block;

    font-size: 0.85rem;

    margin-bottom: 0.3rem;
}


.modulo small {

    color: var(--color-texto-secundario);

    font-size: 0.7rem;
}


/* =========================================
   PROYECTOS SECUNDARIOS
   ========================================= */

.proyectos-secundarios {

    display: grid;

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

    gap: 1rem;
}


.proyecto-card {

    padding: 2.5rem;

    min-height: 330px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.01)
        );

    transition:
        transform var(--transicion),
        border-color var(--transicion),
        background var(--transicion);
}


.proyecto-card:hover {

    transform: translateY(-5px);

    border-color: rgba(57,255,136,0.2);

    background:
        linear-gradient(
            145deg,
            rgba(57,255,136,0.035),
            rgba(255,255,255,0.01)
        );
}


.proyecto-card-cabecera {

    display: flex;

    justify-content: space-between;

    margin-bottom: 3rem;
}


.proyecto-card h3 {

    max-width: 450px;

    font-size: 1.5rem;

    line-height: 1.2;

    margin-bottom: 1rem;
}


.proyecto-card p {

    max-width: 500px;

    color: var(--color-texto-secundario);

    line-height: 1.7;
}


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

.proyecto-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 2rem;
}


.proyecto-tags span {

    padding: 0.4rem 0.6rem;

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

    border-radius: 5px;

    color: var(--color-texto-secundario);

    font-size: 0.68rem;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .proyecto-destacado {

        grid-template-columns: 1fr;

    }


    .proyecto-destacado-visual {

        min-height: 400px;

    }


    .plataforma-modulos {

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

    }

}


@media (max-width: 650px) {

    .proyectos {

        padding: 100px 0;

    }


    .proyecto-destacado-contenido,
    .proyecto-comercial,
    .proyecto-card {

        padding: 2rem;

    }


    .proyecto-pie {

        flex-direction: column;

    }


    .proyecto-titulo-linea {

        align-items: flex-start;

        flex-direction: column;

    }


    .plataforma-modulos {

        grid-template-columns: 1fr;

    }


    .proyectos-secundarios {

        grid-template-columns: 1fr;

    }


    .proyecto-destacado-visual {

        min-height: 350px;

    }


    .proyecto-diagrama {

        width: 85%;

    }

}
/* =========================================
   SOBRE MÍ
   ========================================= */

.sobre-mi {

    padding: 140px 0;

    background:
        linear-gradient(
            180deg,
            var(--color-fondo-secundario),
            var(--color-fondo)
        );
}


.sobre-mi-grid {

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 7rem;

    align-items: start;
}


/* =========================================
   INTRODUCCIÓN
   ========================================= */

.sobre-mi-introduccion h2 {

    max-width: 700px;

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1;

    letter-spacing: -0.04em;

    margin-bottom: 2.5rem;
}


.sobre-mi-introduccion h2 span {

    color: var(--color-verde);
}


.sobre-mi-texto {

    max-width: 650px;

    color: var(--color-texto-secundario);

    font-size: 1rem;

    line-height: 1.85;

    margin-bottom: 1.3rem;
}


/* =========================================
   FRASE / FILOSOFÍA
   ========================================= */

.sobre-mi-frase {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 1.2rem;

    padding-top: 1rem;

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

    max-width: 500px;
}


.sobre-mi-frase span {

    color: var(--color-verde);

    font-family: monospace;

    font-size: 0.75rem;
}


.sobre-mi-frase strong {

    font-size: 0.9rem;
}


/* =========================================
   TRAYECTORIA
   ========================================= */

.trayectoria {

    position: relative;

    padding-left: 2rem;
}


.trayectoria::before {

    content: "";

    position: absolute;

    left: 4px;

    top: 45px;

    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            rgba(57,255,136,0.35),
            var(--color-borde)
        );
}


.trayectoria-cabecera {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 2rem;
}


.trayectoria-titulo {

    color: var(--color-verde);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.trayectoria-linea {

    flex: 1;

    height: 1px;

    background: var(--color-borde);
}


/* =========================================
   ITEMS
   ========================================= */

.trayectoria-item {

    position: relative;

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 1.2rem;

    padding: 0 0 2rem 1.5rem;

    margin-bottom: 0.5rem;
}


.trayectoria-item::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 5px;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--color-fondo);

    border: 1px solid rgba(57,255,136,0.5);
}


.trayectoria-item.destacado::before,
.trayectoria-item.actual::before {

    background: var(--color-verde);

    box-shadow:
        0 0 12px rgba(57,255,136,0.5);
}


.trayectoria-año {

    color: var(--color-verde);

    font-family: monospace;

    font-size: 0.8rem;

    padding-top: 0.1rem;
}


.trayectoria-item h3 {

    font-size: 1rem;

    margin-bottom: 0.35rem;
}


.trayectoria-item p {

    color: var(--color-texto-secundario);

    font-size: 0.82rem;

    line-height: 1.6;

    margin: 0;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .sobre-mi {

        padding: 100px 0;

    }


    .sobre-mi-grid {

        grid-template-columns: 1fr;

        gap: 5rem;

    }

}


@media (max-width: 600px) {

    .sobre-mi-frase {

        max-width: 100%;

    }


    .trayectoria {

        padding-left: 1.5rem;

    }


    .trayectoria-item {

        grid-template-columns: 55px 1fr;

        gap: 0.8rem;

    }

}
section {
    scroll-margin-top: 90px;
}
/* =========================================
   CONTACTO
   ========================================= */

.contacto {

    padding: 140px 0;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(57, 255, 136, 0.06),
            transparent 35%
        );
}


.contacto-contenido {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 6rem;

    align-items: center;
}


/* =========================================
   TEXTO
   ========================================= */

.contacto-texto h2 {

    max-width: 650px;

    font-size: clamp(2.8rem, 5vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.04em;

    margin-bottom: 2rem;
}


.contacto-texto h2 span {

    color: var(--color-verde);
}


.contacto-texto p:not(.seccion-etiqueta) {

    max-width: 550px;

    color: var(--color-texto-secundario);

    line-height: 1.8;

    margin-bottom: 1.2rem;
}


/* =========================================
   PANEL
   ========================================= */

.contacto-panel {

    padding: 2.5rem;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.01)
        );

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

    backdrop-filter: blur(15px);
}


.contacto-panel-cabecera {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 1.5rem;

    margin-bottom: 2rem;

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

    color: var(--color-texto-secundario);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.contacto-indicador {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--color-verde);

    font-size: 0.65rem;
}


.contacto-indicador span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--color-verde);

    box-shadow:
        0 0 10px var(--color-verde);
}


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

.formulario-contacto {

    display: flex;

    flex-direction: column;

    gap: 1.3rem;
}


.campo {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;
}


.campo label {

    color: var(--color-texto);

    font-size: 0.78rem;

    font-weight: 600;
}


.campo input,
.campo textarea {

    width: 100%;

    padding: 0.9rem 1rem;

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

    border-radius: 8px;

    outline: none;

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

    color: var(--color-texto);

    font-family: inherit;

    font-size: 0.9rem;

    transition:
        border-color var(--transicion),
        background var(--transicion);
}


.campo textarea {

    resize: vertical;

    min-height: 130px;
}


.campo input::placeholder,
.campo textarea::placeholder {

    color: #66706b;
}


.campo input:focus,
.campo textarea:focus {

    border-color: rgba(57,255,136,0.45);

    background: rgba(57,255,136,0.025);
}


.boton-contacto {

    border: none;

    cursor: pointer;

    margin-top: 0.5rem;
}


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

.footer {

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

    padding: 2rem 0;

    background: var(--color-fondo);
}


.footer-contenido {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;
}


.footer p,
.footer span {

    color: var(--color-texto-secundario);

    font-size: 0.7rem;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 900px) {

    .contacto {

        padding: 100px 0;

    }


    .contacto-contenido {

        grid-template-columns: 1fr;

        gap: 4rem;

    }

}


@media (max-width: 600px) {

    .contacto-panel {

        padding: 1.5rem;

    }


    .contacto-panel-cabecera {

        align-items: flex-start;

        flex-direction: column;

    }


    .footer-contenido {

        align-items: flex-start;

        flex-direction: column;

        gap: 0.8rem;

    }

}

/* =========================================
   MENÚ MÓVIL
   ========================================= */

.menu-movil {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid var(--color-borde);
    border-radius: 8px;

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

    cursor: pointer;

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

    flex-direction: column;
    gap: 5px;
}


.menu-movil span {
    width: 18px;
    height: 1px;

    background: var(--color-texto);

    transition:
        transform var(--transicion),
        opacity var(--transicion);
}


/* =========================================
   ESTADO ACTIVO DEL MENÚ
   ========================================= */

.menu-movil.activo span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-movil.activo span:nth-child(2) {
    opacity: 0;
}

.menu-movil.activo span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 700px) {

    .header-contenido {
        position: relative;
    }

    .menu-movil {
        display: flex;
    }

    .navegacion {

        position: absolute;

        top: 70px;
        left: 0;
        right: 0;

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 0.7rem;

        border: 1px solid var(--color-borde);
        border-radius: 12px;

        background: rgba(5, 8, 7, 0.97);

        backdrop-filter: blur(15px);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity var(--transicion),
            visibility var(--transicion),
            transform var(--transicion);
    }


    .navegacion.activa {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }


    .navegacion a {

        padding: 0.9rem 1rem;

        border-radius: 7px;

    }


    .navegacion a:hover {

        background: rgba(57,255,136,0.05);

    }

}

/* =========================================
   ESTADO DEL FORMULARIO
   ========================================= */

.boton-contacto:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.estado-formulario {
    min-height: 1.4rem;
    margin-top: 0.8rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.estado-formulario.error {
    color: #ff8b8b;
}

.estado-formulario.exito {
    color: var(--color-verde);
}