@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis:YEAR@1979&family=Parkinsans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

html {
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}


body {
    background-color: rgb(167, 185, 220);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*----------Desing header----------*/

.headerDin {
    background-color: rgba(36, 44, 62, 0.8);
    backdrop-filter: blur(2.5px);
    height: 9vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    z-index: 1000;
    top: 0;
}

.headerInfo {
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    width: 60%;
}

.headerText {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.headerInfo img {
    height: 90px;
    max-width: 100%;
    margin: 0 20px 0 0;
}

.headerInfo h1 {
    font-size: 1.66rem;
    /* Usamos rem para mejor escalabilidad */
    font-weight: 700;
    margin: 0;
    /* Quitamos márgenes para que no se separen de más */
    line-height: 1.1;
}

.headerInfo h2 {
    font-size: 1.4rem;
    /* Un poco más pequeño que el nombre */
    font-weight: 300;
    margin: 0;
    opacity: 0.9;
    white-space: pre-line;
}

.buttonsHeader {
    display: none;
    gap: .2vw;
}

.buttonHeader {
    text-decoration: none;
    display: inline-block;
    padding: 0px 10px;
    background-color: transparent;
    border-color: transparent;
    border-style: solid;
    border-radius: 5px;
    margin: 0;
    transition: 0.3s ease-in-out;
    font-weight: 400;
    font-size: 2em;
    color: rgb(248, 248, 246);
}

.buttonHeader:hover {
    cursor: pointer;
    color: rgb(121, 163, 235);
}

/*---------- Carousel -----------*/

.carousel-viewport {
    overflow: hidden;
    height: 80vh;
}

.textCarousel {
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 55%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    gap: 15px;
}

.textCarousel h2 {
    color: rgb(36, 44, 62);
    text-shadow: 0 6px 8px rgb(0, 0, 0, 0.3);
    font-size: 6.2rem;
    font-weight: 700;
    box-sizing: border-box;
    white-space: pre-line;
    text-align: center;
    line-height: 1;
}

#especialidad {
    background-color: rgb(10, 145, 255);
    color: #fff;
    border-radius: 20px;
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
}

.textCarousel p {
    color: #414244;
    font-size: 2.3rem;
    font-weight: 500;
    box-sizing: border-box;
    letter-spacing: -1px;
    white-space: pre-line;
    text-align: center;
    line-height: 1;
}

.textCarousel p span {
    color: rgb(10, 145, 255);
    filter: drop-shadow(0 2px 2px rgba(208, 210, 212, 0.726));
    font-weight: 700;
}

.overlayCarousel {
    width: 88%;
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(167, 185, 220), rgb(167, 185, 220), transparent);
}

.carousel-track {
    transform: translateX(40%);
    height: 100%;
    width: 80%;
    display: flex;
    transition: transform 0.45s ease;
}

.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/*-------- Nav Buttons ---------*/

.navButtons {
    margin-top: -10px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    box-shadow: 0px 15px 50px rgba(36, 44, 62, 0.5);
    width: 100%;
    height: 28vh;
}

.sections {
    width: 100%;
    height: 100%;
    font-size: 3.8rem;
    text-decoration: none;
    background-color: rgb(36, 44, 62);
    color: rgb(10, 145, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    border: none;
    font-weight: 700;
}

#buttonLeft {
    border-radius: 20px 0 0 20px;
}

#buttonRight {
    border-radius: 0 20px 20px 0;
}

.sections span {
    margin-left: 0.3em;
    white-space: nowrap;
    overflow: hidden;
    max-width: 500px;
    transition: max-width 0.5s ease, opacity 0.3s ease, margin 0.3s ease;
}

.sections svg {
    display: inline;
    transform-origin: center center;
    transition: transform 0.2s ease-in-out;
}

.sections:hover {
    background: rgb(10, 145, 255);
}

.sections:hover .svg-wrapper {
    transform: scale(1.5);
    transition: 0.5s ease-in;
}

.sections:hover svg {
    transform: scale(1);
    color: rgb(230, 235, 240);
}

.sections:hover span {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
}

.sections:active {
    transform: scale(0.8);
}

/*----------Information----------*/

.informationContainer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 10px 0;
    width: 90%;
    padding: 30px 30px;
    border-radius: 20px;
    background-color: rgb(36, 44, 62);
    box-shadow: 0px 20px 45px -26px;
}

.mainPersonalInformation {
    height: 10%;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.informationSobreMi {
    width: 49%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.informationSobreMi h2 {
    color: rgb(10, 145, 255);
    text-align: center;
    font-size: 8.7rem;
    font-weight: 600;
    font-family: 'Parkinsans', sans-serif;
    line-height: 2;
}

.informationSobreMi ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.informationSobreMi li {
    color: rgb(208, 217, 240);
    font-size: 2.2rem;
    font-weight: 500;
    text-align: justify;
    box-sizing: border-box;
    line-height: 1.3;
}

.informationSobreMi p {
    color: rgb(208, 217, 240);
    font-size: 2.2rem;
    font-weight: 500;
    text-align: justify;
    box-sizing: border-box;
    line-height: 1.3;
    margin-bottom: 20px;
}

.informationSobreMi span {
    color: rgb(10, 145, 255);
    font-weight: 600;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.imageaside {
    width: 49%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(36, 44, 62), rgb(36, 44, 62, 0.8), rgb(36, 44, 62, 0.3), transparent);
}

.imageaside img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    z-index: 0;
}

.bottomTargets {
    gap: 10px;
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
}

.target {
    width: 33%;
    background-color: rgb(208, 217, 240);
    background-size: 200% 100%;
    box-shadow: 0 1px 5px rgba(224, 227, 231, 0.376);
    padding: 15px;
    margin: 5px 0px;
    border-radius: 10px;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.documents:hover {
    background: linear-gradient(to top, rgb(10, 145, 255), rgb(208, 217, 240), rgb(208, 217, 240));
    cursor: pointer;
}

.target h3 {
    color: rgb(10, 145, 255);
    font-size: 3.5rem;
    font-weight: 600;
    text-align: center;
    font-family: 'Parkinsans', sans-serif;
}

.target p {
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    white-space: pre-line;
}

.target li {
    font-size: 1.5rem;
    font-weight: 300;
    list-style-position: inside;
    text-align: center;
}

.targetSubtitle {
    color: rgb(10, 145, 255);
    font-weight: 500;
    font-size: 1.7rem;
}

/* ---------Documents Modal----------*/
.overlaymodal {
    opacity: 0;
    position: fixed;
    inset: 0;
    background-color: rgba(36, 44, 62, 0.8);
    backdrop-filter: blur(2.5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modalDocuments {
    width: 80%;
    max-height: 85vh;
    overflow-y: auto;
    background: rgb(167, 185, 220);
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.closeModal {
    position: relative;
    background: rgb(208, 217, 240);
    fill: rgb(10, 145, 255);
    border-radius: 50%;
    margin: 10px 10px 15px 10px;
    width: 50px;
    height: 50px;
    padding: 10px;
    font-size: 1.8rem;
    font-weight: 400;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.closeModal:hover {
    background: rgb(10, 145, 255);
    fill: rgb(208, 217, 240);
}

.headerModal {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: flex-end;
    position: sticky;
    z-index: 1000;
    top: 0;
}

.documentsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.certificados {
    width: 90%;
    max-width: 800px;
    height: auto;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    display: block;
}

.active {
    display: flex;
    opacity: 1;
    animation: fadeIn;
    --animate-duration: 0.5s;
}

/*----------Slash----------*/

.slash {
    margin: 10px 0 55px 0;
    width: 100vw;
    height: 25vh;
    position: relative;
}

.slashOpaco {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.slashOpaco h2 {
    height: 3%;
    align-items: end;
    font-size: 8.5em;
    font-weight: 600;
    font-family: 'Parkinsans', sans-serif;
    position: absolute;
}

.iconsSlash {
    z-index: -1;
    width: 65%;
    color: rgb(36, 44, 62, 0.5);
    justify-content: left;
}

.iconsSlash svg {
    margin-right: -10px;
}

/* ---------- Especialidades ---------- */

.containerEsp {
    display: grid;
    width: 95%;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "titulo titulo"
        "imagen tarjetas";
    margin-bottom: 20px;
}

/* --- Título --- */
.descEsp {
    grid-area: titulo;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: rgb(36, 44, 62);
    border-radius: 20px;
    padding: 24px 20px 16px;
    gap: 16px;
}

.descEspEyebrow {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgb(10, 145, 255);
}

.descEsp h3 {
    font-size: 2.8rem;
    font-weight: 700;
    font-style: italic;
    color: rgb(230, 235, 240);
    max-width: 75%;
    line-height: 1.3;
}

.descExp {
    width: 70%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 10px 0 0;
}

.expDivider {
    width: 1px;
    height: 40px;
    background: rgba(10, 145, 255, 0.3);
}

.exp h4 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: rgb(10, 145, 255);
}

.exp p {
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(167, 185, 220);
}

/* --- Imagen --- */
.imgEsp {
    grid-area: imagen;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 90vh;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.imgEsp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1.1) brightness(0.85);
}

.overlayEsp {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, rgb(167, 185, 220) 100%);
    border-radius: 20px;
}

/* --- Tarjetas --- */
.secEspe {
    grid-area: tarjetas;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
}

.esp {
    width: 100%;
    flex: 1;
    background: rgb(36, 44, 62);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    border-left: 3px solid rgb(10, 145, 255);
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 14px;
    padding: 16px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esp:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.espIcon {
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(10, 145, 255, 0.15);
    color: rgb(10, 145, 255);
    display: flex;
    align-items: center;
    justify-content: center;
}

.espText {
    flex: 1;
}

.espText h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: rgb(10, 145, 255);
    line-height: 1.2;
    text-align: left;
}

.espText p {
    font-size: 1.6rem;
    font-weight: 400;
    color: rgb(167, 185, 220);
    margin-top: 4px;
    text-align: left;
}

.espTag {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(10, 145, 255);
    background: rgba(10, 145, 255, 0.12);
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* --- Tarjeta enfoques --- */
.espEnfoques {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.espEnfoquesHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.espEnfoquesHeader h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: rgb(10, 145, 255);
}

.badgesGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.badge {
    font-size: 1.4rem;
    font-weight: 500;
    color: rgb(208, 217, 240);
    background: rgba(208, 217, 240, 0.08);
    border: 1px solid rgba(208, 217, 240, 0.2);
    border-radius: 30px;
    padding: 5px 14px;
    transition: background 0.2s ease, color 0.2s ease;
    cursor: default;
}

.badge:hover {
    background: rgba(10, 145, 255, 0.2);
    color: rgb(10, 145, 255);
    border-color: rgba(10, 145, 255, 0.4);
}

/* ========== Video Pregunta ========== */
.conteinerPregunta {
    width: 95%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(22, 28, 44);
    border-radius: 40px;
    padding: 20px;
    border-top: 5px solid rgb(10, 145, 255);
    border-bottom: 5px solid rgb(10, 145, 255);
}

.textEsp {
    width: 65%;
}

.containerVideo {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.videoDoc {
    width: 400px;
    height: auto;
    border-radius: 40px;
}

/* ---- Sección ¿Cómo podemos mejorar tu vida? ---- */

.tituloPregunta {
    font-size: 4rem;
    font-weight: 700;
    color: rgb(0, 120, 220);
    margin-bottom: 8px;
    line-height: 1.2;
}

.subtituloPregunta {
    font-size: 1.6rem !important;
    color: rgb(167, 185, 220) !important;
    margin-bottom: 24px;
}

.preguntaCards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.preguntaCard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(10, 145, 255, 0.2);
    border-radius: 16px;
    padding: 16px 20px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.preguntaCard:hover {
    border-color: rgba(10, 145, 255, 0.6);
    background: rgba(10, 145, 255, 0.07);
}

.preguntaIcon {
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(10, 145, 255, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(0, 120, 220);
    flex-shrink: 0;
}

.preguntaCardText h4 {
    font-size: 1.7rem;
    font-weight: 700;
    color: rgb(230, 235, 240);
    margin-bottom: 4px;
}

.preguntaCardText p {
    font-size: 1.4rem !important;
    color: rgb(167, 185, 220) !important;
    line-height: 1.5;
}

/* --------- Servicios y Precios ---------- */

.containerServicios {
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 20px;
}

.serviciosFiltros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.filtroBtn {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 30px;
    border: 2px solid rgba(10, 145, 255, 0.3);
    background: rgb(42, 65, 92);
    color: rgb(167, 185, 220);
    cursor: pointer;
    transition: all 0.25s ease;
}

.filtroBtn:hover {
    border-color: rgb(10, 145, 255);
    color: rgb(10, 145, 255);
}

.filtroBtn.active {
    background: rgb(10, 145, 255);
    border-color: rgb(10, 145, 255);
    color: #fff;
}

.serviciosGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.servicioCard {
    background: rgb(36, 44, 62);
    border-radius: 18px;
    border: 1px solid rgba(10, 145, 255, 0.12);
    border-left: 3px solid rgb(10, 145, 255);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.servicioCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.servicioCard.oculta {
    display: none;
}

.servicioCard--destacado {
    border-left: 3px solid rgb(245, 194, 17);
    background: linear-gradient(135deg, rgb(36, 44, 62) 80%, rgba(245, 194, 17, 0.08));
}

.servicioCard--destacado .servicioIcono {
    background: rgba(245, 194, 17, 0.15);
    color: rgb(245, 194, 17);
}

.servicioCard--destacado .servicioPrecio {
    color: rgb(245, 194, 17);
}

.servicioIcono {
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(10, 145, 255, 0.12);
    color: rgb(10, 145, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.servicioInfo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.servicioCategoria {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgb(10, 145, 255);
    opacity: 0.75;
}

.servicioInfo h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: rgb(230, 235, 240);
    line-height: 1.25;
}

.servicioInfo p {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgb(167, 185, 220);
    line-height: 1.4;
    flex: 1;
}

.servicioFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
}

.servicioPrecio {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: rgb(10, 145, 255);
}

.servicioBtn {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    background: rgb(10, 145, 255);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 7px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.servicioBtn:hover {
    background: rgb(0, 120, 220);
    transform: scale(1.05);
}

/* ========== VER MÁS SERVICIOS ========== */

.serviciosExtra {
    display: contents;
    /* Las tarjetas participan en el grid normalmente */
    visibility: visible;
}

.serviciosExtra.oculto {
    display: none;
}

.verMasContainer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.verMasBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: rgb(10, 145, 255);
    background: rgb(36, 44, 62);
    border: 2px solid rgba(10, 145, 255, 0.35);
    border-radius: 30px;
    padding: 12px 28px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.verMasBtn:hover {
    background: rgb(10, 145, 255);
    color: #fff;
    border-color: rgb(10, 145, 255);
}

.verMasBtn:active {
    transform: scale(0.96);
}

.verMasBtn svg {
    transition: transform 0.35s ease;
    flex-shrink: 0;
}

.verMasBtn.abierto svg {
    transform: rotate(180deg);
}


/* --------- Reviews ---------- */

.containerReviews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 15px;
    width: 96%;
    height: auto;
    min-height: 45vh;
}

.reviews {
    background: rgb(36, 44, 62);
    border-radius: 16px;
    border-bottom: 3px solid rgb(10, 145, 255);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    padding: 20px 20px;
    grid-row: span 13;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.reviews:hover {
    transform: translateY(-3%);
}

.IconReviews {
    height: 15%;
    width: 100%;
    display: inline;
}

.estrellas {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.IconReviews h3 {
    color: rgb(230, 235, 240);
    background-color: rgb(10, 145, 255);
    border-radius: 20px;
    padding: 2px 5px;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: 'Parkinsans', sans-serif;
    text-align: center;
    box-sizing: border-box;
    white-space: pre-line;
    line-height: 1;
}

.textReview {
    height: 70%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.textReview p {
    color: rgb(230, 235, 240);
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.1;
}

.informacionReviews {
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.informacionReviews p {
    color: rgb(167, 185, 220);
    font-size: 1.1rem;
}

.informacionReviews img {
    height: 30px;
}

.comment {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.makecomment {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Parkinsans', sans-serif;
    background: rgb(36, 44, 62);
    color: rgb(10, 145, 255);
    padding: 15px 10px;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    border-radius: 15px;
}

.makecomment span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.makecomment svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.makecomment:hover {
    background: rgb(10, 145, 255);
}

.makecomment:hover .svg-wrapper {
    transform: scale(1.25);
    transition: 0.5s ease-in;
}

.makecomment:hover svg {
    transform: translateX(420%) scale(1.5);
    color: rgb(36, 44, 62);
}

.makecomment:hover span {
    opacity: 0;
    transition: 0.5s linear;
}

.makecomment:active {
    transform: scale(0.95);
}

/*----------Desing Contact----------*/

.datesContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 98%;
}

.date {
    width: 100%;
    height: auto;
    min-height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
}

.maps-contact {
    width: 70%;
    height: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.maps {
    height: 100%;
    width: 100%;
    display: flex;
}

.maps iframe {
    border-radius: 10px;
    width: 99%;
    height: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.547);
}

.dateInformation {
    width: 30%;
    height: auto;
    border-radius: 10px;
    border-bottom: 5px solid rgb(10, 145, 255);
    padding: 0 0 15px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 30px;
    flex-direction: column;
    background-color: rgb(36, 44, 62);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.547);
}

.imageconsultorio {
    width: 100%;
    height: 50%;
}

.imageconsultorio img {
    width: 100%;
    height: auto;
    max-height: 230px;
}

.dateInformation h3 {
    text-align: center;
    font-family: 'Parkinsans', sans-serif;
    font-size: 2.8rem;
    white-space: pre-line;
    line-height: 1;
    color: rgb(10, 145, 255);
}

.dateInformation h3 span {
    font-size: 2.2rem;
    color: rgb(230, 235, 240);
}

.iconsAndText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: start;
    padding: 0 20px;
    gap: 10px;
    width: 100%;
}

.icon-ubication {
    background: rgb(208, 217, 240);
    color: rgb(10, 145, 255);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 10px;
    font-size: 1.8rem;
    font-weight: 400;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-ubication:hover {
    background: rgb(10, 145, 255);
    color: rgb(208, 217, 240);
}

.textIcon a {
    color: rgb(248, 248, 246);
    font-size: 1.85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: .3s ease;
}

.textIcon:hover a {
    font-size: 1.9rem;
    color: rgb(121, 163, 235);
}

.makedates {
    font-size: 1.8rem;
    background: rgb(208, 217, 240);
    color: rgb(10, 145, 255);
    padding: 0.7em 1em;
    padding-left: 0.9em;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    font-weight: 700;
}

.makedates span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.makedates svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.makedates:hover {
    background: rgb(10, 145, 255);
}

.makedates:hover .svg-wrapper {
    transform: scale(1.25);
    transition: 0.5s ease-in;
}

.makedates:hover svg {
    transform: translateX(205%) scale(1.1);
    color: rgb(230, 235, 240);
}

.makedates:hover span {
    opacity: 0;
    transition: 0.5s linear;
}

.makedates:active {
    transform: scale(0.95);
}

/* ---------- Footer ---------- */

.footer {
    width: 100%;
    background: rgb(22, 28, 44);
    padding: 40px 5% 0;
    margin-top: 20px;
}

.footerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(10, 145, 255, 0.15);
}

.footerLogo {
    height: 55px;
    width: auto;
    margin-bottom: 10px;
}

.footerNombre {
    font-size: 1.6rem;
    font-weight: 600;
    color: rgb(230, 235, 240);
    line-height: 1.3;
    margin-bottom: 6px;
}

.footerCedula {
    font-size: 1.3rem;
    color: rgb(10, 145, 255);
    opacity: 0.8;
}

.footerTitulo {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: rgb(10, 145, 255);
    margin-bottom: 14px;
}

.footerLinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerLinks a {
    font-size: 1.5rem;
    color: rgb(167, 185, 220);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footerLinks a:hover {
    color: rgb(10, 145, 255);
}

.footerContacto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footerWhats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #25d366;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s ease;
}

.footerWhats:hover {
    background: #1da851;
}

.footerFacebook {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #3565ea;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s ease;
}

.footerFacebook:hover {
    background-color: #2551ca;
}

.footerInstagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #f81949;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s ease;
}

.footerInstagram:hover {
    background-color: #ca2548;
}

.footerRed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #EA4335;
    padding: 8px 16px;
    border-radius: 30px;
    text-decoration: none;
    width: fit-content;
    transition: background 0.2s ease;
}

.footerRed:hover {
    background-color: #ce3122;
}

.footerHospital {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1.4rem;
    color: rgb(167, 185, 220);
}

.footerHospital svg {
    color: rgb(10, 145, 255);
    flex-shrink: 0;
}

.footerBottom {
    text-align: center;
    padding: 16px 0;
}

.footerBottom p {
    font-size: 1.3rem;
    color: rgba(167, 185, 220, 0.5);
}



/* ========== MENÚ HAMBURGUESA ========== */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-right: 15px;
    z-index: 1100;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background: rgb(248, 248, 246);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobileMenu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 28, 44, 0.97);
    backdrop-filter: blur(8px);
    z-index: 1050;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.mobileMenu.open {
    display: flex;
}

.mobileMenu a {
    font-size: 3rem;
    font-weight: 700;
    color: rgb(208, 217, 240);
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
    width: 80%;
    text-align: center;
}

.mobileMenu a:hover {
    background: rgba(10, 145, 255, 0.15);
    color: rgb(10, 145, 255);
}

/* ========== MOBILE (max 600px) ========== */

@media (max-width: 600px) {

    /* Header */
    .headerDin {
        height: 90px;
        padding: 0 10px;
    }

    .headerInfo {
        width: 90%;
    }

    .headerInfo img {
        height: 55px;
        margin-right: 10px;
    }

    .headerInfo h1 {
        font-size: 1.2rem;
        font-weight: 1000;
        line-height: 1.2;
    }

    .headerInfo h2 {
        font-size: 1rem;
    }

    .buttonsHeader {
        display: none !important;
    }

    .hamburger {
        display: flex;
    }

    /* Carousel */
    .carousel-viewport {
        height: 50vh;
        position: relative;
    }

    .textCarousel {
        width: 100%;
        height: auto;
        padding: 15px;
        gap: 8px;
        bottom: 0;
        top: auto;
        justify-content: center;
        background: linear-gradient(to top, rgba(36, 44, 62, 0.9), transparent);
    }

    .textCarousel h2 {
        font-size: 2.8rem;
        text-align: center;
        color: rgb(230, 235, 240);
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    }

    #especialidad {
        font-size: 1.4rem;
        text-align: center;
    }

    .textCarousel p {
        font-size: 1.5rem;
        text-align: left;
        color: rgb(208, 217, 240);
    }

    .textCarousel p span {
        color: rgb(10, 145, 255);
        filter: none;
        font-weight: 700;
    }

    .overlayCarousel {
        display: none;
    }

    .carousel-track {
        transform: translateX(0%) !important;
        width: 100%;
        height: 100%;
    }

    /* Nav buttons */
    .navButtons {
        flex-direction: row;
        flex-wrap: wrap;
        height: 8vh;
        box-shadow: none;
        gap: 0;
    }

    .sections {
        font-size: 1.4rem;
        flex-direction: column;
        padding: 14px 6px;
        border-bottom: 3px solid rgb(10, 145, 255);
        width: 25%;
        height: 80px;
        gap: 6px;
    }

    .sections svg {
        width: 28px;
        height: 28px;
    }

    .sections span {
        font-size: 1.2rem;
        max-width: 100%;
        white-space: normal;
        line-height: 1.1;
    }

    .sections:hover span {
        max-width: 100%;
        opacity: 1;
        margin-left: 0;
    }

    #buttonLeft {
        border-radius: 0 0 0 10px;
    }

    #buttonRight {
        border-radius: 0 0 10px 0;
    }

    /* Sobre mí */
    .informationContainer {
        margin-top: 40px;
        width: 100%;
        padding: 0 16px 20px 16px;
        border-top: 3px solid rgb(10, 145, 255);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mainPersonalInformation {
        flex-direction: column;
        gap: 20px;
        width: 90%;
    }

    .informationSobreMi {
        width: 100%;
    }

    .informationSobreMi h2 {
        font-size: 5rem;
        line-height: 1.2;
    }

    .informationSobreMi li,
    .informationSobreMi p {
        font-size: 1.7rem;
    }

    .imageaside {
        width: 100%;
        max-height: 380px;
        overflow: hidden;
    }

    .imageaside img {
        max-height: 280px;
        object-fit: cover;
        width: 100%;
    }

    .overlay {
        background: linear-gradient(to bottom, rgb(36, 44, 62), transparent 40%, transparent 60%, rgb(36, 44, 62));
    }

    .bottomTargets {
        flex-direction: column;
        gap: 12px;
    }

    .target {
        width: 100%;
        margin: 0;
    }

    .documents {
        height: 150px;
    }

    .target h3 {
        font-size: 2.8rem;
    }

    .target p,
    .target li {
        font-size: 1.3rem;
    }

    /* Slash */
    .slash {
        height: 100px;
        margin: 30px 0 60px 0;
    }

    .slashOpaco h2 {
        font-size: 3.7em;
    }

    .iconsSlash {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .iconsSlash svg {
        width: 120px;
        height: 120px;
        margin: 0;
    }

    /* Especialidades */
    .containerEsp {
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-areas:
            "titulo"
            "imagen"
            "tarjetas";
        border-radius: 0;
        gap: 10px;
    }

    .imgEsp {
        height: 40vh;
        border-radius: 12px;
        margin: 0 10px;
        width: calc(100% - 20px);
    }

    .descEsp h3 {
        font-size: 2.2rem;
        max-width: 100%;
    }

    .descExp {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .exp h4 {
        font-size: 2rem;
    }

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

    .expDivider {
        display: none;
    }

    .overlayEsp {
        background: linear-gradient(to bottom, transparent 60%, rgb(167, 185, 220) 100%);
    }

    .secEspe {
        padding: 0 10px;
    }

    .espText h3 {
        font-size: 1.7rem;
    }

    .espText p {
        font-size: 1.4rem;
    }

    /* Sección ¿Cómo podemos mejorar tu vida? - Móvil */
    .conteinerPregunta {
        flex-direction: column;
        border-radius: 20px;
        padding: 24px 16px;
        gap: 24px;
        width: 96%;
    }

    .textEsp {
        width: 100%;
    }

    .descMovile {
        text-align: center;
    }

    .tituloPregunta {
        font-size: 2.8rem;
        text-align: center;
    }

    .subtituloPregunta {
        font-size: 1.5rem !important;
        margin-bottom: 16px;
        text-align: center;
    }

    .preguntaCards {
        gap: 12px;
    }

    .preguntaCard {
        padding: 14px 14px;
        gap: 12px;
    }

    .preguntaIcon {
        min-width: 40px;
        height: 40px;
    }

    .preguntaCardText h4 {
        font-size: 1.5rem;
    }

    .preguntaCardText p {
        font-size: 1.3rem !important;
    }

    .containerVideo {
        width: 100%;
    }

    .videoDoc {
        width: 100%;
        border-radius: 20px;
    }

    /* Servicios */
    .containerServicios {
        width: 100%;
        padding: 0 10px;
    }

    .serviciosGrid {
        grid-template-columns: 1fr;
    }

    .filtroBtn {
        font-size: 1.4rem;
        padding: 7px 16px;
    }

    /* Reviews */
    .containerReviews {
        grid-template-columns: 1fr;
        width: 96%;
    }

    .reviews {
        grid-row: span 1;
    }

    .textReview p {
        padding: 20px 0;
        font-size: 1.7rem;
    }

    /* Contacto / Citas */
    .datesContainer {
        width: 100%;
        padding: 0 10px;
        gap: 30px;
    }

    .date {
        flex-direction: column;
    }

    .maps-contact {
        width: 100%;
        height: 250px;
    }

    .maps iframe {
        border-radius: 10px 10px 0 0;
        height: 250px;
    }

    .dateInformation {
        width: 99%;
        border-top: 2px solid rgb(0, 120, 220);
        border-radius: 0 0 10px 10px;
    }

    /* Modal */
    .modalDocuments {
        width: 95%;
        max-height: 90vh;
    }

    /* Footer */
    .footer {
        padding: 30px 5% 0;
    }

    .footerGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ========== TABLET (601px - 799px) ========== */

@media (min-width: 601px) and (max-width: 840px) {

    .headerDin {
        height: 80px;
    }

    .headerInfo {
        width: 70%;
    }

    .headerInfo img {
        height: 65px;
    }

    .headerInfo h1 {
        font-size: 1.6rem;
    }

    .headerInfo h2 {
        font-size: 1.1rem;
    }

    .buttonsHeader {
        display: none !important;
    }

    .hamburger {
        display: flex;
    }

    .carousel-viewport {
        height: 60vh;
    }

    .overlayCarousel {
        height: auto;
        max-height: 80vh;
    }

    .textCarousel {
        width: 65%;
    }

    .textCarousel h2 {
        font-size: 3.8rem;
    }

    .navButtons {
        height: 18vh;
    }

    .sections {
        font-size: 2rem;
    }

    .mainPersonalInformation {
        flex-direction: column;
    }

    .informationSobreMi {
        width: 100%;
    }

    .imageaside {
        width: 100%;
    }

    .bottomTargets {
        flex-direction: column;
    }

    .target {
        width: 100%;
    }

    .slash{
        height: 20vh;
    }

    .slashOpaco h2 {
        font-size: 7rem;
    }

    .containerEsp {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titulo"
            "imagen"
            "tarjetas";
    }

    .imgEsp {
        height: 50vh;
    }

    /* Sección ¿Cómo podemos mejorar tu vida? - Tablet */
    .conteinerPregunta {
        flex-direction: column;
        border-radius: 28px;
        padding: 30px 24px;
        gap: 28px;
        width: 95%;
    }

    .textEsp {
        width: 100%;
    }

    .tituloPregunta {
        font-size: 3.4rem;
    }

    .preguntaCards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .containerVideo {
        width: 70%;
        margin: 0 auto;
    }

    .videoDoc {
        width: 100%;
        border-radius: 24px;
    }

    /* Fin */

    .containerReviews {
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews {
        grid-row: span 1;
    }

    .textReview p {
        font-size: 1.5rem;
    }

    .datesContainer {
        width: 85%;
        padding: 0 10px;
    }

    .date {
        flex-direction: column;
    }

    .maps-contact {
        width: 100%;
        height: 300px;
    }

    .maps iframe {
        border-radius: 10px 10px 0 0;
        height: 350px;
    }

    .dateInformation {
        width: 99%;
        border-top: 2px solid rgb(0, 120, 220);
        border-radius: 0 0 10px 10px;
    }

}

/* ========== DESKTOP CHICO (800px - 1199px) ========== */

@media (min-width: 841px) {
    main {
        justify-content: space-around;
    }

    .headerDin {
        height: 100px;
    }

    .headerInfo {
        width: 58%;
    }

    .headerInfo h1 {
        font-size: 2em;
    }

    .headerInfo h2 {
        font-size: 1.6em;
    }

    .headerInfo img {
        max-height: 80px;
        max-width: 100%;
    }

    .buttonsHeader {
        display: flex;
    }

    .hamburger {
        display: none;
    }

    .buttonHeader {
        font-size: 1.5em;
    }

    .slash {
        height: 200px;
    }

    /* Sección ¿Cómo podemos mejorar tu vida? - Desktop chico */
    .conteinerPregunta {
        width: 95%;
        gap: 30px;
        padding: 30px;
    }

    .textEsp {
        width: 60%;
    }

    .tituloPregunta {
        font-size: 3.6rem;
    }

    .containerVideo {
        width: 40%;
    }

    .videoDoc {
        width: 100%;
    }

    /* Fin */

    .serviciosGrid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ========== DESKTOP MEDIANO (1200px - 1499PX) ========== */

@media (min-width: 1200px) {
    main {
        margin: 0 auto;
    }

    .headerDin {
        height: 16vh;
    }

    .headerInfo {
        padding-left: 1%;
    }

    .headerInfo h1 {
        font-size: 3.5em;
    }

    .headerInfo h2 {
        font-size: 1.8em;
    }

    .buttonHeader {
        font-size: 1.6rem;
    }

    .buttonsHeader {
        display: flex;
        padding-right: 1%;
    }

    .hamburger {
        display: none;
    }

    .conteinerPregunta {
        width: 90%;
        padding: 40px;
        gap: 40px;
    }

    .tituloPregunta {
        font-size: 4.2rem;
    }

    .preguntaCardText h4 {
        font-size: 1.8rem;
    }

    .preguntaCardText p {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 1500px) {

    main {
        margin: 0 auto;
        max-width: 2000px;
    }

    /* ---- Header ---- */

    .headerDin {
        height: 17vh;
        width: 100%;
    }

    .headerInfo {
        padding-left: 2%;
    }

    .headerInfo h1 {
        font-size: 4.5rem;
    }

    .headerInfo h2 {
        font-size: 2.5rem;
    }

    .buttonHeader {
        font-size: 2.5rem;
    }

    .buttonsHeader {
        display: flex;
        padding-right: 2%;
        gap: 0.5rem;
    }

    .hamburger {
        display: none;
    }

    /* ---- Carousel ---- */

    .textCarousel {
        width: 45%;
        padding: 0 40px;
    }

    .textCarousel h2 {
        font-size: 8rem;
    }

    .textCarousel p {
        font-size: 3.5rem;
    }

    #especialidad {
        font-size: 2.8rem;
    }

    /* ---- Nav Buttons ---- */
    .navButtons {
        width: 100%;
        height: 24vh;
    }

    .sections {
        font-size: 4rem;
    }

    /* ---- Sobre mí ---- */

    .informationContainer {
        padding: 40px 50px;
    }

    .informationSobreMi h2 {
        font-size: 13rem;
    }

    .informationSobreMi li,
    .informationSobreMi p {
        font-size: 2.8rem;
    }

    .target h3 {
        font-size: 4.5rem;
    }

    .target p,
    .target li {
        font-size: 2.3rem;
    }

    .targetSubtitle {
        font-size: 2.8rem;
    }

    /* ---- Slash ---- */
    .slash {
        height: 25vh;
        width: 100%;
    }

    .slashOpaco h2 {
        font-size: 13rem;
    }

    .iconsSlash svg {
        width: 200px;
        height: 200px;
        margin: 0;
    }

    /* ---- Especialidades ---- */

    .descEsp h3 {
        font-size: 3.5rem;
        max-width: 65%;
    }

    .descEspEyebrow {
        font-size: 2.5rem;
    }

    .exp h4 {
        font-size: 4rem;
    }

    .exp p {
        font-size: 2rem;
    }

    .imgEsp {
        height: 85vh;
    }

    .espText h3 {
        font-size: 2.8rem;
    }

    .espText p {
        font-size: 2.4rem;
    }

    .espTag {
        font-size: 2.2rem;
    }

    .badge {
        font-size: 2rem;
    }

    /* ---- Sección ¿Cómo podemos mejorar tu vida? ---- */

    .tituloPregunta {
        font-size: 6.2rem;
    }

    .subtituloPregunta {
        font-size: 2.2rem !important;
    }

    .preguntaCardText h4 {
        font-size: 2.7rem;
    }

    .preguntaCardText p {
        font-size: 2.2rem !important;
    }

    /* ---- Reviews ---- */
    .containerReviews {
        gap: 18px;
    }

    .IconReviews h3 {
        font-size: 2.8rem;
    }

    .textReview p {
        font-size: 2.5rem;
    }

    .informacionReviews p {
        font-size: 1.8rem;
    }

    .makecomment {
        font-size: 2.8rem;
    }
    
    /* ---- Footer ---- */
    
    .footer {
        padding: 50px 8% 0;
    }

    .footerGrid {
        grid-template-columns: 2fr 1fr 1.5fr;
        gap: 40px;
    }

    .footerNombre {
        font-size: 3rem;
    }

    .footerCedula {
        font-size: 1.8rem;
    }

    .footerTitulo {
        font-size: 2.8rem;
    }

    .footerLinks a {
        font-size: 2.5rem;
    }

    .footerWhats,
    .footerFacebook,
    .footerInstagram,
    .footerRed {
        font-size: 1.8rem;
        padding: 10px 20px;
    }

    .footerHospital {
        font-size: 1.8rem;
    }

    .footerHospital svg {
        width: 28px;
        height: 28px;
    }

    .footerBottom p {
        font-size: 1.8rem;
    }

}