/* ======================================================
   ESTILOS PARA sobre-nosotros.html
   ====================================================== */

/* Hero de página */
.page-hero {
   padding: 7rem 2rem 1rem;
   text-align: center;
}

.page-title {
   font-size: 3.5rem;
   margin-bottom: 0.5rem;
}

.page-subtitle {
   font-size: 1.3rem;
   color: var(--text-secondary);
   max-width: 600px;
   margin: 0 auto 30px;
}

/* ======================================================
   SECCIÓN: HISTORIA
   ====================================================== */
.history-section {
   padding: 60px 0 90px;
   position: relative;
   overflow: hidden;
}

.history-storyboard {
   display: grid;
   grid-template-columns: minmax(320px, 1fr) minmax(0, 1fr);
   gap: 32px;
   align-items: start;
   margin-top: 30px;
}

.history-intro-card,
.history-step {
   background: rgba(17, 17, 17, 0.52);
   border: 1px solid var(--border-color);
   border-radius: 28px;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.history-intro-card {
   top: 120px;
   padding: 34px;
   height: 100%;
   display: flex;
   flex-direction: column;
}

.history-kicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 1.4rem;
   text-transform: uppercase;
   color: var(--accent-color);
   margin-bottom: 18px;
}

.history-heading {
   font-size: 2.3rem;
   font-weight: 600;
   margin-bottom: 20px;
   line-height: 1.15;
   color: var(--text-primary);
}

.history-lead {
   color: var(--text-secondary);
   line-height: 1.75;
   font-size: 1.02rem;
   margin-bottom: 28px;
}

.kora-img {
   width: 90%;
   max-width: 500px;
   opacity: 0.4;
   margin: auto;
}

.history-journey {
   position: relative;
   display: grid;
   gap: 18px;
   padding-left: 41px;
}

.history-journey::before {
   content: '';
   position: absolute;
   left: 12px;
   top: 16px;
   bottom: 16px;
   width: 1px;
   background: linear-gradient(180deg, rgba(255, 107, 107, 0.65), rgba(255, 107, 107, 0.08));
}

.history-step {
   position: relative;
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 20px;
   padding: 28px 28px;
}

.history-step::before {
   content: '';
   position: absolute;
   left: -40px;
   top: 34px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--bg-secondary);
   border: 3px solid var(--accent-color);
   box-shadow: 0 0 0 8px rgba(255, 107, 107, 0.08);
}

.history-step-number {
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: var(--accent-color);
   width: fit-content;
}

.history-step-content h4 {
   font-size: 1.3rem;
   margin-bottom: 10px;
   color: var(--text-primary);
}

.history-step-content p {
   color: var(--text-secondary);
   line-height: 1.75;
   margin: 0;
}

.history-step-featured {
   background: linear-gradient(180deg, rgba(59, 27, 27, 0.48), rgba(20, 20, 20, 0.92));
   border-color: rgba(255, 107, 107, 0.18);
}

/* Sección de Equipo - Tarjetas de perfil con imagen hover */
.team-section {
   padding: 100px 0;
   background-color: var(--bg-primary);
}

.team-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin-top: 50px;
}

.team-card {
   background: var(--bg-elevated);
   border: 1px solid var(--border-color);
   border-radius: 24px;
   padding: 30px 30px;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   position: relative;
   overflow: hidden;
   isolation: isolate;
   min-height: 460px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* CENTRA VERTICALMENTE EL CONTENIDO */
   user-select: none;
   cursor: pointer;
}

/* Contenedor para el contenido principal (excluyendo team-image) */
.team-card .team-content-wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
}

.team-card:hover {
   transform: translateY(-4px);
   border-color: var(--accent-color);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Avatar / inicial circular */
.team-avatar {
   width: 80px;
   height: 80px;
   background: linear-gradient(145deg, var(--bg-lighter), var(--bg-elevated));
   border: 2px solid var(--border-light);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 25px;
   font-size: 2rem;
   font-weight: 600;
   color: var(--text-primary);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   z-index: 2;
   position: relative;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-name {
   font-size: 1.8rem;
   font-weight: 600;
   margin-bottom: 5px;
   color: var(--text-primary);
   transition: all 0.4s ease;
   z-index: 2;
   position: relative;
}

.team-role {
   color: var(--accent-color);
   font-weight: 500;
   margin-bottom: 20px;
   font-size: 0.95rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   transition: all 0.4s ease;
   z-index: 2;
   position: relative;
}

/* Contenedor de contenido */
.team-content {
   display: flex;
   flex-direction: column;
   position: relative;
   margin-bottom: 30px;
}

.team-bio {
   color: var(--text-secondary);
   line-height: 1.7;
   font-size: 0.95rem;
   transition: all 0.4s ease;
   z-index: 2;
   margin-bottom: 0;
   position: relative;
}

/* Imagen del equipo (oculta por defecto) */
.team-image {
   position: absolute;
   inset: 0;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease, visibility 0.4s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   padding: 30px;
   background: var(--bg-elevated);
   z-index: 10;
}

.team-image:hover {
   cursor: default;
}

.team-image img {
   height: 180px;
   border-radius: 0 0 40% 40%;
   margin-bottom: 10px;
   background: none;
   transition: transform 0.3s ease;
   -webkit-user-drag: none;
}

.team-image p {
   color: var(--text-secondary);
   font-size: 1rem;
   line-height: 1.6;
   margin: 0 auto;
   font-style: italic;
}

.team-image span {
   color: var(--accent-color);
   font-weight: 600;
   font-style: normal;
   display: block;
   margin-top: 10px;
   font-size: 1.2rem;
}

/* Estado activo - cuando se hace clic, mostramos la imagen */
.team-card.active .team-content-wrapper .team-avatar,
.team-card.active .team-content-wrapper .team-name,
.team-card.active .team-content-wrapper .team-role,
.team-card.active .team-content-wrapper .team-bio,
.team-card.active .team-content-wrapper .team-social:not(.team-image .team-social) {
   opacity: 0;
   visibility: hidden;
}

.team-card.active .team-image {
   opacity: 1;
   visibility: visible;
}

.team-social {
   display: flex;
   justify-content: center;
   gap: 18px;
   margin-top: auto;
   transition: opacity 0.3s ease;
   z-index: 2;
   position: relative;
}

.team-social a {
   color: var(--text-tertiary);
   font-size: 1.6rem;
   transition: color 0.3s ease, transform 0.3s ease;
   display: inline-block;
}

.team-image .team-social a:hover {
   color: var(--text-primary);
   transform: translateY(-3px);
   cursor: pointer;
}

.team-card.active .team-image .team-social {
   opacity: 1 !important;
   visibility: visible !important;
}

/* Botón de cierre para la imagen (opcional) */
.team-image-close {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 1.4rem;
   cursor: pointer;
   transition: background 0.3s ease;
   z-index: 20;
}

.team-image-close:hover {
   background: rgba(255, 107, 107, 0.8);
}

i.fa-plus {
   transition: transform 0.3s ease, color 0.3s ease;
}

/* ======================================================
   CARRUSEL MINIMALISTA DE ESTUDIOS
   ====================================================== */
.studies-carousel {
   width: 100%;
   max-width: 280px;
   margin: 20px auto 15px;
   position: relative;
}

.carousel-container {
   overflow: hidden;
   width: 100%;
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.2);
}

.carousel-track {
   display: flex;
   transition: transform 0.4s ease-in-out;
}

.carousel-slide {
   flex: 0 0 100%;
   padding: 8px 20px;
   text-align: center;
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--text-secondary);
   letter-spacing: 0.02em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.carousel-slide:last-child {
   border-right: none;
}

.carousel-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
}

.dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--text-tertiary);
   transition: all 0.3s ease;
   cursor: pointer;
}

.dot.active {
   width: 20px;
   border-radius: 10px;
   background: var(--accent-color);
   opacity: 1;
}

.dot:hover {
   background: var(--accent-color);
   opacity: 0.7;
}

/* Rotación del icono + al hacer hover en la tarjeta */
.team-card:hover .team-social i.fa-plus {
   transform: scale(1.2);
   color: var(--text-primary);
}


/* CTA Final - Limpio y directo */
.about-cta {
   padding: 80px 0;
   text-align: center;
   background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
   border-top: 1px solid var(--border-color);
}

.about-cta h2 {
   font-size: 2.8rem;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--text-primary);
}

.about-cta p {
   color: var(--text-secondary);
   margin-bottom: 35px;
   font-size: 1.1rem;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
}

.about-cta .btn-primary {
   background-color: var(--text-primary);
   color: var(--bg-primary);
   border: 1px solid var(--text-primary);
}

.about-cta .btn-primary:hover {
   background-color: transparent;
   color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1060px) {
   .team-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
      justify-content: center;
   }

   /* Cuando hay un número impar de tarjetas, la última se centra */
   .team-grid .team-card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      justify-self: center;
      max-width: calc(50% - 12.5px);
      width: 100%;
   }
}

@media (max-width: 992px) {
   .history-storyboard {
      grid-template-columns: 1fr;
   }

   .history-intro-card {
      position: relative;
      top: auto;
   }

   .page-hero {
      padding: 4rem 1rem 0rem;
   }
}

@media (max-width: 768px) {
   .page-title {
      font-size: 2.6rem;
   }

   .history-section {
      padding: 40px 0 70px;
   }

   .team-section {
      padding: 70px 0;
      background-color: var(--bg-primary);
   }

   .history-step {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 22px 20px;
   }

   .team-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
      width: 100%;
   }
   
   .team-card {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
   }

   /* Reset para móvil - la tarjeta ocupa el ancho especificado */
   .team-grid .team-card:last-child:nth-child(odd) {
      grid-column: auto;
      justify-self: auto;
      max-width: 500px;
      width: 100%;
   }

   .about-cta h2 {
      font-size: 2.2rem;
   }

   .history-heading {
      font-size: 1.8rem;
   }
}

@media (max-width: 576px) {
   .history-intro-card {
      padding: 30px;
      border-radius: 0%;
   }

   .history-section .container {
      padding: 0;
   }

   .team-section .container {
      padding: 0 25px;
   }

   .team-card {
      padding: 20px;
   }

   .history-journey {
      margin: auto;
      padding: 20px;
   }

   .history-journey::before {
      display: none;
   }

   .history-step::before {
      display: none;
   }
}

/* Ajustes responsive para el carrusel */
@media (max-width: 768px) {
   .studies-carousel {
      max-width: 240px;
   }

   .carousel-slide {
      font-size: 0.8rem;
      padding: 10px 15px;
   }
}