/* ==========================================================
   VERTEX WEBSITE
   Archivo: style.css

   Estilos principales del sitio.
   Arquitectura basada en componentes BEM.

   ========================================================== */


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


:root {


    /* --------------------------
       COLORES PRINCIPALES
    -------------------------- */


    --color-white: #FFFFFF;

    --color-background: #F7F7F6;

    --color-surface: #FFFFFF;

    --color-text: #333333;

    --color-text-light: #666666;

    --color-metallic: #6B6B6B;

    --color-dark: #2C2C2C;

    --color-primary: #E86F25;

    --color-secondary: #F2C94C;



    /* --------------------------
       SOMBRAS
    -------------------------- */


    --shadow-sm:
        0 4px 12px rgba(0,0,0,0.08);


    --shadow-md:
        0 10px 30px rgba(0,0,0,0.10);


    --shadow-lg:
        0 20px 50px rgba(0,0,0,0.12);



    /* --------------------------
       BORDES
    -------------------------- */


    --radius-sm: 6px;

    --radius-md: 12px;

    --radius-lg: 20px;



    /* --------------------------
       ESPACIADOS
    -------------------------- */


    --space-xs: 0.5rem;

    --space-sm: 1rem;

    --space-md: 2rem;

    --space-lg: 4rem;

    --space-xl: 6rem;



    /* --------------------------
       TRANSICIONES
    -------------------------- */


    --transition-fast:
        0.2s ease;


    --transition-normal:
        0.35s ease;


    --transition-slow:
        0.5s ease;



    /* --------------------------
       CONTENEDORES
    -------------------------- */


    --container-width:
        1280px;


}


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


*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    color:
        var(--color-text);

    background:
        var(--color-white);

    line-height:
        1.6;

    overflow-x:
        hidden;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



button,
input,
textarea {

    font-family: inherit;

}


/* ==========================================================
   CONTENEDORES GENERALES
========================================================== */


.container {

    width: 100%;

    max-width:
        var(--container-width);

    margin:
        0 auto;

    padding-left:
        2rem;

    padding-right:
        2rem;

}



.container__inner {

    width: 100%;

}



/* ==========================================================
   SECCIONES GENERALES
========================================================== */


.section {

    padding-top:
        var(--space-xl);

    padding-bottom:
        var(--space-xl);

}



.section-header {

    max-width:
        850px;

    margin:
        0 auto 4rem;

    text-align:
        center;

}



.section-header__eyebrow {

    display:
        inline-block;

    margin-bottom:
        1rem;

    color:
        var(--color-primary);

    font-size:
        0.85rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}



.section-header__title {

    color:
        var(--color-dark);

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

    line-height:
        1.2;

    font-weight:
        800;

    margin-bottom:
        1.5rem;

}



.section-header__description {

    color:
        var(--color-text-light);

    font-size:
        1.05rem;

}


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


.btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0.9rem 2rem;

    min-height:
        48px;

    font-size:
        0.95rem;

    font-weight:
        700;

    border:
        none;

    cursor:
        pointer;

    overflow:
        hidden;

    transition:
        var(--transition-normal);

}



.btn__text {

    position:
        relative;

    z-index:
        2;

}



/* Botón naranja */


.btn--primary {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}



/* Botón secundario */


.btn--secondary {

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

    color:
        var(--color-white);

}



/* Botón claro para CTA */


.btn--light {

    background:
        var(--color-white);

    color:
        var(--color-primary);

}



/* Botón transparente */

.btn--outline {

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

    color:
        var(--color-primary);

}


/* Efecto común */


.btn:hover {

    transform:
        translateY(-3px);

}

/* ==========================================================
   TOPBAR
========================================================== */


.topbar {

    background:
        var(--color-dark);

    color:
        var(--color-white);

    font-size:
        0.85rem;

    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal);

}



.topbar__container {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        2rem;

}



.topbar__item {

    display:
        flex;

    align-items:
        center;

    gap:
        0.5rem;

    white-space:
        nowrap;

}



.topbar__icon {

    font-size:
        0.9rem;

}



.topbar a {

    transition:
        color var(--transition-fast);

}



.topbar a:hover {

    color:
        var(--color-secondary);

}



/* Estado oculto controlado por JavaScript */


.topbar--hidden {

    opacity:
        0;

    transform:
        translateY(-100%);

    pointer-events:
        none;

}



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


.header {

    position:
        fixed;

    top:
        42px;

    left:
        0;

    width:
        100%;

    z-index:
        1000;

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

    backdrop-filter:
        blur(10px);

    transition:
        height var(--transition-normal),
        top var(--transition-normal),
        box-shadow var(--transition-normal);

}



.header__container {

    height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    transition:
        height var(--transition-normal);

}



/* Estado compacto del header */

.header--scrolled {

    top:
        0;

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

}



.header--scrolled .header__container {

    height:
        78px;

}



/* ==========================================================
   LOGOTIPO
========================================================== */


.header__logo {

    display:
        flex;

    align-items:
        center;

}



.header__logo img {

    width:
        170px;

    height:
        auto;

}



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


.header__nav {

    display:
        flex;

    align-items:
        center;

}



.header__menu {

    display:
        flex;

    align-items:
        center;

    gap:
        2.2rem;

}



.header__link {

    position:
        relative;

    color:
        var(--color-dark);

    font-size:
        0.95rem;

    font-weight:
        600;

    transition:
        color var(--transition-fast);

}



/* Línea inferior animada */


.header__link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        2px;

    background:
        var(--color-primary);

    transition:
        width var(--transition-normal);

}



.header__link:hover,
.header__link.active {

    color:
        var(--color-primary);

}



.header__link:hover::after,
.header__link.active::after {

    width:
        100%;

}



/* Botón contacto dentro del menú */


.header__item .btn {

    padding:
        0.75rem 1.6rem;

}



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


.menu-toggle {

    display:
        none;

    width:
        42px;

    height:
        42px;

    background:
        transparent;

    border:
        none;

    cursor:
        pointer;

}



.menu-toggle__line {

    display:
        block;

    width:
        25px;

    height:
        2px;

    background:
        var(--color-dark);

    margin:
        6px auto;

    transition:
        var(--transition-normal);

}



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


.hero {

    position:
        relative;

    height:
        88vh;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background-image:
        url("../img/hero/hero-image.webp");

    background-size:
        cover;

    background-position:
        center;

}



/* Overlay oscuro */


.hero__overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.35)
        );

}



/* Decoración diagonal inspirada en logo 


.hero__diagonal {

    position:
        absolute;

    right:
        -150px;

    bottom:
        -200px;

    width:
        500px;

    height:
        500px;

    background:
        rgba(242,201,76,0.18);

    transform:
        rotate(45deg);

}
*/


/* Contenedor interno */


.hero__container {

    position:
        relative;

    z-index:
        2;

}



.hero__content {

    max-width:
        780px;

    color:
        var(--color-white);

}



.hero__eyebrow {

    display:
        inline-block;

    margin-bottom:
        1.5rem;

    font-size:
        0.9rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--color-secondary);

}



.hero__title {

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

    line-height:
        1.15;

    font-weight:
        800;

    margin-bottom:
        1.5rem;

}



.hero__description {

    max-width:
        680px;

    font-size:
        1.15rem;

    line-height:
        1.8;

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

    margin-bottom:
        2.5rem;

}



/* Botones hero */


.hero__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        1.2rem;

}



.hero .btn--secondary {

    background:
        transparent;

}



.hero .btn--secondary:hover {

    background:
        var(--color-white);

    color:
        var(--color-dark);

}



/* ==========================================================
   INDICADOR DE SCROLL
========================================================== 


.hero__scroll {

    position:
        absolute;

    bottom:
        35px;

    left:
        50%;

    transform:
        translateX(-50%);

}



.hero__scroll-line {

    display:
        block;

    width:
        2px;

    height:
        55px;

    background:
        var(--color-white);

    opacity:
        0.7;

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


.services {

    background:
        var(--color-background);

}



.services__grid {

    display:
        grid;

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

    gap:
        2rem;

}



/* ==========================================================
   TARJETA DE SERVICIO
========================================================== */


.service-card {

    background:
        var(--color-white);

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

    overflow:
        hidden;

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

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}



.service-card:hover {

    transform:
        translateY(-8px);

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

}



/* Imagen */


.service-card__image {

    height:
        250px;

    overflow:
        hidden;

}



.service-card__image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow);

}



.service-card:hover .service-card__image img {

    transform:
        scale(1.05);

}



/* Contenido */


.service-card__content {

    padding:
        2rem;

}



.service-card__title {

    color:
        var(--color-dark);

    font-size:
        1.35rem;

    line-height:
        1.3;

    font-weight:
        800;

    margin-bottom:
        1rem;

}



.service-card__description {

    color:
        var(--color-text-light);

    font-size:
        0.95rem;

    line-height:
        1.7;

    margin-bottom:
        1.5rem;

}



.service-card .btn {

    font-size:
        0.85rem;

    padding:
        0.75rem 1.5rem;

}



/* ==========================================================
   SECTORES
========================================================== */


.sectors {

    background:
        var(--color-white);

}



.sectors__grid {

    display:
        grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap:
        1.5rem;

}



/* ==========================================================
   TARJETA DE SECTOR
========================================================== */


.sector-card {

    position:
        relative;

    height:
        320px;

    overflow:
        hidden;

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

    cursor:
        pointer;

}



.sector-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,0.65),
            rgba(0,0,0,0.05)
        );

    transition:
        opacity var(--transition-normal);

}



.sector-card:hover::after {

    opacity:
        0.75;

}



.sector-card__image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow),
        filter var(--transition-normal);

}



.sector-card:hover .sector-card__image {

    transform:
        scale(1.05);

    filter:
        brightness(1.12);

}



.sector-card__overlay {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    padding:
        2rem;

    z-index:
        2;

}



.sector-card__title {

    color:
        var(--color-white);

    font-size:
        1.5rem;

    font-weight:
        800;

}



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


.featured-project {

    background:
        var(--color-background);

}



.project {

    display:
        grid;

    grid-template-columns:
        1.1fr 1fr;

    gap:
        4rem;

    align-items:
        center;

    background:
        var(--color-white);

    padding:
        3rem;

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

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

}



/* Imagen */


.project__image {

    height:
        500px;

    overflow:
        hidden;

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

}



.project__image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}



/* Contenido */


.project__category {

    display:
        inline-block;

    margin-bottom:
        1rem;

    color:
        var(--color-primary);

    font-size:
        0.85rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



.project__title {

    color:
        var(--color-dark);

    font-size:
        clamp(1.8rem,3vw,2.6rem);

    line-height:
        1.25;

    font-weight:
        800;

    margin-bottom:
        1.5rem;

}



.project__description {

    color:
        var(--color-text-light);

    line-height:
        1.8;

    margin-bottom:
        1.5rem;

}



.project__features {

    margin-bottom:
        2rem;

}



.project__features li {

    position:
        relative;

    padding-left:
        1.5rem;

    margin-bottom:
        0.75rem;

    color:
        var(--color-text);

    font-size:
        0.95rem;

}



.project__features li::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0.65em;

    width:
        7px;

    height:
        7px;

    background:
        var(--color-primary);

    transform:
        rotate(45deg);

}

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


.cta {

    background:
        var(--color-primary);

    position:
        relative;

    overflow:
        hidden;

    color:
        var(--color-white);

}



/*
   Elemento decorativo diagonal inspirado
   en la identidad visual del logotipo
*/


.cta::before {

    content:
        "";

    position:
        absolute;

    right:
        -180px;

    top:
        -180px;

    width:
        420px;

    height:
        420px;

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

    transform:
        rotate(45deg);

}



.cta__container {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        3rem;

    padding-top:
        4rem;

    padding-bottom:
        4rem;

}



.cta__content {

    max-width:
        750px;

}



.cta__title {

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

    line-height:
        1.2;

    font-weight:
        800;

    margin-bottom:
        1rem;

}



.cta__description {

    font-size:
        1.1rem;

    line-height:
        1.7;

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

}



.cta .btn--light:hover {

    background:
        var(--color-dark);

    color:
        var(--color-white);

}



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


.contact {

    background:
        var(--color-white);

}



.contact__container {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        4rem;

    align-items:
        start;

}



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


.contact-form {

    display:
        grid;

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

    gap:
        1.5rem;

    background:
        var(--color-white);

    padding:
        2.5rem;

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

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

}



.contact-form__group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.5rem;

}



.contact-form__group--full {

    grid-column:
        1 / -1;

}



.contact-form label {

    color:
        var(--color-dark);

    font-size:
        0.9rem;

    font-weight:
        700;

}



.contact-form input,
.contact-form textarea {

    width:
        100%;

    padding:
        0.95rem 1rem;

    border:
        1px solid #dddddd;

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

    color:
        var(--color-text);

    background:
        var(--color-white);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}



.contact-form textarea {

    resize:
        vertical;

}



.contact-form input:focus,
.contact-form textarea:focus {

    outline:
        none;

    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px rgba(232,111,37,0.15);

}



.contact-form__actions {

    grid-column:
        1 / -1;

}



/* ==========================================================
   INFORMACIÓN DE CONTACTO
========================================================== */


.contact__info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2rem;

}



.contact-map {

    width:
        100%;

    height:
        350px;

    overflow:
        hidden;

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

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

}



.contact-map iframe {

    width:
        100%;

    height:
        100%;

    border:
        0;

}



.contact-details {

    background:
        var(--color-background);

    padding:
        2rem;

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

}



.contact-details__title {

    color:
        var(--color-dark);

    font-size:
        1.4rem;

    font-weight:
        800;

    margin-bottom:
        1.5rem;

}



.contact-details p {

    color:
        var(--color-text-light);

    margin-bottom:
        0.8rem;

    line-height:
        1.6;

}



.contact-details strong {

    color:
        var(--color-dark);

}



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


.footer {

    background:
        var(--color-dark);

    color:
        var(--color-white);

    padding:
        2rem 0;

}



.footer__container {

    display:
        grid;

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

    align-items:
        center;

}



.footer__column {

    display:
        flex;

    align-items:
        center;

}



.footer__column--left {

    justify-content:
        flex-start;

}



.footer__column--center {

    justify-content:
        center;

    text-align:
        center;

}



.footer__column--right {

    justify-content:
        flex-end;

}



.footer__logo img {

    width:
        150px;

}



.footer p {

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

    font-size:
        0.9rem;

    line-height:
        1.6;

}



/* ==========================================================
   AJUSTES GLOBALES FINALES
========================================================== */


/*
   Evita que las secciones queden ocultas debajo
   del header fijo al usar navegación por anclas.
*/


section[id] {

    scroll-margin-top:
        100px;

}



/*
   Selección de texto personalizada
*/


::selection {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}