/* ==========================================================================
   PALETA CORPORATIVA AUROSANT
   ========================================================================== */
:root {
    --color-genyx: #18212E;  /* Azul marino profundo */
    --color-serum: #004F50;  /* Verde azulado oscuro */
    --color-bio:   #83B9AE;  /* Turquesa claro institucional */
    --color-lumo:  #FFFFFF;  /* Blanco puro */
}

/* ==========================================================================
   BASE Y FONDO
   ========================================================================== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    color: var(--color-genyx);
    /* Aseguramos la ruta correcta al fondo */
    background-image: url('../assets/bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Capa de legibilidad: Asegura que el texto siempre sea legible sobre la imagen */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); /* 85% blanco permite ver el fondo */
    z-index: -1;
}

/* ==========================================================================
   COMPONENTES DE DISEÑO (Para que nada se vea "amontonado")
   ========================================================================== */
section, .page-section, .footer {
    background-color: transparent !important; /* Permitimos ver el fondo */
}

/* Contenedores con fondo suave para los textos */
.cta-inner, .custom-intro-box {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Botón corporativo con icono */
.btn-brand {
    background-color: var(--color-bio) !important;
    border: none;
    color: var(--color-genyx) !important;
    font-weight: 700;
    padding: 12px 25px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-brand:hover {
    background-color: var(--color-serum) !important;
    color: var(--color-lumo) !important;
}

/* Navegación y títulos */
#mainNav { background-color: var(--color-genyx) !important; border-bottom: 4px solid var(--color-serum) !important; }
.section-heading-lower { color: var(--color-serum) !important; }
.section-heading-upper { color: var(--color-bio) !important; }


/* Agrega esto a tu styles.css para mejorar la visualización de iconos pequeños */
img[src$=".ico"] {
    image-rendering: -webkit-optimize-contrast; /* Mejora la nitidez en navegadores */
    image-rendering: crisp-edges;
}
.btn-carrito {
    display: inline-flex;
    align-items: center;
    
    /* 1. Ajusta el padding para dar espacio al icono grande */
    padding-left: 80px !important; /* Aumenta este número si el texto se enciman */
    padding-right: 25px !important;
    
    background-image: url('../assets/carrito.ico') !important;
    background-repeat: no-repeat !important;
    
    /* 2. En lugar de tamaño fijo, usa 'contain' para que no se corte */
    background-size: 50px auto !important; /* 50px de ancho, alto automático */
    
    /* 3. Centra el icono verticalmente y sepáralo del borde izquierdo */
    background-position: 15px center !important;
}

/* ==========================================================================
   PARCHE PARA AUDITORÍA WEB (image_ec78bd.png)
   ========================================================================== */

/* 1. Forzar un tamaño mínimo de letra legible en móviles */
html {
    font-size: 16px !important;
}
small, .small {
    font-size: 0.875rem !important; /* Equivale a 14px (Aprobado por el test >12px) */
}

/* 2. Expandir el área táctil de los botones sociales a 48x48px */
.btn-social {
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* 3. Crear una "caja invisible" de 48px para poder tocar los puntos del carrusel */
.carousel-indicators button {
    min-height: 24px !important; 
    border-top: 12px solid transparent !important;
    border-bottom: 12px solid transparent !important;
}