/* ===== RESET GLOBAL ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    transition: background-color .25s ease,
                color .25s ease,
                transform .25s ease,
                box-shadow .25s ease;
}

/* ===== VARIABLES ===== */
:root {
    --blanco: #ffffff;
    --rojo-rgb: 198, 40, 40;
    --negro: #111111;
    --gris-claro: #f4f4f4;
    --alto-header: 120px;
}

/* ===== SCROLL FIX ===== */
section,
.hero {
    scroll-margin-top: var(--alto-header);
}

/* ===== STICKY ===== */
.sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
}

/* ===== CONTENEDORES ===== */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: var(--negro);
}

.bg-light {
    background: var(--gris-claro);
}

.bg-dark {
    background: var(--negro);
    color: var(--blanco);
}

/* ===== TOP BAR ===== */
.top-bar {
    background: var(--negro);
    color: var(--blanco);
    font-size: 14px;
}

.top-container {
    max-width: 1200px;
    margin: auto;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left span {
    margin-right: 15px;
}

.ig-icon {
    font-size: 20px;
    color: white;
    text-decoration: none;
}

/* ===== HEADER ===== */
.header {
    background: rgba(var(--rojo-rgb), 0.95);
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* ===== LOGO ===== */
.logo{
    display:flex;
    align-items:center;
    gap:15px;        /* espacio entre rombos y texto */
    font-size:26px;
    font-weight:700;
}

/* LOGO CLICKEABLE */
.logo a {
    display: flex;
    align-items: center;
    gap:15px;        /* mantiene el espacio entre rombos y texto */
    color: var(--blanco);
    text-decoration: none;
}

.logo a:hover {
    color: var(--blanco); /* evita cambio de color o subrayado al pasar el mouse */
}

/* contenedor rombos */
.logo-icon{
    position:relative;
    display:flex;
    gap:6px;         /* espacio entre los rombos grandes */
}

/* rombos grandes */
.diamond{
    width:18px;
    height:18px;
    border:2px solid white;
    transform:rotate(45deg);
}

/* rombo rojo */
.red{
    position:absolute;
    width:12px;
    height:12px;
    background:#ff3b3b;
    transform:rotate(45deg);
    left:41px;
    top:3px;
}

/* texto del logo */
.logo-text{
    line-height:1;
    text-align:center;   /* centra PROYECTOS bajo JRUBEN */
}

/* PROYECTOS */
.logo-text small{
    font-size:12px;
    letter-spacing:2px;
    display:block;
    margin-top:-2px;    /* acerca PROYECTOS a JRUBEN */
}

/* ===== NAV ===== */
.nav a {
    color: var(--blanco);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 600;
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: white;
    transition: width .3s ease;
}

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

/* ===== NAV ===== */

.nav a {
    color: var(--blanco);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 600;
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: white;
    transition: width .3s ease;
}

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

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(
        135deg,
        rgba(var(--rojo-rgb), 0.95),
        rgba(var(--rojo-rgb), 0.80)
    );
    color: var(--blanco);
    padding: 30px 45px;
    text-align: center;
    max-width: 800px;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
    backdrop-filter: blur(6px);
    animation: fadeUp 1s ease forwards;
}

.hero-content h2 {
    font-size: clamp(28px, 4.5vw, 42px);
    margin-bottom: 15px;
    font-weight: 700;
}

.hero-content p {
    font-size: 16px;
    line-height: 1.5;
    opacity: .95;
}

/* ===== BOTÓN ===== */
.btn {
    display: inline-block;
    margin-top: 30px;
    padding: 16px 42px;
    background: var(--blanco);
    color: rgb(var(--rojo-rgb));
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    background: #f5f5f5;
}

/* ===== ANIMACIÓN ===== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SERVICIOS ===== */
.servicios {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

/* ===== TEXTO ===== */
.servicios-texto h2 {
    font-size: 34px;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: .3px;
}

.servicios-texto p {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

/* LISTA */
.servicios-texto ul {
    margin: 22px 0;
    padding-left: 0;
    list-style: none;
}

.servicios-texto li {
    margin-bottom: 10px;
    line-height: 1.6;
    position: relative;
    padding-left: 26px;
}

/* CHECK PROFESIONAL */
.servicios-texto li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;
    color: rgba(200, 0, 0, .85);
    font-size: 14px;
    font-weight: 700;
}

/* ===== SLIDER ===== */
.servicios-slider {
    width: 100%;
}

/* CONTENEDOR */
.slider {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
}

/* Overlay elegante */
.slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.25),
        rgba(0,0,0,0)
    );
    pointer-events: none;
    z-index: 2;
}

/* OCULTAR INPUTS */
.slider input {
    display: none;
}

/* SLIDES */
.slides {
    display: flex;
    height: 100%;
    transition: transform .6s ease-in-out;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ===== MOVIMIENTO CONTROLADO POR RADIOS ===== */
#s1:checked ~ .slides { transform: translateX(0%); }
#s2:checked ~ .slides { transform: translateX(-100%); }
#s3:checked ~ .slides { transform: translateX(-200%); }
#s4:checked ~ .slides { transform: translateX(-300%); }

/* ===== PUNTICOS ===== */
.dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.dots label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: all .3s ease;
}

/* ACTIVO */
#s1:checked ~ .dots label[for="s1"],
#s2:checked ~ .dots label[for="s2"],
#s3:checked ~ .dots label[for="s3"],
#s4:checked ~ .dots label[for="s4"] {
    background: #fff;
    transform: scale(1.25);
}

/* ===== PROCESO ===== */

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:50px;
}

/* TARJETAS */
.process-step{
    background:#fff;
    padding:35px 25px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:all .3s ease;
    position:relative;
}

/* EFECTO HOVER */
.process-step:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* NUMERO */
.step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:55px;
    height:55px;
    background:rgb(var(--rojo-rgb));
    color:var(--blanco);
    border-radius:50%;
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* TITULO */
.process-step h3{
    font-size:18px;
    margin-bottom:10px;
    font-weight:600;
}

/* TEXTO */
.process-step p{
    font-size:14px;
    color:#555;
    line-height:1.5;
}

/* ===== NOSOTROS ===== */

#nosotros{
    padding:100px 0;
    background:#fafafa;
}

/* TITULO */
#nosotros .section-title{
    text-align:center;
    margin-bottom:15px;
    font-size:36px;
    font-weight:700;
    letter-spacing:.5px;
    color:#222;
}

/* LINEA DECORATIVA */
#nosotros .section-title::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:rgb(var(--rojo-rgb));
    margin:14px auto 0;
    border-radius:4px;
}

/* CONTENEDOR DE FILAS */
.about-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
    margin-top:80px;
}

/* TEXTO */
.about-text{
    font-size:18px;
    line-height:1.9;
    color:#555;
    max-width:540px;
}

/* CONTENEDOR IMAGEN */
.about-image{
    display:flex;
    justify-content:center;
}

/* IMAGEN */
.about-image img{
    width:100%;
    max-width:460px;
    height:280px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    transition:all .35s ease;
}

/* EFECTO HOVER */
.about-image img:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 25px 60px rgba(0,0,0,.22);
}

/* FILA INVERTIDA */
.about-row.reverse .about-text{
    grid-column:1;
}

.about-row.reverse .about-image{
    grid-column:2;
}




/* ===== FOOTER ===== */
.footer {
    background: var(--negro);
    color: var(--blanco);
    text-align: center;
    padding: 20px;
}

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

.contacto-title{
    color:white;
    text-align:center;
}

.contacto-subtitle{
    text-align:center;
    color:#ddd;
    margin-top:10px;
    margin-bottom:50px;
    font-size:17px;
}

/* GRID CONTACTO */
.contacto-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    text-align:center;
}

/* ITEM */
.contacto-item{
    background:rgba(255,255,255,0.05);
    padding:40px 30px;
    border-radius:12px;
    transition:all .3s ease;
}

/* ICONO */
.contacto-item i{
    font-size:36px;
    color:rgb(var(--rojo-rgb));
    margin-bottom:15px;
}

/* TITULO */
.contacto-item h3{
    color:white;
    margin-bottom:8px;
}

/* TEXTO */
.contacto-item p{
    color:#ccc;
    font-size:16px;
}

/* EFECTO HOVER */
.contacto-item:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,0.08);
}



/* ===== BOTON WHATSAPP ===== */

.whatsapp-btn{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:white;
    font-size:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:999;
    transition:all .3s ease;
}

.whatsapp-btn:hover{
    transform:scale(1.1);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

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

/* OCULTAR MENU HAMBURGUESA EN PC */

.menu-toggle{
    display:none;
}


/* =========================================
   ========= TABLET (1024px) =========
========================================= */

@media (max-width:1024px){

/* HERO MÁS PEQUEÑO */

.hero{
    min-height:70vh;
}

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


/* SERVICIOS */

.servicios{
    grid-template-columns:1fr;
    gap:40px;
}


/* PROCESO */

.process-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}


/* NOSOTROS */

.about-row{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
}

.about-text{
    max-width:700px;
    margin:auto;
}

.about-text p{
    line-height:1.7;
}

.about-image{
    width:100%;
}

.about-image img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:8px;
}


/* CONTACTO */

.contacto-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}


/* SLIDER */

.slider{
    height:300px;
}

}


/* =========================================
   ========= MOBILE (768px) =========
========================================= */

@media (max-width:768px){

/* HEADER */

.header-content{
    position:relative;
}


/* MENU HAMBURGUESA */

.menu-toggle{
    display:block;
    font-size:28px;
    color:white;
    cursor:pointer;
}


/* NAV */

.nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:rgba(var(--rojo-rgb),0.97);

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

    max-height:0;
    overflow:hidden;

    transition:max-height .4s ease;
}


/* LINKS */

.nav a{
    margin:16px 0;
    font-size:16px;
}


/* MENU ACTIVO */

.nav.active{
    max-height:400px;
}


/* HERO MÁS COMPACTO */

.hero{
    min-height:60vh;
}

.hero-content{
    padding:24px;
}

.hero-content h2{
    font-size:26px;
}

.hero-content p{
    font-size:15px;
    line-height:1.6;
}


/* SERVICIOS */

.servicios{
    grid-template-columns:1fr;
    gap:30px;
}


/* PROCESO */

.process-grid{
    grid-template-columns:1fr;
    gap:25px;
}


/* CONTACTO */

.contacto-grid{
    grid-template-columns:1fr;
    gap:25px;
}


/* =========================
   NOSOTROS PROFESIONAL
========================= */

.about-row{
    display:flex;
    flex-direction:column;
    gap:25px;
    text-align:center;
}

/* imagen arriba en el bloque reverse */

.about-row.reverse{
    flex-direction:column;
}

.about-image{
    width:100%;
}

.about-image img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:8px;
}

/* TEXTO ORDENADO */

.about-text{
    max-width:600px;
    margin:auto;
}

.about-text p{
    line-height:1.7;
    margin-bottom:18px;
    font-size:15px;
}


/* SLIDER */

.slider{
    height:240px;
}


/* =========================
   TOP BAR EN UNA LINEA
========================= */

.top-container{
    display:flex;
    justify-content:center;
    align-items:center;
}

.top-left{
    display:flex;
    gap:18px;
    white-space:nowrap;
    font-size:13px;
}

}


/* =========================================
   ========= MOVILES PEQUEÑOS (480px) =========
========================================= */

@media (max-width:480px){

/* SECCIONES */

.section{
    padding:55px 0;
}


/* TITULOS */

.section-title{
    font-size:24px;
}


/* HERO */

.hero{
    min-height:55vh;
}

.hero-content{
    padding:20px;
}

.hero-content h2{
    font-size:22px;
}

.hero-content p{
    font-size:14px;
}


/* BOTON */

.btn{
    padding:13px 26px;
    font-size:14px;
}


/* PROCESO */

.process-step{
    padding:24px 18px;
}


/* NOSOTROS */

.about-image img{
    height:250px;
}

.about-text p{
    font-size:14px;
}


/* CONTACTO */

.contacto-item{
    padding:28px 20px;
}


/* TOP BAR */

.top-left{
    font-size:12px;
    gap:10px;
}

}