/* IvaniaPhoto · publico/assets/css/tema-about.css
 * Ocampo-Infra Agent System · autor Roberto Ocampo · 9/19/2026
 *
 * ADR-001/ADR-005 (`docs/web-publica-20260919/02-DISENO-ARQUITECTURA.md` §1,
 * §5): "diseño propio bajo la misma cáscara" — SCOPED a
 * `main[data-tema="about"]`, nunca a `:root`. Usa la paleta Demo1 (base.css)
 * como base (misma cabecera/pie que el resto del sitio) y sólo añade la
 * rejilla de roles/Q&A que no existe en ningún otro tema.
 */

main[data-tema="about"] {
  display: block;
}

main[data-tema="about"] .ip2-about-hero {
  padding-block: var(--sec-pad);
  text-align: center;
}
main[data-tema="about"] .ip2-about-hero .prosa {
  margin-inline: auto;
}

main[data-tema="about"] .ip2-about-equipo {
  padding-block: calc(var(--sec-pad) * .6) var(--sec-pad);
}

main[data-tema="about"] .ip2-about-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
}

main[data-tema="about"] .ip2-about-tarjeta {
  background: #fff;
  box-shadow: 0 20px 50px -30px rgba(36, 30, 28, .3);
  padding: 1.4rem 1.3rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

main[data-tema="about"] .ip2-about-foto {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, #ece6dd, #ece6dd 10px, #e2dacd 10px, #e2dacd 20px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .6rem;
}

main[data-tema="about"] .ip2-about-foto-rotulo {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(20, 16, 13, .72);
  color: #F4EEE4;
  padding: .28rem .6rem;
  border-radius: 999px;
}

main[data-tema="about"] .ip2-about-tarjeta h2 {
  font-size: 1.15rem;
  margin: 0;
}

main[data-tema="about"] .ip2-about-qa {
  border-top: 1px solid rgba(36, 30, 28, .1);
  padding-top: .7rem;
}
main[data-tema="about"] .ip2-about-qa + .ip2-about-qa {
  margin-top: -.2rem;
}

main[data-tema="about"] .ip2-about-p {
  font-weight: 600;
  font-size: .92rem;
  margin: 0 0 .25rem;
}

main[data-tema="about"] .ip2-about-r {
  font-size: .9rem;
  color: #5d534c;
  margin: 0;
}

main[data-tema="about"] .ip2-about-aviso {
  margin-top: 2rem;
  font-size: .82rem;
  color: var(--ip-humo, #8a8178);
  max-width: 62ch;
}

/* Imágenes de rol (placeholders ilustrativos, orden de Roberto 9/19). */
.ip2-about-foto { position: relative; overflow: hidden; }
.ip2-about-foto picture, .ip2-about-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ip2-about-foto-rotulo { position: absolute; left: 8px; bottom: 8px; z-index: 2; margin: 0;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(10,10,10,.55); color: #F4EEE4; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); }