/* ========== about.css ========== */

/* 1)  Variables corporativas aisladas  */
.about-page {
  --color-brand: #FF6A13;
  --color-blue: #0070C0;
  --color-blue-dark: #003E73;
  --color-white: #FFFFFF;
  --color-gray-50: #F5F7FA;
  --color-gray-700: #4A5663;
  --shadow-sm: 0 2px 6px -1px rgba(0,0,0,.12), 0 4px 12px -2px rgba(0,0,0,.08);
  --shadow-md: 0 6px 20px -6px rgba(0,0,0,.18), 0 14px 32px -12px rgba(0,0,0,.20);
  --radius-lg: 1.25rem;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --grad-brand: linear-gradient(115deg,var(--color-blue-dark) 0%,var(--color-blue) 55%);
  --grad-brand-accent: radial-gradient(circle at 80% 25%,rgba(255,106,19,.35),transparent 60%);
  --bg-alt: var(--color-gray-50);
  --surface: rgba(255,255,255,.88);
  --border-color: rgba(255,255,255,.4);
  --accent: var(--color-brand);
  --text-secondary: var(--color-gray-700);
  --content-max: 1320px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* 2)  Reset local */
.about-page *,
.about-page *::before,
.about-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- ENCABEZADO ---------- */
.about-page header {
  padding: 2rem 1rem;
  text-align: center;
  background: var(--grad-brand);
  color: var(--color-white);
}
.about-page header h1 {
  font-size: 2.2rem;
  font-weight: 700;
}

/* ---------- BLOQUE “GLASS” ---------- */
.about-page .glass{
  position:relative;
  background:var(--surface);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
             0 14px 30px -10px rgba(0,0,0,.25);
  padding:3rem 2.5rem 3.25rem;
  overflow:hidden;
  transition:transform .3s var(--ease-standard),
             box-shadow .3s var(--ease-standard);
}
.about-page .glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(130deg,var(--color-brand) 0%,var(--color-blue) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  background-size:300%;
  pointer-events:none;
  transition:background-position 1.4s linear;
}
.about-page .glass:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-md);
}
.about-page .glass:hover::before{
  background-position:200% 0;
}
.about-page .glass-icon{
  width:3.5rem;height:3.5rem;
  display:grid;place-items:center;
  font-size:1.6rem;color:var(--color-white);
  background:var(--grad-brand);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  margin-bottom:1.25rem;
}
.about-page .glass-title{
  color:var(--accent);
  font-size:2rem;
  margin:.25rem 0 1rem;
}
.about-page .glass-text{
  color:var(--text-secondary);
  font-size:1.1rem;
  line-height:1.8;
}

/* ---------- SECCIÓN SUPERIOR (Who) ---------- */
.about-page .top-section{
  background:var(--bg-alt);
  padding:6rem 1rem 4rem;
}
.about-page .top-wrapper{
  max-width:var(--content-max);
  margin-inline:auto;
}

/* ---------- CTA DIVISOR ---------- */
.about-page .wave{line-height:0;}
.about-page .wave svg{display:block;width:100%;height:100px;}
.about-page .wave--flip svg{transform:rotate(180deg);}

.about-page .cta-section{
  background:var(--grad-brand);
  color:var(--color-white);
  text-align:center;
  padding:5rem 1rem 6rem;
}
.about-page .cta-section h3{
  font-size:2rem;
  margin-bottom:1rem;
  font-weight:700;
}
.about-page .cta-section p{
  font-size:1.05rem;
  max-width:780px;
  margin-inline:auto;
  margin-bottom:2.2rem;
}
.about-page .cta-btn{
  display:inline-block;
  padding:.9rem 2.3rem;
  border-radius:50px;
  background:var(--color-brand);
  color:var(--color-white);
  font-weight:600;
  text-decoration:none;
  transition:background .25s var(--ease-standard),
             transform .25s var(--ease-standard);
}
.about-page .cta-btn:hover{
  background:#ff8039;
  transform:translateY(-2px);
}

/* ---------- SECCIÓN INFERIOR (Misión / Visión) ---------- */
.about-page .bottom-section{
  background:var(--bg-alt);
  padding:4rem 1rem 6rem;
}
.about-page .bottom-wrapper{
  max-width:var(--content-max);
  margin-inline:auto;
  display:grid;
  gap:3rem;
}
@media(min-width:900px){
  .about-page .bottom-wrapper{grid-template-columns:1fr 1fr;}
}

/* ---------- Animaciones de entrada ---------- */
.about-page .fade-in{opacity:0;transform:translateY(50px);}
.about-page .fade-in:nth-child(1){animation:fade .8s .15s forwards;}
.about-page .fade-in:nth-child(2){animation:fade .8s .35s forwards;}
@keyframes fade{to{opacity:1;transform:none;}}

/* ---------- Tarjetas Who / Info ---------- */
.about-page .who-card,
.about-page .info-card{
  display:grid;
  grid-template-columns:38% 1fr;
  align-items:center;
  gap:2rem;
}
.about-page .who-card__img,
.about-page .info-card__img{
  overflow:hidden;
  border-radius:var(--radius-lg);
  height:100%;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.25);
}
.about-page .who-card__img img,
.about-page .info-card__img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media(max-width:900px){
  .about-page .who-card,
  .about-page .info-card{grid-template-columns:1fr;}
  .about-page .who-card__img,
  .about-page .info-card__img{height:220px;}
}
.about-page .who-card__body .glass-title,
.about-page .info-card__body .glass-title{
  color:var(--color-brand);
}

/* ---------- HISTORIA ---------- */
.about-page .ab-history{
  background:var(--color-brand);
  padding:6rem 1rem;
  overflow:hidden;
}
.about-page .ab-history__wrapper{
  max-width:var(--content-max);
  margin-inline:auto;
  display:grid;
  gap:3rem;
  align-items:center;
}
@media(min-width:900px){
  .about-page .ab-history__wrapper{grid-template-columns:1fr 1fr;}
}

/* Tarjeta de texto */
.about-page .ab-history__card{
  background:var(--color-white);
  border:4px solid var(--color-brand);
  padding:3rem 2.5rem;
  box-shadow:var(--shadow-sm);
  position:relative;
  z-index:2;
}
.about-page .ab-history__title{
  font-size:3rem;
  line-height:1.05;
  color:var(--color-brand);
  font-weight:800;
  margin-bottom:1.25rem;
}
.about-page .ab-history__text{
  color:var(--text-secondary);
  font-size:1.05rem;
  margin-bottom:1.75rem;
}
.about-page .ab-history__credit{
  display:block;margin-bottom:2rem;
  color:var(--text-secondary);font-size:.9rem;
}
.about-page .ab-history__btn{
  border:2px solid var(--color-brand);
  background:transparent;
  color:var(--color-brand);
}
.about-page .ab-history__btn:hover{
  background:var(--color-brand);
  color:var(--color-white);
}

/* Collage */
.about-page .ab-history__images{
  display:grid;
  gap:1.25rem;
  position:relative;
}
.about-page .ab-history__img{
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.25);
  width:100%;
  max-height:320px;
}
.about-page .ab-history__img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media(min-width:900px){
  .about-page .ab-history__images{
    grid-template-areas:
      "top"
      "big"
      "bottom";
    grid-template-rows:160px auto 160px;
  }
  .about-page .ab-history__img--top   {grid-area:top;}
  .about-page .ab-history__img--big   {grid-area:big;height:clamp(340px,55vh,480px);}
  .about-page .ab-history__img--bottom{grid-area:bottom;}
}