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

:root{

    --color-primario:#C62828;              /* Rojo corporativo principal */

    --color-secundario:#2A1E17;            /* Marrón oscuro para header y footer */

    --color-fondo:#F8F8F8;                 /* Color de fondo de la web */

    --color-blanco:#FFFFFF;                /* Blanco */

    --color-texto:#333333;                 /* Color principal del texto */

    --color-gris:#777777;                  /* Color para textos secundarios */

    --color-borde:#E5E5E5;                 /* Color de los bordes */

    --sombra:0 8px 20px rgba(0,0,0,.10);   /* Sombra general */

    --radio:12px;                          /* Bordes redondeados */

    --ancho:1200px;                        /* Ancho máximo del contenido */

    --transicion:.30s ease;                /* Velocidad de las animaciones */

}


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

*{

    margin:0;                                   /* Elimina el margen por defecto del navegador */

    padding:0;                                  /* Elimina el relleno por defecto */

    box-sizing:border-box;                      /* Hace que el padding y el borde no aumenten el tamaño del elemento */

}


/* ==================================================
   BODY
================================================== */

body{

    font-family:'Montserrat',sans-serif;        /* Fuente principal de toda la web */

    font-size:14px;                             /* Tamaño base del texto */

    font-weight:400;                            /* Grosor normal */

    color:var(--color-texto);                   /* Color principal del texto */

    background:var(--color-fondo);              /* Color de fondo de la web */

    line-height:1.6;                            /* Espaciado entre líneas */

    min-height:100vh;                           /* Altura mínima igual a la ventana */

}


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

.contenedor{

    width:100%;                              /* Ocupa todo el ancho disponible */

    max-width:var(--ancho);                  /* Ancho máximo definido en las variables */

    margin:0 auto;                           /* Centra el contenedor horizontalmente */

    padding:0 20px;                          /* Espacio interior a izquierda y derecha */

}


/* ==================================================
   ENLACES
================================================== */

a{

    text-decoration:none;                      /* Elimina el subrayado de los enlaces */

    color:inherit;                             /* Hereda el color del elemento padre */

    transition:var(--transicion);              /* Aplica una transición suave */

}


/* ==================================================
   IMÁGENES
================================================== */

img{

    display:block;                             /* Elimina el pequeño espacio que aparece debajo de las imágenes */

    max-width:100%;                            /* La imagen nunca será más grande que su contenedor */

    height:auto;                               /* Mantiene la proporción original de la imagen */

}


/* ==================================================
   LISTAS
================================================== */

ul{

    list-style:none;                           /* Elimina los puntos de las listas */

}

ol{

    list-style:none;                           /* Elimina la numeración de las listas */

}


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

.btn{

    display:inline-block;                      /* Permite aplicar ancho, alto y márgenes */

    padding:14px 30px;                         /* Espacio interior del botón */

    background:var(--color-primario);          /* Color principal del botón */

    color:var(--color-blanco);                 /* Color del texto */

    border:none;                               /* Elimina el borde por defecto */

    border-radius:var(--radio);                /* Bordes redondeados */

    font-size:14px;                            /* Tamaño del texto */

    font-weight:600;                           /* Texto seminegrita */

    cursor:pointer;                            /* Cambia el cursor a una mano */

    transition:var(--transicion);              /* Animación suave */

}


.btn:hover{

    background:#a51f1f;                        /* Rojo más oscuro al pasar el ratón */

    transform:translateY(-3px);                /* Eleva ligeramente el botón */

}


/* ==================================================
   TIPOGRAFÍA
================================================== */

h1{

    font-size:48px;                            /* Tamaño del título principal */

    font-weight:700;                           /* Texto en negrita */

    color:var(--color-texto);                  /* Color principal del título */

    line-height:1.2;                           /* Espaciado entre líneas */

}

h2{

    font-size:36px;                            /* Tamaño de los subtítulos */

    font-weight:700;                           /* Texto en negrita */

    color:var(--color-texto);                  /* Color principal del subtítulo */

    line-height:1.3;                           /* Espaciado entre líneas */

}

h3{

    font-size:24px;                            /* Tamaño de los títulos pequeños */

    font-weight:600;                           /* Texto seminegrita */

    color:var(--color-texto);                  /* Color principal */

}

p{

    margin-bottom:20px;                        /* Espacio inferior entre párrafos */

}

/* ==================================================
   SELECCIÓN DE TEXTO
================================================== */

::selection{

    background:var(--color-primario);          /* Fondo rojo al seleccionar texto */

    color:var(--color-blanco);                 /* Texto blanco */

}


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

.header{

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    background: var(--color-blanco);

    box-shadow: 0 2px 15px rgba(0,0,0,.08);

    z-index: 1000;

}


/* ==================================================
   HEADER - CONTENEDOR
================================================== */

.header-contenedor{

    display:flex;                              /* Coloca todos los elementos en una fila */

    justify-content:space-between;             /* Reparte el espacio */

    align-items:center;                        /* Centra verticalmente */

    min-height:75px;                           /* Altura del header */

}


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

.logo img{

    width:200px;                               /* Ancho del logo */

    height:auto;                               /* Mantiene la proporción */

    display:block;                             /* Evita espacios inferiores */

    transition:var(--transicion);              /* Animación */

}

.logo img:hover{

    transform:scale(1.03);                     /* Ligero aumento */

}


/* ==================================================
   MENÚ PRINCIPAL
================================================== */

.menu > ul{

    display:flex;

    align-items:center;

    gap:30px;

}


/* ==================================================
   MENÚ PRINCIPAL - ENLACES
================================================== */

.menu ul li{

    position:relative;                         /* Referencia para el submenú */

}

.menu ul li a{

    color:var(--color-texto);                  /* Color del texto */

    font-size:14px;                            /* Tamaño de la letra */

    font-weight:600;                           /* Seminegrita */

    transition:var(--transicion);              /* Animación */

}

.menu ul li a:hover{

    color:var(--color-primario);               /* Color rojo */

}


/* ==================================================
   EFECTO DEL MENÚ
================================================== */

.menu > ul > li > a{

    position:relative;

}

.menu > ul > li > a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primario);

    transform:translateX(-50%);

    transition:var(--transicion);

}

.menu > ul > li > a:hover::after{

    width:100%;

}


/* ==================================================
   SUBMENÚ
================================================== */

.dropdown{

    position:relative;

}

.submenu{

    display:block;

    position:absolute;

    top:100%;

    left:0;

    min-width:320px;

    background:var(--color-blanco);

    border-radius:var(--radio);

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    padding:0;

    overflow:hidden;

    z-index:1000;

}


/* ==================================================
   SUBMENÚ - ELEMENTOS
================================================== */

.submenu li{

    width:100%;

}

.submenu li a{

    display:block;

    padding:12px 20px;

    color:#444;

    font-size:14px;

    font-weight:400 !important;

    line-height:1.1;

}

.submenu li a:hover{

    background:#f5f5f5;

    color:var(--color-primario);

}


/* ==================================================
   MOSTRAR SUBMENÚ
================================================== */


.submenu{

    visibility:hidden;                  /* Lo oculta */

    opacity:0;                          /* Lo hace transparente */

    pointer-events:none;                /* No permite hacer clic */

    transition:.25s ease;

}

.dropdown:hover .submenu{

    visibility:visible;                 /* Lo muestra */

    opacity:1;

    pointer-events:auto;

}

/* ==================================================
   REDES SOCIALES
================================================== */

.header-social{

    display:flex;

    align-items:center;

    gap:20px;

    padding:0 15px;

    border-left:1px solid #ececec;

}

.header-social a{

    color:#333;

    font-size:22px;

    transition:var(--transicion);

}

.header-social a:hover{

    color:var(--color-primario);

    transform:translateY(-3px);

}

/* ==================================================
   BOTÓN DEL HEADER
================================================== */

/* ==================================================
   BOTÓN DEL HEADER
================================================== */

.header .btn{

    padding:10px 22px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    border:none;

    box-shadow:none;

    transition:.35s ease;

}

.header .btn:hover{

    background:#B71C1C;

}

/*==================================================
=        PANEL REDES + BOTÓN HEADER               =
==================================================*/

.header-derecha{

    display:flex;

    align-items:center;

    gap:0;

    background:#ffffff;

    border:1px solid #444444;

    border-radius:50px;

    overflow:hidden;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08),
        0 0 0 1px rgba(255,255,255,.35) inset;

    transition:.35s ease;

}

.header-derecha:hover{

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

    box-shadow:
        0 0 10px rgba(198,40,40,.18),
        0 10px 24px rgba(198,40,40,.16);

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

@media(max-width:900px){

    .menu{

        display:none;

    }

    .header-social{

        display:none;

    }

    .btn{

        display:none;

    }

}

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

.hero{

    min-height:90vh;                                  /* Altura del Hero */

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    ),
    url("../img/hero/hero-rjl.png");                  /* Imagen del Hero */

    background-size:cover;                            /* La imagen cubre todo el Hero */

    background-position:center;                       /* Centra la imagen */

    background-repeat:no-repeat;                      /* Evita que se repita */

    display:flex;                                     /* Activa Flexbox */

    justify-content:center;                           /* Centra horizontalmente */

    align-items:center;                               /* Centra verticalmente */

    text-align:center;                                /* Centra el texto */

    color:#ffffff;                                   /* Color del texto */

    width:100%;                                       /* Ocupa todo el ancho */

    margin:0;

    max-width:none;

    position:relative;                                /* Necesario para los efectos */

    overflow:hidden;                                  /* Oculta el destello fuera del Hero */

    border-radius:0 0 30px 30px;                      /* Bordes inferiores redondeados */

    box-shadow:
    0 20px 50px rgba(0,0,0,.20);                      /* Sombra */

    transition:.4s ease;                              /* Transición suave */

}

/* ==================================================
   DESTELLO SUAVE
================================================== */

.hero::before{

    content:"";

    position:absolute;

    top:0;
    left:-300px;

    width:120px;
    height:100%;

    background:linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,.03) 30%,
        rgba(255,255,255,.11) 50%,
        rgba(255,255,255,.03) 70%,
        transparent 100%
    );

    filter:blur(12px);

    transform:skewX(-25deg);

    animation:destelloHero 30s linear infinite;

    pointer-events:none;

}


/* ==================================================
   OVERLAY
================================================== */

.hero-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.15);

    z-index:1;

}


/* ==================================================
   EFECTO AL PASAR EL RATÓN
================================================== */

.hero:hover{
    box-shadow:
        0 30px 65px rgba(0,0,0,.24);
}


/* ==================================================
   CONTENIDO DEL HERO
================================================== */

.hero-contenido{

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    margin:0 auto;              /* Centra el bloque */

    padding:20px;

    text-align:center;          /* Centra todo el texto */

}


/* ==================================================
   SUBTÍTULO
================================================== */

.hero-subtitulo{

    display:inline-block;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    padding:10px 18px;

    border-radius:50px;

    margin-bottom:25px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.25);

    border:1px solid rgba(255,255,255,.15);

    transition:.3s ease;

}

.hero-subtitulo:hover{

    background:rgba(255,255,255,.22);

    box-shadow:
    0 12px 30px rgba(0,0,0,.35);

    border-color:
    rgba(255,255,255,.35);

}


/* ==================================================
   TÍTULO PRINCIPAL DEL HERO
================================================== */

.hero h1{

    font-size:3.1rem;                          /* Tamaño del título */

    font-weight:800;                           /* Negrita */

    line-height:1.1;                           /* Espaciado entre líneas */

    margin-bottom:30px;                        /* Separación con el párrafo */

    background:linear-gradient(

        to bottom,

        #ffffff 0%,

        #f5f7fa 45%,

        #e5e7eb 100%

    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    text-shadow:
        0 3px 8px rgba(0,0,0,.25),
        0 8px 20px rgba(0,0,0,.20);

}

/* ==================================================
   PÁRRAFO
================================================== */

.hero p{

    font-size:1.2rem;

    max-width:800px;

    margin:auto;

    margin-bottom:35px;

    line-height:1.7;

}


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

.hero-botones{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


/* ==================================================
   BOTÓN PRINCIPAL
================================================== */

.btn-principal{

    display:inline-block;

    background:var(--color-primario);

    color:#ffffff;

    text-decoration:none;

    padding:15px 35px;

    border-radius:10px;

    font-size:1rem;

    font-weight:700;

    box-shadow:0 10px 25px rgba(198,40,40,.35);

    transition:.30s ease;

}

.btn-principal:hover{

    background:#a51f1f;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(198,40,40,.45);

}


.btn-secundario{

    display:inline-block;

    border:2px solid #ffffff;

    color:#ffffff;

    padding:15px 35px;

    border-radius:10px;

    font-size:1rem;

    font-weight:700;

    transition:.30s ease;

}

.btn-secundario:hover{

    background:#ffffff;

    color:#222222;

}

/* ==================================================
   ANIMACIÓN DEL DESTELLO
================================================== */

@keyframes destelloHero{

    0%{

        left:-150px;

    }

    100%{

        left:110%;

    }

}





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

.servicios{

    background:#ffffff;

    width:85%;

    max-width:1200px;

    margin:80px auto;

    padding:80px 40px;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.40s ease;

}

.servicios:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.18);

}


/* ==================================================
   TÍTULO DE LA SECCIÓN
================================================== */

.titulo-seccion{

    text-align:center;                         /* Centra todo el contenido */

    max-width:800px;                           /* Ancho máximo */

    margin:0 auto 70px;                        /* Centra y separa de las tarjetas */

}


/* ==================================================
   SUBTÍTULO ROJO
================================================== */

.subtitulo-seccion{

    display:block;                             /* Ocupa una línea completa */

    color:var(--color-primario);               /* Rojo corporativo */

    font-size:3.5rem;                          /* Título principal */

    font-weight:800;                           /* Negrita */

    line-height:1.1;                           /* Espaciado entre líneas */

    letter-spacing:1px;                        /* Ligera separación */

    text-transform:uppercase;                  /* Todo en mayúsculas */

    margin:0;                                 /* Elimina márgenes */

}


/* ==================================================
   TÍTULO NEGRO
================================================== */

.titulo-seccion h2{

    font-size:1.9rem;                          /* Más pequeño que el rojo */

    font-weight:600;                           /* Seminegrita */

    color:var(--color-texto);                  /* Negro corporativo */

    line-height:1.2;                           /* Espaciado entre líneas */

    margin:8px 0 0 0;                          /* Muy poca separación con el rojo */

}

/* ==================================================
   CUADRÍCULA DE SERVICIOS
================================================== */

.servicios-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(100%, 280px),1fr));

    gap:30px;

}


/* ==================================================
   TARJETAS
================================================== */

.servicio-card{

    background:#ffffff;

    padding:35px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    border-left:6px solid #d9d9d9;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

}

.servicio-card:hover{

    transform:translateY(-15px);

    border-left:6px solid var(--color-primario);

    box-shadow:
    0 20px 40px rgba(0,0,0,.15),
    0 10px 20px rgba(198,40,40,.15);

}


/* ==================================================
   ICONOS
================================================== */

.servicio-card i{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:#f5f5f5;

    color:var(--color-primario);

    font-size:38px;

    transition:.30s ease;

}

.servicio-card:hover i{

    background:var(--color-primario);

    color:#ffffff;

    transform:scale(1.10);

}


/* ==================================================
   TÍTULO DE LA TARJETA
================================================== */

.servicio-card h3{

    margin-bottom:15px;

    color:var(--color-primario);

}


/* ==================================================
   ¿POR QUÉ ELEGIRNOS?
================================================== */

.ventajas{

    background:var(--color-fondo);                 /* Fondo de la sección */

    width:85%;                                     /* Ancho de la sección */

    max-width:1200px;                              /* Ancho máximo */

    margin:80px auto;                              /* Centra la sección */

    padding:70px 35px;                             /* Espaciado interior */

    border-radius:30px;                            /* Bordes redondeados */

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);                   /* Sombra suave */

}


/* ==================================================
   CUADRÍCULA DE VENTAJAS
================================================== */

.ventajas-grid{

    display:grid;

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

    gap:16px;

}

/* ==================================================
   TARJETAS
================================================== */

.ventaja-card{

    background:#ffffff;                            /* Fondo blanco */

    padding:18px 15px;                             /* Menos espacio interior */

    min-height:105px;                              /* Más bajas */

    border-radius:12px;                            /* Bordes */

    display:flex;                                  /* Flexbox */

    justify-content:center;                        /* Centrado vertical */

    align-items:center;                            /* Centrado horizontal */

    box-shadow:
    0 6px 18px rgba(0,0,0,.08);

    transition:
    transform .30s ease,
    box-shadow .30s ease;

}


/* ==================================================
   EFECTO HOVER
================================================== */

.ventaja-card:hover{

    transform:translateY(-5px);                    /* Eleva la tarjeta */

    box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 0 18px rgba(198,40,40,.15);

}


/* ==================================================
   TEXTO DE LA TARJETA
================================================== */

.ventaja-card span{

    display:block;

    font-size:.87rem;              /* Antes 1rem */

    font-weight:600;

    line-height:1.45;

    color:var(--color-texto);

    text-align:center;

}


/* ==================================================
   ICONO CHECK
================================================== */

.ventaja-card i{

    font-size:14px;                                /* Tamaño del check */

    color:var(--color-texto);                      /* Check negro */

    margin-top:4px;                                /* Alinea el check con el texto */

    flex-shrink:0;                                 /* Evita que el icono se reduzca */

}


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

.cta{

    background:linear-gradient(135deg,#d62828,#b71c1c); /* Degradado rojo */

    width:100%;                                         /* Ocupa todo el ancho */

    padding:100px 20px;                                /* Espaciado superior e inferior */

    text-align:center;                                 /* Centra todo el contenido */

}


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

.cta .contenedor{

    max-width:900px;                                   /* Ancho máximo */

    margin:0 auto;                                     /* Centrado */

}


/* ==================================================
   TÍTULO CTA
================================================== */

.cta h2{

    font-size:2.4rem;                  /* Tamaño del título */

    font-weight:800;                   /* Negrita */

    color:#ffffff;                     /* Blanco */

    line-height:1.2;                   /* Espaciado */

    margin:0 auto 20px;                /* Centrado */

    max-width:800px;                   /* Mantiene un buen ancho */

}


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

.cta p{

    font-size:1.0rem;                                 /* Tamaño del texto */

    color:rgba(255,255,255,.95);                       /* Blanco suave */

    margin-bottom:45px;                                /* Separación con el botón */

    line-height:1.6;                                   /* Espaciado */

}


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

.btn-cta{

    display:inline-block;                          /* Botón en línea */

    background:#ffffff;                            /* Fondo blanco */

    color:var(--color-primario);                   /* Texto rojo */

    font-size:1rem;                                /* Texto más pequeño */

    font-weight:700;                               /* Negrita */

    text-decoration:none;                          /* Sin subrayado */

    padding:15px 34px;                             /* Botón más compacto */

    border-radius:10px;                            /* Bordes redondeados */

    transition:
    transform .30s ease,
    background .30s ease,
    color .30s ease,
    box-shadow .30s ease;

    box-shadow:
    0 8px 22px rgba(0,0,0,.18);                    /* Sombra */

}

/* ==================================================
   EFECTO HOVER BOTÓN
================================================== */

.btn-cta:hover{

    background:#222222;                            /* Fondo oscuro */

    color:#ffffff;                                 /* Texto blanco */

    transform:translateY(-3px);                    /* Eleva ligeramente */

    box-shadow:
    0 15px 30px rgba(0,0,0,.28);

}

/* ==================================================
   AJUSTES GLOBALES DE INTEGRACIÓN
================================================== */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-principal:focus-visible,
.btn-secundario:focus-visible,
.btn-cta:focus-visible {
    outline: 3px solid rgba(198, 40, 40, 0.35);
    outline-offset: 4px;
}

.menu > ul > li > a {
    display: inline-block;
}

.dropdown:focus-within .submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.submenu a:focus-visible {
    outline-offset: -3px;
}

@media (max-width: 900px) {
    body {
        padding-top: 0;
    }

.header-contenedor {
    justify-content: space-between;
}

    .logo img {
        width: min(190px, 72vw);
    }

    .hero {
        min-height: calc(100vh - 75px);
        border-radius: 0 0 20px 20px;
    }

    .servicios,
    .ventajas {
        width: calc(100% - 32px);
        padding-inline: 24px;
    }

    .ventajas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .hero h1 {
        font-size: 2.35rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .subtitulo-seccion {
        font-size: 2.3rem;
    }

    .servicios,
    .ventajas {
        margin-block: 45px;
        padding: 55px 18px;
        border-radius: 20px;
    }

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

    .cta {
        padding: 75px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .header-social a:hover,
    .logo img:hover,
    .servicios:hover,
    .servicio-card:hover,
    .ventaja-card:hover,
    .btn-principal:hover,
    .btn-cta:hover {
        transform: none !important;
    }
}


/*==================================================
        BOTÓN MENÚ HAMBURGUESA
==================================================*/

.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:32px;

    color:#2A1E17;

    cursor:pointer;

}

@media (max-width:900px){

    .menu-toggle{

        display:block;

    }

}