:root {
  --font-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--font-base);
}

/* ===== Quiénes somos (hero con acordeón) ===== */
.qs-hero{
  position: relative;
  padding: 3rem 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.qs-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
  z-index: 0; /* 👈 siempre al fondo */
}

.qs-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.10); /* overlay más sutil */
  pointer-events:none;
  z-index: 0; /* 👈 también al fondo */
}

/* Asegurar que el contenido quede arriba */
.qs-hero .container{
  position: relative;
  z-index: 1;
}
.qs-card,
.qs-accordion-wrap{
  position: relative;
  z-index: 1; /* 👈 contenido visible sobre el fondo */
}

/* Tarjeta izquierda */
.qs-card{
  background: #fff;
  color: #2b2b2b;
  border-radius: .6rem;
  padding: 2rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.qs-title{
  margin: 0 0 .75rem 0;
  font-weight: 800;
  color: #2b2b2b;
  text-transform: uppercase;
}
.qs-text{
  margin: 0;
  line-height: 1.7;
  color: #444;
  text-align: justify;
}

/* === Lista derecha estilo “píldoras” === */
.qs-accordion-wrap{
  width: 100%;
  max-width: 460px;
}

.qs-accordion .accordion-item{
  border: none;
  margin-bottom: .9rem;
  border-radius: .5rem;
  background: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  overflow: hidden;
}

/* Botón del acordeón: solo texto + chevron */
.qs-accordion .accordion-button{
  background: #fff;
  color: #1b1b1b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 1rem 1rem;           /* un poco más alto y limpio */
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: none;
  border: none;
  border-radius: .5rem;         /* coincide con card */
}

/* Quitamos caret default de Bootstrap */
.qs-accordion .accordion-button::after{ display:none; }

/* Hover/focus suaves */
.qs-accordion .accordion-button:hover{
  background: #f8fbf9;
}
.qs-accordion .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(1,149,63,.12);
}

/* Abierto: texto y flecha en verde, fondo blanco */
.qs-accordion .accordion-button:not(.collapsed){
  background: #fff;
  color: #017a3f;
  box-shadow: none !important;
}

/* Título */
.qs-acc-title{
  font-size: 1rem;
  white-space: nowrap;
}

/* Chevron que rota y cambia color */
.qs-chevron{
  font-size: 1rem;
  color: #222;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
  opacity: .9;
}
.qs-accordion .accordion-button:not(.collapsed) .qs-chevron{
  transform: rotate(180deg);
  color: #017a3f;
  opacity: 1;
}

/* Cuerpo del acordeón */
.qs-accordion .accordion-body{
  color: #3f3f3f;
  background: #fff;
  padding: .9rem 1rem 1.1rem 1rem; /* sin sangría de icono izquierdo */
  line-height: 1.6;
  border-top: 1px solid #eef3ef;   /* sutileza para separar */
}

/* En móviles ocupa todo el ancho disponible */
@media (max-width: 991.98px){
  .qs-accordion-wrap{ max-width: 100%; }
}

/* ===== LÍNEA DE TIEMPO ===== */
.timeline-section{
  background:#f6f8f7;
}

/* --- Barra de años (solo desktop/tablet) --- */
.timeline-years{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:2.2rem;
  margin:.6rem 0 1rem;
  padding:0;
}
.tyear-btn{
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}
.tyear-label{
  font-weight:700;
  font-size:.95rem;
  color:#39443c;
}
.tyear-dot{
  width:12px; height:12px; border-radius:50%;
  background:#9ad5be;
  transition:transform .2s ease, background-color .2s ease;
}
.tyear-btn.active .tyear-label{ color:#017a3f; }
.tyear-btn.active .tyear-dot{ background:#017a3f; transform:scale(1.15); }

/* --- Swiper contenedor --- */
.timeline-swiper-wrap{
  position:relative;
  padding:18px 24px; /* menor padding lateral para no agrandar en exceso */
}

/* Igualar alturas entre slides (sin forzar una altura fija) */
.timeline-swiper .swiper-wrapper{
  display:flex;
  align-items:stretch;
}
.timeline-swiper .swiper-slide{
  display:flex;
}

/* --- Card --- */
.tcard {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
  height: 100%; /* importante */
}
.tcard-icon{
  width:84px; height:84px;
  border-radius:50%;
  background:#fff;
  display:grid; place-items:center;
  margin-top:-42px; margin-bottom:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.tcard-icon img{ width:56px; height:56px; object-fit:contain; }

.tcard-year{
  color:#017a3f;
  font-weight:800;
  margin:.15rem 0 .5rem;
  font-size:clamp(1.15rem, 2.2vw, 1.6rem);
}

.tcard-title{
  font-size:1rem;
  font-weight:700;
  color:#017a3f;
  margin-bottom:.35rem;
}

.tcard-text{
  color:#4b5a52;
  line-height:1.65;
  font-size:.95rem;
}

/* --- Ocultar barra de años y compactar en móviles --- */
@media (max-width: 767.98px){
  .timeline-years{ display:none !important; }

  .timeline-swiper-wrap{ padding-inline:0; }   /* quita relleno extra */

  /* “peeking” lateral para ver bordes de cards vecinas */
  .timeline-swiper{ padding-inline:14px; }

  .tcard{
    padding:1rem .9rem 1rem;  /* menos padding = menos aire */
    box-shadow:0 10px 20px rgba(0,0,0,.05);
  }
  .tcard-icon{
    width:72px; height:72px;
    margin-top:-36px;
  }
  .tcard-icon img{ width:50px; height:50px; }
  .tcard-year{ font-size:1.25rem; margin:.1rem 0 .4rem; }
  .tcard-title{ font-size:.98rem; }
  .tcard-text{ font-size:.93rem; line-height:1.6; }
}

.timeline-swiper .swiper-slide {
  display: flex;
  align-items: stretch; /* se igualan las alturas visualmente */
}


/* ===== EQUIPO ===== */
.team-section {
  background: #f8f9fa;
}

/* Título */
.team-title {
  position: relative;
  margin: 0;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
}

/* ===== Cards ===== */
.team-card {
  background: #fff;
  border-radius: .35rem;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;                     /* ✅ se expande a igual altura */
  display: flex;                    /* ✅ contenido interno flexible */
  flex-direction: column;
  justify-content: flex-start;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
}

/* Avatar circular */
.team-avatar {
  width: 86px;
  height: 86px;
  margin: -34px auto .5rem auto;
  border-radius: 50%;
  background: #e9f5ef;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #ffffff;
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Nombre y cargo */
.team-name {
  margin: .25rem 0 0;
  font-weight: 800;
  font-size: 1.05rem;
  color: #2b2b2b;
}
.team-role {
  margin: .15rem 0 0;
  color: #6c757d;
  font-size: .95rem;
}

/* Asegura que las columnas igualen altura */
.team-section .row {
  align-items: stretch;
  justify-content: center;
}

/* Espacio arriba por el avatar flotante */
.team-section .container { margin-top: 18px; }

/* === Dos columnas en móviles === */
@media (max-width: 575px) {
  
  .team-section .row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 1rem;
  }

  .team-section .row > * {
    flex-basis: calc(50% - 0.5rem);
    flex-grow: 0;
    flex-shrink: 0;
  }
}