/* =====================================================================
   RISE · Desarrolladores (mesa de trabajo 6). Sin menú de navegación.
   ===================================================================== */

/* ---------------------------------------------------------------- hero */
.dev-hero { position: relative; height: calc(1072.1 * var(--u)); overflow: hidden; background: var(--c-ink); color: var(--c-paper); }
.dev-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.dev-hero__back {
  position: absolute; left: calc(51.1 * var(--u)); top: calc(49.6 * var(--u));
  width: calc(54.4 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(7.5 * var(--u));
  background: var(--c-paper); color: var(--c-ink); transition: background-color .25s var(--ease);
}
.dev-hero__back:hover { background: var(--c-yellow); }
.dev-hero__back svg { position: absolute; left: calc(14.9 * var(--u)); top: calc(8.4 * var(--u)); width: calc(25 * var(--u)); height: auto; }
.dev-hero__logo { position: absolute; left: calc(860 * var(--u)); top: calc(90 * var(--u)); width: calc(200 * var(--u)); }
.dev-hero__logo svg { width: 100%; height: auto; }
.dev-hero__by {
  position: absolute; left: calc(838.1 * var(--u)); top: calc(429.39 * var(--u));
  font-size: var(--fs-lg); line-height: var(--fs-lg); letter-spacing: var(--track-sm); white-space: nowrap;
}
/* nest, ANCORE y Alora en un renglón centrado. */
.dev-hero__socios {
  position: absolute; left: 50%; top: calc(478 * var(--u)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(48 * var(--u)); color: var(--c-paper);
}
.dev-hero__socios svg { width: calc(562 * var(--u)); height: auto; }
.dev-hero__alora { width: auto; height: calc(76 * var(--u)); }

/* ---------------------------------------------------------------- socios: nest, ANCORE y Alora */
/* Texto de 606 de ancho y foto de 956 con 160 de separación, desde x = 104, como en el diseño. La foto mide lo mismo
   que el bloque de texto (alto 0 para no agrandar la fila y min-height 100 % para llenarla). */
.dev-socio { padding: calc(87 * var(--u)) 0; background: var(--c-paper); color: var(--c-ink); }
.dev-socio--oscuro { background: var(--c-ink); color: var(--c-paper); }
.dev-socio .frame {
  display: grid; grid-template-columns: calc(606.4 * var(--u)) calc(956.5 * var(--u)); column-gap: calc(160 * var(--u));
  height: auto; padding-left: calc(103.6 * var(--u));
}
.dev-socio--foto-izq .frame { grid-template-columns: calc(956.5 * var(--u)) calc(606.4 * var(--u)); }
.dev-socio__img { width: 100%; height: 0; min-height: 100%; object-fit: cover; }
/* Foto con aviso: el contenedor ocupa el lugar de la foto y la imagen lo llena. */
.dev-socio__img--nota { position: relative; overflow: hidden; }
.dev-socio__img--nota img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dev-socio__texto { display: flex; flex-direction: column; }
/* Rótulo en una franja de 64 (el alto del logo de Alora): el texto empieza a 182 del borde, como en el diseño. */
.dev-socio__head { min-height: calc(64 * var(--u)); }
.dev-socio__head svg { width: 100%; height: auto; }
.dev-socio__head--nest { width: calc(313 * var(--u)); }
.dev-socio__head--ancore { width: calc(360 * var(--u)); }
.dev-socio__head--alora {
  display: flex; align-items: center; gap: calc(24 * var(--u));
  font-size: var(--fs-sm); line-height: 1.25; font-weight: 400; letter-spacing: .02em; white-space: nowrap;
}
/* Rótulo en dos renglones y logo 1.2 veces su alto, como en la tarjeta de Inicio; centrado con él (flex). */
.dev-socio__head--alora img { width: auto; height: calc(22 * 1.94 * 1.2 * var(--u)); transform: translateY(calc(-1.2 * var(--u))); }
.dev-text {
  margin-top: calc(31 * var(--u));
  font-size: var(--fs-sm); line-height: calc(29.33 * var(--u)); letter-spacing: var(--track);
}
.dev-text p + p { margin-top: calc(29.33 * var(--u)); }
/* "Más información": botón amarillo como "Conoce a los desarrolladores", centrado respecto al texto. */
.dev-socio__mas { align-self: center; margin-top: calc(48 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgb(0 0 0 / .3); }
.dev-socio__mas:hover { background: var(--c-yellow-hover); }

/* ---------------------------------------------------------------- créditos */
/* Dos tarjetas centradas; abajo queda el mismo aire que hay arriba entre el inicio de la sección y la pestaña de
   las tarjetas (102). */
.dev-creditos { position: relative; background: var(--c-paper); padding: calc(159 * var(--u)) 0 calc(102 * var(--u)); }
.dev-creditos .frame { display: flex; justify-content: center; gap: calc(72 * var(--u)); height: auto; }
.credito {
  position: relative; flex: none; width: calc(499.2 * var(--u)); height: calc(301.6 * var(--u)); color: var(--c-ink);
  border-radius: calc(23 * var(--u)); background: var(--c-paper); text-align: center;
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgb(35 30 31 / .1);
}
.credito__tab {
  position: absolute; left: calc(180.1 * var(--u)); top: calc(-57.2 * var(--u));
  width: calc(138.9 * var(--u)); height: calc(114.5 * var(--u)); border-radius: calc(19 * var(--u));
  background: var(--c-paper); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgb(35 30 31 / .12);
}
.credito__icon { position: absolute; height: auto; color: var(--c-yellow); }
.credito--2 .credito__icon { left: calc(33.4 * var(--u)); top: calc(20.2 * var(--u)); width: calc(74 * var(--u)); }
.credito--3 .credito__icon { left: calc(23.9 * var(--u)); top: calc(21.2 * var(--u)); width: calc(92 * var(--u)); }
.credito h3 {
  margin-top: calc(89.95 * var(--u)); padding-left: var(--track);
  font-size: var(--fs-lg); line-height: var(--fs-lg); font-weight: 700; letter-spacing: var(--track);
}
.credito p { /* centrado: mismo margen a los lados más el espaciado que queda tras la última letra de cada renglón */
  padding: 0 calc(30 * var(--u)) 0 calc(30 * var(--u) + var(--track));
  margin-top: calc(31.83 * var(--u));
  font-size: var(--fs-sm); line-height: calc(27.5 * var(--u)); letter-spacing: var(--track);
}

/* ---------------------------------------------------------------- fachada */
.dev-fachada { position: relative; height: calc(1279.9 * var(--u)); overflow: hidden; background: var(--c-ink); }
.dev-fachada__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }