/* ==========================================================================
   PRISMA — Quiénes somos: tres secciones rediseñadas
   (.nos1 forma de ver la comunicación · .nos2 significado de PRISMA · .nos4 valores)
   Se carga solo en nosotros.html; todo está limitado a clases .nos*.
   ========================================================================== */

/* ---------- Piezas compartidas ---------- */
.nos__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4rem);
  line-height: 1.02; letter-spacing: -.03em; text-wrap: wrap;
  color: var(--ink);
}
.nos__hl { color: var(--purple); }
.nos__p {
  margin: 0 0 1.25rem; max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6;
  color: #3a3150;
}
.nos__btn {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: .75rem;
  min-height: 54px; padding: .8rem 1.6rem; border-radius: 14px;
  background: var(--purple); color: #fff; text-decoration: none;
  font: 600 1.0625rem/1.2 var(--font-head);
  box-shadow: 0 14px 28px -12px rgba(109, 61, 232, .6);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nos__btn svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform .2s ease; }
.nos__btn:hover { background: var(--purple-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(67, 32, 120, .65); }
.nos__btn:hover svg { transform: translate(2px, -2px); }
.nos__btn:focus-visible { outline: 3px solid var(--purple-deep); outline-offset: 3px; }

/* ==========================================================================
   1. Nuestra forma de ver la comunicación
   ========================================================================== */
.nos1 { position: relative; }
.nos1__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.4rem + 2vw, 3rem); align-items: center; }
.nos1__media { position: relative; margin: 0; }
.nos1__img {
  display: block; width: 100%; height: auto; aspect-ratio: 1.13; object-fit: cover;
  border-radius: clamp(28px, 1.2rem + 3vw, 52px);
  box-shadow: 0 34px 60px -34px rgba(67, 32, 120, .45);
}
.nos1__card {
  position: absolute; right: clamp(.75rem, 5%, 2.25rem); bottom: clamp(.75rem, 5%, 2.25rem);
  max-width: min(15.5rem, 62%); margin: 0; padding: 1rem 1.35rem;
  border-radius: 22px; background: #fff;
  box-shadow: 0 18px 40px -16px rgba(36, 27, 53, .4);
  font: 700 clamp(.9375rem, .85rem + .45vw, 1.25rem)/1.25 var(--font-head);
  color: var(--ink);
}
.nos1__curve { display: none; position: absolute; z-index: 1; pointer-events: none; }
.nos1__copy { min-width: 0; }
.nos1__copy .nos__title { max-width: 11em; }

.nos1__bar {
  list-style: none; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem;
  font: 700 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.2 var(--font-head); color: var(--ink);
}
.nos1__bar li { display: inline-flex; align-items: center; }

@media (min-width: 640px) {
  .nos1__bar { gap: .75rem 0; }
  .nos1__bar li + li::before {
    content: ""; display: inline-block; width: clamp(1.5rem, 5vw, 2.75rem); height: 2px;
    margin-inline: clamp(.9rem, 3vw, 2.6rem); background: var(--purple); border-radius: 2px;
  }
}
@media (min-width: 900px) {
  .nos1__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: clamp(3.5rem, 2rem + 4vw, 6rem); }
  .nos1__curve { display: block; right: -5.5rem; bottom: calc(5% + 1.4rem); width: 6.5rem; height: 11.5rem; }
}

/* ==========================================================================
   2. El significado de PRISMA (ilustración fija, sin animación)
   ========================================================================== */
.nos2 {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 2rem + 3vw, 6rem);
  background: radial-gradient(55% 70% at 0% 35%, rgba(236, 226, 255, .75), transparent 70%), #fff;
}
.nos2__art { position: relative; margin: 0 calc(-1 * var(--gutter)) -2.5rem; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.nos2__art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 62% center; }
.nos2__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2rem; }
.nos2__copy { max-width: 36rem; }
.nos2__foot {
  display: flex; align-items: center; gap: 1rem; margin: 0;
  font: 600 .8125rem/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--purple);
}
.nos2__foot::before { content: ""; width: 2.5rem; height: 2px; border-radius: 2px; background: var(--purple); }

@media (min-width: 900px) {
  .nos2 { padding-block: 0; }
  .nos2__art {
    position: absolute; top: 0; bottom: 0; right: -17.5%; width: 84%; margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }
  .nos2__art img { height: 100%; aspect-ratio: auto; object-position: right center; }
  .nos2__inner { min-height: clamp(30rem, 22rem + 18vw, 41rem); justify-content: space-between; gap: 3rem; padding-block: clamp(3.5rem, 3rem + 3vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .nos2__copy { padding-top: .5rem; }
}

/* ==========================================================================
   4. Nuestros valores
   ========================================================================== */
.nos4 {
  position: relative; overflow: hidden; color: #f1e9ff;
  background:
    radial-gradient(60% 75% at 100% 0%, rgba(109, 61, 232, .55), transparent 62%),
    radial-gradient(70% 70% at 0% 100%, rgba(91, 44, 200, .5), transparent 62%),
    linear-gradient(135deg, #2b1058 0%, #3a1a7a 55%, #2b1058 100%);
}
.nos4::before, .nos4::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.nos4::before { left: -22%; bottom: -55%; width: 85%; aspect-ratio: 1; background: radial-gradient(circle at 60% 40%, rgba(120, 72, 240, .32), rgba(120, 72, 240, 0) 66%); }
.nos4::after { right: -18%; top: -50%; width: 60%; aspect-ratio: 1; background: radial-gradient(circle at 40% 60%, rgba(146, 100, 255, .28), rgba(146, 100, 255, 0) 66%); }
.nos4__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: center; }
.nos4 .eyebrow { color: #cbb4fa; }
.nos4__title {
  margin: 0 0 1.25rem; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.03em; color: #fff;
}
.nos4__sub { margin: 0; max-width: 20rem; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.4rem); line-height: 1.45; color: #b99cf6; }
.nos4__rule { display: block; width: 3.75rem; height: 2px; margin: 2rem 0 1.25rem; border-radius: 2px; background: #a98af2; }
.nos4__small { margin: 0; font-size: .9375rem; line-height: 1.5; color: #c4b0f2; }

.nos4__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.nos4__card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 14.5rem; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: 26px;
}
.nos4__ico { width: 4rem; height: 4rem; margin-bottom: auto; }
.nos4__n { display: block; margin-top: 1.25rem; font: 500 .9375rem/1 var(--font-body); letter-spacing: .02em; }
.nos4__card h3 { margin: .35rem 0 .5rem; font: 800 clamp(1.3125rem, 1.15rem + .6vw, 1.625rem)/1.12 var(--font-head); letter-spacing: -.02em; }
.nos4__card p { margin: 0; font-size: 1rem; line-height: 1.5; }

.nos4__card--1 { background: linear-gradient(160deg, #f1eaff 0%, #dccbfb 100%); color: #20113f; }
.nos4__card--1 h3 { color: #20113f; }
.nos4__card--1 .nos4__n { color: #7a5bc4; }
.nos4__card--1 p { color: #4f3d86; }
.nos4__card--2 { background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(167, 139, 250, .7); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nos4__card--2 h3 { color: #fff; }
.nos4__card--2 .nos4__n { color: #b99cf6; }
.nos4__card--2 p { color: #c9b6f6; }
.nos4__card--3 { background: linear-gradient(160deg, #6a35de 0%, #5a2bc8 100%); color: #fff; }
.nos4__card--3 h3 { color: #fff; }
.nos4__card--3 .nos4__n { color: #cbb7ff; }
.nos4__card--3 p { color: #e0d4ff; }
.nos4__card--4 { background: #fff; color: #20113f; }
.nos4__card--4 h3 { color: #20113f; }
.nos4__card--4 .nos4__n { color: #7a5bc4; }
.nos4__card--4 p { color: #4f3d86; }

@media (min-width: 640px) {
  .nos4__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 900px) {
  .nos4__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr); }
  .nos4__card { min-height: 16.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nos__btn, .nos__btn svg { transition: none !important; }
  .nos__btn:hover, .nos__btn:hover svg { transform: none; }
}

/* Ancho intermedio: texto algo más estrecho y cristal más a la derecha para que no se toquen */
@media (min-width: 900px) and (max-width: 1179px) {
  .nos2__art { width: 78%; right: -22%; }
  .nos2__copy { max-width: 30rem; }
}