/* Hero */
.hero { padding-block: clamp(32px, 6vw, 64px) var(--section-y); }
.hero .container {
  display: grid; gap: 48px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__text .lead { max-width: 34em; }

.hero__media { position: relative; }
.hero__photo {
  aspect-ratio: 5 / 4; width: 100%; object-fit: cover;
  background: var(--tint-blue); border-radius: var(--radius-hero);
}
.deco { position: absolute; z-index: 1; }
.deco--circle { width: 96px; height: 96px; border-radius: 50%; background: var(--orange); top: -28px; right: 24px; }
.deco--square-m { width: 72px; height: 72px; border-radius: 14px; background: var(--magenta); transform: rotate(12deg); bottom: 32px; left: -24px; }
.deco--square-g { width: 56px; height: 56px; border-radius: 12px; background: var(--green); transform: rotate(-10deg); bottom: -20px; right: 64px; }

.t-green { color: var(--green-text); }
.t-orange { color: var(--orange-text); }
.t-blue { color: var(--blue-text); }
.t-magenta { color: var(--magenta); }

/* Equipo */
.team { display: grid; gap: 48px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.team__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.team__text p { color: var(--ink-muted); }
.team .hero__photo { background: var(--tint-pink); }

/* Comisión */
.board { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.member { background: var(--white); border-radius: var(--radius-card); padding: 12px 12px 20px; }
.member__photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius-photo); background: var(--tint-grey);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; color: var(--ink-muted);
}
.member:nth-child(5n+1) .member__photo { background: var(--tint-blue); }
.member:nth-child(5n+2) .member__photo { background: var(--tint-pink); }
.member:nth-child(5n+3) .member__photo { background: var(--tint-green); }
.member:nth-child(5n+4) .member__photo { background: var(--tint-orange); }
.member h3 { font-size: 1.125rem; margin: 16px 8px 4px; }
.member p { margin-inline: 8px; color: var(--ink-muted); font-size: 1rem; }

/* Reconocimientos */
.awards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.award-card { background: var(--white); border-radius: var(--radius-project); padding: 32px; border-top: 8px solid var(--blue); }
.award-card--green { border-top-color: var(--green); }
.award-card h3 { margin-bottom: 16px; font-size: 1.75rem; }
.award-row { display: flex; gap: 20px; padding-block: 14px; border-top: 1px solid var(--line); }
.award-row dt { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; min-width: 3.5em; }
.award-row dd { margin: 0; color: var(--ink-muted); }
dl { margin: 0; }

.subsection + .subsection { margin-top: 48px; }
.subsection h3 { margin-bottom: 20px; }

/* Páginas de proyecto */
.project-hero__banner { border-radius: var(--radius-hero); width: 100%; background: var(--tint-blue); }
.prose { max-width: 46em; display: flex; flex-direction: column; gap: 20px; }
.prose p { color: var(--ink-muted); }
.hero { overflow-x: clip; }
.member__photo { overflow: hidden; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* ---------- Páginas de proyecto ---------- */
.proyecto--dane { --proyecto-tinte: var(--tint-blue); --proyecto-acento: var(--blue-text); --proyecto-borde: var(--blue); }
.proyecto--chicas { --proyecto-tinte: var(--tint-pink); --proyecto-acento: var(--magenta); --proyecto-borde: var(--magenta); }
.proyecto--nahual { --proyecto-tinte: var(--tint-green); --proyecto-acento: var(--green-text); --proyecto-borde: var(--green); }
.tint-dane { background: var(--tint-blue); }
.tint-chicas { background: var(--tint-pink); }
.tint-nahual { background: var(--tint-green); }

.breadcrumb { padding-top: 24px; font-size: .9375rem; color: var(--ink-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); }

.proyecto .hero { padding-top: 8px; }
.proyecto .eyebrow { color: var(--proyecto-acento); }
.proyecto .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.proyecto .hero__text .lead { max-width: 560px; }
.proyecto-photo {
  min-height: 400px; display: grid; place-items: center; padding: 32px;
  background: var(--proyecto-tinte); border-radius: var(--radius-hero);
}
.proyecto-photo img { width: min(100%, 300px); height: auto; background: #fff; border-radius: 16px; }
.proyecto .deco--circle { width: 96px; height: 96px; }
.proyecto .deco--square-m { width: 52px; height: 52px; transform: rotate(-10deg); }
.proyecto .deco--square-g { width: 68px; height: 68px; transform: rotate(12deg); }
@media (min-width: 900px) { .proyecto .hero__media { transform: translateX(40px); } }

.intro { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.intro__text { display: flex; flex-direction: column; gap: 20px; }
.intro__text p { color: var(--ink-muted); }

.feature-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--white); border-radius: var(--radius-card); }
.feature-card p { color: var(--ink-muted); }
.feature-card__icon { width: 48px; height: 48px; border-radius: 14px; }
.feature-card:nth-child(4n+1) .feature-card__icon { background: var(--magenta); }
.feature-card:nth-child(4n+2) .feature-card__icon { background: var(--blue); }
.feature-card:nth-child(4n+3) .feature-card__icon { background: var(--green); }
.feature-card:nth-child(4n+4) .feature-card__icon { background: var(--orange); }
.features-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
:root[data-contrast="high"] .feature-card { border: var(--border-w) solid var(--ink); }

.apps__sub { margin: -24px 0 40px; color: var(--ink-muted); }
.apps-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.app-card { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 20px; background: var(--white); border-radius: var(--radius-card); }
.app-card__shot { height: 120px; border-radius: var(--radius-photo); background: var(--tint-blue); }
.app-card:nth-child(4n+2) .app-card__shot { background: var(--tint-pink); }
.app-card:nth-child(4n+3) .app-card__shot { background: var(--tint-green); }
.app-card:nth-child(4n+4) .app-card__shot { background: var(--tint-orange); }
.app-card h3 { font-size: 1.125rem; margin-inline: 8px; }

.awards-box { background: var(--ground); border-radius: var(--radius-project); padding: 16px 32px; border-top: 8px solid var(--proyecto-borde); }
.awards-box .award-row:first-child { border-top: 0; }
.awards-box + .link-arrow { margin-top: 16px; }

.others { border-top: 1px solid var(--line); }
.others h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); }
.others-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.other-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 150px; padding: 28px; border-radius: var(--radius-project); }
.other-card h3 { font-size: 1.625rem; font-weight: 800; }
:root[data-contrast="high"] .other-card { border: var(--border-w) solid var(--ink); }
.breadcrumb li { display: flex; align-items: center; }
.other-card { justify-content: flex-start; }
.other-card__logo { width: 100%; max-width: 220px; height: auto; background: #fff; border-radius: 16px; }
.other-card .link-arrow { margin-top: auto; }

.proyecto-photo--cover { position: relative; display: block; padding: 0; overflow: hidden; }
.proyecto .proyecto-photo--cover .proyecto-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: none; border-radius: 0; }
.proyecto .proyecto-photo--cover .proyecto-photo__logo { position: absolute; left: 24px; bottom: 24px; width: min(180px, 45%); padding: 6px; box-shadow: 0 8px 24px rgba(35, 40, 43, .18); }
.proyecto .proyecto-photo--cover { min-height: 0; aspect-ratio: 4 / 3; }
.proyecto .proyecto-photo--cover .proyecto-photo__img { object-position: 70% 50%; }

/* Otros proyectos: tarjetas compactas con el logo protagonista */
.others-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 340px)); }
.other-card { min-height: 0; gap: 4px; padding: 16px 16px 8px; }
.other-card__logo { max-width: none; }
.other-card .link-arrow { margin-top: 0; padding-inline: 8px; }
.app-card img.app-card__shot { width: 100%; object-fit: contain; background: #FBAE4C; }
.app-card img.app-card__shot.app-card__shot--cover { object-fit: cover; background: none; }
.app-card img.app-card__shot.app-card__shot--white { background: #fff; }
.app-card img.app-card__shot.app-card__shot--sonigrama { background: #fff; }

/* Introducción con texto largo */
.intro--long .intro__text { gap: 24px; max-width: 46em; }
.intro__lead { font-size: 1.3125rem; color: var(--ink) !important; }
@media (min-width: 900px) {
  .intro--long { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .intro--long h2 { position: sticky; top: 24px; }
}
.proyecto .proyecto-photo--nahual .proyecto-photo__img { object-position: 40% 50%; }
.proyecto .proyecto-photo--dane .proyecto-photo__img { object-position: 50% 40%; }