/* estilos.css - Versión consolidada y funcional con responsive header corregido */

/* ========== Importación de fuentes ========== */
@import url("../webfonts/Helvetica_Regular/stylesheet.css");
@import url("../webfonts/GravitaGEO_Bold_BF657928841ed84/stylesheet.css");
@import url("../webfonts/GravitaGEO_Medium_BF6579288440175/stylesheet.css");
@import url("../webfonts/GravitaGEOItalic_Black_BF65792883dc444/stylesheet.css");
@import url("../webfonts/GravitaGEO_ExtraLight_BF657928845d4e0/stylesheet.css");
@import url("../webfonts/GravitaGEO_Black_BF65792882c3895/stylesheet.css");


html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* ========== Estilos Globales ========== */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: 'Gravita GEO', Arial, sans-serif;
  background-color: #F0EDE6;
  color: #333;
}
a, nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover, nav a:hover {
  color: #F0EDE6;
}

/* ========== Cabecera ========== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 10rem 1rem 8rem;
  background-color: #F0EDE6;
}
.logo img {
  max-width: 300px;
  transition: max-width 0.3s ease;
}
.header-nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav a {
  font-size: 1.15rem;
  font-weight: bold;
  padding: 0.5rem;
  transition: background 0.3s ease;
}
.header-nav a:hover { background: rgba(0,0,0,0.05); border-radius: 5px; }
.header-nav a[href="#colabora"]:hover { background: #ADBFC7; }

/* Ocultar nav-toggle si existe */
.nav-toggle { display: none !important; }

/* ========== Sección Intro ========== */
#intro {
  padding: 2rem 1rem 1rem;
  text-align: center;
  background-color: #F0EDE6;
}
#intro p {
  max-width: 800px;
  margin: 0.5rem auto 1rem;
  font-size: 1rem;
  line-height: 1.5;
}


@media (min-width: 1025px) {
  #intro p { font-size: 1.5rem; }
}
#intro img {
  width: 100%;
  border-radius: 0 0 50% 50%;
  object-fit: cover;
  display: block;
}

/* ========== Secciones Generales ========== */
section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #F6F4F4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-bottom: 5px solid #DDD8B2;
}
section + section { margin-top: 0; }
section.open { padding-top: 1rem; padding-bottom: 1rem; }

/* Animación suave de títulos */
section h2 {
  display: block;
  width: max-content;
  padding-left: 1rem;
  font-family: "GravitaGEO Bold BF657928841ed84";
  transition: transform 0.4s ease;
  transform: translateX(0);
}

/* ========== Noticias ========== */
#noticias .news-container {
    display: grid !important;
    grid-template-columns: repeat(1,1fr) !important;
    gap: 1rem !important;
    margin-right: 0;
    margin-left: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}
@media (max-width: 768px) {
  #noticias .news-container { grid-template-columns: 1fr !important;
							  margin: -90px 0;}
}

/* ========== Cabecera ========== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 10rem 1rem 8rem; /* Desktop: ajustado */
  background-color: #F0EDE6;
}
.logo img {
  max-width: 300px; /* Desktop */
  transition: max-width 0.3s ease;
}
.header-nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav a {
  font-size: 1.15rem;
  font-weight: bold;
  padding: 0.5rem;
  transition: background 0.3s ease;
}
.header-nav a:hover {
  background: rgba(0,0,0,0.05);
  border-radius: 5px;
}
.header-nav a[href="#colabora"]:hover {
  background: #ADBFC7;
}

/* Ocultar nav-toggle si existe */
.nav-toggle { display: none !important; }

.team.content .member .Yoly {
    background-color: #bf6361;
    border-radius: 10px 50% 50% 10px;
}
.team.content .member #MartaP {
    border-radius: 10px 50% 50% 10px;
    background-color: #adbfc7;
}
.team.content .member #JaviS {
    border-radius: 10px 50% 50% 10px;
    background-color: #bdcb41;
}
.team.content .member #CrisS {
    border-radius: 10px 50% 50% 10px;
    background-color: #E6A600;
}
.team.content .member #QuioniaV {
    border-radius: 10px 50% 50% 10px;
    background-color: #948A78;
}
.team.content .member #AnnaJ {
    border-radius: 10px 50% 50% 10px;
    background-color: #B47B5E;
}
.team.content .member #AndreaP {
    border-radius: 10px 50% 50% 10px;
    background-color: #AD7896;
}
.team.content .member #VaneE {
    border-radius: 10px 50% 50% 10px;
    background-color: #5C808C;
}
.team.content .member #MonicaC {
    border-radius: 10px 50% 50% 10px;
    background-color: #E88873;
}
.team.content .member #NuriaG {
    border-radius: 10px 50% 50% 10px;
    background-color: #F6F4F4;
}
.team.content .member #Oscar {
    border-radius: 10px 50% 50% 10px;
    background-color: #96ABA6;
}
.team.content .member #Yung {
    border-radius: 10px 50% 50% 10px;
    background-color: #C9601F;
}
.team.content .member #Emilio {
    border-radius: 10px 50% 50% 10px;
    background-color: #D1B0B2;
}
.team.content .member #JaviL {
    border-radius: 10px 50% 50% 10px;
    background-color: #844D41;
}
.team.content .member #Mireia {
    border-radius: 10px 50% 50% 10px;
    background-color: #93282F;
}
.team.content .member #Roberto {
    border-radius: 10px 50% 50% 10px;
    background-color: #F0EDE6;
}
.team.content .member #Rocio {
    border-radius: 10px 50% 50% 10px;
    background-color: #ADBFC7;
}


/* ========== Desktop-specific adjustments ========== */
@media (min-width: 1025px) {
  /* Grid team/articles */
  .team, .articles { grid-template-columns: repeat(3,1fr); }
}

/* ========== Tablets: logo arriba, menú debajo en fila ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem; /* Reducido para tablet */
  }
  .logo img {
    max-width: 250px;
  }
  .header-nav {
    display: flex !important;
    margin-top: 1rem;
  }
  .header-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .header-nav a {
    padding: 0.5rem 1rem;
  }
}

/* ========== Móvil: ocultar menú, sólo logo ========== */
@media (max-width: 768px) {
  header {
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
  }
  .logo img {
    max-width: 300px;
    margin: 0.5rem auto;
  }
  .header-nav {
    display: none !important;
  }
}
 


.news-item {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.news-container .news-link #news-1 {
    text-align: center;
}


.news-item img {
  width: 100%;
  height: 50%;
  object-fit: ;
  transition: opacity 0.5s ease;
}

#noticias .news-item::after {
  /* Fondo más opaco y contraste alto */
  background: rgba(240, 237, 230, 0.98) !important;
  /* Texto oscuro, tamaño mayor y negrita */
  color: #333333 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  /* Asegurar que quede encima */
  z-index: 2;
  /* Un poquito de padding extra para respiración */
  padding: 1.5rem !important;
  /* Mantener la transición suave */
  transition: opacity 0.5s ease;
}

.news-item:hover {
  transform: scale(1.02);
}

.news-item:hover img {
  opacity: 0;
}

.news-item:hover::after {
  opacity: 1;
}
/* ————————————————
   Overlay de Noticias: visibilidad garantizada
   ———————————————— */
#noticias .news-item {
  position: relative;      /* ya debería estar, pero insistimos */
  z-index: 0;              /* para que el img quede por debajo */
}

#noticias .news-item img {
  z-index: 0;              /* imagen en el fondo */
}

#noticias .news-item::after {
  content: attr(data-alt) !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  background-color: rgba(240, 237, 230, 0.96) !important;
  color: #333333 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  z-index: 2 !important;    /* por encima de todo */
}

#noticias .news-item:hover::after {
  opacity: 1 !important;
}

/* ————————————————
   Utility: ocultar visualmente, pero dejar accesible
   ———————————————— */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Móvil: 1 columna */
@media (max-width: 768px) {
  #noticias .news-container {
    grid-template-columns: 1fr !important;
  }
}


/* ==============================
   Sección “Nuestra Historia”
   ============================== */

#nuestra-historia {
    /* Mantener estética */
    background-color: #F6F4F4;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: 5px solid #DDD8B2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 0rem;
    /* Grid con áreas: título arriba, dos columnas debajo */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "title  title"
    "part1  part2";
    gap: 0.5rem;
    background-size: cover;
    background-repeat: repeat-x;
    background-position: 0% -16%;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


/* Cada .part va en su área */
#nuestra-historia .part:nth-of-type(1) {
    grid-area: part1;
    font-family: "GravitaGEO ExtraLight BF657928845d4e0";
    text-align: justify;
    font-size: large;
    padding-left: 4rem;
    padding-right: 2rem;
}
#nuestra-historia .part:nth-of-type(2) {
    grid-area: part2;
    font-family: "GravitaGEO ExtraLight BF657928845d4e0";
    font-size: large;
    text-align: justify;
    padding-left: 2rem;
    padding-right: 4rem;
}

/* Responsive: una columna en móvil */
@media (max-width: 768px) {
  #nuestra-historia {
    grid-template-columns: 1fr;
    grid-template-areas: "title"
      "part1"
      "part2";
  }
#nuestra-historia .part:nth-of-type(1) {
    padding-left: 0rem;
    padding-right: 0rem;
}
#nuestra-historia .part:nth-of-type(2) {
    padding-left: 0rem;
    padding-right: 0rem;
}
}


/* ======================================= */
/* Ajustes generales de sección colapsada  */
/* ======================================= */
section {
  width: 100%;
  max-width: none;             /* para garantizar full-width incluso en .nuestra-historia */
  margin: 0;                   /* eliminamos márgenes verticales */
  padding: 0.5rem 1rem;        /* padding ajustado */
  border-bottom: 5px solid #DDD8B2;  /* línea de separación */
}

/* Cada sección, salvo la primera, no necesita margen-top */
section + section {
  margin-top: 0;
}



/* ======================================= */
/* Excepción para Nuestra Historia cerrada */
/* ======================================= */
#nuestra-historia {
  /* Mantiene siempre full-width y sin max-width */
  width: 100%;
  max-width: none;
}

/* ======================================= */
/* Si necesitas más separación interior    */
/* (opcional)                              */
/* ======================================= */
section.open {
  padding-top: 1rem;
  padding-bottom: 1rem;
}


/* ========== Grid Team & Articles ========== */
/*.team, .articles { display: grid; gap: 1rem; }*/
@media (min-width: 1025px) { .team, .articles { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 769px) and (max-width: 1024px) { .team, .articles { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .team, .articles { grid-template-columns: 1fr; } }

/* ========== Member / Article Boxes ========== */
.member, .article {
  background-color: #DDD8B2;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}
.member img, .article img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}





/* ——— Quienes Somos: show/hide y grid responsive ——— */

/* Por defecto, escondemos el grid de miembros */
#quienes-somos .team {
  display: none !important;
}

/* Cuando la sección está abierta, lo mostramos como grid */
#quienes-somos.open .team {
  display: grid !important;
  gap: 1rem; /* o el gap que prefieras */
}

/* Desktop: 3 columnas */
@media (min-width: 1025px) {
  #quienes-somos.open .team {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/* ============================= */
/* Sección “Quiénes Somos” – imagen al lado del texto siempre */
/* ============================= */
#quienes-somos .team .member {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  flex-direction: row !important; /* fuerza siempre fila */
}

/* Imagen sin encojer y con espacio a su derecha */
#quienes-somos .team .member img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  margin-right: 1rem;
  border-radius: 50%;
}

/* Márgenes cero en título y párrafo */
#quienes-somos .team .member h3,
#quienes-somos .team .member p {
  margin: 0;
}

/* Anulamos cualquier media-query que apile en móvil */
@media (max-width: 768px) {
  #quienes-somos .team .member {
    flex-direction: row !important;
  }
  #quienes-somos .team .member img {
    margin: 0 1rem 0 0;
  }
}



/* Tablet: 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
  #quienes-somos.open .team {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Móvil: 1 columna */
@media (max-width: 768px) {
  #quienes-somos.open .team {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Sección Encuéntranos ===== */
#mapa {
  background-color: #F6F4F4;
  padding: 1rem 1rem;
}

#map {
  width: 100%;
  height: 60vh; /* adaptable */
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#mapa .consultas-title {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #5C808C; /* uno de tus colores corporativos */
  letter-spacing: 14px;
  margin: 2rem 0 1rem 0;	
}

/* --- CONSULTAS --- */
#consultas {
  display: grid;
  grid-template-columns: 1fr; /* por defecto 1 columna */
  gap: 1.5rem;
  margin-top: 2rem;
}

.consulta-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

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

.consulta-card h4 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #222;
}

.consulta-card p {
  margin: 0.3rem 0;
  color: #555;
}

.consulta-card .especialidades {
  margin-top: 1rem;
}

.consulta-card .especialidades button {
  margin: 0.3rem;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  background: #0066cc;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.consulta-card .especialidades button:hover {
  background: #004d99;
}

/* Responsive: en pantallas grandes -> 2 columnas */
@media (min-width: 992px) {
  #consultas {
    grid-template-columns: 1fr 1fr;
  }
}

/* ========== Revista G21 ========== */
#revista-g21 .articles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
/* Revista G21: tarjetas con fondo configurable */
#revista-g21 .articles .article {
  background-color: var(--bg, #DDD8B2);
  border-radius: 10px;
  text-align: center;
  padding: 1rem;
}

/* Desktop: la primera tarjeta ocupa dos columnas */
@media (min-width: 1025px) {
  #revista-g21 .articles > .article:nth-child(1) {
    grid-column: 1 / 3;
  }
}
@media (min-width: 1025px) {
  /* la 7ª tarjeta empieza en columna 2 y acaba en la 4 (fusiona col 2+3) */
  #revista-g21 .articles > .article:nth-child(7) {
    grid-column: 2 / 4;
  }
  /* la 8ª tarjeta, si la colocas después de la 7, caerá entonces en la siguiente fila/autolayout */
}

/* Tablets: dos columnas */
@media (min-width: 769px) and (max-width: 1024px) {
  #revista-g21 .articles {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Móvil: una columna */
@media (max-width: 768px) {
  #revista-g21 .articles {
    grid-template-columns: 1fr;
  }
}

/* ======================================= */
/* Sección “Investigación” (grid bajo el h2) */
/* ======================================= */


#investigacion {
  background-color: #F6F4F4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-bottom: 5px solid #DDD8B2;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  /* Desktop: 3 columnas */
  grid-template-columns: repeat(3, 1fr);
}

/* H2 siempre a lo largo de toda la primera fila */
#investigacion > h2 {
    grid-column: 1 / -1;
    padding-left: 1rem; /* indentación igual al resto */
}

/* Tablet: 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
  #investigacion {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil: 1 columna y sin padding lateral extra */
@media (max-width: 768px) {
  #investigacion {
    grid-template-columns: 1fr;
    padding: 0 1rem 0 1rem; /* uniforme en móvil */
  }
}

/* ======================================= */
/* Cada “card” interna: imagen + texto      */
/* ======================================= */
/* ======================================= */
/* Sección “Investigación” – layout con float */
/* ======================================= */
#investigacion .investigacion {
  /* quitamos cualquier display:flex previo */
  display: block;
  background: #adbfc7;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;        /* separación interna */
  overflow: hidden;           /* clearfix */
}

/* Aplicamos clearfix */
#investigacion .investigacion::after {
  content: "";
  display: table;
  clear: both;
}

/* Imagen flotante a la izquierda */
#investigacion .investigacion img {
    float: left;
    width: 80px;                /* ajusta a tu gusto */
    height: auto;
    margin-right: 1rem;
    border-radius: 5px;
}

/* Texto a la derecha, ocupando el resto */
#investigacion .investigacion h3 {
    margin-top: 4%;
    margin-bottom: auto;
    font-family: 'GravitaGEO_Medium_BF6579288440175', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    overflow: hidden;
    text-align: center;
}

#popup-templates {
  display: none !important;
}

/* Contenedor general */
#formacion {
  background-color: #F6F4F4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-bottom: 5px solid #DDD8B2;
  padding: 1rem;
}

/* Grid: 1 columna en móvil, 2 en desktop */
#formacion .formacion-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 1025px) {
  #formacion .formacion-content {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Contenedor general */
#formacion {
  background-color: #F6F4F4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-bottom: 5px solid #DDD8B2;
  padding: 1rem;
}

/* Contenido en una sola columna siempre */
#formacion .formacion-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Estilo de texto según “Nuestra Historia” */
#formacion .formacion-text {
  font-family: "GravitaGEO ExtraLight BF657928845d4e0", serif;
  font-size: large;
  text-align: justify;
  padding-left: 4rem;
  padding-right: 2rem;
}
@media (max-width: 768px) {
  #formacion .formacion-text {
    padding: 1rem;
  }
}

/* Banner informativo al 100% siempre debajo */
#formacion .formacion-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Sección Colabora: contenedor en grid de 3 columnas */
#colabora {
  background-color: #F6F4F4;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-bottom: 5px solid #DDD8B2;
  padding: 1rem;
}

#colabora .colabora-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* En escritorio: tres columnas */
@media (min-width: 1025px) {
  #colabora .colabora-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Estilo común a todas las tarjetas */
#colabora .colabora-content > div {
    /* fondo a elegir con --card-bg */
    background-color: var(--card-bg, #FFFFFF);
    border-radius: 10px;
    padding: 1.5rem;
    /* Tipografía “Formación” */
    font-family: "GravitaGEO ExtraLight BF657928845d4e0", serif;
    font-size: large;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Opcional: márgen extra bajo el título */
#colabora h2 {
  margin-bottom: 1rem;
}
/* Contenedor en grid: 1 fila para el texto, otra para las 3 tarjetas */
#colabora .colabora-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1rem;
}

/* Texto explicativo: ocupa las tres columnas */
#colabora .colabora-text {
    grid-column: 1 / -1;
    /* Tipografía “Formación” */
    font-family: "GravitaGEO ExtraLight BF657928845d4e0", serif;
    font-size: large;
    padding-top: 4rem;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: 4rem;
    min-height: 200px;
    margin-bottom: 1rem;
    background-image: url(../assets/img/colabora/mujercara.jpg);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    background-size: cover;      /* centra la imagen */
    background-repeat: no-repeat;     /* evita repetición */
}
#colabora .colabora-content .colabora-text {
    padding-left: 5%;
    padding-right: 5%;

}
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  #colabora .colabora-text {
    padding: 3rem 1.5rem;
    min-height: 250px;
  }
}
@media (max-width: 768px) {
#colabora .colabora-text  {
	background-image: url(../assets/img/colabora/mujercara2.jpg);  
    padding: 2rem 1rem;
    min-height: 200px;
    text-align: center; 
  }
}

/* Las tres tarjetas quedan automáticamente en la segunda fila,
   cada una en su columna */
#colabora .colabora-suscripcion {
  /* fondo configurable vía --card-bg */
  background-image: var(--card-gradient, linear-gradient(to right, #f0f0f0, #e0e0e0));
  border-radius: 10px;
  padding: 1.5rem;
  font-family: "GravitaGEO ExtraLight BF657928845d4e0", serif;
  font-size: large;
  text-align: justify;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Tarjeta 1 (Suscripción Básica) */
#colabora .colabora-content > .colabora-suscripcion:nth-child(2) {
  --card-gradient: linear-gradient(to right, #5C808C, #ADBFC7);
}

/* Tarjeta 2 (Suscripción Profesional) */
#colabora .colabora-content > .colabora-suscripcion:nth-child(3) {
  --card-gradient: linear-gradient(to right, #96ABA6, #BDCB41);
}

/* Tarjeta 3 (Mecenas) */
#colabora .colabora-content > .colabora-suscripcion:nth-child(4) {
  --card-gradient: linear-gradient(to right, #DDD8B2, #D1B0B2);
}



/* Ajuste móvil: apila todo en una sola columna */
@media (max-width: 768px) {
  #colabora .colabora-content {
    grid-template-columns: 1fr;
  }
}
/* ============================= */
/* Estilos para los popups       */
/* ============================= */

/* El contenedor blanco del popup */
#popup-box {
  font-family: "GravitaGEO ExtraLight BF657928845d4e0", serif; /* misma familia que “Formación” */
  font-size: 1.25rem;        /* un poco más grande */
  text-align: center;        /* centrar todo el texto */
  line-height: 1.6;          /* para mayor legibilidad */
  color: #333;               /* texto oscuro */
  max-width: 500px;          /* limita el ancho del cuadro */
  margin: 0 1rem;            /* separación lateral en móvil */
}

/* El contenido interno, si hay párrafos extras */
#popup-content p {
  margin-bottom: 1rem;
}
#popup-content p a {
    font-size: 2rem;
    color: #93282F;
}
#colabora .aporta {
    width: 85%;
    margin-left: auto;
    margin-right: auto;

}
#colabora .aporta h3 {
    font-family: "GravitaGEO ExtraLight BF657928845d4e0";
    margin-top: 50px;
    text-align: center;
    margin-bottom: 50px;
}
#colabora .aporta #paypal-container-9AA76A4U32SFJ {
    font-family: "GravitaGEO Bold BF657928841ed84";
    text-align: center;
    width: 100%;
    padding-left: 35%;
}





/* Ajuste en móvil: recorta un poco el tamaño si hiciese falta */
@media (max-width: 768px) {
  #popup-box {
    font-size: 1.1rem;
    padding: 1rem;
  }
  #colabora .aporta #paypal-container-9AA76A4U32SFJ {
    width: 100%;
	padding: 0;	
  }
}
  
/* ============================= */
/* Popup CV - Fichas Profesionales */
/* ============================= */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;        /* 🔑 límite de alto */
  overflow-y: auto;        /* 🔑 scroll vertical si hace falta */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-in-out;
  position: relative;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* Animación suave al aparecer */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Botón cerrar */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #000;
}

/* === Ficha CV === */
.cv {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cv h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #1a4e8a;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.5rem;
}

.cv p {
  margin: 0;
  line-height: 1.6;
  color: #333;
}

.cv strong {
  color: #1a4e8a;
}



/* ========== Footer ========== */
/* Footer general */
#footer {
  background-color: #C46E66; /* color base parecido a la imagen */
  color: #fff;
  padding: 2rem;
  font-family: "GravitaGEO ExtraLight BF657928845d4e0", sans-serif;
}

/* Parte superior: nombre y redes */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer-brand h2 {
  font-family: "GravitaGEO Bold BF657928841ed84", sans-serif;
  margin: 0;
}

.footer-brand .slogan {
  font-style: italic;
  margin: 0;
}

.footer-social a {
  margin-left: 0.5rem;
  display: inline-block;
}
.footer-social img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  padding: 5px;
}

/* Parte inferior: direcciones */
.footer-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer-address h4 {
  margin: 0 0 0.5rem 0;
  font-family: "GravitaGEO Medium BF6579288440175", sans-serif;
}
.footer-address p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Hover zoom en iconos de RRSS */
.footer-social img {
  transition: transform 0.3s ease; /* transición suave */
}

.footer-social img:hover {
  transform: scale(1.2); /* aumenta un 20% */
}

/* Responsive */
@media (max-width: 768px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-top {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}
/* Scrollbar moderno solo dentro del modal */
.modal-content::-webkit-scrollbar {
  width: 10px;               /* ancho de la barra */
}

.modal-content::-webkit-scrollbar-track {
  background: #F0EDE6;        /* fondo clarito */
  border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: #5C808C;  /* color corporativo principal */
  border-radius: 10px;
  border: 2px solid #F0EDE6;  /* crea espacio alrededor */
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #96ABA6;  /* tono más claro al pasar el ratón */
}

/* Para Firefox */
.modal-content {
  scrollbar-width: thin;                  /* fino */
  scrollbar-color: #5C808C #F0EDE6;       /* color barra / fondo */
}

/* ============================= */
/* Estilos internos para CVs     */
/* ============================= */

/* Contenedor del CV */
#cvContent {
  font-family: "GravitaGEO ExtraLight BF657928845d4e0", sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Títulos principales */
#cvContent h2 {
  font-family: "GravitaGEO Bold BF657928841ed84", sans-serif;
  font-size: 1.6rem;
  color: #1a4e8a; /* azul corporativo para destacar */
  margin-bottom: 0.5rem;
  border-bottom: 2px solid #DDD8B2; /* subrayado elegante */
  padding-bottom: 0.3rem;
}

/* Subtítulos */
#cvContent h3,
#cvContent h4,
#cvContent h5 {
  font-family: "GravitaGEO Medium BF6579288440175", sans-serif;
  color: #5C808C; /* verde azulado */
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
}

/* Párrafos */
#cvContent p {
  margin: 0.6rem 0;
  font-size: 1rem;
  text-align: justify;
}

/* Listas */
#cvContent ul {
  padding-left: 1.2rem;
  margin: 0.6rem 0;
}
#cvContent li {
  margin: 0.4rem 0;
  list-style-type: disc;
}

/* Bloques destacados (ej. experiencia, formación) */
#cvContent .cv-block {
  background: #F6F4F4;
  border-left: 4px solid #BDCB41; /* verde claro corporativo */
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
}

/* Enlaces dentro del CV */
#cvContent a {
  color: #5C808C;
  font-weight: bold;
  text-decoration: none;
}
#cvContent a:hover {
  text-decoration: underline;
  color: #96ABA6;
}
/* ====== Tarjetas de Centros (Encu�ntranos) ====== */

.consulta-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.consulta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Encabezado del centro */
.consulta-card h4 {
  background: linear-gradient(135deg, #5C808C, #96ABA6);
  color: #fff;
  margin: 0;
  padding: 1rem;
  font-size: 1.2rem;
  font-family: "GravitaGEO Bold BF657928841ed84", sans-serif;
  text-align: center;
  border-radius: 10px;	
}

/* Direcci�n y descripci�n */
.consulta-card p {
  margin: 0.5rem 1rem;
  font-size: 0.95rem;
  color: #444;
  line-height: 1.4;
}
.consulta-card p i {
  display: block;
  color: #5C808C;
  font-style: normal;
  font-weight: bold;
}

/* Especialidades (chips) */
.consulta-card .especialidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.05rem;
  margin: 0.5rem 1rem 1rem;
}
.consulta-card .especialidades button:not(.esp-vermas) {
  padding: 0.3rem 0.8rem;
  border: none;
  border-radius: 20px;
  background: #ADBFC7;
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.consulta-card .especialidades button:hover {
  background: #96ABA6;
}

/* Detalles de profesionales */
.consulta-card .esp-detalles {
  margin: 0.5rem 1rem 1rem;
  border-top: 1px solid #EEE;
  padding-top: 0.5rem;
}

.consulta-card .esp-detalles h5 {
  font-size: 1rem;
  margin: 0.5rem 0;
  color: #5C808C;
}

.consulta-card .prof-detalle {
  background: #F6F4F4;
  padding: 0.8rem;
  border-radius: 10px;
  margin: 0.5rem 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.consulta-card .prof-detalle h6 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: #C46E66;
  font-family: "GravitaGEO Medium BF6579288440175", sans-serif;
}

.consulta-card .prof-detalle p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
  color: #333;
}

.consulta-card .prof-detalle .cv-btn {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  background: #5C808C;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s;
}
.consulta-card .prof-detalle .cv-btn:hover {
  background: #96ABA6;
}
.consulta-card .prof-btn {
  display: inline-block;
  margin: 0.3rem 0.3rem 0 0;
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 18px;
  background: #EEE;
  color: #333;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.consulta-card .prof-btn:hover {
  background: #96ABA6;   /* verde claro corporativo */
  color: #fff;
  transform: translateY(-2px);
}
.esp-vermas {
  padding: 0.3rem 0.8rem;
  border: none;
  border-radius: 20px;
  background: #EEE;
  color: #5C808C;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
}
.esp-vermas:hover {
  background: #DDD;
}


/* Grid responsivo */
#consultas {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  #consultas {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  #consultas {
    grid-template-columns: repeat(3, 1fr);
  }
}