/*********************************** FORMULARIOS ***********************************************/

/*********************************  FORMULARIO CONTACTO *********************************/
.cf7-row{
  display:flex;
  max-width: 900px;
  gap:14px;	
  align-items:center;
  flex-wrap:wrap;
  margin: 0 auto;
}

/* Cada campo */
.cf7-row .cf7-field{
  flex:1 1 220px;
  min-width:180px;
}

.cf7-row .cf7-field label{
  display:block;
  font-size:14px;
  margin:0 0 -10px;
  color:#0a2a3a;
  font-weight:600;
}

/* Inputs */
.cf7-row .cf7-field .wpcf7-form-control{
  width:100%;
  height:44px;
  border:2px solid #1e7fb6;   /* azul del borde */
  border-radius:2px;
  padding:0 12px;
  outline:none;
  box-shadow:none;
  font-size:15px;
}

/*boton*/
.cf7-row .cf7-actions-contacto{
  flex: 0 0 100%;
  width: 100%;
  margin-top: 14px;
}


.cf7-btn{
  -webkit-appearance:none;
  appearance:none;
  border:0 !important;
  outline:0;
  cursor:pointer;

  height:44px;
  padding:0 58px 0 22px;       
  border-radius:999px;
  background:#0e597f;
  color:#fff!important;

  display:inline-flex;
  align-items:center;
  justify-content:flex-start;

  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:44px;             
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}

.cf7-btn-text{
  display:block;
  line-height:1;
}

/* círculo de la derecha */
.cf7-btn-icon{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.18);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  line-height:1;
}

/* hover/active */
.cf7-btn:hover{ filter:brightness(1.05); }
.cf7-btn:active{ transform:translateY(1px); }


/* Flecha */
.cf7-arrow{
  display:inline-flex;
  width:28px;
  height:28px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#fff!important;
  font-size:18px;
  line-height:1;
}

/* Mensajes CF7  */
.wpcf7 form .wpcf7-response-output{
  margin-top:12px;
}

/* Responsive: en móvil apila y el botón ocupa ancho */
@media (max-width:768px){
  .cf7-row{
    gap:10px;  
  }
  .cf7-row .cf7-actions{
    width:100%;
  }
  .cf7-btn{
    width:100%;
    justify-content:center;
  }
}     

/************************************* FORMULARIO NEWSLETTER ************************************************/

/* contenedor */
.cf7-wrap{
  max-width: 520px;
}

/* input pill con icono */
.cf7-pill{
  position:relative;
  height:44px;
  border:2px solid #1e7fb6;
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}

.cf7-pill::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-size:18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f6f9a' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z'/%3E%3C/svg%3E");
}

.cf7-pill .cf7-pill-input{
  width:100%;
  height:44px;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  padding:0 16px 0 48px;
  line-height:44px;
  box-shadow:none !important;
}

.cf7-pill .cf7-pill-input::placeholder{
  color:#7fb6d6!important;
  font-style:italic;
  opacity:1;			
}

.cf7-actions{
  width:100%;
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.cf7-btn-news{
  -webkit-appearance:none;
  appearance:none;
  border:0 !important;
  cursor:pointer;
  width: 180px;	
  height:44px;
  padding:0 56px 0 24px;
  border-radius:999px;
  background:#0f6f9a;
  color:#fff;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  position:relative;
  line-height:44px;
  display:inline-flex;
  align-items:center;
}

.cf7-btn-icon-news{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  font-size:20px;
  line-height:1;
}

.cf7-btn-news:hover{ filter:brightness(1.05); }
.cf7-btn-news:active{ transform:translateY(1px); }

.wpcf7 button.cf7-btn-news,
.wpcf7 .cf7-pill input{
  font-family:inherit;
  box-sizing:border-box;
}



/**************************** FORMULARIOS RECURSOS DESCARGABLES **************************************/

/* Campo que ocupa 100% */
.cf7-field.fullwidth {
  flex: 0 0 100%;
}

/* Botón corregido */
.cf7-btn.descargable {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  width: 100%;
  font-size: 15px;
}

/* Asegura que el texto sea visible */
.cf7-btn-text.descargable {
  color: #ffffff !important;
  display: inline-block;
  line-height: 1.2;
}

/* Icono de flecha */
.cf7-btn-icon.descargable {
  margin-left: 10px;
  color: #ffffff!important;
}

/* Aceptación política */
.wpcf7-acceptance .descargable {
  font-size: 14px;
  color: #0a2a3a;
}

/********************** aioseo-breadcrumb *****************************/


span.aioseo-breadcrumb:first-child a{
  color: transparent;
  font-size: 1px;
}

span.aioseo-breadcrumb:first-child a::after {
  font-family: ETmodules !important;
  font-size:16px;
  content: "\e074" !important;
  color: #0e597f;
  padding-right: 5px;
}

/* SEPARADOR*/
.aioseo-breadcrumbs .aioseo-breadcrumb-separator {
  color: #494949 !important;
}

.aioseo-breadcrumbs span {
  color: #0e597f !important;
  font-family: Nunito, sans-serif;
  font-weight: 700;
  font-size:16px;
}




/********************** WIDGET HORARIO (SELECT DE DIAS) *****************************/


.widget-horario {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: 400px;
}

.icono-box {
  background-color: #0f5e8c;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.icono-box svg {
  width: 34px;
  height: 34px;
}

.widget-horario .contenido label {
  font-size: 16px;
  color: #0f5e8c;
}

#selector-dia {
  display: block;
  margin: 8px 0;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  width: 150px;
  border: 1px solid #0e597f;
  border-radius: 6px;
  background: #f9f9f9;
}

.horario-texto {
  font-size: 14px;
  margin-top: 8px;
  color: #545454;
}
  
@media (max-width:728px){
    .widget-horario{
      margin-top: -40px;
    }
  }


  /******************* WIDGET OPINIONES DE PACIENTES **********************************/


  /********************* PARTE DERECHA *******************/

  .opiniones-sindrome { 
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
}

.opiniones-sindrome h2 {
  color: #ffffff;
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 600;
}

.rating-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.stars {
  color: #FFD700;
  font-size: 20px;
}

.puntuacion {
  background-color: white;
  color: #0f5e8c;
  font-weight: bold;
  border-radius: 30px;
  padding: 5px 10px;
  font-size: 14px;
}

.google-logo {
  height: 20px;
  width: auto;
}

.descripcion {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.boton-google {
  background-color: white;
  color: #0f5e8c;
  padding: 10px 20px;
  margin-top: 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-family: Rubik, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.boton-google:hover {
  background-color: #e4f0f8;
}


/*********** PARTE IZQ *********************/

.mockup-testimonios-container {
  position: relative;
  text-align: center;
  max-width: 550px;
  margin: 0 auto;
}

.mockup-img {
  position: relative;
}

.mockup-img img {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0 auto;
}

.testimonio-carrusel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-35px);
  width: 90%;
}

.testimonial {
  background: white;
  border-radius: 15px;
  padding: 15px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: none;
  text-align: left;
  animation: fadeIn 0.5s ease;
}

.testimonial.active {
  display: block;
}

.avatar {
  background: #d3e5f3;
  color: #0f5e8c;
  font-weight: bold;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  margin-right: 10px;
  font-size: 14px;
}

.contenido {
  overflow: hidden;
}

.nombre {
  font-size: 14px;
  margin-bottom: 2px;
}

.rol {
  font-size: 12px;
  color: gray;
  margin-bottom: 10px;
}

.estrellas {
  color: #FFD700;
  font-size: 14px;
  margin-left: 5px;
}

.testimonial p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/******************* Widget checklist «El espacio seguro»  **********************************/

.checklist-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem;
  border-radius: 8px;
  color: #545454;
  font-family: 'Open Sans', sans-serif;
}

.checklist-column {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 18px;
}

.check-icon {
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius:50px;
  flex-shrink: 0;
  fill: #0e597f;
}

@media (max-width:728px){
    .checklist-container{
      flex-direction: column;
    }
  }

/******************* Linea del tiempo - todas tratamiento /tratamiento/.../   **********************************/

.dnxte-timline-img {
  width:50px!important;
  height:50px!important;
  margin-left: -25px!important;
}
.dnxte-timeline-pic img {
  margin-top: -18px!important;
  margin-left: -17px!important;
   width: 35px!important;
    height: auto!important;
}


/******************* Carrousel video youtube, libreria splide.js /conocenos/prensa/   **********************************/

/* =========================
   SPLIDE CORE
========================= */
.splide__track {
  overflow: hidden;
}

.splide__list {
  display: flex;
}

.splide__slide {
  width: 100%;
  flex-shrink: 0;
  z-index: 5;
}

/* =========================
   LAYOUT SLIDE
========================= */
.slide-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media content";
  gap: 3rem;
  align-items: center;
}

/* ÁREAS GRID */
.slide-media {
  grid-area: media;
}

.slide-content {
  grid-area: content;
}

/* =========================
   VIDEO
========================= */
.slide-media > div {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto;
}

/* =========================
   TEXTO
========================= */
.slide-content h3 {
  font-size: 32px;
}

.slide-content p {
  font-size: 16px;
}

.slide-divider {
  width: 60px;
  height: 3px;
  background: #00a7e1;
  margin: 1rem 0 1.5rem;
}

/* ========== PAGINACIÓN SPLIDE ========== */
.splide {
  position: relative;
}

.splide__pagination {
  position: absolute;
  bottom: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.splide__pagination__page {
  background: #ccc;
  opacity: 1;
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.splide__pagination__page.is-active {
  background: #0E597F;
}


/* =========================
   FIX OVERLAYS INVISIBLES
========================= */
.splide__slide .slide-layout::before,
.splide__slide .slide-layout::after {
  pointer-events: none !important;
}

/* =========================
   RESPONSIVE (MÓVIL)
========================= */
@media (max-width: 980px) {
  .slide-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "media";
  }

  .slide-content h3 {
    font-size: 26px;
  }
}



/******************* TABLA DE PRECIOS /clinica-adicciones/  **********************************/



/* Contenedor de tarjetas */
.pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

/* Tarjeta base */
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;           
  text-align: center;            
  background: #fff;
  border: 2px solid #dde6f2;
  border-radius: 10px;
  padding: 2rem;
  max-width: 400px;
  flex: 1 1 400px;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card h3 {
  font-size: 32px;
  margin-bottom: 1.5rem;
}

.card h4 {
  font-size: 22px;
  color:#545454;
  font-weight: 700;
  margin-bottom: 0px;
}

.card .price {
  font-size: 4.5rem;
  font-weight: bold;
  color: #0e597f ;
  font-family: Nunito, sans-serif;	
  margin-bottom: 1rem;
}

.card .price span {
  font-size: 1.8rem;
}

.card .price small {
  font-size: 1rem;
  color: #555;
}

/* Línea azul */
.divider {
  border: none;
  height: 3px;
  background-color: #0e597f;
  margin: 1rem 0;
  width: 100%;
  max-width: 140px;
}

.card ul {
  list-style: none;
  margin-top: 1rem;
  padding-left: 0;               
}

.card ul li {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.4;
  display: inline-block;
  width: 100%;
  padding: 0 1rem;
  word-break: normal;
}

.card ul li::before {
  content: "✔️";
  margin-right: 0.4rem;
  color: #6c2bd9;
}


/* Plan destacado */
.featured {
  border: 2px solid #0e597f ;
  background:  #edf4fa;
  transform: scale(1.05);        
  z-index: 2;                    
}

.featured .badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #0e597f ;
  color: #ffffff;
  padding: 5px 30px;
  border-radius: 8px;
  font-size: 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .pricing-cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    max-width: 100%;
    margin-bottom: 30px;
  }
	
	.featured .badge {
  padding: 8px 30px;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  top: -35;
}
}