/* style.css */

:root{ --guinda:#9F2241; --dorado:#BC955C; --gris:#6b6b6b; --fondo:#f8f9fa }
body{font-family:'Source Sans 3', Arial, sans-serif; background:var(--fondo); color:var(--gris)}
.title-gotham{font-family:'Montserrat',sans-serif;color:var(--guinda);font-weight:700}
.topbar {
    /* 1. Establecer la altura mínima para que la imagen se vea bien */
    min-height: 80px; 
    
    /* 2. Combinación de degradado y URL de imagen */
    background-image: 
        /* Degradado lineal: el color hexadecimal semitransparente (0.8 de opacidad) que se superpone a la imagen */
        linear-gradient(to right, rgba(116, 33, 68, 0.8), rgba(116, 33, 68, 0.8)),
        /* Imagen de fondo */
        url('../img/header.png');
    
    /* 3. Ajustes de la imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el header */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    
    /* 4. Asegura que el texto y los iconos se vean bien sobre el fondo oscuro */
    color: #ffffff; /* Color del texto blanco */
}

/* Opcional: Para asegurar que los iconos de Font Awesome sean blancos */
.topbar a.text-secondary {
    color: #ffffff !important;
}

.brand-logo{height:150px}
.accent-line{height:6px;background:var(--dorado);border-radius:4px;margin-top:8px}
.btn-primary-gt{background:var(--guinda);border:none;color:#fff}
.btn-primary-gt:focus{box-shadow:0 0 0 4px rgba(159,34,65,0.18)}
.card-quiet{background:#fff;border:0;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.pdf-thumb{width:48px;height:64px;object-fit:contain}
/* responsive tweaks */
@media (max-width:575px){ .brand-logo{height:44px} }
/* accessibility */
a:focus,button:focus,input:focus{outline:3px solid rgba(159,34,65,0.18);outline-offset:2px}


footer {
    /* 1. Fondo Combinado: Degradado (Overlay) + Imagen */
    background-image: 
        /* Capa de color guinda oscuro con 80% de opacidad */
        linear-gradient(to right, rgba(116, 33, 68, 0.8), rgba(116, 33, 68, 0.8)),
        /* Imagen de fondo */
        url('../img/header.png'); /* REEMPLAZA ESTA RUTA */
    
    /* 2. Ajustes de la Imagen */
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    
    /* 3. Color de Texto: Hacemos todo blanco para que contraste */
    color: #ffffff;
}

/* 4. Sobreescribir el color del texto y enlaces internos a blanco o un color claro */
footer h6,
footer a,
footer .text-muted,
footer .text-primary {
    color: #ffffff !important; /* Texto y títulos blancos */
}

/* Opcional: Si quieres que los iconos de Font Awesome sean de color diferente (ej. amarillo institucional) */
footer .fab {
    color: #ffd700 !important; /* Ejemplo de color dorado/amarillo */
}

.card-hover-effect {
    /* 1. Transición para animación suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 2. Propiedad inicial (cursor) */
    cursor: pointer;
    /* 3. Aseguramos que la tarjeta se vea bien */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Borde sutil */
}

/* Estado al pasar el cursor (Hover) */
.card-hover-effect:hover {
    /* 4. Sombra más pronunciada (Simulación de "elevación") */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    /* 5. Pequeña transformación hacia arriba (Efecto 3D sutil) */
    transform: translateY(-5px);
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px; 
    right: 40px; 
    background-color: #25d366; 
    color: #FFF;
    border-radius: 50px; 
    text-align: center;
    font-size: 30px;
    z-index: 1000; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 3px #999;
    transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
}

@media screen and (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 24px;
    }
}