/* ==========================================
   TARJETAS HORIZONTALES (TEXTO LATERAL)
   ========================================== */

/* Contenedor principal de la sección de tarjetas */
.seccion-servicios {
    max-width: 800px; /* Alineado al mismo ancho de tu carrusel */
    margin: 50px auto 20px auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 35px; /* Distancia óptima entre tarjetas */
}

/* Estructura de la Tarjeta */
.tarjeta-horizontal {
    display: flex; /* Une la imagen y el texto en una fila */
    background-color: rgba(255, 255, 255, 0.60); /* Fondo claro de alto contraste */
    border-radius: 12px;
    overflow: hidden; /* Corta las esquinas de la imagen según el borde de la tarjeta */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animación de elevación al pasar el ratón */
.tarjeta-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Contenedor de la foto de la izquierda */
.tarjeta-imagen {
    flex: 1; /* Ocupa de forma flexible el espacio izquierdo (aprox 40%) */
    min-width: 220px;
}

.tarjeta-imagen img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Clave: la foto se amolda sin deformarse */
    /* Asegura que el recorte se haga desde el centro de tu foto */
    object-position: center;
    display: block;
}

/* Contenedor del texto de la derecha */
.tarjeta-contenido {
    flex: 1.6; /* Ocupa el espacio restante (aprox 60%) */
    padding: 30px;
    text-align: left; /* Restablece la lectura natural hacia la izquierda */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el texto verticalmente al lado de la imagen */
    position: relative;
}
/* Cambiamos '.tarjeta' por '.tarjeta-horizontal' */

/* .tarjeta-horizontal .recomendado {
    position: absolute;
    top: 10px;    /* Ajusté un poco para que no quede tan pegado arriba */
    /*right: 10px;  /* Ajusté un poco para que no quede tan pegado a la derecha */
    
    /*background-color: #ffc107; /* Color amarillo/naranja de advertencia */
    /*color: #2c3e50; /* Un color oscuro para el texto, para que contraste bien con el amarillo */
    /*padding: 5px 10px; /* Un poco más de aire */
    /*border-radius: 4px;
    font-size: 12px;
    font-weight: bold; /* Para que resalte más */
    /*z-index: 10; /* Asegura que esté por encima de otros elementos si es necesario */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Una pequeña sombra para darle profundidad */
/*}  */
.tag-recomendado-overlay{
    position: absolute;
    top: 70px;
    right: 40px;
    width: 300px;
    z-index: 20;
}


.tarjeta-contenido h3 {
    color: #2c3e50; /* Azul corporativo oscuro */
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.tarjeta-contenido p {
    color: #555555; /* Gris oscuro para lectura descansada */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}
.tarjeta-contenido-final p {
    color: #555555; /* Gris oscuro para lectura descansada */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Estilo del botón interno de la tarjeta */
.btn-leer-mas {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    align-self: flex-start; /* Evita que el enlace ocupe todo el ancho de la tarjeta */
    transition: color 0.2s, padding-left 0.2s;
}

.btn-leer-mas:hover {
    color: #2980b9;
    padding-left: 6px; /* Efecto dinámico hacia la derecha */
}

/* ==========================================
   DISEÑO RESPONSIVO (PANTALLAS MÓVILES)
   ========================================== */
@media (max-width: 650px) {
    .tarjeta-horizontal {
        flex-direction: column; /* Apila la imagen arriba y el contenido abajo en celulares */
    }

    .tarjeta-imagen {
        width: 100%;
        height: 220px; /* Definimos un alto fijo para la imagen en pantallas pequeñas */
    }

    .tarjeta-contenido {
        padding: 20px;
        text-align: center; /* En móviles queda mejor centrado */
    }
    .tarjeta-contenido-final {
        padding: 20px;
        text-align: center; /* En móviles queda mejor centrado */
    }
    .tag-recomendado-overlay{
        position: absolute;
        top: 80px;
        right: 10px;
        width: 200px;
        z-index: 20;
    }
    .btn-leer-mas {
        align-self: center; /* Centra el botón en móviles */
    }
}
.tarjeta-contenido p { /*para que haya menos espacion entre los parrafos de las tarjetas*/
    margin-top: 0;
    margin-bottom: 4px;  /* Un espacio sutil para que no se peguen por completo */
    line-height: 1.4; /* Hace que las líneas dentro del párrafo estén un poquito más juntas */
    
}
.tarjeta-contenido-final p { /*para que haya menos espacion entre los parrafos de las tarjetas*/
    margin-top: 0;
    margin-bottom: 6px;  /* Un espacio sutil para que no se peguen por completo */
    
}

/* ==========================================
   BARRA SUPERIOR ESTÁTICA (TÍTULO Y BOTÓN FIJOS)
   ========================================== */
/* ==========================================
   BARRA SUPERIOR ESTÁTICA (MÁXIMA PRIORIDAD FIJA)
   ========================================== */

.barra-fija-superior {
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 100px;             /* 🌟 CAMBIO: Se clava arriba de todo del contenedor */
    left: 0;
    width: 100%;
    background-color: #ffffff; /* 🌟 Fondo 100% sólido para que las tarjetas no se trasluzcan */
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 999;       /* 🌟 Un número muy alto para garantizar que flote por encima de las tarjetas */
    padding: 15px 0;    
}

/* Contenedor interno alineado */
.contenedor-barra {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    gap: 15px;
}

/* Estilo del Título Fijo */
.titulo-barra {
    color: #2c3e50;
    font-size: 1.3rem;
    margin: 0;
    font-weight: bold;
    /* 🛠️ Truco para la línea moderna: */
    display: inline-block;        /* Hace que la línea mida lo mismo que mide el texto */
    border-bottom: 3px solid #3498db; /* Línea de 3px de grosor, color azul */
    padding-bottom: 4px;          /* Espacio libre entre las letras y la línea */
}

/* Estilo del Botón Fijo */
.btn-barra-estatico {
    background-color: #3498db;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    white-space: nowrap; 
    font-size: 0.9rem;
    transition: background-color 0.2s;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

.btn-barra-estatico:hover {
    background-color: #2980b9;
}

/* ==========================================
   📱 ADAPTACIÓN RESPONSIVA PARA CELULARES
   ========================================== */
@media (max-width: 600px) {
    .barra-fija-superior {
        top: 100px; /* Mantiene el pegado en móvil */
    }

    .contenedor-barra {
        flex-direction: column;   
        text-align: center;       
        gap: 10px;                
    }
    
    .titulo-barra {
        font-size: 1.1rem;        
    }

    .btn-barra-estatico {
        width: 100%;              
        text-align: center;
        padding: 10px 16px;
    }
    .tag-recomendado-overlay{
    position: absolute;
    top: 110px;
    right: 10px;
    width: 150px;
    z-index: 20;
}
}

/* ==========================================
   ESTILO DE LA DESCRIPCIÓN Y TARJETAS (DESLIZABLES)
   ========================================== */
.descripcion-deslizable {
    max-width: 800px;
    margin: 40px auto 10px auto; /* 🌟 Buen margen superior para que empiece abajo de la barra */
    padding: 0 20px;
}

.descripcion-deslizable p {
    color: #000000;
    font-weight: bold;
    font-size: 1.2rem; 
    line-height: 1.6;
    margin: 0;
}
.descripcion-deslizable h2 {
    color: #000000;
    
}