@import "./node_modules/bootstrap/dist/css/bootstrap.css";

:root {
    --bs-black: #000000;
    --bs-blue: #14213D;
    --bs-amarillo: #FCA311;
    --bs-gray: #E5E5E5;
}
*{
    margin: 0;
    padding: 0;
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.bg-powder-blue {
    background: var(--bs-blue);
}

.bg-gray {
    background: var(--bs-gray);
}

.text-gray {
    color: var(--bs-gray);
}

.text-blue {
    color: var(--bs-blue);
}

body {
    background: var(--bs-gray);
}

nav {
    background: var(--bs-blue);
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.subrayado {
    text-decoration: underline;
    text-decoration-color: var(--bs-amarillo);
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.15rem;
}

.link-whatsapp {
    background: var(--bs-amarillo);
    color: var(--bs-black);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 5px 5px 0px 0px var(--bs-black);
    transform: translate(-5px, -5px);

    /* Definimos qué propiedades se animan y cuánto duran */
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.link-whatsapp:hover {
    box-shadow: 0px 0px 0px 3px var(--bs-black);
    transform: translate(0px, 0px);
    /* mejor que "translate:" */
}

.border-card {
    background: var(--bs-blue);
    color: var(--bs-black);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 7px 7px 0px 0px var(--bs-black);
}

.bages {
    border-color: var(--bs-amarillo);
    white-space: nowrap;
}

.border-black {
    box-shadow: 5px 5px 0px 0px var(--bs-amarillo);
}

.img-section {
    border: 1px solid var(--bs-amarillo);
    box-shadow: 7px 7px 0px 0px var(--bs-black);
}

.font-size-18 {
    font-size: 1.1rem;
}

.font-size-19 {
    font-size: 1.5rem;
}