/* ------------------------------------
   Base / Global
------------------------------------ */
:root {
    --gray: #4A4A4A;
    --red-logo: #FF8A8A;
}

body {
    color: var(--gray);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------
   Navbar
------------------------------------ */
.navbar {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ------------------------------------
   Main container
------------------------------------ */
main {
    width: 100%;
    max-width: 1200px; /* límite en desktop grande */
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ------------------------------------
   Hero
------------------------------------ */
#titular {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

/* ------------------------------------
   Cards & bloques
------------------------------------ */
.custom-card,
.card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.custom-card:hover,
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

/* Evita que las imágenes se aplasten en cards */
.card-img-top,
.custom-card-image {
    object-fit: cover;
    max-height: 18rem;
}

.animate-btn{
    transition: .25s;
}
.animate-btn:hover{
    transform: translateY(-5px);
}

/* ------------------------------------
   Banner de envío
------------------------------------ */
#MyShipment {
    border-radius: 1.5rem;
}

/* ------------------------------------
   Formulario
------------------------------------ */
form input,
form select,
form textarea {
    border-radius: .6rem;
}

#submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ------------------------------------
   Footer
------------------------------------ */
footer a {
    color: var(--red-logo);
    font-weight: bold;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.logo-footer {
    width: 10rem;
    margin: 0 auto;
}

/* ------------------------------------
   Responsive
------------------------------------ */

/* Tablet */
@media (min-width: 600px) {

    .logo-footer {
        width: 14rem;
        margin: 0;
    }
}