/* ===== VARIABLES GLOBALES ===== */
:root{
    --bg:#0a0c12;           /* Fondo principal oscuro */
    --card:#111317;         /* Fondo para tarjetas y elementos */
    --border:#1e1f26;       /* Color de bordes y separadores */
    --text:#e2e2e2;         /* Color de texto principal */
    --muted:#90909a;        /* Color de texto secundario */
    --white:#fff;           /* Blanco puro para contrastes */
}

/* ===== RESET Y ESTILOS BASE ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', system-ui, -apple-system, sans-serif; /* Fuente principal con fallbacks */
}

body{
    background:var(--bg);
    color:var(--text);
    line-height:1.6;        /* Altura de línea óptima para legibilidad */
}

/* ===== HEADER Y NAVEGACIÓN ===== */
header{
    position:fixed;          /* Header fijo en la parte superior */
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.4rem 6%;       /* Padding vertical: 1.4rem, horizontal: 6% */
    background:#080a0f;      /* Fondo ligeramente más oscuro que el body */
    border-bottom:1px solid var(--border);
    z-index:100;             /* Asegura que esté sobre otros elementos */
}

.logo{
    font-weight:600;         /* Semi-bold para el logo */
    color:var(--white);
}

nav a{
    margin:0 1rem;           /* Espaciado horizontal entre enlaces */
    color:var(--muted);
    text-decoration:none;
    font-size:.95rem;
    transition:color .2s ease; /* Transición suave en hover */
}

nav a:hover{
    color:var(--white);      /* Cambia a blanco al hacer hover */
}

#hamburguesa{
    display:none;            /* Oculto en desktop, visible en móvil */
    font-size:1.5rem;
    background:none;
    border:none;
    color:var(--white);
    cursor:pointer;
}

/* ===== MAIN Y HERO SECTION ===== */
main{
    padding-top:80px;        /* Compensa el header fijo */
}

.hero{
    min-height:100vh;        /* Ocupa al menos toda la altura de la pantalla */
    display:flex;
    align-items:center;      /* Centra verticalmente el contenido */
    padding:0 8%;
}

.hero h1{
    font-size:3.4rem;
    max-width:700px;
    color:var(--white);
    line-height:1.2;
}

.hero span{
    border-bottom:2px solid #3a3c48; /* Subrayado sutil */
}

.hero p{
    margin:1.5rem 0;
    color:var(--muted);
    max-width:500px;
    font-size:1.1rem;
}

/* ===== BOTONES ===== */
.hero-botones{
    display:flex;
    gap:1rem;
}

.btn-principal{
    background:var(--white);
    color:#000;
    padding:.8rem 2rem;
    border-radius:4px;
    text-decoration:none;
    font-weight:500;
    transition:opacity .2s;
}

.btn-principal:hover{
    opacity:.9;              /* Efecto sutil al hacer hover */
}

.btn-secundario{
    border:1px solid var(--border);
    padding:.8rem 2rem;
    border-radius:4px;
    text-decoration:none;
    color:var(--text);
    transition:background .2s;
}

.btn-secundario:hover{
    background:var(--card);  /* Fondo al hacer hover */
}

/* ===== SECCIONES GENERALES ===== */
.servicios, .portafolio, .catalogo, .contacto{
    padding:6rem 8%;         /* Padding vertical: 6rem, horizontal: 8% */
    text-align:center; /* Separador entre secciones */
}

h2{
    font-size:2rem;
    color:var(--white);
    margin-bottom:1rem;
}

/* ===== GRID DE SERVICIOS ===== */
.grid-servicios{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); /* Responsive grid */
    gap:3rem;
    margin-top:4rem;
}

.servicio{
    padding:2rem;
    border-radius:8px;
    text-align: center;
    transition:transform .2s ease;
}

.servicio:hover{
    transform:translateY(-4px); /* Efecto de elevación al hacer hover */
}

.servicio h3{
    margin-bottom:.5rem;
    color:var(--white);
}

/* ===== PORTAFOLIO Y FILTROS ===== */
.grid-portafolio{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:2rem;
    margin-top:3rem;
}

.item{
    height:220px;
    background:var(--card);
    border-radius:8px;
    border:1px solid var(--border);
    transition:border-color .2s;
}

.item:hover{
    border-color:var(--white); /* Cambia el borde al hacer hover */
}

.filtros{
    margin:2rem 0;
    display:flex;
    justify-content:center;
    gap:.5rem;
    flex-wrap:wrap;          /* Permite que los botones se envuelvan en móvil */
}

.boton-filtro{
    padding:.5rem 1.4rem;
    border-radius:20px;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--muted);
    cursor:pointer;
    transition:all .2s;
}

.boton-filtro:hover{
    background:var(--border); /* Fondo más claro al hacer hover */
    color:var(--white);
}

.boton-filtro.activo{
    background:var(--white);
    color:#000;
    border-color:var(--white);
}

/* ===== FORMULARIO DE CONTACTO ===== */
form{
    max-width:500px;
    margin:3rem auto 0;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

input, textarea{
    padding:1rem;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--white);
    font-size:1rem;
}

input:focus, textarea:focus{
    outline:none;
    border-color:var(--white); /* Borde blanco al enfocar */
}

textarea{
    min-height:120px;
    resize:vertical;         /* Permite redimensionar solo verticalmente */
}

button[type="submit"]{
    padding:1rem;
    background:var(--white);
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    font-size:1rem;
    transition:opacity .2s;
}

button[type="submit"]:hover{
    opacity:.9;
}

/* ===== FOOTER ===== */
footer{
    padding:3rem;
    text-align:center;
    background:#080a0f;
    color:#60606a;
}

/* ===== ELEMENTOS FLOTANTES ===== */
.whatsapp{
    position:fixed;
    bottom:2rem;
    right:2rem;
    width:50px;
    height:50px;
    background:#1a1c24;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    font-size:1.5rem;
    transition:background .2s;
    z-index:99;
}

.whatsapp:hover{
    background:var(--border); /* Cambia de color al hacer hover */
}

/* ===== ANIMACIONES ===== */
.revelar{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.revelar.activo{
    opacity:1;
    transform:none;          /* Vuelve a su posición original */
}

/* ===== CURSOR PERSONALIZADO ===== */
.cursor-personalizado{
    width:6px;
    height:6px;
    background:#fff;
    border-radius:50%;
    position:fixed;
    pointer-events:none;     /* No interfiere con clicks */
    z-index:999;
    transition:transform .1s; /* Suaviza el movimiento */
}

/* ===== MEDIA QUERIES - DISEÑO RESPONSIVE ===== */
@media(max-width:768px){
    
    /* Navegación móvil */
    nav{
        position:absolute;
        top:100%;            /* Justo debajo del header */
        right:-100%;         /* Oculta fuera de la pantalla */
        flex-direction:column;
        background:#080a0f;
        width:240px;
        padding:2rem;
        transition:right .3s ease; /* Animación al aparecer/desaparecer */
        box-shadow:-2px 2px 10px rgba(0,0,0,.3);
    }
    
    nav.activo{
        right:0;             /* Muestra el menú */
    }
    
    nav a{
        margin:1rem 0;
    }
    
    #hamburguesa{
        display:block;       /* Muestra el botón hamburguesa en móvil */
    }
    
    /* Ajustes hero para móvil */
    .hero h1{
        font-size:2.4rem;
    }
    
    .hero-botones{
        flex-direction:column;
    }
    
    /* Ajustes padding para secciones en móvil */
    .hero, .servicios, .portafolio, .catalogo, .contacto{
        padding-left:4%;
        padding-right:4%;
    }
}