/* ============================================================
   CRÉCIMA — Sobre Nosotros
   Medido sobre los frames "Nosotros — Desktop 1440",
   "Nosotros - Tablet 768" y "Nosotros - 390".
   Las piezas compartidas (header, botones, footer) viven en
   main.css: acá sólo va lo propio de esta página.
   ============================================================ */

:root {
  /* Esta página usa un contenedor más ancho que la Home:
     4 columnas de 302 con 16 de separación = 1256. */
  --container-nos: 1256px;
}

.container-nos {
  max-width: calc(var(--container-nos) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body.pagina-nosotros {
  background: var(--bg-lavender);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------
   El fondo baja de lavanda a un violeta apenas más saturado, y
   sobre él corren los anillos. Los puntos van montados en dos de
   ellos: lo que gira es el anillo —invisible, porque es un
   círculo— y el punto viaja por el borde.
   ------------------------------------------------------------ */
.hero-nos {
  position: relative;
  min-height: clamp(420px, 33vw, 476px);
  display: grid;
  place-items: center;
  padding: clamp(120px, 13vw, 180px) var(--gutter) clamp(80px, 8vw, 110px);
  background: linear-gradient(180deg, #e9ebf8 0%, #e5e8f7 55%, #d6dbf5 100%);
  overflow: hidden;
  text-align: center;
}

.ondas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.onda {
  position: absolute;
  left: 50%;
  top: 100%;
  border: 1px solid rgba(124, 0, 244, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Separadas ~85px entre sí, como en el frame */
.onda--1 {
  width: 330px;
  height: 330px;
}

.onda--2 {
  width: 500px;
  height: 500px;
}

.onda--3 {
  width: 670px;
  height: 670px;
}

.onda--4 {
  width: 840px;
  height: 840px;
}

/* El satélite se apoya en el borde superior de su anillo */
.sat {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(3px);
}

.sat--violeta {
  background: var(--brand);
}

.sat--oscuro {
  background: #2c2050;
}

.hero-nos__title {
  position: relative;
  z-index: 1;
  /* En 1440 el título entra en un renglón: 892px de ancho.
     El tope sólo aparece en pantallas chicas. */
  /* 52px con tracking -0.01em: es la única combinación que
     reproduce los 892px de ancho que mide el título en el frame
     (verificado midiendo el texto contra Figtree, no a ojo). */
  font-size: clamp(30px, 3.61vw, 52px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.16;
  color: var(--text);
}

/* ------------------------------------------------------------
   PRESENTACIÓN
   ------------------------------------------------------------ */
.panel--claro {
  background: var(--bg-light);
}

/* Se monta sobre el hero para que el lavanda asome por el radio */
.nos-intro {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--radius-panel));
  padding-top: clamp(60px, 7.6vw, 110px);
  padding-bottom: clamp(80px, 11vw, 160px);
}

/* La lamparita cruza el borde del panel, mitad afuera */
.nos-intro__bulb {
  position: absolute;
  left: min(53%, calc(50% + 40px));
  top: 0;
  width: clamp(56px, 6vw, 86px);
  height: auto;
  z-index: 2;
}

.nos-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 513px);
  gap: clamp(24px, 3.4vw, 43px);
  align-items: start;
}

/* 40px con interlineado de 50, medidos del frame */
.nos-intro__text {
  font-size: var(--fs-intro);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin-bottom: clamp(40px, 5.2vw, 75px);
}

.nos-intro__lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.64;
  color: var(--text-soft);
  max-width: 640px;
}

.nos-intro__foto {
  aspect-ratio: 513 / 535;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.nos-intro__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcador de contenido pendiente: mismo tramado que el bloque
   de video de la Home, para que se lea como "falta la pieza" y
   no como un bloque de color del diseño. */
.marcador {
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-conic-gradient(#e9e9ee 0% 25%, #d8d8e0 0% 50%) 50% / 48px 48px;
  color: #6b6b80;
}

.marcador span {
  font-size: var(--fs-lead);
  letter-spacing: 0.04em;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------
   EQUIPO
   ------------------------------------------------------------
   Ocho carpetas en dos filas de cuatro. Es el mismo lenguaje de
   las tarjetas de servicios —cuerpo con la esquina superior
   izquierda recta y una pestaña encima— pero mucho más discreta:
   100 x 7 contra 216 x 19.
   ------------------------------------------------------------ */
.equipo {
  position: relative;
  z-index: 1;
  background: var(--bg-light);
  padding-bottom: clamp(80px, 11vw, 160px);
}

.equipo__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.equipo__title {
  font-size: clamp(30px, 3.34vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* data-float lo centra con xPercent/yPercent, así que el ícono
   necesita su propio hueco para no comerse el título. */
.equipo__ico {
  width: clamp(42px, 4.4vw, 64px);
  height: auto;
  flex: none;
  margin-inline: clamp(21px, 2.2vw, 32px);
}

.equipo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 44px) 16px;
}

.persona {
  position: relative;
}

.persona__card {
  display: flex;
  color: inherit;
  text-decoration: none;
  height: 100%;
  flex-direction: column;
}

.persona__linkedin {
  display: flex;
  width: 28px;
  height: auto;
  padding-top: 26px;
  margin-top: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.persona__linkedin:focus-visible {
  outline: 2px solid var(--accent, #7c00f4);
  outline-offset: 4px;
}

.persona__linkedin svg {
  display: block;
}

.persona__tab {
  display: none;
  position: absolute;
  left: 0;
  top: -7px;
  width: 100px;
  height: calc(7px + var(--radius-card));
  background: var(--c, #c4c4c4);
  border-radius: 6px 6px 0 0;
  z-index: -1;
}

.persona__foto {
  aspect-ratio: 302 / 375;
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform var(--dur-base) var(--ease-out);
}

.persona__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona:hover .persona__foto {
  transform: translateY(-6px);
}

.persona__nombre {
  font-size: clamp(18px, 1.53vw, 22px);
  line-height: 1.2;
  margin-bottom: 6px;
}

.persona__rol {
  flex: 1;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-soft);
}

/* ------------------------------------------------------------
   TRES CONCEPTOS
   ------------------------------------------------------------ */
.conceptos {
  position: relative;
  z-index: 1;
  padding: clamp(70px, 9vw, 130px) var(--gutter) clamp(90px, 12vw, 170px);
  background: linear-gradient(180deg, var(--bg-light) 0%, #dfe3fa 46%, #b9c0f2 100%);
  text-align: center;
}

/* Más angosto que el contenedor general: 3 x 335 + 2 x 19 */
.conceptos__inner {
  max-width: 1040px;
  margin-inline: auto;
}

.conceptos__title {
  font-size: clamp(26px, 3.06vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

/* data-split reconstruye el texto y marca las palabras que
   venían en <b> con .w--b: hay que vestir las dos formas. */
.conceptos__title b,
.conceptos__title .w--b {
  font-weight: 700;
}

.conceptos__bajada {
  font-size: clamp(16px, 1.53vw, 22px);
  color: var(--text);
  margin-bottom: clamp(34px, 4.3vw, 62px);
}

.conceptos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  align-items: stretch;
}

/* Medida del frame: 335 x 452 con 23 de margen interno y 44
   abajo. La tarjeta se aclara de arriba hacia abajo — blanca
   hasta poco menos de la mitad y después baja a #e9ebf8. Los
   valores salen de muestrear el degradé cada 100px.

   Es un degradé opaco, como en el diseño: la tarjeta no se
   funde con el fondo, termina en un tono propio. No lleva
   sombra porque dibujaría el rectángulo entero y se notaría el
   borde de abajo, que en el frame es casi imperceptible. */
.concepto {
  display: flex;
  flex-direction: column;
  padding: 23px 23px 44px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f8f9fc 60%, #eff1fa 83%, #e9ebf8 100%);
  text-align: left;
}

/* Caja cuadrada como los archivos (897x897), alineada a la
   izquierda igual que en el frame. Se achica sola con la tarjeta
   y nunca pasa de los 264px del diseño. */
.concepto__arte {
  width: min(100%, 264px);
  aspect-ratio: 1;
  margin-bottom: clamp(14px, 1.7vw, 24px);
}

/* object-fit: contain es lo que impide que se deforme. Hace
   falta de verdad: el `img { max-width: 100% }` global recorta
   el ancho cuando la caja es más angosta que la imagen, y sin
   contain la altura se queda como estaba y la achata.

   Los PNG traen transparencia, así que no hace falta ningún
   modo de fusión para sacarles el fondo. */
.concepto__arte img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 40px medio: es lo único que da los 99px que mide "Crear" */
.concepto__name {
  font-size: clamp(28px, 2.78vw, 40px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--brand-deep);
  margin-bottom: 12px;
}

.concepto__desc {
  font-size: clamp(13px, 0.97vw, 14px);
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------------------
   PROYECTOS (panel oscuro)
   ------------------------------------------------------------ */
.nos-proy {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--radius-panel));
  padding-top: clamp(70px, 9.6vw, 138px);
  padding-bottom: clamp(70px, 9vw, 130px);
}

.nos-proy__title {
  font-size: clamp(26px, 2.78vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.nos-proy__lead {
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--text-invert-soft);
  margin-bottom: clamp(24px, 3vw, 42px);
}

/* La línea del diseño cruza todo el ancho, debajo del botón */
.nos-proy__intro {
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: clamp(40px, 5.4vw, 78px);
}

.nos-proy .grid3 {
  margin-top: 46px;
}

.nos-proy .card3__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nos-proy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
}

.nos-proy__item {
  display: block;
  aspect-ratio: 412 / 358;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #f7f7f8;
}

.nos-proy__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.nos-proy__item:hover img {
  transform: scale(1.04);
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------
   El radio superior ya venía de main.css, pero acá no se veía:
   por fuera de la curva asomaba el fondo del body, que en esta
   página es lavanda igual que el footer. Se monta sobre el panel
   oscuro —el mismo recurso que usan los demás paneles— y ahí sí
   la esquina recorta contra algo. El padding compensa.

   (En la Home funciona sin esto de casualidad: el body es
   oscuro y coincide con el panel de arriba.) */
.pagina-nosotros .foot {
  margin-top: calc(-1 * var(--radius-panel));
  padding-top: calc(var(--space-4xl) + var(--radius-panel));
}

/* ------------------------------------------------------------
   TABLET — 768
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

  /* En el frame de 768 el margen lateral es de 50px, más ancho
     que el que usa la Home. */
  .container-nos {
    padding-inline: 50px;
  }

  .conceptos {
    padding-inline: 50px;
  }

  .foot__inner {
    padding-inline: 50px;
  }

  .nos-intro__grid {
    grid-template-columns: 1fr;
  }

  .nos-intro__foto {
    aspect-ratio: 664 / 430;
    max-width: none;
  }

  .nos-intro__bulb {
    left: auto;
    right: clamp(24px, 8vw, 96px);
  }

  /* Dos por fila; los conceptos y los proyectos siguen en tres,
     proporcionales al ancho. */
  .equipo__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 17px;
  }

  .conceptos__grid {
    gap: 17px;
  }

  /* Mismo margen que el resto: con 668 de caja útil el título
     se parte en dos renglones, como en el frame. */
  .hero-nos {
    padding-inline: 50px;
  }

  .hero-nos__title {
    font-size: clamp(30px, 5.2vw, 40px);
    line-height: 1.25;
  }
}

@media (max-width: 820px) {
  .pagina-nosotros .nos-proy .grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
  }
}

/* ------------------------------------------------------------
   MÓVIL — 390
   ------------------------------------------------------------ */
/* El bloque de abajo no tiene que agarrar la tablet de 768: ahí
   los conceptos y los proyectos siguen en tres columnas. */
@media (max-width: 640px) {
  .container-nos {
    padding-inline: 20px;
  }

  .conceptos {
    padding-inline: 20px;
  }

  .foot__inner {
    padding-inline: 20px;
  }

  .hero-nos {
    min-height: clamp(340px, 92vw, 420px);
  }

  .hero-nos__title {
    font-size: clamp(24px, 6.9vw, 28px);
    max-width: 11ch;
  }

  .onda--1 {
    width: 46vw;
    height: 46vw;
  }

  .onda--2 {
    width: 70vw;
    height: 70vw;
  }

  .onda--3 {
    width: 94vw;
    height: 94vw;
  }

  .onda--4 {
    width: 118vw;
    height: 118vw;
  }

  .sat {
    width: 11px;
    height: 11px;
  }

  .nos-intro__text {
    font-size: 20px;
    line-height: 1.32;
  }

  .nos-intro__lead {
    font-size: 14px;
    line-height: 1.5;
  }

  .nos-intro__foto {
    aspect-ratio: 350 / 400;
  }

  .equipo__grid {
    gap: 24px 16px;
  }

  .persona__nombre {
    font-size: 16px;
  }

  .persona__rol {
    font-size: 12px;
  }

  .persona__foto {
    margin-bottom: 16px;
  }

  .conceptos__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* En el frame móvil la ilustración no acompaña el ancho de la
     tarjeta: se queda chica arriba a la izquierda. */
  .concepto__arte {
    width: 110px;
  }

  .concepto {
    text-align: left;
  }

  .conceptos__title {
    font-size: 26px;
  }

  .conceptos__bajada {
    font-size: 16px;
    font-style: italic;
  }

  .nos-proy__grid {
    grid-template-columns: 1fr;
  }

  .pagina-nosotros .nos-proy .grid3 {
    grid-template-columns: 1fr;
  }
}