/* ==========================================================================
   SISTEMA DE DISEÑO AGM-TEC - Cassiopeia Extended
   ========================================================================== */

/* 1. Tipografía base y párrafos */
p {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #6c757d; /* Bootstrap text-muted */
}

/* 2. Jerarquía de Títulos */
h1, h2, h3, h4, h5, h6 {
    color: #212529; /* Bootstrap dark */
    font-weight: 700;
}

/* 3. Estilo Uppercase para etiquetas y títulos de tarjeta */
.text-label-uppercase {
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* 4. Estética de Contenedores y Tarjetas */
.rounded-4 {
    border-radius: 1rem !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* 5. Barra de Contacto - Color corporativo */
.bg-contact-bar {
    background-color: #3a3c72 !important;
}

/* 6. Botones de acción */
.btn-outline-info {
    border-width: 2px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-info {
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
}

/* 7. Utilidades de diseño limpio */
.card-borderless {
    border: none;
    background-color: #f8f9fa; /* Bootstrap light */
}
/* Estandarización de Tarjetas */
.tarjeta-interactiva {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: 1px solid #dee2e6 !important; /* Mantiene la coherencia visual */
}
.tarjeta-interactiva:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important;
}
.hero-banner-custom {
    background-color: #ffffff !important;
    background-image: url('../images/AR/agua_fondo_banner.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important; /* Alinea la parte superior de la imagen con el inicio del banner */
    background-size: 100% auto !important;      /* Asegura que cubra el ancho total */
    min-height: 620px;
}