/******************************/
/*  Format Secció Hero        */
/******************************/

.hero-section {
    background: url('../../../images/Hero.jpg') no-repeat center center !important;
    background-size: cover!important;
    text-align: center!important;
	display: flex; /* Permite alinear contenido fácilmente */
	justify-content: flex-start;
    align-items: center; /* Centra verticalmente los elementos dentro */
    padding: 150px 20px;
    color: #21b8ef;
}

.hero-content {
    max-width: 700px;
    /* margin: 0 auto; */
	align-items: flex-start; /* Alinea los elementos a la izquierda */
	text-align: left;
}


/*  Sombra al texto para mejorar visibilidad */
.hero-content h1, 
.hero-content p {
    /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); */
}
.hero-content h1 {
}
/*  Aumentar la opacidad del fondo oscuro */
.hero-section::before {
    background: rgba(0, 0, 0, 0.5); /* Más oscuro */
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    margin: 10px;
}

.btn-primary {
    background: #007bff;
    color: white;
     border-color:#6c757d;
}

.btn-secondary {
    background: #28a745;
    color: white;
}

/******************************/
/*  Format Botó Cita Menu     */
/******************************/

.btn.btn-primary.btn-menu {
    font-size: 14px; /* Tamaño de texto */
    padding: 5px 6px; /* Relleno interno (alto y ancho) */
}

/******************************/
/*  Format Secció Funnel        */
/******************************/

.funnel-section {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 🔹 Alinea el contenido a la izquierda */
    background: url('../../../images/Doctora_small.jpg') no-repeat top right ;
	padding-left: 50px; /* 🔹 Añade un margen izquierdo para evitar que toque el borde */
    text-align: left; /* 🔹 Asegura que el texto quede alineado */
    overflow: hidden;
    margin-top: 40px;
	margin-left: 0px;
	padding: 0px;
}



.funnel-content {
    position: relative;
    color: white;
    /*max-width: 600px;*/
    padding: 20px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #00a699;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.3s;
}

.cta-button:hover {
    background-color: #008577;
}
/******************************/
/*  Format Articles destacats */
/******************************/

/*  Sección de artículos destacados */
.articles-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8f9fa;
}

/*  Contenedor de los artículos */
.articles-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/*  Cada tarjeta de artículo */
.article-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%;
    transition: transform 0.3s ease;
}

/*  Efecto hover */
.article-item:hover {
    transform: translateY(-5px);
}

/*  Imagen del artículo */
.article-item img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

/*  Título del artículo */
.article-item h3 {
    font-size: 1.4rem;
    color: #0056b3;
    margin-bottom: 10px;
}

/*  Botón Leer Más */
.article-item .read-more {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1rem;
    color: white;
    background: #007bff;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.article-item .read-more:hover {
    background: #0056b3;
}

.mod-articlesnews.newsflash {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.mod-articlesnews.newsflash .newsflash-item {
    width: 30%;  /* Distribuye en 3 columnas */
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.mod-articlesnews.newsflash .newsflash-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.mod-articlesnews.newsflash .newsflash-item h3 {
    font-size: 1.2em;
    margin: 10px 0;
    color: #333;
}

.mod-articlesnews.newsflash .newsflash-item .readmore {
    display: inline-block;
    padding: 10px 15px;
    background: #21b8ef;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
}

.mod-articlesnews.newsflash .newsflash-item .readmore:hover {
    background: #1a94c4;
}

/*- Configurar 3 columnes a la secció destacats -*/
.mod-articlesnews.newsflash {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre artículos */
    justify-content: center;
}

.mod-articlesnews.newsflash .newsflash-item {
    width: calc(33.333% - 20px); /* Para que sean 3 por fila */
    box-sizing: border-box;
    text-align: center;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*************************************/
/*- Format de la pastilla contactes -*/
/*************************************/

#bottom1, #bottom2 {
    display: flex;
    align-items: stretch; /* Ambos módulos tendrán la misma altura */
}

.contact-info, .map-container {
    flex: 1; /* Ambos módulos ocuparán el mismo espacio */
    display: flex;
    flex-direction: column;
    /*justify-content: center;  Centra el contenido */
}

.map-container iframe {
    width: 100%;
    height: 100%; /* Para que el mapa llene el módulo */
}


.contact-info {
    background: #21b8ef;
    padding: 20px;
    border-radius: 8px;
	height: 480px;
}

.contact-info p {
    margin: 5px 0;
    font-size: 16px;
}

.contact-info a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    color: #0056b3;
}

.map-container iframe {
    border-radius: 8px;
	height: 480px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

/********************************/
/* FORMAT PREVIEW ARTICLES      */
/********************************/

.article-preview ul{
	list-style: none;
}

.mod-articles-items {
    list-style: none !important;
    padding-left: 0 !important;
}

.mod-articles-items li {
    list-style: none !important;
    padding-left: 0 !important;
}
.mod-articles-items img {
    border-radius: 15px; /* Ajusta el valor según el redondeo deseado */
}

/**************************************************/
/* Hide the component/article area on a page      */
/**************************************************/
/*body.home #sp-main-body {
    display: none;
}

body:not(.home) #sp-main-body {
    display: block;
}*/
/**************************************************/
/* Amaga els videos si es miren des de un mòvil   */
/**************************************************/

@media (max-width: 768px) {
    .video-container {
        display: none;
    }
}

#sp-position8,
#sp-position8 .sp-column,
#sp-position8 .sp-module,
#sp-position8 .sp-module-content,
#sp-position8 #mod-custom110 {
    height: 100%;
}

#sp-position8 .sp-column {
	height: 100%;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: left;  /*Si también quieres centrar horizontal */
}

#sp-position8 p {
    margin: 0 !important;
}

@media (max-width: 992px) {
    #sp-header .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    #sp-logo, #sp-position8, .offcanvas-toggler-secondary {
        flex: 0 0 auto;
    }

    #sp-logo img.logo-image-phone {
        max-height: 25px;
        width: auto;
        height: auto;
    }

    #sp-menu nav ul {
        display: none; /* Ocultas menú normal */
    }

    /* Asegúrate que el burger que queda se muestre */
    .offcanvas-toggler-secondary {
        display: flex !important;
    }

    .btn-menu {
        white-space: nowrap;
    }
}

#sp-position8 .btn-menu {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    text-align: center;
    width: 100%;
}
#sp-footer, #sp-bottom {
    background: #000;
}
#sp-footer #sp-footer2 {
    text-align: left;
}

.mutuas-info p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.mutuas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  justify-items: center;
}

.mutuas-grid img {
  width: 120px;    /* Ajusta el ancho de todos los logos */
  height: auto;
  transition: transform 0.3s ease;
}

.mutuas-grid a:hover img {
  transform: scale(1.1);
}
/*--------------------------------------*/
/* MOSTRAR BOTO PEDIR CITA EN MODE MOVIL*/
/*--------------------------------------*/

@media (max-width: 991px) {
  #sp-position8 {
    order: 3; /* Opcional, para controlarlo en el orden */
    width: 100%; /* Que ocupe todo el ancho */
    text-align: center; /* Centrar el botón */
    position: relative;
    left: 0;
    top: 0;
    margin-top: 10px;
  }
}@media (max-width: 991px) {
  #sp-position8 .btn-menu {
    display: inline-block;
    width: auto;
    background-color: #007bff;
    color: #fff;
  }
}

#article_image {
    width: 600px; /* Ajusta según necesidad */
    height: auto; /* Mantiene la proporción */
}

#sp-destacats {
    padding-top: 10px;
    padding-bottom: 10px;
}

#sp-main-body {
    padding-top: 10px;
    padding-bottom: 10px;
}


/********************************/
/* Landing page funnel          */
/********************************/
.landing-container {
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/images/tu-imagen.jpg') no-repeat center center;
    background-size: cover;
    color: white;
}

.landing-hero {
    max-width: 600px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background-color: #00a699;
    color: white;
    text-decoration: none;
    font-size: 18px;
    border-radius: 30px;
    transition: 0.3s;
}

.cta-button:hover {
    background-color: #00897b;
}

/***************************/
/* Funnel site             */
/***************************/
.landing-container {
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: Left;
    background: url('/images/tu-imagen.jpg') no-repeat center center;
    background-size: cover;
    color: white;
}

.landing-hero {
    max-width: 600px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

/************************************/
/* PROMO CITA ONLINE                */
/************************************/
.promo-section {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    padding: 50px 10px 0 10px;
    background-color: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    margin: 20px 0 0 0;
	text-align: center;
	color: #ffffff;
	background-color: #21b8ef;
	width: 100%;
}

/* Contenido textual */
.promo-content {
    /*max-width: 600px;*/
	padding: 20px 0 0 0;
	display: flex;
	/*flex-wrap: wrap;*/
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;"
}

.promo-content h1 {
    font-size: 36px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.promo-content p {
    font-size: 18px;
    color: #666;
    /*line-height: 1.6;*/
    margin-bottom: 30px;
}

.beneficios {
  width: 30%;
  min-width: 200px;
  font-size: 1.1em;
  line-height: 1.6;
  color: #ffffff;
  text-align:left;
  font-size: 22px;
}

.video-online {
  width: 70%;
  text-align: center;
  
	
	
}

.video-online video {
  width: 100%;
  height: auto;
  outline :none!important;
  border :none!important;
  border-radius: 20px;
    overflow: hidden;
    position: relative;
  
  
  /*max-height: 400px;*/
}
.video-online video:focus-visible{
  outline :none;
}

@media (max-width: 768px) {
  .promo-content {
    flex-direction: column;
	align-items: stretch;
  }
  .beneficios {
	width: 100%;
  }
  .video-online {
    flex: 0 0 100%;
	width: 100%;
  }
}