body {
    /* Tamaño base para móviles */
    font-size: 1rem;
}

.title {
    font-size: 1.75rem;
}

.subtitle {
    font-size: 1.25rem;
}

.subtitle2 {
    font-size: 1.25rem;
}

button {
    font-size: 0.875rem;
}

.visible-web {
    display: none;
}

.visble-mobil {
    display: block;
}

.container-info {
    /* Una sola columna para un diseño apilado verticalmente */
    grid-template-columns: 1fr;
    /* Colocamos todos los elementos en una columna */
    grid-template-areas: "a" "d" "f" "b" "c" "g" "h" "i" "e";
    gap: 10px 0;
    /* background-color: pink; */
}

.a {
    grid-area: a;
    margin-top: 10px;
}

.b {
    grid-area: b;
    margin-top: 10px;
}

.c {
    grid-area: c;
    margin-top: 10px;
}

.d {
    grid-area: d;
    margin-top: 10px;
}

.e {
    grid-area: e;
    margin-top: 10px;
}

.f {
    grid-area: f;
    margin-top: 10px;
}

.i {
    grid-area: i;
    margin-top: 10px;
}

.g {
    grid-area: g;
    margin-top: 10px;
}

.h {
    grid-area: h;
    margin-top: 10px;
}

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


/* Tamaños para pantallas medianas */

@media (min-width: 768px) {
    body {
        font-size: 1.125rem;
    }
    .title {
        font-size: 2.25rem;
    }
    .subtitle {
        font-size: 1.5rem;
    }
    .subtitle2 {
        font-size: 1.20em;
    }
    button {
        font-size: 1rem;
    }
    .visible-web {
        display: block;
    }
    .visble-mobil {
        display: none;
    }
    .padding-content {
        padding: 4% 4%;
    }
    /* ++++++++++++++++++++++++++++++++ */
    /* ++++++++++++++++++++++++++++++++ */
    /* ++++++++++++++++++++++++++++++++ */
    .container-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-template-areas: "a b" "c d" "e f" "g h" "i .";
        gap: 20px 10px;
    }
    .a {
        grid-area: a;
    }
    .b {
        grid-area: b;
    }
    .c {
        grid-area: c;
    }
    .d {
        grid-area: d;
    }
    .e {
        grid-area: e;
    }
    .f {
        grid-area: f;
    }
    .i {
        grid-area: i;
    }
    .g {
        grid-area: g;
    }
    .h {
        grid-area: h;
    }
    .p-font-size {
        font-size: 1 rem;
    }
}


/* Tamaños para pantallas grandes */

@media (min-width: 1300px) {
    body {
        font-size: 1.25rem;
        /* O un valor más grande según tu diseño */
    }
    .title {
        font-size: 2.5rem;
    }
    .subtitle {
        font-size: 1.75rem;
    }
    .subtitle2 {
        font-size: 1.20rem;
    }
    button {
        font-size: 1.125rem;
    }
    .visible-web {
        display: block;
    }
    .visble-mobil {
        display: none;
    }
    .padding-content {
        padding: 4% 10%;
    }
    /* ++++++++++++++++++++++++++++++++ */
    /* ++++++++++++++++++++++++++++++++ */
    /* ++++++++++++++++++++++++++++++++ */
    .container-info {
        display: grid;
        max-height: 900px !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        /* grid-auto-columns: 1fr; */
        /* grid-auto-rows: 1fr; */
        /* gap: 0px 0px; */
        /* grid-auto-flow: row; */
        grid-template-areas: "a a d d d d e e" "a a d d d d e e" "a a f f f f e e" "b b f f f f i i" "b b f f f f i i" "c c g g h h i i" "c c g g h h i i";
        row-gap: 5px;
        column-gap: 5px;
    }
    .a {
        grid-area: a;
        height: 450px !important;
    }
    .b {
        grid-area: b;
        height: auto !important;
    }
    .c {
        grid-area: c;
        height: 220px !important;
    }
    .d {
        grid-area: d;
        /* height: 200px !important; */
    }
    .e {
        grid-area: e;
        /* height: 400px !important; */
    }
    .f {
        grid-area: f;
        /* height: 450px !important; */
    }
    .i {
        grid-area: i;
        height: 530px !important;
    }
    .g {
        grid-area: g;
        height: 220px !important;
    }
    .h {
        grid-area: h;
        height: 220px !important;
    }
}

.card {
    margin: 1%;
    background-color: #e9dfd2;
    border-radius: 40px;
}

.padding-content {
    padding: auto;
}

.btn-orange {
    background-color: #FF6B4D;
    color: white;
    border-radius: 10px;
}

.btn-black {
    background-color: black;
    color: white;
    border-radius: 10px;
}

.cont-txt {
    border: 5px solid black;
    border-radius: 20px;
    position: relative;
    width: 100%;
    height: 175px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* background-color: yellow */
}

.cont-txt2 {
    border: 5px solid black;
    border-radius: 20px;
    position: relative;
    width: 100%;
    height: 125px;
}

.margin-txt {
    margin: 2%;
    box-sizing: border-box;
    height: 175px;
}

.style-text-p {
    position: absolute;
    transition: opacity 2s ease-in-out;
}

.card-black {
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.sup-orange-card {
    background-color: #FF6B4D;
    border-radius: 20px;
    width: 100%;
    text-align: center;
    z-index: 1;
    position: relative;
}

.inf-orange-card {
    background-color: #FF6B4D;
    border-radius: 20px;
    width: 100%;
    text-align: center;
    z-index: 1;
    /* margin-top: 15px; */
    position: relative;
}

.circle {
    width: 75px;
    height: 75px;
    background-color: #232742;
    border-radius: 50%;
    margin-left: -30px;
    text-align: center;
    border: 5px solid #e9dfd2;
    position: absolute;
    margin-top: -30px;
    padding-top: 12px;
    z-index: 999;
}

.txt-agend {
    text-align: center;
    color: white;
}

.center {
    text-align: center;
}

.card-orange-info {
    background-color: #FF6B4D;
    border-radius: 20px;
}

.card-gray-info {
    background-color: #dce0d8;
    border-radius: 20px;
}

.card-gray-img {
    background-color: #dce0d8;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    height: 450px;
}