.perfil-detalle-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border-radius: 12px;
  overflow-x: hidden;
}

/* Oculta la tarjeta por defecto */
.perfil-detalle-container.is-hidden { display: none; }

/* Al navegar a #agenda (bookmark), se hace visible */
#agenda:target { display: block; }

/* Para que no quede “tapada” por un header fijo (Astra suele usar sticky) */
#agenda { scroll-margin-top: 80px; } /* ajusta 80px a tu header */
html { scroll-behavior: smooth; }    /* scroll suave opcional */


.perfil-terapeuta {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: nowrap; /* <-- IMPORTANTE: Evita que se envíe abajo */
}

.foto-terapeuta {
  width: 320px; /* Fijo y consistente */
  flex-shrink: 0; /* Que no se reduzca */
  text-align: center;
}

.foto-terapeuta img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.info-terapeuta {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.info-terapeuta h1 {
  margin: 0 !important;
}

.perfil-seccion {
  border-top: 1px solid #ddd;
  padding: 1rem 0;
  font-size: 1rem;
}

.perfil-seccion-sin-linea {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  /* No border-bottom */
}

/*
.btn-agendar {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background-color: #6A4B91;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}
*/

.btn-agendar {
  display: inline-block;
  background-color: #7e57c2;
  color: #fff;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

/* Hover */
.btn-agendar:hover {
  background-color: #5e35b1;
  color: #fff;
}

.btn-agendar-container {
  text-align: center;
  margin-top: 1rem;
}

.btn-agendar,
#btn-agendar-perfil {
  position: relative;
  z-index: 5;
}

/* Responsive: botón al 100% en móviles */
@media (max-width: 768px) {
  .btn-agendar {
    display: block;
    width: 100%;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .perfil-terapeuta {
    flex-direction: column;
  }

  .foto-terapeuta,
  .info-terapeuta {
    width: 100%;
  }
}

/* Contenedor de cards */
.card-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.card-container h1 {
  text-align: center;
  margin-top: 2em; /* o 2rem */
  margin-bottom: 1em; /* 👈 espaciado doble hacia abajo */
}

.card-container h2,
.card-container h3 {
  text-align: center;
}

/* Contenedor general */
.terapeutas-archive-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cada card */
.terapeuta-card {
  background: #fff;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  box-sizing: border-box;
  color:inherit;
  /* display: flex; */
  /* display:block; */
  display: flex !important;
  flex-direction: column !important;
  /* justify-content: space-between; */
  justify-content: flex-start;	
  padding: 1.5rem;
  /* CAMBIOS PARA BAJAR EL BOTÓN */
  /* padding-bottom: 80px; */       /* reserva (alto del botón + espacio) */
  padding-bottom: 0 !important;/* ya no reservamos espacio extra */
  position: relative;          /* ok mantener */ /* para posicionar el botón dentro */
  text-decoration:none;
  /* transition: transform 0.2s ease; */
  transition:transform .18s ease;
  width: 100%;
  height: 100% !important;
  max-width: none;
  z-index:0;
}

.terapeuta-card:hover {
  /* transform: scale(1.015); */
  transform: translateY(-2px);
}

.terapeuta-card h3 {
  /* font-size: 1.4rem;
  color: #333; */
  font: 700 1.25rem/1.2 'Roboto',sans-serif;
  color:#0f172a;
  margin:.25rem 0 .75rem;
}

.terapeuta-card p {
  font-size: 0.95rem;
  margin: 0.3rem 0;
  line-height: 1.45;
  color:#6b7280;
}

/* Botón visual dentro de la card‑link */
.terapeuta-card *{ pointer-events:none; }              /* evita que el interior bloquee el click */
.terapeuta-card .btn-ver-perfil{
  pointer-events:auto;
  display:inline-block; margin-top:1rem; padding:.85rem 1.1rem;
  background:#6b21a8; color:#fff; border-radius:10px; font-weight:700;
}
.terapeuta-card .btn-ver-perfil:hover{ background:#581c87; }
/* .terapeuta-card a{btn-ver-perfil:hoverz-index:2; pointer-events:auto; } */


/* ============================================================================== */

/* Botón morado */
.btn-ver-perfil {
  /* background:#6b21a8; */
  background-color: var(--color-primario, #8245a6);
  /* border-radius: 6px; */
  border-radius: 10px;          /* opcional, combina con tus cards */
  /* bottom: 1.5rem; */
  bottom: auto !important;
  color:#fff !important;
  /* display:inline-block; */
  display: block !important;              /* permite ocupar ancho */
  /* font-weight:700; */
  font-weight: bold;
  /* left: 1.5rem; */               /* igual a tu padding de la card */
  /* right: 1.5rem; */
  left: auto !important;
  right: auto !important;
  margin: 0;                   /* sin margen superior */
  margin-bottom: 1.5rem !important;
  /* margin-top:1rem; */
  /* margin-top: auto; */       /* ¡clave! empuja el botón al fondo */
  /* margin-top: 1rem; */
  margin-top: auto !important;  /* empuja el botón al fondo */
  /* padding:.85rem 1.1rem; */
  /* padding: 0.6rem 1rem; */
  padding: 0.95rem 1rem !important;
  /* position: absolute; */
  position: static !important;  /* anula el absolute anterior */
  text-align: center;
  text-decoration: none;
  /* width: auto; */                /* se calcula con left/right */
  width: 100% !important;       /* ocupa todo el ancho interno de la card */
}

/* .btn-ver-perfil:hover{ background:#581c87; } */

.btn-ver-perfil:hover {
  background-color: #6a378c;
  color: #fff;
}

/* Responsive */
/*@media (min-width: 768px) {
  .terapeuta-card {
    flex: 0 0 calc(33.333% - 2rem);
  }
}
*/

/* Estilos para los filtros del directorio */
.filtros-terapeutas {
  align-items: flex-end;
  /* background:#f5f7fb; */
  background:#edf2f7;
  background-color: #f5f7fb;
  border-radius: 8px;
  display: grid;
  flex-direction: column;
  /* flex-wrap: wrap; */
  flex-wrap:nowrap;          /* <- evita saltos */
  gap: 5rem; /* separación entre columnas */
  grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
  justify-content: center;
  /* margin:0 auto 16px; */
  /* margin-bottom: 2rem;
  padding: 0 2rem;
  /* padding:.5rem 1rem; */
}

/* Filtros horizontales a lo ancho */
.filtros-full{ width:100%; }
.filtros-full .filtros-terapeutas{
  display:grid; flex-wrap:nowrap; gap:12px; align-items:flex-end;
  background:#edf2f7 !important; border-radius:8px; padding:.5rem 1rem; margin:0 auto 16px;
}
/* REGLAS APLICABLES AL SELECT DE FILTROS */
.filtros-full .filtros-terapeutas label{
	/* min-width:250px !important; */
	/* margin:0 25px !important; */
	display:flex; 
	flex-direction:column; 
	gap:6px;
	width: 100%;
}
.filtros-full .filtros-terapeutas select{ 
	/* min-width:250px !important; */
	/* margin:0 025px !important; */
}
@media (max-width:768px){
  .filtros-full .filtros-terapeutas{ flex-wrap:wrap; }
}



/* ========================== */

.filtros-terapeutas label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 0.9rem;
  gap:6px;
  margin:0;
  min-width:150px;
}

.filtros-terapeutas select,
.filtros-terapeutas button {
  padding: 0.4rem 0.6rem;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  /* min-width: 140px; */
  /* margin: 0 25px; */
  background-color: #0073e6;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: 100% !important;  /* que ocupen todo el espacio de su columna */
}

.filtros-terapeutas button{ height:40px; }

.filtros-terapeutas button:hover {
  background-color: #005bb5;
}

@media screen and (max-width: 768px) {
  .filtros-terapeutas {
    flex-direction: column;
    align-items: stretch;
  }

  .filtros-terapeutas label,
  .filtros-terapeutas button {
    width: 100%;
  }
}

/* Estructura general */
.archivo-directorio {
  padding: 2rem;
}

.contenedor-filtros-y-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.filtros-lateral {
  flex: 0 0 250px;
  max-width: 100%;
}

.perfil-container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

/* ================================== FILTROS HORIZONTALES EN UNA SOLA L�NEA ====================================== */
@media (min-width: 768px) {
  .filtros-terapeutas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  /* .filtros-terapeutas label {
    margin-right: 1rem;
  } */
	
  .filtros-lateral {
    flex: 1 1 100%;
  }
/* =================================== TERMINAN FILTROS HORIZONTALES (Antes comentados) ============================= */
	
}

/* Forzar fuente y tamaños originales solo en el CPT 'file' */
body.single-file {
  background: #edf2f7; /* mismo gris que el archivo */
}
body.post-type-archive-file h1,
body.single-file h1 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 3rem 0 2.5rem;
  /* margin-bottom: 1rem; */
}

body.post-type-archive-file h2,
body.single-file h2 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

body.post-type-archive-file h3,
body.single-file h3 {
  font-family: 'Roboto', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* ===== PARCHE FINAL ===== */

/* 1) Fondo gris del directorio + H1 controlado */
.archivo-directorio{
  background:#edf2f7;        /* gris suave como el "antes" */
  padding: 2rem 0 3rem;
}
.archivo-directorio h1{
  font-family: 'Roboto',sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color:#0f172a;
  text-align:center;
  margin: 5rem 0 2.5rem;
}

/* 2) Contenedor: filtros a la izquierda (ancho fijo) + cards a la derecha */
.contenedor-filtros-y-cards{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
  display:flex;
  gap:2rem;
  align-items:flex-start;
}

/* -- ESTE ES EL CAMBIO CLAVE para que NO se apilen en desktop -- */
.filtros-lateral{
  flex: 0 0 250px;     /* ancho fijo a la izquierda */
  max-width: 250px;
}


/* En móvil sí permitimos que se apilen */
@media (max-width: 768px){
  .contenedor-filtros-y-cards{ flex-direction:column; }
  .filtros-lateral{ max-width:100%; flex: 0 0 auto; }
  .filtros-terapeutas{ flex-wrap:wrap; }
}

/* 4) Grid de cards: 3-2-1 columnas con tus clases */
.perfil-container{
  flex:1;
  display:grid;
  gap:2rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){
  .perfil-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px){
  .perfil-container{ grid-template-columns: 1fr; }
}


/* Negritas que sí se noten en archivo y single */
body.post-type-archive-file strong,
body.single-file strong{
  font-weight:700 !important;
  color:#0f172a !important;
}

/* === Para envolver los grids en GRIS === */

/* Fondo del grid */
.archivo-directorio{
  background:#edf2f7;
  padding:32px 0 48px;
}
.contenedor-filtros-y-cards{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  gap:24px;
  align-items:flex-start;
}

/* Filtros: 1 línea en desktop */
.filtros-lateral{ flex:0 0 250px; max-width:250px; }

/* 3) Filtros en UNA sola línea en desktop */

@media (max-width:768px){
  .contenedor-filtros-y-cards{ flex-direction:column; }
  .filtros-lateral{ max-width:100%; flex:0 0 auto; }
  .filtros-terapeutas{ flex-wrap:wrap; }
}

/* Grid 3‑2‑1 (usando tu clase) */
.terapeutas-archive-container{
  flex:1;
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px){ .terapeutas-archive-container{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .terapeutas-archive-container{ grid-template-columns:1fr; } }

/* Negritas visibles */
body.post-type-archive-file strong,
body.single-file strong{ font-weight:700 !important; color:#0f172a !important; }

/* ===== SOBREESCRIBIR REGLAS QUE EMPALMAN EL T�TULO Y LOS FILTROS ===== */

/* ===== FIX: layout final (pegar al final del archivo) ===== */

/* Fondo y contenedor principal */
.archivo-directorio{ background:#edf2f7; padding:32px 0 48px; }
.contenedor-filtros-y-cards{
  max-width:1200px; margin:0 auto; padding:0 16px;
  display:flex; gap:24px; align-items:flex-start;
  flex-wrap:nowrap !important;        /* evita que el aside empuje al H1 */
}

/* Aside fijo y main elástico (evita traslapes) */
.contenedor-filtros-y-cards > .filtros-lateral{
  flex:0 0 260px !important;           /* ancho fijo */
  max-width:260px !important;
}
.contenedor-filtros-y-cards > main{
  flex:1 1 auto !important;
  min-width:0;                         /* evita desbordes de grid */
}



/* Título con respiro (por si quedaba cercano a los filtros) */
.contenedor-filtros-y-cards main > h1{
  font: 800 clamp(28px,4vw,42px)/1.15 'Roboto',sans-serif;
  color:#0f172a; text-align:center;
  margin: 24px 0 24px !important;
}

/* Grid: 3‑2‑1 columnas y ocupa el 100% del ancho disponible */
.terapeutas-archive-container{
  display:grid !important; gap:24px !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  padding:0 !important;        /* el padding del contenedor ya lo da el wrapper */
  max-width:none !important;   /* que use todo el ancho del main */
  margin:0 !important;
}
@media (max-width:1024px){ .terapeutas-archive-container{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:640px){
  .contenedor-filtros-y-cards{ flex-direction:column !important; }
  .filtros-lateral{ max-width:100% !important; flex:0 0 auto !important; }
  .filtros-terapeutas{ flex-wrap:wrap; }
  .terapeutas-archive-container{ grid-template-columns: 1fr !important; }
}

/* ===== SIGUE ENCIM�NDOSE, ojalá esto lo arregle ===== */

/* ===== FIX FINAL: layout y ancho de cards ===== */

/* 1) El contenedor NO debe envolver en desktop */
.contenedor-filtros-y-cards{
  flex-wrap: nowrap !important;
}

/* 2) El aside (filtros) con ancho fijo; el main ocupa el resto */
.filtros-lateral{
  flex: 0 0 260px !important;
  max-width: 260px !important;
}
.contenedor-filtros-y-cards > main{
  flex: 1 1 auto !important;
  min-width: 0;
}

/* 3) Quitar el comportamiento que hacía al aside ocupar 100% en desktop */
@media (min-width:768px){
  .filtros-lateral{ flex: 0 0 260px !important; max-width:260px !important; }
}

/* 4) Separación del título (por si quedaba cercano a los filtros) */
.contenedor-filtros-y-cards main > h1{
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

/* 5) Grid a 3‑2‑1 columnas que LLENE el 100% del main */
.terapeutas-archive-container{
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  padding: 0 !important;       /* el padding lo da el wrapper externo */
  max-width: none !important;  /* usa todo el ancho disponible */
  margin: 0 !important;
}
@media (max-width:1024px){
  .terapeutas-archive-container{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width:640px){
  .terapeutas-archive-container{ grid-template-columns: 1fr !important; }
}

/* ===== OTRA VEZ ===== */

/* ===== Layout del directorio con filtros horizontales (full‑width) ===== */

/* Banda gris y contenedor centrado */
.archivo-directorio{ background:#edf2f7; padding:32px 0 48px; }
.contenedor-directorio{
  max-width:1200px; margin:0 auto; padding:0 16px;
}

/* Título con respiro bajo filtros */
.contenedor-directorio > h1{
  font: 800 clamp(28px,4vw,42px)/1.15 'Roboto',sans-serif;
  color:#0f172a; text-align:center;
  margin: 24px 0 24px;
}

/* Grid 3‑2‑1 que llena 100% del ancho del contenedor */
.terapeutas-archive-container{
  display:grid; gap:24px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding:0; margin:0; max-width:none;
}
@media (max-width:1024px){ .terapeutas-archive-container{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .terapeutas-archive-container{ grid-template-columns: 1fr; } }


/* Negritas visibles */
body.post-type-archive-file strong, body.single-file strong{ font-weight:700 !important; color:#0f172a !important; }

/* ================================================================= */

.meta-bottom{
  margin-top: 0 !important;    /* por si quedó un auto previo */
  padding-top: .5rem;
}