/* 1. CONFIGURACIÓN GLOBAL */
* {
    box-sizing: border-box;
}

body {
    --bg1-color: #d4f2fd;
    --box2-color: #fc6a27e1;
    --box1-color: #08bdd8;
    --bg4-color: #e2eaff;
    --text-color: #444;
    background-color: var(--bg4-color);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* 2. HEADER */
.header {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background-color: #fff;
    justify-content: space-evenly;
    align-items: center;
}
.header__open-nav-button {
    display: none;
}
.header__nav-list {
    display: flex;
    flex-direction: column;
    height: auto;
    margin: auto;
    justify-content: space-evenly;
    gap: 20px;
    margin-right: 40px;
}
.header__checkbox {
    display: none;
}
.header__nav {
    display: block;
    background-color: #fff;
    position: static;
    justify-content: space-between;
    height: auto;
    width: auto;
}
.header__nav-list {
    flex-direction: row;
}

.header__nav-item {
    list-style: none;
}
.header__nav-item a {
    font-size:1.5rem;
    color: #18233f;
    text-decoration: none;
}
.header__nav-item :is(:hover,:active) {
    color: red;
    text-decoration:underline;
}

.flexbox {
    display: flex;
    margin-right: 25px;
}

.flexbox__flex-item {
    text-decoration: none;
    color: #fff;
    width: 50px;
    margin: 10px;
    font-size: 1.5rem;
    text-align: center;
    transition: 0.3s;
}

.flexbox__flex-item:first-child { background-color: var(--box1-color); }
.flexbox__flex-item:last-child { background-color: var(--box2-color); }

.flexbox__flex-item:first-child:hover {
    background-color: #fff;
    color: var(--box1-color);
    font-style:italic;
}

.flexbox__flex-item:last-child:hover {
    background-color: #fff;
    color: var(--box2-color);
    font-style:italic;
}

.header__logo {
    width: 200px;
    margin: 10px 20px;
}

/* 3. SECCIÓN PROFILE (MAIN) */
.profile__wrapper {
    display: flex;
    max-width: 1200px;
    flex-direction: column;
    margin: auto;
    background-image: url(/Web/assets/template1.png);
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    justify-content: center;
}

h2 {
    color: var(--text-color);
    font-size: 4.5rem;
    text-wrap: balance;
    font-weight: bolder;
    padding: 30px;
    margin-left: 7%;
}

h3, h1 {
    color: var(--text-color);
    font-size: 2.5rem;
    font-style: italic;
    margin-top: 50px;
    margin-left: 12%;
}

/* 4. BLOQUES DE SECCIÓN (TDIGITAL) */
.tdigital {
    max-width: 1200px;
    background-color: var(--bg1-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 20px 0;
}
.tdigital__slide2 {
    max-width: 1200px;
    background-image: url('/Web/assets/template2.png');
    color: #fff;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 20px 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tdigital__slide2-header {
    display: flex;
    align-items: center; /* Centra verticalmente imagen y texto */
    gap: 1px; /* Espacio entre robot y título */
    margin-left: 8%; /* Alineado con el resto de tus títulos */
    margin-top: 20px;
}
.tdigital__slide2-img-robot {
    width: 80px; /* Tamaño ajustado para que no sature el título */
    height: auto;
}
.tdigital__title {
    margin-top: 5%;
    margin-left: 8%;
    width: fit-content;
    border-radius: 10px;
    font-size: 2rem;
    text-align: center;
    color: #fff;
    padding: 15px 30px;
    background-image: linear-gradient(to right, #60d5e8, #895cfd);
}
.tdigital__slide2-title {
    margin: 8%;
    width: fit-content;
    border-radius: 10px;
    font-size: 2rem;
    text-align: center;
    color: #fff;
    padding: 15px 30px;
    background-image: linear-gradient(to right, #57f, #f6c);
}
.tdigital__title-descr {
    margin-left: 11%;
    margin-top: 10px;
    max-width: 900px;
    font-size: 3rem;
    text-align: left;
    text-wrap: balance;
}
.tdigital__slide2-title-descr {
    margin-left: 11%;
    margin-top: 10px;
    max-width: 900px;
    font-size: 3rem;
    color: #fff;
    text-align: left;
    text-wrap: balance;
}
/* 5. GRID DE TARJETAS */
.tdigital__container {
    display: grid;
    grid-template-columns: 1fr;
    width: 90%;
    margin: 40px auto;
    gap: 20px;
}

.tdigital__slide2-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 90%;
    margin: 40px auto;
    gap: 20px;
}
.tdigital__description-item {
    border: 3px solid #08bdd8;
    border-radius: 15px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.4);
}
.tdigital__slide2-description-item {
    border: 3px solid #08bdd8;
    border-radius: 15px;
    padding: 25px;
    background-color:#fff;
}
.tdigital__description-img {
    width: 50px; /* Ajuste para que los iconos no se descontrolen */
    height: auto;
    margin-bottom: 15px;
}

.tdigital__description-name {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #222;
}
.tdigital__slide2-description-name {
    font-size: 2.3rem;
    font-weight: bolder;
    margin-bottom: 10px;
    color: #222;
}
.tdigital__description-data {
    font-size: 1.3rem;
    line-height: 1.5;
}

strong {
    color: #000;
    font-weight: 800;
}
.tdigital__slide2-description-data {
    color: #333;
}
h5 {
    color: #555;

}
.tdigital__slide2-gift {
    border: 1px solid #85f;
    background-image: linear-gradient(to right, #6de, #57f);
    width: fit-content;
    border-radius: 10px;
    font-size: 1.2rem; /* Ajustado para que quepa bien */
    text-align: center;
    color: #fff; /* Mejor blanco para el fondo oscuro */
    padding: 15px 30px;
    margin: 20px auto;
}
.gift-link {
    text-decoration: none; /* Quita el subrayado azul */
    display: block;        /* Hace que todo el bloque sea clickeable */
    width: fit-content;    /* Se ajusta al tamaño del h2 */
    margin: 20px auto;     /* Centra el enlace */
}

/* Aseguramos que el h2 mantenga su estilo pero reaccione al pasar el mouse */
.tdigital__slide2-gift:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    transition: 0.3s;
    cursor: pointer;
}
/* footer start*/

/* ESTILOS DEL FOOTER */
.footer {
    background-color: var(--bg1-color);
    padding: 40px 0 20px 0;
    text-align: center;
}
.contact__data {
    display: flex;
    flex-direction: column; /* Pone el logo arriba y el texto abajo */
    align-items: center;    /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente si el contenedor tiene altura */
    text-align: center;      /* Asegura que el texto interno también esté centrado */
    width: 100%;            /* Para que ocupe todo el ancho del footer */
}

.footer__logo-small {
    width: 150px;
    height: auto;           /* Mantiene la proporción */
    margin-bottom: 10px;    /* Espacio entre el logo y el texto "Procare" */
}

.footer-title {
    font-size: 4rem;
    color: #000;
    margin: 0;              /* Quita márgenes por defecto que puedan desalinearlo */
}
.contact__buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    background-image: linear-gradient(to right, red, #85f);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.2s;
}

.contact-btn:hover {
    transform: scale(1.05);
    background-image: linear-gradient(to right, #57f, #6de);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.btn-icon {
    width: 35px;
    border-radius: 50%;
}

/* BOTÓN SUBIR Y COPYRIGHT */
.footer__bottom {
    border-top: 1px solid #eee;
    margin-top: 40px;
    padding-top: 20px;
    position: relative;
}

.back-to-top {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: #f62;
    color: white;
    text-decoration: none;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 10px #0003;
}
.back-to-top:hover {
    background-color: var(--box2-color);
    transform: translateY(-5px); /* Pequeño salto hacia arriba al poner el cursor */
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.footer__bottom p {
    color: #888;
    font-size: 0.9rem;
}
.go-top-container {
    display: flex;
    justify-content: flex-end; /* Lo pone a la derecha */
    padding: 20px 8%; /* Alineado con tu margen del 8% */
    width: 100%;
}

.go-top-link {
    text-decoration: none;
    background-color: var(--box1-color);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.go-top-link:hover {
    background-color: var(--box2-color);
    transform: translateY(-3px);
}
section[id] {
    scroll-margin-top: 85px; 
}
/* 6. MEDIA QUERIES (RESPONSIVE) */
/* TABLETS Y PC (Escritorio) */
@media screen and (min-width: 56.25rem) {

    /* 0. AJUSTE DE ALINEACIÓN (Para todos los contenedores) */
    .tdigital__container, 
    .tdigital__slide2-container-std,
    .tdigital__slide2-container:not(.tdigital__slide2-container-std) {
        margin-left: 8%;  /* Empuja el contenido a la derecha */
        margin-right: 8%; /* Equilibra el espacio a la izquierda */
        width: 84%;       /* Asegura que el contenedor no se desborde */
    }

    /* 1. SECCIONES ESTÁNDAR (2 columnas iguales) */
    .tdigital__container, 
    .tdigital__slide2-container-std {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* 2. SECCIÓN ROBOT (Asimétrica) */
    .tdigital__slide2-container:not(.tdigital__slide2-container-std) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
    }

    /* Posicionamiento de tarjetas para el Robot */
    .tdigital__slide2-container:not(.tdigital__slide2-container-std) .tdigital__slide2-description-item:nth-child(1) {
        grid-column: 1; grid-row: 1;
    }

    .tdigital__slide2-container:not(.tdigital__slide2-container-std) .tdigital__slide2-description-item:nth-child(2) {
        grid-column: 1; grid-row: 2;
    }

    /* La tarjeta de Beneficios ocupa la columna derecha completa */
    .tdigital__slide2-container:not(.tdigital__slide2-container-std) .tdigital__slide2-description-item:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media screen and (max-width: 48rem) {
    .header__logo { width: 70px; }
    .flexbox__flex-item { font-size: 1.2rem; width: 40px; }
    h1, .tdigital__slide2-title-descr { 
        font-size: 1.5rem !important; /* El !important asegura que gane a otros estilos */
        margin-left: 0; 
        margin-top: 20px; 
        text-align: center; 
        padding: 0 10px;
    }
    h2 { font-size: 2rem !important;
        margin-left: 0;
        text-align: center;
    }
    h3 { font-size: 1.5rem !important;
        margin-left: 0;
        margin-top: 20px;
        text-align: center;
    }
    
.tdigital__description-name, 
    .tdigital__slide2-description-name { 
        font-size: 1.5rem; /* Ajuste para que no se vean gigantes en el celular */
    }

    /* También ajustamos el tamaño del texto descriptivo si es necesario */
    .tdigital__description-data, 
    .tdigital__slide2-description-data { 
        font-size: 1.1rem; 
    }
    .tdigital__slide2-header {
        flex-direction: column; /* Robot arriba, título abajo en móvil */
        margin-left: 0;
        gap: 10px;
    }

    .tdigital__slide2-img-robot {
        width: 60px; /* Un poco más pequeño en móvil */
    }
    .tdigital__title { 
        display: block;
        max-width: 90%;
        max-width: 320px;
        margin: 20px auto; 
        font-size: 1.4rem; 
        text-align: center;
        padding: 12px, 20px;
    }

    .tdigital__title-descr {
        font-size: 1.8rem;
        margin-left: 0;
        text-align: center;
        width: 100%;
    }

    .tdigital__description-name { font-size: 1.5rem; }
    .tdigital__description-data { font-size: 1.1rem; }
    
    .header {
    display: flex;
    position: sticky;
    top: 0; 
    height: 80px;    /* Altura fija crucial */
    background-color: #fff;
    justify-content: space-between; 
    align-items: center;
    padding: 0 20px;
    z-index: 1100;
    }
    .header__open-nav-button {
    display: block;
    cursor: pointer;
    font-size: 2.5rem;
    color: #18233f;
    z-index: 1200;
    margin-left: 10px; /* Pequeño espacio extra */
    }
    
    .header__checkbox {
        display: none;
    }
    .header__nav {
    display: none; 
    background-color: #fff;
    position: fixed; 
    top: 80px;      /* Empieza justo después de los 80px del header */
    right: 0%;
    width: auto; /*    width: 100vw; */
    height: auto;/*    height: calc(100vh - 80px); /* Ocupa el resto de la pantalla */
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    padding-top: 15px;
    border: 1px, solid #eee;
    border-radius: 0px 0px 15px 15px;
     /* Línea divisoria suave */
    box-shadow: -5px 15px 20px 0 #59f4;
    }
    .header__checkbox:checked ~ .header__nav {
    display: flex;
    .header__nav-list {
    display: flex;
    flex-direction: column;
    height: 40vh;
    margin: auto;
    justify-content: space-evenly;
    }
    }    

    .flexbox {
        margin-right: 60px;
    }
    .go-top-link {
        padding: 12px 20px; /* Hacemos el área de clic más grande para dedos */
        font-size: 1rem;
    }
    
    .go-top-container {
        justify-content: center; /* En móvil, a veces es mejor centrarlos para evitar errores de margen */
        padding: 30px 0;
    }
html, body {
    scroll-behavior: smooth !important;
    }
section {
    scroll-margin-top: 90px; /* Esto deja espacio para que el header no tape el título */
}
}