/* ============================================================
   AKORA — Página About Us (rediseño)
   Estilos específicos de la página. Se carga DESPUÉS de akora.css.
   Hero editorial partido + cita del fundador (firma script) + equipo
   en tiras (nombres + fotos B/N con cita al pasar el ratón).
   ============================================================ */

body { background: var(--cream); }

/* ── HERO (split editorial) ── */
.about-hero { background: var(--cream); padding: clamp(40px,5vw,78px) clamp(32px,5vw,72px) clamp(48px,6vw,90px); }
.about-hero__in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1fr; gap: clamp(36px,6vw,96px); align-items: stretch; }
.about-hero__media { position: relative; overflow: hidden; height: clamp(440px,48vw,604px); background: #e8e3da; }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.about-hero__col { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(4px,1vw,18px) 0; }
.about-hero__top .eyebrow { color: var(--teal); margin-bottom: 16px; }
.about-hero__top h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px,5.4vw,78px); color: var(--navy); line-height: 1.02; letter-spacing: -.015em; margin: 0; max-width: 12ch; }
.about-hero__top h1 em { font-style: italic; color: var(--gold); }
.about-hero__body { font-size: clamp(14.5px,1.2vw,16px); color: var(--ink); line-height: 1.78; max-width: 50ch; margin: 0; }
@media (max-width: 820px) {
  .about-hero__in { grid-template-columns: 1fr; gap: 26px; }
  .about-hero__media { height: clamp(360px,70vw,440px); }
  .about-hero__col { gap: 22px; }
}

/* ── CITA DEL FUNDADOR ── */
.about-quote {
  background: var(--cream-2);
  padding: clamp(36px,4vw,56px) clamp(24px,5vw,56px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.about-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px,2.1vw,28px);
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
  max-width: 40ch;
}
.about-quote__attr {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.about-quote__name {
  font-family: var(--font-script);
  font-size: 30px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--navy); line-height: 1;
}
.about-quote__role {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
}

/* ── EQUIPO ── */
.about-team {
  background: var(--cream);
  --tl: rgba(24,30,58,.42);
  padding: clamp(48px,5vw,72px) 0 clamp(64px,7vw,88px);
}
.team-head { max-width: 720px; margin: 0 auto clamp(34px,4vw,52px); text-align: center; }
.team-head .eyebrow { color: var(--teal); margin-bottom: 14px; }
.team-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px,4.2vw,56px); color: var(--navy);
  line-height: 1.03; margin: 0; letter-spacing: -.01em;
}
.team-head h2 em { font-style: italic; color: var(--teal); }
/* ES: el titular es más largo; en escritorio se ensancha para que quepa en una
   sola línea, como en inglés. */
html[lang="es"] .team-head { max-width: 940px; }
.team-head__sub { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 16px auto 0; max-width: 48ch; }

/* Tira conectada — fila de nombres sobre fila de fotos.
   Cada persona es un .tperson (display:contents en escritorio) para que sus dos
   celdas (nombre y foto) entren en la rejilla de la tira: 5 columnas, 2 filas,
   flujo por columnas → todos los nombres arriba, todas las fotos abajo. */
.team-strips { max-width: none; margin: 0; }
.team-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto;
  grid-auto-flow: column;
  border: 1px solid var(--tl); border-top: none; overflow: hidden; background: var(--cream);
}
.team-strip:first-child { border-top: 1px solid var(--tl); }
.tperson { display: contents; }
.tcell {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 26px 16px;
  border-left: 1px solid var(--tl); border-bottom: 1px solid var(--tl);
}
.pcell { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #e8e3da; border-left: 1px solid var(--tl); }
.tperson:first-child .tcell, .tperson:first-child .pcell { border-left: none; }
.tcell .name { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); line-height: 1.4; }
.tcell .role { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); line-height: 1.5; margin-top: 12px; }
.pcell img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: grayscale(1) contrast(1.06); transition: filter .4s ease; }
.pcell:hover img { filter: grayscale(0) contrast(1); }
.pcell__ph { position: absolute; inset: 0; background: linear-gradient(160deg,#468186,#2d5a5e); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 34px; color: rgba(255,255,255,.45); filter: grayscale(1); }
.pcell__quote { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 18px; color: var(--cream); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(15px,1.5vw,18px); line-height: 1.46; text-shadow: 0 1px 12px rgba(0,0,0,.55); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; background: linear-gradient(180deg,transparent 0%,rgba(20,16,12,.55) 55%,rgba(20,16,12,.9) 100%); }
.pcell:hover .pcell__quote { opacity: 1; transform: translateY(0); }

/* Móvil: tarjetas de 2 columnas (foto arriba, nombre debajo). Todas las personas
   fluyen en una sola rejilla para no dejar huecos. */
@media (max-width: 760px) {
  .team-strips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
  .team-strip { display: contents; }
  .tperson { display: flex; flex-direction: column; border: 1px solid var(--tl); overflow: hidden; background: var(--cream); }
  .tcell { order: 2; padding: 12px 10px; border: none; }
  .tcell .name { font-size: 11px; }
  .tcell .role { font-size: 9px; letter-spacing: .1em; margin-top: 6px; }
  .pcell { order: 1; border: none; }
  .pcell__quote { font-size: 12px; padding: 36px 12px 12px; }
}