/* ==========================================================================
   Componentes reutilizables
   Todas las medidas provienen del artboard de 1920 px (1 unidad = 1 var(--u))
   ========================================================================== */

/* --------------------------------------------------------------- header --- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
}

/* Variante híbrida: sin fondo sobre el hero, blanco al empezar a scrollear */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.site-header.is-scrolled::before { opacity: 1; }

.site-header__inner {
  position: relative;
  height: 100%;
  max-width: calc(1920 * var(--u));
  margin-inline: auto;
}

.logo {
  position: absolute;
  left: calc(90 * var(--u));
  top: calc(78 * var(--u));
  width: calc(162 * var(--u));
}

.logo img { width: 100%; height: auto; }

/* --------------------------------------------------------- navegación --- */

.nav {
  position: absolute;
  left: calc(600.7 * var(--u));
  top: calc(83.5 * var(--u));
  height: calc(61.2 * var(--u));
  padding-inline: calc(37.4 * var(--u));
  background: var(--gray-100);
  /* El diseño usa un radio corto aquí, no una píldora */
  border-radius: calc(8.5 * var(--u));
}

.nav__list {
  display: flex;
  align-items: center;
  gap: calc(61.3 * var(--u));
  height: 100%;
}

.nav__link {
  display: block;
  /* Piso de legibilidad: por debajo de 1387 px el valor proporcional
     bajaría de 13 px. A partir de ahí coincide con el diseño. */
  font-size: max(13px, calc(18.24 * var(--u)));
  font-weight: 400;
  color: var(--slate);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--ink); }

/* Botón hamburguesa: sólo visible en tablet/mobile */
.nav-toggle {
  position: absolute;
  right: calc(90 * var(--u));
  top: calc(83.5 * var(--u));
  display: none;
  width: calc(61.2 * var(--u));
  height: calc(61.2 * var(--u));
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(7 * var(--u));
  background: var(--gray-100);
  border-radius: var(--r-pill);
}

.nav-toggle__bar {
  width: calc(26 * var(--u));
  height: calc(2.5 * var(--u));
  background: var(--slate);
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(calc(9.5 * var(--u))) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(calc(-9.5 * var(--u))) rotate(-45deg);
}

.nav-mobile {
  position: absolute;
  inset: var(--header-h) 0 auto 0;
  background: var(--white);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(55 55 55 / 0.12);
}

.nav-mobile ul { padding: calc(12 * var(--u)) 0 calc(28 * var(--u)); }

.nav-mobile a {
  display: block;
  padding: calc(16 * var(--u)) calc(48 * var(--u));
  font-size: calc(34 * var(--u));
  color: var(--slate);
}

.nav-mobile a:hover { color: var(--ink); }

/* -------------------------------------------------------------- botones --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(233.9 * var(--u));
  height: calc(67.1 * var(--u));
  padding-inline: calc(28 * var(--u));
  font-size: max(13px, calc(18 * var(--u)));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn--solid {
  background: var(--slate);
  color: var(--cream);
}

.btn--solid:hover {
  background: var(--slate-dark);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(99 111 131 / 0.28);
}

.btn--ghost {
  color: var(--slate);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--slate);
}

.btn--ghost:hover {
  background: var(--slate);
  color: var(--cream);
  transform: translateY(calc(-2 * var(--u)));
}

.btn:active { transform: translateY(0); }

/* ---------------------------------------------------- tarjeta servicio --- */

.service-card {
  width: calc(369.7 * var(--u));
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.service-card:hover {
  transform: translateY(calc(-10 * var(--u)));
  box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) rgb(43 43 43 / 0.22);
}

.service-card__art {
  width: 100%;
  height: auto;
  background: var(--cream);
  border-radius: var(--r-card);
}

.service-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(146.5 * var(--u));
  padding-inline: calc(12 * var(--u));
  /* El diseño usa un interlineado muy ceñido en estas etiquetas (28/32) */
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 0.875;
  color: var(--slate);
  text-align: center;
}

/* ---------------------------------------------------------------- chips --- */

.chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(25.1 * var(--u));
}

.chip {
  display: flex;
  align-items: center;
  min-height: calc(59.4 * var(--u));
  padding: calc(10 * var(--u)) calc(23.6 * var(--u));
  font-size: calc(31.13 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--ink);
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: calc(29.7 * var(--u));
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip:hover {
  background: var(--slate);
  color: var(--cream);
  border-color: var(--slate);
}

.chip--last { margin-top: calc(18.5 * var(--u)); }

/* --------------------------------------------------- tarjeta partnership --- */

.partner-card {
  width: calc(1712.6 * var(--u));
  margin-inline: auto;
  padding: calc(52.7 * var(--u)) calc(82.8 * var(--u)) calc(82 * var(--u));
  border: calc(2 * var(--u)) solid var(--slate);
  border-radius: var(--r-partner);
}

.partner-card__top {
  display: grid;
  /* Anchos reales de los tres marcos de texto del .ai. El tercero es más
     ancho que el área de relleno de la tarjeta, tal como en el original. */
  grid-template-columns:
    calc(310.6 * var(--u))
    calc(593.2 * var(--u))
    calc(662 * var(--u));
  align-items: start;
}

.partner-card__brand {
  font-size: calc(58.43 * var(--u));
  font-weight: 500;
  line-height: var(--lh);
  color: var(--ink);
}

.partner-card__claim {
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: var(--lh);
  color: var(--ink);
}

.partner-card__body {
  font-size: calc(30.54 * var(--u));
  font-weight: 400;
  line-height: 1.218;
  color: var(--ink);
}

.partner-card__body p + p { margin-top: calc(37.2 * var(--u)); }

/* ----------------------------------------------------- pasos numerados --- */

.steps {
  display: flex;
  gap: calc(17.9 * var(--u));
  margin-top: calc(82.1 * var(--u));
}

.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(296.9 * var(--u));
  padding: calc(67 * var(--u)) calc(14 * var(--u)) calc(48 * var(--u));
  background: var(--slate);
  border-radius: var(--r-step);
  transition: transform var(--dur) var(--ease);
}

.step:hover { transform: translateY(calc(-8 * var(--u))); }

.step__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  /* 66,5 es el trazado del .ai; con el trazo de 3 px centrado el diámetro
     visible es 69,5, que es lo que mide la caja en CSS. */
  width: calc(69.5 * var(--u));
  height: calc(69.5 * var(--u));
  background: var(--cream);
  border: calc(3 * var(--u)) solid var(--slate);
  border-radius: 50%;
  font-size: calc(58.43 * var(--u));
  font-weight: 500;
  line-height: 1;
  /* Los números son contorneados en el diseño original */
  color: transparent;
  -webkit-text-stroke: calc(3 * var(--u)) var(--slate);
  padding-bottom: calc(4 * var(--u));
}

/* Sin soporte de text-stroke el número quedaría invisible: se pinta relleno */
@supports not (-webkit-text-stroke: 1px currentColor) {
  .step__badge { color: var(--slate); }
}

.step__text {
  font-size: calc(30 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--white);
  text-align: center;
}

/* ------------------------------------------------------------- carrusel --- */

.carousel { width: calc(1709.8 * var(--u)); margin-inline: auto; }

.carousel__bar {
  display: flex;
  align-items: center;
  gap: calc(55.2 * var(--u));
}

.carousel__name {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: calc(114.8 * var(--u));
  padding-inline: calc(74.7 * var(--u));
  background: var(--slate);
  border-radius: var(--r-bar);
  font-size: calc(59.85 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
}

.carousel__nav {
  display: flex;
  gap: calc(16.6 * var(--u));
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: calc(66.8 * var(--u));
  height: calc(66.8 * var(--u));
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.carousel__btn svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.carousel__btn--prev {
  color: var(--ink);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--ink);
}

.carousel__btn--prev:hover {
  background: var(--ink);
  color: var(--white);
}

.carousel__btn--next {
  background: var(--slate);
  color: var(--white);
}

.carousel__btn--next:hover { background: var(--ink); }

.carousel__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.carousel__btn[disabled]:hover {
  background: none;
  color: var(--ink);
}

.carousel__btn--next[disabled]:hover { background: var(--slate); color: var(--white); }

.carousel__viewport {
  overflow: hidden;
  margin-top: calc(33.8 * var(--u));
}

.carousel__track {
  display: flex;
  transition: transform 0.6s var(--ease);
}

.project {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: calc(588.6 * var(--u)) calc(1092.1 * var(--u));
  gap: calc(29.1 * var(--u));
}

.project__col {
  padding: calc(60.3 * var(--u)) calc(74.7 * var(--u)) calc(66.1 * var(--u));
  background: var(--gray-200);
  border-radius: var(--r-project);
}

.project__col--wide {
  padding-inline: calc(83.9 * var(--u));
  padding-bottom: calc(75.6 * var(--u));
}

/* ------------------------------------------------------------- etiquetas --- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(17.1 * var(--u));
}

.tag {
  display: inline-flex;
  align-items: center;
  height: calc(56.2 * var(--u));
  padding-inline: calc(24 * var(--u));
  font-size: calc(36.13 * var(--u));
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-pill);
}

.tag--solid {
  background: var(--slate);
  color: var(--white);
}

.tag--ghost {
  color: var(--slate);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--slate);
}

/* ------------------------------------------------------- texto proyecto --- */

.project__col--wide .project__text { max-width: calc(680 * var(--u)); }

.project__text {
  margin-top: calc(31.9 * var(--u));
  font-size: calc(36.13 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  color: var(--slate);
}

.stats { margin-top: calc(38 * var(--u)); }

.stat {
  display: flex;
  /* El <dt> (la etiqueta) va primero en el marcado por semántica; la cifra
     se muestra arriba invirtiendo el eje. */
  flex-direction: column-reverse;
  align-items: flex-start;
}

.stat + .stat { margin-top: calc(33 * var(--u)); }

.stat__value {
  font-size: calc(73.91 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.stat__label {
  margin: calc(21.5 * var(--u)) 0 0;
  /* column-reverse invierte también el sentido de los márgenes visuales */
  font-size: calc(30.11 * var(--u));
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.bullets { margin-top: calc(39.7 * var(--u)); }

.bullets li {
  position: relative;
  padding-left: calc(44.2 * var(--u));
  font-size: calc(28.1 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--slate);
}

.bullets li + li { margin-top: calc(26.4 * var(--u)); }

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(11 * var(--u));
  width: calc(29.3 * var(--u));
  height: calc(28.1 * var(--u));
  background: url("../assets/img/star.webp") no-repeat center / contain;
}

/* --------------------------------------------------------------- marcas --- */

.brands__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(1710.8 * var(--u));
  margin: calc(80.3 * var(--u)) auto 0;
}

.brands__item {
  width: calc(155.5 * var(--u));
  height: calc(155.5 * var(--u));
  background: var(--ink);
}

.brands__item--circle { border-radius: 50%; }

/* ------------------------------------------------------------- formulario --- */

.form { margin-top: calc(46.7 * var(--u)); }

.form__field { position: relative; }

.form__row {
  display: grid;
  grid-template-columns: calc(294.4 * var(--u)) calc(294.5 * var(--u));
  gap: calc(15.1 * var(--u));
  margin-top: calc(27 * var(--u));
}

.form__label {
  display: block;
  margin-bottom: calc(17.5 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--slate);
}

.form__input {
  display: block;
  width: 100%;
  max-width: calc(604.1 * var(--u));
  height: calc(65.3 * var(--u));
  padding-inline: calc(24 * var(--u));
  background: var(--white);
  border: calc(2 * var(--u)) solid transparent;
  border-radius: var(--r-input);
  font-family: var(--font);
  font-size: calc(26 * var(--u));
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form__input:hover { box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgb(55 55 55 / 0.08); }

.form__input:focus {
  outline: none;
  border-color: var(--slate);
}

.form__input.is-invalid { border-color: #b4443a; }

/* El foco tiene que verse también sobre un campo inválido */
.form__input:focus-visible {
  outline: calc(3 * var(--u)) solid var(--slate);
  outline-offset: calc(2 * var(--u));
}

.form__error {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  max-width: 62%;
  font-size: calc(22 * var(--u));
  line-height: 1;
  color: #8f2f27;
  text-align: right;
}

.form .btn { margin-top: calc(33.5 * var(--u)); }

.form__status:empty { margin-top: 0; }

.form__status {
  margin-top: calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: var(--slate);
}

.form__status.is-error { color: #8f2f27; }