/* Importamos una fuente moderna (Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

/* ==================================================
                     Variables de Color y Globales
================================================== */
:root {
    /* Colores principales del logo */
    --color-primario: #50A1A5;  /* Teal */
    --color-secundario: #A74B88; /* Magenta */
    --color-primario-rgb: 80, 161, 165;
    --color-secundario-rgb: 167, 75, 136;
    /* Colores neutros */
    --color-beige: #fdfbf5f8;  /* Un beige claro como pediste */
    --color-fondo: #FFFFFF;
    --color-texto: #333;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-fondo); /* Usaremos blanco o beige para las secciones */
    color: var(--color-texto);
    /* El padding-top es para que el contenido de las secciones no quede oculto bajo la navbar fija */
    padding-top: 70px; /* Ajusta esto a la altura de tu navbar */
    overflow-x: hidden;

}

/* Ajuste para que el scroll (spy) de Bootstrap funcione correctamente con la navbar fija */
section {
    position: relative;
    padding-top: 90px; /* Debe coincidir con el padding-top del body */
   
}

html {
  overflow: auto;
}


/* ==================================================
                     Estilos de la Navbar
================================================== */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent; /* Navbar transparente al inicio */
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.navbar .logo {
    max-height: 50px; /* Ajusta el tamaño de tu logo */
}

/* ---- Lógica del Logo Swap ---- */
/* 1. Ocultar el logo de color por defecto (el blanco es visible) */
.navbar .logo-color {
    display: none;
}
.navbar .logo-white {
    display: inline-block;
}

/* 2. Cuando se scrollea, invertir la visibilidad */
.navbar.scrolled .logo-color {
    display: inline-block; /* Mostrar logo de color */
}
.navbar.scrolled .logo-white {
    display: none; /* Ocultar logo blanco */
}

/* 1. Estilos GENERALES para TODOS los links de la navbar */
.navbar .navbar-nav .nav-link {
    font-weight: 500;      /* <-- La negrita para TODOS */
    margin-left: 0.5rem;  /* <-- El espaciado para TODOS */
    margin-right: 0.5rem; /* <-- El espaciado para TODOS */
    transition: color 0.3s;
    color: var(--color-texto); /* <-- Color de texto oscuro por defecto */
}

/* 2. Estilo de color SÓLO para la navbar oscura (en el index) */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff; /* Texto blanco SÓLO sobre el banner */
}

/* 3. Estilos HOVER para ambas navbars */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 0.75); /* Hover blanco en el index */
}

/* Hover para la navbar clara (scrolled o en páginas de producto) */
.navbar:not(.navbar-dark) .navbar-nav .nav-link:hover,
.navbar:not(.navbar-dark) .navbar-nav .nav-link.active {
    color: var(--color-primario); /* Hover color primario */
}

/* Estilo del botón "Contacto" en la navbar */
.btn-contacto {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    font-weight: 500;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-contacto:hover {
    background-color: #3f8084; /* Un tono más oscuro del primario */
    border-color: #3f8084;
}

/* ---- Efecto de Scroll en Navbar ---- */
.navbar.scrolled {
    background-color: var(--color-fondo); /* Fondo beige/blanco al hacer scroll */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 1. Links de texto (NO el botón) cuando está scrolled */
/* Usamos :not() para excluir el botón de esta regla */
.navbar.scrolled .navbar-nav .nav-link:not(.btn-contacto) {
    color: var(--color-texto); /* Color oscuro (negro) */
}

/* 2. Links de texto (NO el botón) en estado active/hover */
.navbar.scrolled .navbar-nav .nav-link:not(.btn-contacto):hover,
.navbar.scrolled .navbar-nav .nav-link:not(.btn-contacto).active {
    color: var(--color-primario); /* Color primario (teal) */
}

/* 3. Botón "Contacto" (SOLO texto) cuando está scrolled */
/* Esta regla soluciona tu 2do pedido (páginas de producto) */
.navbar.scrolled .navbar-nav .nav-link.btn-contacto {
    color: #ffffff; /* Texto siempre blanco */
}
.navbar.scrolled .navbar-nav .nav-link.btn-contacto:hover {
    color: #ffffff; /* Mantener blanco en hover */
}

/* 4. Botón "Contacto" (INVERTIDO) cuando está scrolled Y ACTIVO */
/* Esta regla soluciona tu 1er pedido (en la sección Contacto del index) */
.navbar.scrolled .navbar-nav .nav-link.btn-contacto.active {
    color: var(--color-primario); /* Texto primario (teal) */
    background-color: #fff; /* Fondo blanco */
    border-color: var(--color-primario); /* Borde teal */
}


/* ==================================================
                     Estilos del Hero (Banner)
================================================== */
.hero-section {
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    min-height: 600px;
    position: relative;
    
    /* ¡IMPORTANTE! Reemplaza 'hero-bg.jpg' con el nombre de tu imagen de fondo */
    background: url('img/hero-bg.jpg') no-repeat center center;
    background-size: cover;

    /* Ajuste para que el fondo no se mueva por el padding-top del body */
    margin-top: -70px;
}

.subtitle {
    color: var(--color-beige);
}

/* Superposición oscura para que el texto resalte */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Un filtro oscuro */
    z-index: 1;
}

/* El contenido del hero debe estar sobre la superposición */
.hero-section .container {
    position: relative;
    z-index: 2;
}

/* ==================================================
                  Sobreescribir Botones Bootstrap
================================================== */
.btn-primary {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}
.btn-primary:hover {
    background-color: #3f8084;
    border-color: #3f8084;
}

/* Botón secundario "Ver Productos" */
.btn-outline-light {
    border-width: 2px;
}
.btn-outline-light:hover {
    background-color: #fff;
    color: var(--color-texto); /* Texto oscuro al pasar el mouse */
}

/* ==================================================
             Responsive (Móvil) - CORREGIDO
================================================== */
@media (max-width: 991.98px) {
    /* 1. Fondo beige (Esto ya lo tenías) */
    .navbar {
        background-color: var(--color-beige) !important; /* !important para ganar al 'transparent' */
    }

    /* 2. FORZAR el logo de color (Arregla el logo blanco) */
    .navbar .logo-color {
        display: inline-block;
    }
    .navbar .logo-white {
        display: none;
    }

    /* 3. FORZAR el ícono de hamburguesa oscuro (Arregla el ícono blanco/cortado) */
    .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-dark .navbar-toggler {
        border-color: rgba(0,0,0,0.1); /* Borde oscuro sutil */
    }

    /* 4. FORZAR los links de texto a ser oscuros */
    .navbar-dark .navbar-nav .nav-link {
        color: var(--color-texto);
    }
    
    /* 5. FORZAR el link 'active' a ser de color primario (Arregla "Inicio" invisible) */
    .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .nav-link:hover {
        color: var(--color-primario);
    }

    /* 6. FORZAR el texto del botón 'Contacto' a ser siempre blanco */
    /* (Se verá bien en el menú desplegable) */
    .navbar-dark .navbar-nav .btn-contacto,
    .navbar-dark .navbar-nav .btn-contacto:hover {
        color: #ffffff; 
    }
    
    /* 7. Estilos de botón móvil (Esto ya lo tenías) */
    .btn-contacto {
        width: 100%;
        margin-top: 0.5rem;
        margin-left: 0 !important;
    }

    /* 8. Tamaños de Hero (Esto ya lo tenías) */
    .hero-section h1 {
        font-size: 2.5rem;
    }

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


/* ==================================================
                     SECCIÓN QUIÉNES SOMOS
================================================== */

.quienes-somos-section {
    background: linear-gradient(to bottom, 
        var(--color-beige) 0%, 
        rgba(80, 161, 165, 0.2) 50%, /* Tinte sutil del color PRIMARIO (#50A1A5) */
        var(--color-fondo) 100%
    );
    padding: 5rem 0 2rem 0;
    position: relative;
}

/* ---- Títulos de Sección ---- */
.section-title {
    color: var(--color-secundario); /* Color Magenta #A74B88 */
    font-weight: 700;
    margin-bottom: 1rem;
}

/* ---- 4 Info Cards ---- */
.info-card {
    background: #fff;
    border-radius: 10px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.icon-box {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    background-color: var(--color-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box i {
    font-size: 1.75rem; /* Tamaño del icono */
}

.info-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 0.5rem;
}

/* ---- Sección "Por qué elegirnos" ---- */
.why-us-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    overflow: hidden; /* Para que el radio se aplique a la imagen */
}

.why-us-box img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* La imagen cubre todo el div */
}

.custom-list {
    padding-left: 0;
}

.custom-list li {
    padding-left: 0;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.custom-list i {
    color: var(--color-primario); /* Icono de check */
    font-size: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

/* ==================================================
                     Responsive (Ajustes)
================================================== */
@media (max-width: 991.98px) {
    /* Ocultamos la imagen en 'why-us-box' en tablets y móviles */
    .why-us-box img {
        display: none;
    }
}

@media (max-width: 768px) {
    
    .quienes-somos-section {
        padding-top: 70px;
    }

    .section-title {
        font-size: 1.75rem;
    }
}




/* ==================================================
                     SECCIÓN PRODUCTOS
================================================== */
.productos-section {
    background: linear-gradient(to bottom, 
        var(--color-fondo) 0%, 
        rgba(167, 75, 136, 0.2) 50%, /* Tinte sutil del color SECUNDARIO (#A74B88) */
        var(--color-beige) 100%
    );
    position: relative;
}

.product-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #eee;
    overflow: hidden; /* Para que la imagen respete el borde redondeado */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Asegura la estructura vertical */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

    .product-card-img {
        background-color: var(--color-primario);
    }
}

.product-card-img {
    width: 100%;
    height: 250px; /* Altura fija para la imagen */
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
}



.product-card-body {
    padding: 1.5rem;
    flex-grow: 1; /* Hace que el body crezca para llenar el espacio */
    display: flex;
    flex-direction: column;
}

.product-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 0.75rem;
}

.product-card-body p {
    flex-grow: 1; /* Empuja el botón "Ver más" hacia abajo */
    margin-bottom: 1.5rem;
}

.btn-ver-mas {
    color: var(--color-primario);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.8rem;
    transition: color 0.3s;
}

.btn-ver-mas i {
    transition: transform 0.3s ease-in-out;
    display: inline-block; /* Necesario para la transición */
}

.btn-ver-mas:hover {
    color: #3f8084; /* Primario más oscuro */
}

.btn-ver-mas:hover i {
    transform: translateX(5px); /* Mueve la flecha */
}

/* CTA Final (Consultanos) */
.products-cta p {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-texto);
}

.btn-secondary {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: #fff;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.btn-secondary:hover {
    background-color: #8a3c6f; /* Secundario más oscuro */
    border-color: #8a3c6f;
    color: #fff;
}

/* ==================================================
                     SECCIÓN CONTACTO
================================================== */
.contact-section {
    background: linear-gradient(to bottom, 
        var(--color-beige) 0%, 
        rgba(80, 161, 165, 0.2) 50%, /* Tinte sutil del color PRIMARIO (#50A1A5) */
        var(--color-beige) 100%
    );
    position: relative;
    padding-bottom: 5rem;
}

/* Contenedor del formulario */
.form-container {
    background: #fff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    height: 100%;
}

.form-title {
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 1.5rem;
}

/* Ajustes a los campos flotantes de Bootstrap */
.form-floating > .form-control {
    height: calc(3.5rem + 2px); /* Altura estándar */
}
.form-floating > textarea.form-control {
    height: 200px !important; /* Altura del textarea */
}
.form-floating > label {
    color: #6c757d; /* Color del placeholder */
}

/* Cards de Info de Contacto */
.contact-info-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    text-align: center;
    height: 100%;
}

.icon-box-contact {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    background-color: var(--color-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.contact-info-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.contact-info-card p {
    margin-bottom: 0;
    color: #6c757d;
}

/* Contenedor del Mapa */
.map-container {
    border-radius: 10px;
    overflow: hidden; /* Para que el iframe respete el borde */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    line-height: 0; /* Arregla espacios extra del iframe */
}

.map-container iframe {
    border-radius: 10px;
    width: 100%;
}


/* ==================================================
                         FOOTER
================================================== */
.footer-section {
    background-color: #212f32; /* Un color oscuro, casi negro-azulado */
    color: #adb5bd; /* Un gris claro para el texto */
    font-size: 0.9rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
    position: relative;
}

.logo-footer {
    max-height: 70px; /* Ajusta el tamaño del logo en el footer */
}

.footer-section .footer-info p {
    margin-top: 1rem;
    max-width: 350px; /* Evita que el texto se estire demasiado */
}

.footer-section h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff; /* Títulos en blanco */
    margin-bottom: 1.25rem;
    position: relative;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 0.75rem;
}

.footer-links ul a {
    color: #adb5bd;
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s;
}

.footer-links ul a:hover {
    color: #fff; /* Resalta el link al pasar el mouse */
}

.footer-links ul i {
    margin-right: 8px;
    font-size: 1rem;
    color: var(--color-primario); /* Iconos en color primario */
}

/* Línea divisoria */
.footer-divider {
    border-color: #3a4a4d; /* Un gris un poco más claro que el fondo */
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* Sección Copyright */
.footer-bottom {
    font-size: 0.85rem;
    color: #889a9e; /* Un gris más sutil */
}

.footer-bottom .credits {
    font-weight: 700;
    color: #adb5bd;
}

.footer-section .credits .kalli-credit {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.footer-section .credits .kalli-credit:hover {
    color: #fff; /* color al pasar el mouse */
}

/* Responsive para el footer bottom */
@media (max-width: 767.98px) {
    .footer-bottom .col-md-4 {
        margin-bottom: 0.5rem;
    }

    /* Arreglo para email largo en el footer móvil */
    .footer-links ul a[href^="mailto:"] {
        overflow-wrap: break-word; /* Permite que el navegador rompa la palabra */
        word-break: break-all;     /* Fuerza el quiebre si es necesario */
    }
}


/* ==================================================
             Animaciones de Scroll (Custom)
================================================== */

/* Estado inicial: invisible y desplazado */
.fade-slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
}

.fade-slide-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
}

.fade-slide-up {
    opacity: 0;
    transform: translateY(30px); /* Se mueve de abajo hacia arriba */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
}

/* Estado visible: opaco y en posición original */
.fade-slide-left.visible,
.fade-slide-right.visible,
.fade-slide-up.visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* ==================================================
       ESTILOS PÁGINA DETALLE DE PRODUCTO
================================================== */

/* Hero del Producto (Sección 1) */
.product-detail-hero {
    background: linear-gradient(to bottom, 
        var(--color-fondo) 0%, 
        rgba(80, 161, 165, 0.1) 50%, /* Tinte sutil del color PRIMARIO (#50A1A5) */
        var(--color-beige) 100%
    );
    padding-top: 70px; /* 70px navbar */
    padding-bottom: 4rem;
}

.rollos-img {
    background-color: #A74B889C;
}

.btn-back {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.btn-back i {
    margin-right: 0.25rem;
}

.btn-back:hover {
    color: var(--color-primario);
}

.product-detail-hero h1 {
    color: var(--color-primario);
    font-weight: 700;
}

/* Sección Especificaciones (Sección 2) */
.specifications-section {
    padding-top: 1rem;
    padding-bottom: 5rem;
    background: linear-gradient(to bottom, 
        var(--color-beige) 0%, 
        rgba(167, 75, 136, 0.1) 50%, /* Tinte sutil del color SECUNDARIO (#A74B88) */
        var(--color-fondo) 100%
    );
}

.spec-subtitle {
    color: var(--color-primario);
    font-weight: 700;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-primario-claro);
    padding-bottom: 0.5rem;
}

.spec-item {
    background-color: #f8f9fa; /* Gris muy claro */
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    border: 1px solid #eee;
}

.spec-item i {
    color: var(--color-primario);
    margin-right: 0.75rem;
}

.spec-callout {
    background-color: white;
    border-left: 5px solid var(--color-primario);
    padding: 1.5rem 2rem;
    border-radius: 8px;
    font-size: 1.25rem;
    text-align: center;
}

/* Sección CTA Final (Sección 3) */
.final-cta-section {
    background: linear-gradient(to bottom, 
        var(--color-fondo) 0%, 
        rgba(80, 161, 165, 0.1) 50%, /* Tinte sutil del color PRIMARIO (#50A1A5) */
        var(--color-fondo) 100%
    );
    padding-top: 0rem;
    padding-bottom: 5rem;
}

.cta-box {
    background-color: #fff;
    padding: 3rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.cta-box h2 {
    color: var(--color-secundario); /* Color magenta */
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-box .lead {
    margin-bottom: 2rem;
    color: #555;
}

/* ==================================================
       Arreglo Botones CTA (Móvil)
================================================== */

/* Usamos el breakpoint 'md' (767.98px) o 'sm' (575.98px)
   para aplicar esto a celulares */
@media (max-width: 767.98px) {
    
    /* Opcional: Esto hace que ambos botones ocupen
       el 100% del ancho, que se ve muy bien en móviles. */
    .cta-box .btn {
        width: 100%;
        display: block;
    }

    /* Selecciona un botón que venga DESPUÉS de otro botón
       (es decir, tu botón "Ver Otros Productos") */
    .cta-box .btn + .btn {
        margin-top: 0.75rem; /* <-- AGREGA EL ESPACIO VERTICAL */
        margin-left: 0 !important;      /* <-- Anula el 'ms-2' horizontal */
    }
}

/* ==================================================
       ESTILOS TABLA (CINTAS DE PAPEL) - CORREGIDO
================================================== */

.product-table th, 
.product-table td {
    text-align: center;
    vertical-align: middle;
    padding: 1rem;
    border: none; /* Quitamos bordes internos */
}

.product-table-body td {
    font-weight: 600; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Separador sutil */
}

/* Fila Impar: Tinte color primario (10% de opacidad) */
.product-table-body tr:nth-of-type(odd) {
    background-color: rgba(80, 161, 165, 0.1); /* Tinte Teal */
}

/* Fila Par: Tinte color secundario (10% de opacidad) */
.product-table-body tr:nth-of-type(even) {
    background-color: rgba(167, 75, 136, 0.1); /* Tinte Magenta */
}

/* ==================================================
       Personalizar Dropdown (Activo)
================================================== */

/* Esto cambia el fondo azul por defecto de Bootstrap
  para los items activos o clickeados del dropdown.
*/
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primario);
    color: #fff; /* Asegura que el texto sea blanco y legible */
}

/* Esto hace lo mismo pero para el menú oscuro
  que usás en el index.html
*/
.dropdown-menu-dark .dropdown-item.active,
.dropdown-menu-dark .dropdown-item:active {
    background-color: var(--color-primario);
    color: #fff;
}



/*btn wsp*/

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #A74B889C;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 999;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  background-color: var(--color-secundario);
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 70px;
    height: 70px;
  }
  .whatsapp-float img {
    width: 40px;
    height: 40px;
  }
}