/* assets/css/nosotros.css */

/* ====== Variables (tu paleta) ====== */
:root{
  --blanco:#ffffff;
  --azul-marino:#0b2545;
  --rojo-logo:#b5121b;
  --amarillo-logo:#ffc800;
  --gris-claro:#f5f5f5;
  --gris-oscuro:#333333;
  --softblue: rgba(11, 37, 69, 0.06);
  --softyellow: rgba(255, 200, 0, 0.14);
  --softred: rgba(181, 18, 27, 0.10);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --shadow2: 0 6px 18px rgba(0,0,0,0.10);
  --radius-2xl: 22px;
  --radius-xl: 16px;
  --radius-lg: 12px;
}

/* ====== Base ====== */
.about-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.t-primary{ color: var(--azul-marino); }
.t-accent{ color: var(--rojo-logo); }

.section-card{
  background: var(--blanco);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem;
  margin: 1.75rem 0;
  border: 1px solid rgba(0,0,0,0.06);
}

.section-card--soft{
  background: linear-gradient(180deg, #fff, rgba(245,245,245,0.55));
}

.section-head{
  margin-bottom: 1.25rem;
}
.section-head.center{
  text-align: center;
}
.section-head h2{
  margin: 0 0 .35rem;
  font-family: 'Aileron', sans-serif;
  color: var(--azul-marino);
  font-size: 2rem;
  line-height: 1.1;
}
.section-sub{
  margin: 0;
  color: rgba(51,51,51,0.75);
}

.text-block p{
  margin: 0 0 1rem;
  color: rgba(51,51,51,0.92);
  line-height: 1.75;
}

/* ====== Scroll Reveal ====== */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(2px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Variantes por dirección (opcionales) */
.reveal-left{ transform: translateX(-18px); }
.reveal-right{ transform: translateX(18px); }
.reveal-left.is-visible,
.reveal-right.is-visible{
  transform: translateX(0);
}

/* Preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ====== HERO estilo mockup ====== */
.about-hero{
  position: relative;
  padding: 6.5rem 0 3.5rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(224,242,247,0.55), rgba(255,255,255,1));
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.about-hero__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 600px at 85% 25%, rgba(255,200,0,0.18), transparent 60%),
    radial-gradient(700px 700px at 10% 15%, rgba(11,37,69,0.12), transparent 60%);
}

.about-hero__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.about-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: center;
}

.about-badge{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  color: var(--azul-marino);
  font-weight: 800;
  font-size: .92rem;
}

.about-badge__dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--softred);
  color: var(--rojo-logo);
  font-size: .95rem;
}

.about-hero__title{
  margin: 1rem 0 1rem;
  font-family: 'Aileron', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  line-height: 1.05;
  color: #101827;
}
.about-hero__lead{
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(51,51,51,0.85);
  max-width: 42rem;
}

.about-community{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.about-avatars{
  display: flex;
  align-items: center;
}
.about-avatars img,
.about-avatars__more{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  object-fit: cover;
  margin-left: -12px;
}
.about-avatars img:first-child{ margin-left: 0; }

.about-avatars__more{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,200,0,0.95);
  color: var(--azul-marino);
  font-weight: 900;
  font-size: .8rem;
}

.about-community__title{
  margin: 0;
  font-weight: 900;
  color: #0f172a;
}
.about-community__sub{
  margin: 0;
  color: rgba(51,51,51,0.7);
  font-size: .95rem;
}

/* media */
.about-hero__media{
  position: relative;
}

.media-glow{
  position: absolute;
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(255,200,0,0.25);
  filter: blur(40px);
}

.media-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  border: 8px solid #fff;
  background: #fff;
}
.media-card img{
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.media-quote{
  position: absolute;
  left: -16px;
  bottom: -18px;
  max-width: 320px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 1rem 1rem;
  box-shadow: var(--shadow2);
}
.media-quote__text{
  margin: 0 0 .25rem;
  font-style: italic;
  color: rgba(51,51,51,0.85);
  font-size: .95rem;
}
.media-quote__by{
  margin: 0;
  font-weight: 900;
  color: var(--azul-marino);
  font-size: .92rem;
}

/* ====== Misión / Visión ====== */
.mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0;
}

.mv-card{
  border-radius: var(--radius-2xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
.mv-card h2{
  margin: 0 0 .65rem;
  font-family: 'Aileron', sans-serif;
  color: var(--azul-marino);
  font-size: 1.9rem;
}
.mv-card p{
  margin: 0;
  color: rgba(51,51,51,0.88);
  line-height: 1.75;
}
.mv-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--azul-marino);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  box-shadow: 0 12px 28px rgba(11,37,69,0.25);
}
.mv-icon--yellow{
  background: rgba(255,200,0,0.95);
  color: var(--azul-marino);
  box-shadow: 0 12px 28px rgba(255,200,0,0.35);
}
.mv-card--primary{ background: linear-gradient(180deg, rgba(224,242,247,0.45), #fff); }
.mv-card--secondary{ background: linear-gradient(180deg, rgba(255,200,0,0.12), #fff); }

/* ====== Gráfica ====== */
.chart-frame{
  display: flex;
  justify-content: center;
  padding-top: .75rem;
}
.chart-frame iframe{
  max-width: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

/* ====== Accordion ====== */
.accordion{
  margin-top: .75rem;
}
.accordion-toggle{
  width: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  font-weight: 900;
  border: 1px solid rgba(11,37,69,0.22);
  border-radius: 14px;
  margin-bottom: .65rem;
  position: relative;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  color: var(--azul-marino);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.accordion-toggle:hover{
  transform: translateY(-1px);
  border-color: rgba(11,37,69,0.35);
}
.accordion-toggle::after{
  content:"+";
  position:absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  transition: transform .2s ease;
  color: rgba(11,37,69,0.75);
}
.accordion-toggle.active{
  background: rgba(224,242,247,0.55);
}
.accordion-toggle.active::after{
  transform: translateY(-50%) rotate(45deg);
}
.accordion-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0 1.1rem;
  border-radius: 14px;
  margin: 0 0 1rem;
  border-left: 3px solid rgba(255,200,0,0.85);
}
.accordion-panel p,
.accordion-panel li{
  color: rgba(51,51,51,0.9);
  line-height: 1.75;
}
.values-list{
  margin: .75rem 0 1rem;
  padding-left: 1.1rem;
}
.values-list li{
  margin: .45rem 0;
}

/* ====== Servicios ====== */
.services-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: .75rem;
}
.service-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-2xl);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}
.service-card h3{
  margin: 0 0 .75rem;
  color: var(--azul-marino);
  font-family: 'Aileron', sans-serif;
  font-size: 1.35rem;
}
.service-card p{
  margin: 0 0 .85rem;
  color: rgba(51,51,51,0.9);
  line-height: 1.75;
}
.service-list{
  margin: .25rem 0 .85rem;
  padding-left: 1.1rem;
}
.service-list li{
  margin: .35rem 0;
}

/* ====== Equipo (faculty style) ====== */
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.team-card{
  background: #fff;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.team-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.12);
}

/* Importante: altura consistente, y en móvil se ve completa */
.team-media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(224,242,247,0.65), rgba(255,255,255,0.9));
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Desktop/tablet: cover (estético) */
.team-media img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}
.team-card:hover .team-media img{
  transform: scale(1.06);
}

.team-overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65));
}
.team-name{
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
}
.team-role{
  margin: .1rem 0 0;
  color: rgba(255,255,255,0.9);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.team-body{
  padding: 1rem 1rem 1.25rem;
}
.team-quote{
  margin: 0 0 .85rem;
  color: rgba(51,51,51,0.85);
  font-style: italic;
  line-height: 1.65;
  font-size: .95rem;
}
.team-pill{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 900;
  color: var(--azul-marino);
  background: rgba(224,242,247,0.55);
  border: 1px solid rgba(11,37,69,0.12);
  padding: .45rem .7rem;
  border-radius: 999px;
}
.team-card--placeholder .team-pill{
  background: rgba(255,200,0,0.18);
  border-color: rgba(255,200,0,0.35);
}

/* ====== Metodología (trust) ====== */
.trust-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.trust-card{
  text-align: center;
  background: #fff;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
  padding: 1.8rem 1.4rem;
}
.trust-icon{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  margin: 0 auto .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224,242,247,0.9);
  color: var(--azul-marino);
  font-size: 1.8rem;
  transition: transform .2s ease, background .2s ease;
}
.trust-icon--yellow{
  background: rgba(255,200,0,0.25);
}
.trust-icon--red{
  background: rgba(181,18,27,0.12);
  color: var(--rojo-logo);
}
.trust-card h3{
  margin: 0 0 .5rem;
  color: #0f172a;
  font-size: 1.2rem;
}
.trust-card p{
  margin: 0;
  color: rgba(51,51,51,0.82);
  line-height: 1.7;
}

/* ====== CTA ====== */
.cta-band{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  margin: 2.2rem 0 0;
  background: linear-gradient(135deg, rgba(224,242,247,0.9), rgba(255,255,255,0.95), rgba(255,200,0,0.14));
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
}
.cta-band__topline{
  height: 4px;
  background: linear-gradient(90deg, var(--azul-marino), var(--amarillo-logo), var(--rojo-logo));
}
.cta-band__inner{
  text-align: center;
  padding: 2.4rem 1.25rem 2.2rem;
}
.cta-band__inner h2{
  margin: 0 0 .5rem;
  font-family: 'Aileron', sans-serif;
  color: #0f172a;
  font-size: 2.1rem;
}
.cta-band__inner p{
  margin: 0 auto 1.2rem;
  max-width: 42rem;
  color: rgba(51,51,51,0.85);
  line-height: 1.75;
}
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 18px 35px rgba(34,197,94,0.30);
  transition: transform .18s ease, filter .18s ease;
}
.cta-btn:hover{
  transform: translateY(-3px);
  filter: brightness(0.98);
}
.cta-band__inner small{
  display: block;
  margin-top: .9rem;
  color: rgba(51,51,51,0.62);
  font-weight: 700;
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .about-hero__grid{
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .media-quote{
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: .9rem;
    max-width: none;
  }
  .media-card img{ height: 420px; }
  .mv-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .trust-grid{ grid-template-columns: 1fr; }
}

/* Móvil: fotos completas (contain) */
@media (max-width: 560px){
  .section-card{ padding: 1.6rem 1.2rem; }
  .section-head h2{ font-size: 1.6rem; }
  .about-hero{ padding: 5.5rem 0 2.8rem; }
  .media-card img{ height: 360px; }

  .team-grid{ grid-template-columns: 1fr; }

  .team-media{
    padding: 10px;               /* marco para que se vea "tarjeta" */
  }
  .team-media img{
    height: 240px;
    object-fit: contain;         /* clave: ya no recorta */
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
  }
  .team-overlay{
    position: static;            /* overlay debajo para no tapar la foto */
    background: transparent;
    padding: .8rem 1rem 0;
  }
  .team-name{
    color: #0f172a;
  }
  .team-role{
    color: rgba(51,51,51,0.7);
  }
}