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

  VARIABLES DE COLOR COORPORATIVO

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

:root {

  /* Colores principales */

  --rojo: #b30000;          /* Rojo corporativo principal */

   --rojo2: #ff1a1a;          /* Rojo corporativo principal 2 */

  --rojo-oscuro: #7a0000;   /* Rojo profundo para fondos y botones */

  --rojo-premium: #890505;  /* Rojo elegante para detalles */



  /* Variantes para hover */

  --rojo-hover-claro: #a80202;  /* Hover más brillante, recomendado */

  --rojo-hover-intenso: #af0606;/* Hover intenso, alternativo */

  --rojo-hover-profundo: #b50c0c;/* Hover profundo, más sobrio */



  /* Neutros */

  --negro: #111;            /* Negro corporativo */

  --gris-oscuro: #252525;      /* Gris para párrafos */

  --gris-claro1: rgba(139, 138, 138, 0.16);

  --gris-claro: rgba(255,255,255,0.92);    /* blanco casi sólido para contraste AA */

  --blanco: #fff;            /* Blanco base */



  /* MENSAJE DE EXITO */

  --fondo-verdeclaro: #d4edda;

  --letra-verdeoscura: #155724;



  /* MENSAJE DE EXITO */

  --fondo-verdeclaro: #d4edda;

  --letra-verdeoscura: #155724;



}



* {

    box-sizing: border-box;

}



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

   TIPOGRAFÍA Y ESTILOS BASE

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

* {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: 'Poppins', sans-serif;

    color: #333;

    background: #fff;

}


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

   BOTONES CORPORATIVOS UNIFICADOS

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

.btn {

  display: inline-block;

  padding: 14px 34px;              /* padding uniforme */

  border-radius: 10px;             /* radios consistentes */

  font-weight: 600;

  font-size: 16px;

  text-decoration: none;

  cursor: pointer;

  transition: all 0.3s ease;

  text-align: center;

}



/* Variante principal (rojo corporativo) */

.btn-primary {

  background: var(--rojo-premium);

  color: var(--blanco);

  border: none;

}

.btn-primary:hover {

  background: var(--rojo-hover-intenso);

  transform: translateY(-3px);

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

}



/* Variante contorno (outline blanco sobre fondo oscuro) */

.btn-outline {

  background: transparent;

  border: 2px solid var(--blanco);

  color: var(--blanco);

}

.btn-outline:hover {

  background: var(--blanco);

  color: var(--rojo-oscuro);

}



/* Variante secundaria (gris claro) */

.btn-secondary {

  background: var(--blanco);

  color: var(--negro);

  border: none;

}

.btn-secondary:hover {

  background: var(--rojo-premium);

  color: var(--blanco);

}



/* Botón especial para formularios */

.btn-form {

  background: var(--rojo-oscuro);

  color: var(--blanco);

  border: none;

}

.btn-form:hover {

  background: var(--rojo-hover-claro);

  transform: translateY(-3px);

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

}



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

   BOTONES RESPONSIVE

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



/* Tablets (≤900px) */

@media (max-width: 900px) {

  .btn {

    padding: 12px 28px;

    font-size: 15px;

  }

}



/* Móviles (≤600px) */

@media (max-width: 600px) {

  .btn {

    display: block;

    width: 100%;

    max-width: 280px;

    margin: 0 auto 15px;

    padding: 12px;

    font-size: 14px;

  }

}



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

   TIPOGRAFÍA BASE PARA PÁRRAFOS

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

p,

.faq-respuesta,

.descripcion-nosotros,

.caso-descripcion,

.servicio-descripcion {

    font-weight: 300;       /* más ligero que normal */

    color: var(--gris-oscuro);

    line-height: 1.6;       /* mejor legibilidad */

}





p,

.caso-descripcion{

    font-size: 17px;           /* tamaño cómodo */

    margin-bottom: 30px;

    text-align: justify;        /* estilo corporativo */

    padding-left: 4px;

    padding-right: 4px;

}



/* Texto destacado dentro de párrafos */

p strong,

.faq-respuesta strong,

.descripcion-nosotros strong,

.caso-descripcion strong,

.servicio-descripcion strong {

  font-weight: 600;        /* semi-bold más notorio */

  color: var(--negro);

  text-align:justify ;

}



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

   PÁRRAFOS EN COLOR BLANCO (USO EN FONDOS OSCUROS)

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

p.texto-blanco,

.descripcion-nosotros.texto-blanco,

.caso-descripcion.texto-blanco,

.servicio-descripcion.texto-blanco,

.faq-respuesta.texto-blanco {

    font-weight: 300;       /* tipografía ligera */

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

    line-height: 1.6;

}



/* Texto destacado dentro de párrafos blancos */

p.texto-blanco strong,

.descripcion-nosotros.texto-blanco strong,

.caso-descripcion.texto-blanco strong,

.servicio-descripcion.texto-blanco strong,

.faq-respuesta.texto-blanco strong {

    font-weight: 600;       /* semi-bold */

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

}



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

   PÁRRAFOS GRANDES (DESTACADOS)

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

/*p.texto-grande {

    font-weight: 300;       /* tipografía ligera 

    font-size: 132px;        /* más grande que el estándar 

    line-height: 1.7;       /* más aire entre líneas 

    color: var(--gris-oscuro);

}*/



/* Variante en fondo oscuro 

p.texto-grande.texto-blanco {

    color: var(--blanco);

}*/



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

   HEADER (TRANSPARENTE + CAMBIO AL SCROLL)

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

header {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    min-height: 80px;

    padding: 35px 25px;

    background: transparent;

    color: var(--blanco);

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    transition: 0.35s ease;

}



/* HEADER AL HACER SCROLL */

header.scrolled {

    background: var(--blanco);

    color: var(--negro);

    box-shadow: 0 2px 10px rgba(0,0,0,0.15);

}



header.scrolled nav a:hover {

    color: var(--rojo-premium);

}



/* LOGOS */

.logo {

    height: 60px;

    position: absolute;

    left: 15px; 

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    display: flex;

    align-items: center; 

    padding-left: 20px;

}



.logo-blanco { opacity: 1; }

.logo-rojo { opacity: 0; }



header.scrolled .logo-blanco { opacity: 0; }

header.scrolled .logo-rojo { opacity: 1; }



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

   NAV MENÚ DESKTOP PRINCIPAL

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

header nav {

    display: flex;

    gap: 20px;

}



header nav a {  

    color: var(--blanco);

    text-decoration: none;

    font-size: 17px;

    padding: 6px 12px;

    border-radius: 6px;

    transition: all 0.3s ease;

}



header nav a:hover {

    background: var(--rojo-premium);

    color: var(--blanco);

}





/* Hover en modo scrolled */

header.scrolled nav a:hover {

    background: var(--rojo-premium);

    color: var(--blanco);

}



/* Estado activo del menú */

header nav a.active {

    background: var(--rojo-premium);   /* fondo rojo */

    color: var(--blanco) ;              /* letras blancas */

    padding: 6px 12px;                 /* espacio interno tipo botón */

    border-radius: 6px;                /* bordes suaves */

    position: relative;

}



/* Línea gruesa debajo del enlace activo */

header nav a.active::after {

    content: "";

    position: absolute;

    bottom: -6px;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    height: 4px;

    background: var(--rojo-premium);

    border-radius: 2px;

    margin: auto;

}



header.scrolled .nav-desktop a {

    color: var(--negro);   /* letras blancas */;

}



/* Enlace activo en modo scrolled */

header.scrolled .nav-desktop a.active {

    background: var(--rojo-premium);

    color: var(--blanco);

}

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

   HEADER MENU RESOPONSIVE 

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



@media (max-width: 1100px) {

    header {

        padding: 20px 25px;

    }

    .logo {

        height: 52px;

    }

}



@media (max-width: 900px) {

    .nav-desktop {

        display: none;

    }

    .menu-btn {

        display: flex;

    }

    .logo {

        height: 46px;

        left: 15px;

    }

}



@media (max-width: 600px) {

    .logo {

        height: 40px;

    }

}



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

   NUEVO MENÚ HAMBURGUESA

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



/* Botón */

.menu-btn {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

    border: none;

    background: transparent; /* limpio, sin fondo */

    position: absolute;

    right: 25px;

    z-index: 3000;

    padding: 6px; /* espacio interno para foco */

}



.menu-btn span {

    width: 28px;

    height: 3px;

    background: var(--blanco); /* color normal */

    box-shadow: 0 1px 2px rgba(0,0,0,0.25); /* sutil relieve corporativo */

    border-radius: 3px;

    transition: 0.3s ease;  

}



/* Líneas negras cuando el header está scrolleado */

header.scrolled .menu-btn span {

    background: var(--rojo-premium) ; /* contraste corporativo */

}



/* Líneas ROJAS cuando el menú está abierto */

.menu-btn.active span {

    background: var(--rojo-premium) !important;

}



/* Panel del menú móvil */

.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 30%;

    max-width: 320px;

    height: 100vh;

    background: var(--negro);

    box-shadow: -2px 0 10px rgba(0,0,0,0.15);

    display: none;

    flex-direction: column;

    padding: 120px 20px;

    gap: 25px;

    transition: 0.35s ease;

    z-index: 2000;

}



.mobile-menu a {

    color: var(--blanco);

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition: color 0.3s ease;

}





.mobile-menu.open {

    right: 0;

}



/* MENÚ HAMBURGUESA — Ajuste responsive */

@media (max-width: 1024px) {

    .mobile-menu {

        display: flex;

        width: 70%;   /* sidebar cómodo en tablets */

        max-width: 320px;

        padding: 100px 20px;

    }

}



@media (max-width: 768px) {

    .mobile-menu {

        display: flex;

        width: 80%;   /* sidebar más compacto en móviles */

        max-width: 280px;

        padding: 80px 15px;

    }

    .mobile-menu a {

        font-size: 14px;

    }

}



@media (max-width: 480px) {

    .menu-btn span {

        width: 24px; /* líneas más pequeñas */

    }

    .mobile-menu {

        width: 85%;   /* sidebar angosto pero legible en móviles muy pequeños */

        max-width: 260px;

        padding: 70px 12px;

        gap: 20px;

    }

    .mobile-menu a {

        font-size: 13px;

    }

}



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

   HERO FULLSCREEN

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

.hero {

    position: relative;

    width: 100%;

    height: 100vh;

    background-image: url("../IMAGENES/BannerIndex/GIF/PORTADA_HR.gif"); /* Banner principal index */

    background-size: cover;

    background-position: center;

    display: flex;

    justify-content: left;  /* Alineación de título */

    align-items: center;    /* Alineación de título */

    text-align: left;       /* Alineación de título */

    color: var(--blanco);

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.40);

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    padding: 0 20px;

}



.hero h1 {

    font-size: 38px;

    font-weight: 700;

    margin-bottom: 10px;

    padding-left: 20px;

    /* -webkit-text-stroke: 2px var(--negro); */

}



.hero p {

    font-size: 18px;

    margin-bottom: 20px;

    padding-left: 20px;

}



/* BOTONES HERO */

.hero-buttons {

    display: flex;

    justify-content: left;

    gap: 20px;

    margin-top: 25px;

    padding-left: 20px;

}



/* HERO — Ajuste responsive */

.hero-content {

    max-width: 650px;

}



@media (max-width: 900px) {

    .hero {

        height: 85vh;

        padding: 0 30px;

    }

}



@media (max-width: 600px) {

    .hero {

        height: 75vh;

        padding: 0 20px;

    }

    .hero h1 {

        font-size: 26px;

    }

    .hero p {

        font-size: 15px;

    }

}



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

   FOOTER CORPORATIVO

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

.footer {

    background: var(--negro);

    color: var(--blanco); 

    padding: 70px 20px 25px;

    margin-top: 60px;

    font-family: 'Segoe UI';

}



.footer-container {

    max-width: 1320px;

    margin: auto;

    display: grid;

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

    gap: 70px;

    align-items: flex-start;

}



/*REDES SOCIALES EL ESTILO ES EL MISMO QUE COLUMNA 1 Y 3 */

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

    COLUMNA 1 - ENLACES Y REDES SOCIALES

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

.footer-col h3 {

    color: var(--blanco);

    font-size: 20px;

    margin-bottom: 18px;

    font-weight: 700;

    border-left: 4px solid var(--rojo); /* rojo corporativo */

    padding-left: 12px;

}

/* Listas unificadas del footer */

.social-links {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.social-links li {

    border-bottom: 1px solid rgba(255,255,255,0.1);

    padding-bottom: 8px;

}



.social-links li a {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--blanco);

    text-decoration: none;

    font-size: 15px;

    transition: 0.3s ease;

    padding: 6px 8px;

    border-radius: 6px;

}



.social-links li a i {

    font-size: 16px;

    color: var(--rojo);

}



.social-links li a:hover {

    color: var(--blanco);

    text-shadow: 0 0 6px rgba(168,2,2,0.6);

    transform: translateX(5px);

    background: var(--gris-oscuro);

}



.social-links li a:hover i {

    color: var(--blanco);

}



/* Variante horizontal para redes sociales */

.social-links.redes {

    flex-direction: row;

    justify-content: center;

    gap: 15px;

}



.social-links.redes li {

    border: none;

    padding: 0;

}



.social-links.redes li a {

    background: var(--gris-oscuro);

    padding: 10px 14px;

}



.social-links.redes li a:hover {

    background: var(--rojo-hover-claro);

    transform: translateY(-2px);

}





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

   COLUMNA 2 — INFORMACIÓN CORPORATIVA (SIN HOVER)

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

.footer-logo {

    width: 220px;

    display: block;

    margin: 0 auto 25px auto; /*ESPACIO DE FORMA VERTICAL*/

}



.footer-slogan {

    font-size: 22px ;

    font-weight: 700;

    color: var(--rojo2) !important; /* rojo corporativo vivo */

    text-align: center;

    margin-bottom: 18px;

    text-transform: uppercase;

    letter-spacing: 2px;

}



.footer-col:nth-child(2) p,

.footer-col:nth-child(2) .texto-blanco {

    color: var(--blanco); /* párrafo siempre gris/blanco */

    transition: none !important;

    transform: none !important;

    text-shadow: none !important;

}



/* Botón Brochure */

.footer-brochure {

    text-align: center;

    margin-top: 25px;

    margin-bottom: 10px;

}



.footer-brochure a {

    display: inline-block;

    background: var(--rojo-oscuro); /* base sobria */

    color: var(--blanco);

    padding: 12px 22px;

    border-radius: 6px;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;

}



.footer-brochure a i {

    margin-right: 8px;

    font-size: 17px;

}



.footer-brochure a:hover {

    background: var(--rojo-hover-claro); /* hover más brillante */

    box-shadow: 0 0 10px rgba(122,0,0,0.6);

    transform: scale(1.05);

}



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

   COLUMNA 3 — CONTACTO Y REDES SOCIALES

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

 /*SEPARA AL CONTENEDOR DONDE ESTA CONTACTO MAS A LA DERECHA*/

.footer-container .footer-col:nth-child(3) {

    padding-left: 90px;

}



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

   COLUMNA 3 — LIBRO DE RECLAMACIONES

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

.footer-libro {

    text-align: center;

    margin-top: 25px;

}



.footer-libro img {

    width: 100px;

    transition: 0.3s ease;

    cursor: pointer;

    border-radius: 6px;

}



.footer-libro img:hover {

    transform: scale(1.05);

    filter: drop-shadow(0 0 8px rgba(168,2,2,0.6));

    transform: scale(1.05);

}



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

   FOOTER — Responsive

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



/* Tablets (pantallas medianas) */

@media (max-width: 900px) {

    .footer-container {

        grid-template-columns: repeat(2, 1fr); /* dos columnas */

        gap: 40px;

        text-align: center; /* centra contenido en columnas */

    }



    /* Centrado total de la columna 2 */

    .footer-col:nth-child(2) {

        text-align: center;

    }



    .footer-col:nth-child(2) p,

    .footer-col:nth-child(2) .texto-blanco {

        text-align: center;

        margin-left: 0;

    }



    .footer-logo {

        width: 180px; /* logo más compacto */

        margin: 0 auto 20px auto;

    }



    .footer-slogan {

        font-size: 21px;

        letter-spacing: 1px;

        text-align: center;

    }

    .footer-brochure {

        text-align: center;

    }



    .footer-brochure a {

        text-align: center;

    }



    .footer-container .footer-col:nth-child(3) {

        padding-left: 40px; /* menos separación */

    }

}



/* Móviles (pantallas pequeñas) */

@media (max-width: 600px) {

    .footer-container {  

        grid-template-columns: 1fr; /* una sola columna */

        text-align: center;

    }



    .footer-col {

        margin-bottom: 25px;

    }



    /* Centrado total de la columna 2 */

    .footer-col:nth-child(2) {

        text-align: center;

    }



    .footer-col:nth-child(2) p,

    .footer-col:nth-child(2) .texto-blanco {

        text-align: center;

        margin-left: 0; /* elimina desplazamiento lateral */

    }



    .footer-logo {

        margin: 0 auto 20px auto;

        width: 170px; /* tamaño logo más pequeño */

    }



    .footer-slogan {

        font-size: 19px;

        letter-spacing: 1px;

    }



    .footer-col ul {

        margin-left: 0; /* centrado */

    }



    .footer-col ul li a {

        justify-content: center; /* enlaces centrados */

    }



    .footer-col:nth-child(3) p {

        justify-content: center; /* contacto centrado */

        margin-left: 0;

    }



    .social-links li a {

        justify-content: center; /* redes sociales centradas */

    }



    .footer-brochure {

        margin-top: 30px;

        text-align: center;

    }



    .footer-brochure a {

        width: 90%;

        text-align: center;

    }



    .footer-container .footer-col:nth-child(3) {

        padding-left: 0;

        text-align: center;

    }

}



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

   WHATSAPP FLOTANTE FINAL

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

.whatsapp-float {

    position: fixed;

    bottom: 40px;

    right: 40px;

    width: 75px;   /* tamaño desktop */

    height: 75px;

    background: #1cb754; /* verde WhatsApp */

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);

    z-index: 999;

    transition: 0.25s ease;

    animation: pulse 3s infinite; /* efecto pulse */

}



.whatsapp-float:hover {

    transform: scale(1.12) translateY(-3px);

    background: #098838; /* verde hover WhatsApp */

    box-shadow: 0 0 12px rgba(28,183,84,0.6);

}



/* Tooltip solo en desktop */

.whatsapp-float::after {

    content: "Escríbenos por WhatsApp";

    position: absolute;

    bottom: 85px;

    right: 0;

    background: var(--gris-oscuro);

    color: var(--blanco);

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 13px;

    opacity: 0;

    transition: 0.3s ease;

    white-space: nowrap;

    pointer-events: none;

}



.whatsapp-float:hover::after {

    opacity: 1;

}



.whatsapp-float img {

    width: 46px;

    height: 46px;

}



/* Tablets */

@media (max-width: 992px) {

    .whatsapp-float {

        width: 65px;

        height: 65px;

        bottom: 30px;

        right: 30px;

    }



    .whatsapp-float img {

        width: 40px;

        height: 40px;

    }



    

}



/* Móviles */

@media (max-width: 576px) {

    .whatsapp-float {

        width: 60px;

        height: 60px;

        bottom: 20px;

        right: 20px;

    }



    .whatsapp-float img {

        width: 36px;

        height: 36px;

    }



}





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

   RESPONSIVE GLOBAL

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

@media (max-width: 992px) {

    .logo { height: 50px; left: 20px; }

    header nav { gap: 15px; }

    header nav a { font-size: 15px; }

    .hero h1 { font-size: 34px; }

    .hero p { font-size: 17px; }

    .hero-content { margin-top: 40px; padding: 0 25px; }

}



@media (max-width: 768px) {

    header { padding: 20px 18px; }

    .logo { height: 42px; left: 18px; }

    header nav { display: none; }

    .menu-btn { display: flex; }



    .hero { height: 90vh; }

    .hero-content { margin-top: 30px; padding: 0 20px; }

    .hero h1 { font-size: 28px; line-height: 1.3; }

    .hero p { font-size: 16px; margin-bottom: 25px; }

    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .footer-col h3 {

        border-left: none;

        padding-left: 0;

    }

}



@media (max-width: 480px) {

    .logo { height: 42px; left: 18px; }

    .hero { height: 85vh; }

    .hero h1 { font-size: 24px; }

    .hero p { font-size: 15px; }

    .hero-content { margin-top: 25px; }

}