/* Ni'yaa: plantilla de banners. La misma pieza sirve para el carrusel del sitio y para
   cualquier medida de redes: todo se mide en unidades del propio banner (cq*), así que
   cambia de acomodo según su proporción, no según la pantalla. */

.banner {
  --b-bg: #efefec;
  --b-ink: #141414;
  --b-muted: #53524e;
  --b-btn: #141414;
  --b-btn-ink: #efefec;
  container: banner / size;
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--b-bg); color: var(--b-ink);
  font-family: "Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.banner--tinta { --b-bg: #141414; --b-ink: #efefec; --b-muted: #a9a8a3; --b-btn: #efefec; --b-btn-ink: #141414; }
.banner--foto { --b-bg: #e2e1dd; }

/* ---------- cuadrado y vertical: imagen arriba, texto abajo ---------- */
.banner__in { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; }
.banner__media { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 7cqmin 7cqmin 0; }
.banner__sketch { height: 100%; max-height: 62cqh; width: auto; max-width: 100%; aspect-ratio: 604 / 672; }
.banner--tinta .banner__sketch, .banner--tinta .banner__mark { filter: invert(0.94); }
.banner--foto .banner__media { padding: 0; }
.banner__photo { display: block; width: 100%; height: 100%; object-fit: cover; }

.banner__body { padding: 6cqmin 7cqmin 6.5cqmin; display: flex; flex-direction: column; }
.banner__title {
  margin: 0;
  font-size: 8.2cqmin; font-weight: 700; line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance; max-width: 18ch;
}
.banner__text {
  margin: 2.6cqmin 0 0;
  font-size: max(0.8125rem, 3.5cqmin); line-height: 1.42; color: var(--b-muted);
  max-width: 34ch; text-wrap: pretty;
}
.banner__foot { display: flex; align-items: center; justify-content: space-between; gap: 3cqmin; margin-top: 5.5cqmin; }
.banner__sign { margin: 0; display: inline-flex; align-items: center; gap: 1.6cqmin; font-size: 3.4cqmin; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.banner__sign { font-size: max(0.8125rem, 3.4cqmin); }
.banner__mark { height: 5.6cqmin; width: auto; }
.banner__cta {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 2.2cqmin 3.4cqmin;
  background: var(--b-btn); color: var(--b-btn-ink);
  font-size: max(0.8125rem, 3.1cqmin); font-weight: 600; text-decoration: none; text-align: right;
  transition: opacity 200ms ease, transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
a.banner__cta:hover { opacity: 0.85; }
a.banner__cta:active { transform: scale(0.97); }
a.banner__cta:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }
/* en redes no hay botón que tocar: la línea de contacto va como texto */
.banner__cta--static { min-height: 0; padding: 0; background: none; color: var(--b-ink); font-weight: 600; text-wrap: balance; max-width: 60%; }

/* historias (9:16): la imagen gana altura */
@container banner (max-aspect-ratio: 2 / 3) {
  .banner__media { padding: 10cqw 8cqw 0; }
  .banner--foto .banner__media { padding: 0; }
  .banner__body { padding: 8cqw 8cqw 12cqw; }
  .banner__title { font-size: 10.5cqw; }
  .banner__text { font-size: 4.4cqw; }
  .banner__sign { font-size: 4.2cqw; }
  .banner__mark { height: 7cqw; }
  .banner__cta { font-size: 3.8cqw; }
}

/* ---------- apaisado: texto a la izquierda, imagen a la derecha ---------- */
@container banner (min-aspect-ratio: 7 / 5) {
  .banner__in { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .banner__body { order: -1; justify-content: center; padding: 6cqh 4cqw 6cqh 5cqw; }
  .banner__media { padding: 7cqh 5cqw 7cqh 0; }
  .banner--foto .banner__media { padding: 0; }
  .banner__sketch { max-height: 86cqh; }
  .banner__title { font-size: min(4cqw, 10cqh); max-width: 24ch; }
  .banner__text { font-size: max(0.8125rem, min(1.75cqw, 4.4cqh)); margin-top: min(1.4cqw, 3.4cqh); }
  .banner__foot { margin-top: min(3cqw, 7cqh); justify-content: flex-start; gap: min(3cqw, 7cqh); }
  .banner__sign { font-size: max(0.8125rem, min(1.7cqw, 4.2cqh)); gap: 0.8cqw; }
  .banner__mark { height: min(2.8cqw, 7cqh); }
  .banner__cta { font-size: max(0.8125rem, min(1.5cqw, 3.8cqh)); padding: min(1.1cqw, 2.6cqh) min(1.8cqw, 4.2cqh); }
}

/* portadas muy anchas (Facebook, X, LinkedIn): sin texto de apoyo, todo al centro seguro */
@container banner (min-aspect-ratio: 12 / 5) {
  .banner__in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .banner__body { padding: 8cqh 3cqw 8cqh 12cqw; }
  .banner__media { padding: 10cqh 12cqw 10cqh 0; }
  .banner--foto .banner__media { padding: 0; }
  .banner__title { font-size: min(3.6cqw, 15cqh); max-width: 22ch; }
  .banner__text { display: none; }
  .banner__foot { margin-top: 6cqh; }
  .banner__sign { font-size: min(1.3cqw, 5.4cqh); }
  .banner__mark { height: min(2.2cqw, 9cqh); }
  .banner__cta { font-size: min(1.15cqw, 4.8cqh); }
}