/* Sección 1 */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Fila 1, Mujer operadora */
/* Centrando el contenedor del fondo */
.fondo1 .col {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.fondo1 {
background-image: url('../images/soporte/fondo1.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
min-height: 100vh;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* Contenedor de texto y botón */
.content-1{
position: absolute;
margin-top: 30%;
}
/* Textos de la sección 1 */
.overlay-text {
position: relative;
padding: 50px;
text-align: center;
border-radius: 5px;
width: 50%;
margin:auto;
}
.overlay-text h1 {
font-size: 40px;
margin: 0;
color: white;
/* text-shadow: 1px 1px 2px black; */
}
.overlay-text p {
font-size: 26px;
margin: 10px 0 0 0;
color: white;
/* text-shadow: 1px 1px 2px black; */
}
/* Estilo del botón naranja */
.contenedor-boton {
width: 50%;
height: 15vh;
margin: auto;
text-align: center;
margin-top: -3%;
}
.btn-naranja-soporte {
background-color: #ff7f00 !important;
color: white !important;
padding: 10px 10px;
font-size: 22px;
border-radius: 30px;
cursor: pointer;
width: 350px;
height: 100%;
margin: auto;
text-align: center;
}
/* Sección 2 */
.fondo2 {
background-image: url('../images/soporte/fondo2_old.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100vw;
height: auto;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* Contenedor de los cuadros */
.conten-cuadros{
text-align: center;
margin: auto;
}
/* Cuadro */
.cuadro{
width: 60%;
height: 80%;
text-align: center;
margin: auto;
margin-top: 10%;
}
.contenedor-gris{
height: 350px;
background-color: #B5C5D5;
padding: 20px 10px;
}
.contenedor-claro{
height: 350px;
background-color: rgba(235, 235, 245, 0.7);
/* opacity: ; */
}
.titulo_cuadro{
color:#ff7f00;
font-size: 30px;
margin-top: 20px;
width: 100%;
padding: 10px 10px;
}
.des_cuadro{
color:#1D4F80;
font-size: 20px;
width: 100%;
padding: 30px 80px;
text-align:left;
}
.contenedor-boton-cuadro{
width: 100%;
padding: 15px 15px;
margin-top: -25px;
}
.btn-naranja-2{
background-color: rgba(255, 127, 0, 1) !important; /* Color naranja sin transparencia */
color: white !important;
padding: 25px 50px; /* Padding para hacer los botones más grandes */
font-weight: bold;
font-size: 17px; /* Tamaño de la fuente */
border-radius: 30px;
cursor: pointer;
opacity: 1 !important;
z-index: 2;
}
/******* Tercera sección *******/
.banner{
background-image: url('../images/soporte/banner.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100vw;
height: 150px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.titulo_banner{
font-size: 55px;
}
/* Acordion */
.accordion-button {
background-color: #DCDDE2;
color: #333;
font-weight: bold;
border: none;
outline: none;
}
.accordion-button::after {
font-size: 1.25rem;
}
.accordion-button:not(.collapsed) {
background-color: #d9e2ea;
color: #333;
}
.accordion-body {
background-color: #f9fafb;
color: #333;
}
/************ Estilos Responsives ************/
@media (min-width: 1300px) {
.container-fluid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn-naranja-soporte {
padding: 15px 17px;
font-size: 22px;
width: 380px;
/* height: 30%; */
}
}
@media (min-width: 1440px) {
.overlay-text {
margin-top: 100px;
}
.container-fluid .btn-naranja-soporte {
padding: 30px 17px;
font-size: 22px;
width: 380px;
height: 130px;
}
}
@media (min-width: 1600px) {
.container-fluid .overlay-text {
margin-top: 30px;
}
.container-fluid .contenedor-boton {
margin-top: -20px;
}
}
@media (min-width: 1680px) {
.container-fluid .overlay-text {
margin-top: 100px;
}
/* .container-fluid .contenedor-boton {
margin-top: 100px;
} */
}
@media (max-width: 1300px) {
/* Contenedor de texto y botón */
.content-1{
margin-top: 120%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 17px 10px;
font-size: 22px;
width: 380px;
height: 30%;
}
}
@media (max-width: 1280px) {
.overlay-text {
width: 70%;
margin-top: -55%;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: 120%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 17px 10px;
font-size: 22px;
width: 380px;
height: 80%;
}
/******* Tercera sección *******/
.banner{
margin-top: 50px;
}
}
@media screen and (max-width: 1080px) and (max-height: 2400px){
.fondo1 {
background-image: url('../images/soporte/fondo_1X900.png');
}
/* Contenedor de titulos */
.overlay-text {
width: 70%;
margin-top: 120%;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: 30%;
margin-left: 0%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 15px 10px;
font-size: 22px;
width: 380px;
height: 25%;
}
/* Segunda sección */
.fondo2 {
height: 1050px;
}
.des_cuadro{
font-size: 18px;
padding: 20px 50px;
}
.contenedor-boton-cuadro{
width: 100%;
padding: 15px 15px;
margin-top: -10px;
}
.btn-naranja-2{
font-size: 15px; /* Tamaño de la fuente */
}
}
@media screen and (max-width: 1024px) and (max-height: 1366px){
/* Contenedor de titulos */
.overlay-text {
width: 70%;
margin-top: 80%;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: 5%;
margin-left: -5%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 15px 10px;
font-size: 22px;
width: 380px;
height: 50%;
}
}
@media screen and (max-width: 1024px) and (max-height: 600px) {
.overlay-text {
width: 70%;
margin-top: 40% !important;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: -4%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 12px 10px;
font-size: 22px;
width: 380px;
height: 92% !important;
}
}
@media (max-width: 912px){
.overlay-text {
width: 70%;
margin-top: 90% !important;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: 4%;
}
/* Contenedor de titulos */
.overlay-text {
width: 80%;
margin-top: 20%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 15px 10px;
font-size: 22px;
width: 380px;
height: 50%;
}
/* Segunda sección */
.des_cuadro{
font-size: 15px;
padding: 20px 40px;
}
.contenedor-boton-cuadro{
width: 100%;
padding: 10px 10px;
margin-top: 10px;
}
.btn-naranja-2{
font-size: 12px; /* Tamaño de la fuente */
}
}
@media (max-width: 853px){
/* Contenedor de texto y botón */
.content-1{
margin-top: 0%;
margin-left: 0%;
}
/* Estilo del botón naranja */
.contenedor-boton {
margin-top: 0%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
height: 60%;
}
/* Segunda sección */
.des_cuadro{
font-size: 12px;
padding: 20px 40px;
}
.contenedor-boton-cuadro{
width: 100%;
padding: 10px 10px;
margin-top: 10px;
}
.btn-naranja-2{
font-size: 10px; /* Tamaño de la fuente */
}
.contenedor-claro{
height: 300px;
}
.titulo_cuadro{
font-size: 20px;
}
.banner{
margin-top: -100px;
}
}
@media (max-width: 768px){
/* Contenedor de texto y botón */
.content-1{
margin-top: 0%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
height: 60%;
}
/*** Segunda sección ****/
.btn-naranja-2{
font-size: 8px; /* Tamaño de la fuente */
}
}
@media (max-width: 540px){
/* Contenedor de titulos */
.overlay-text {
width: 100%;
margin-top: 20%;
}
.overlay-text h1 {
font-size: 25px;
}
.overlay-text p {
font-size: 16px;
margin: 10px 0 0 0;
color: white;
text-shadow: 1px 1px 2px black;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: -5%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 10px 10px;
font-size: 18px;
width: 300px;
height: 65%;
}
.banner{
margin-top: 450px;
}
.titulo_banner{
font-size: 35px;
}
}
@media (max-width: 430px){
/* Contenedor de titulos */
.overlay-text {
/* width: 80%; */
margin-top: 120% !important;
}
/* Contenedor de texto y botón */
.content-1{
margin-top: 10%;
}
/* Estilo del botón naranja */
.contenedor-boton {
margin-left: 15%;
margin-top: -5%;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 15px 10px;
font-size: 18px;
width: 300px;
height: 65%;
}
.titulo_banner{
font-size: 25px;
}
}
@media (max-width: 390px){
/* Estilo del botón naranja */
/* .contenedor-boton { */
/* margin-left: 10%; */
/* } */
}
@media (max-width: 375px){
/* Estilo del botón naranja */
.contenedor-boton {
margin-left: 18%;
}
/* Contenedor de titulos */
.overlay-text {
width: 90%;
margin-top: 15%;
margin-left: 6%;
}
.overlay-text h1 {
font-size: 20px;
}
.overlay-text p {
font-size: 16px;
margin: 10px 0 0 0;
color: white;
text-shadow: 1px 1px 2px black;
}
/* Botón naranja 1 */
.btn-naranja-soporte {
padding: 10px 10px;
font-size: 18px;
width: 250px;
height: 65%;
}
}