/* ==========================================================================
   Secciones — ritmo vertical calcado del artboard de 1920 x 11677,44
   Cada bloque indica el rango de y del diseño original.
   ========================================================================== */

/* ============================================================ HERO 0–1876 */

.hero {
  position: relative;
  padding: calc(270.5 * var(--u)) 0 calc(97.9 * var(--u));
  background: var(--white);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: calc(1008.4 * var(--u)) 1fr;
  max-width: calc(1920 * var(--u));
  margin-inline: auto;
  padding-inline: calc(96.2 * var(--u));
}

.hero__title {
  font-size: calc(75 * var(--u));
  font-weight: 700;
  line-height: var(--lh);
  color: var(--slate);
}

.hero__aside { margin-top: calc(17.1 * var(--u)); }

.hero__lead {
  font-size: calc(23 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--ink-soft);
}

.hero__lead + .hero__lead { margin-top: calc(27.6 * var(--u)); }

.hero__actions {
  display: flex;
  gap: calc(12.7 * var(--u));
  margin-top: calc(34.7 * var(--u));
}

/* --- Tarjetas apiladas (y 672,4 – 1778,1) -------------------------------- */

.hero-stack {
  position: relative;
  height: calc(1105.7 * var(--u));
  width: calc(1920 * var(--u));
  max-width: 100%;
  margin: calc(41.9 * var(--u)) auto 0;
}

.hero-stack__layer {
  position: absolute;
  will-change: transform;
}

.hero-stack__layer--back {
  left: calc(164.2 * var(--u));
  top: calc(64.2 * var(--u));
  width: calc(1578 * var(--u));
  height: calc(892 * var(--u));
  background: var(--brown);
  border-radius: var(--r-hero-back);
}

.hero-stack__layer--mid {
  left: calc(165.95 * var(--u));
  top: calc(85.45 * var(--u));
  width: calc(1577.9 * var(--u));
  height: calc(891.7 * var(--u));
  background: var(--slate-soft);
  border-radius: var(--r-hero-back);
  transform: rotate(var(--hero-rot-mid));
}

/* Fondo crema del "salto" (y 560–1876 del diseño, todo el ancho de pantalla).
   Empieza invisible; hero.js lo enciende en un fotograma a scroll ≈ 428. */
.hero-stack__bleed {
  position: absolute;
  left: 50%;
  top: calc(-112.4 * var(--u));
  width: 100vw;
  height: calc(1316 * var(--u));
  transform: translateX(-50%);
  background: var(--cream);
  opacity: 0;
  pointer-events: none;
}

.hero-stack__layer--front {
  left: calc(182.5 * var(--u));
  top: calc(108.5 * var(--u));
  width: calc(1590 * var(--u));
  height: calc(889 * var(--u));
  background: var(--cream);
  border-radius: var(--r-hero-front);
  transform: rotate(var(--hero-rot-front));
}

/* Ilustración: imagen fija en su inclinación de reposo (ya recortada al
   contorno de la tarjeta). Se centra sobre el centro de la tarjeta; su caja
   es el bbox de la tarjeta girada (1693,85 × 1105,7). hero.js la desplaza,
   la amplía y la recorta con la forma de la tarjeta antes del salto. */
.hero-stack__art {
  position: absolute;
  /* 130,5 del bbox del .ai + 17 px: en el video la ilustración está ese
     poco más a la derecha (medido por correlación de la estrella) */
  left: calc(147.5 * var(--u));
  top: 50%;
  width: calc(1693.85 * var(--u));
  transform: translateY(-50%);
  will-change: transform, clip-path;
}

.hero-stack__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====================================================== SOBRE MÍ 1876–2956 */

.about {
  background: var(--gray-100);
  padding: calc(83.7 * var(--u)) 0 0;
}

.about__grid {
  display: grid;
  grid-template-columns: calc(870.7 * var(--u)) calc(846.7 * var(--u));
  align-items: start;
  max-width: calc(1920 * var(--u));
  margin-inline: auto;
  padding: 0 calc(106.4 * var(--u)) 0 calc(96.2 * var(--u));
}

.about__copy { padding-top: calc(38.4 * var(--u)); }

.about__headline {
  margin-top: calc(41.3 * var(--u));
  font-size: calc(50 * var(--u));
  font-weight: 500;
  line-height: var(--lh);
  color: var(--ink);
}

.about__text {
  margin-top: calc(57.9 * var(--u));
  font-size: calc(35 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--ink-soft);
  /* Ancho de la caja de texto del diseño: fija los mismos cortes de línea */
  max-width: calc(734 * var(--u));
  /* 144,7 px por debajo del último párrafo hasta el fin de la sección */
  padding-bottom: calc(144.7 * var(--u));
}

.about__text p + p { margin-top: calc(42 * var(--u)); }

.about__figure { width: calc(846.7 * var(--u)); }

/* ===================================================== SERVICIOS 2956–4028 */

.services {
  padding: calc(103.3 * var(--u)) 0 calc(139.1 * var(--u));
  background: var(--slate);
}

.services__head { text-align: center; }

.services .section-title,
.services .section-sub { color: var(--cream); }

.services .section-sub { margin-top: calc(32.4 * var(--u)); }

.services__grid {
  display: flex;
  justify-content: center;
  gap: calc(28.4 * var(--u));
  margin-top: calc(75.1 * var(--u));
}

/* ================================================ ¿CON QUIENES...? 4028–5108 */

.clients-fit {
  position: relative;
  padding: calc(119.4 * var(--u)) 0 calc(114.6 * var(--u));
  background: var(--white);
  overflow: hidden;
}

.clients-fit__deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(1920 * var(--u));
  max-width: 100%;
  transform: translateX(-50%);
  /* Va por encima de la tarjeta: en el diseño un arco cruza su esquina
     superior derecha. La capa es transparente salvo los trazos. */
  z-index: 2;
  background: url("../assets/img/deco-clients.webp") no-repeat center top / 100% 100%;
  pointer-events: none;
}

.clients-fit__card {
  position: relative;
  display: grid;
  z-index: 1;
  grid-template-columns: calc(844.2 * var(--u)) 1fr;
  width: calc(1712.6 * var(--u));
  margin-inline: auto;
  padding: calc(117.6 * var(--u)) calc(69 * var(--u)) calc(123.2 * var(--u));
  background: var(--cream);
  border-radius: var(--r-cream);
}

.clients-fit__text {
  margin-top: calc(37.5 * var(--u));
  max-width: calc(700 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--ink);
}

.clients-fit__lead {
  margin-top: calc(43.9 * var(--u));
  font-size: calc(50 * var(--u));
  font-weight: 500;
  line-height: var(--lh);
  color: var(--ink);
}

.clients-fit__lead-indent { padding-left: calc(9 * var(--u)); }

.clients-fit .chips { margin-top: calc(24 * var(--u)); }

/* ================================================== PARTNERSHIPS 5108–6724 */

.partners {
  padding: calc(89.8 * var(--u)) 0 calc(113.7 * var(--u));
  background: var(--gray-200);
}

.partners__head {
  text-align: center;
  /* El .ai centra este bloque en x=950, no en 960 */
  transform: translateX(calc(-10 * var(--u)));
}

.partners .section-sub { margin-top: calc(35.6 * var(--u)); }

.partners .partner-card { margin-top: calc(71.8 * var(--u)); }

.partners .partner-card--short { margin-top: calc(56.9 * var(--u)); }

/* El .ai fija 31 px para el cuerpo de Shopify y 30,54 para el de Kommo, pero
   ambos comparten el mismo interlineado de 37,2 px. */
.partner-card--short .partner-card__body {
  font-size: calc(31 * var(--u));
  line-height: 1.2;
}

/* =================================================== METODOLOGÍA 6724–8308 */

.method {
  padding: calc(119.2 * var(--u)) 0 calc(143.3 * var(--u));
  background: var(--cream);
}

.method__head { text-align: center; }

.method .section-sub { margin-top: calc(32.4 * var(--u)); }

.method__list { margin-top: calc(77.1 * var(--u)); }

.method-row {
  display: grid;
  grid-template-columns: calc(406.6 * var(--u)) calc(459.8 * var(--u)) 1fr;
  align-items: start;
  width: calc(1606.7 * var(--u));
  min-height: calc(202 * var(--u));
  margin-inline: auto;
  padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)) 0;
  background: var(--slate);
  border-radius: var(--r-method);
  transition: transform var(--dur) var(--ease);
}

.method-row + .method-row { margin-top: calc(13 * var(--u)); }

.method-row:hover { transform: translateX(calc(10 * var(--u))); }

.method-row__num {
  justify-self: center;
  margin-top: calc(16.5 * var(--u));
  /* En el original los numerales están recortados por abajo: se ve algo
     menos de la mitad de su altura (98,1 px de 143,3). Se replica con una
     caja de 0,504 em y overflow oculto, así escala en cualquier tamaño. */
  height: 0.504em;
  overflow: hidden;
  font-size: calc(200 * var(--u));
  font-weight: 700;
  /* Interlineado ceñido: la caja mide lo que el dígito (143,3 px), no 200 */
  line-height: 0.72;
  letter-spacing: -0.03em;
  /* Números contorneados, tal como en el diseño */
  color: transparent;
  -webkit-text-stroke: calc(2 * var(--u)) var(--cream);
}

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

.method-row__title {
  margin-top: calc(36.9 * var(--u));
  padding-left: calc(22.7 * var(--u));
  font-size: calc(50 * var(--u));
  font-weight: 500;
  line-height: var(--lh);
  color: var(--cream);
}

.method-row__desc {
  margin-top: calc(34.7 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--cream);
}

/* ===================================================== PROYECTOS 8308–9884 */

.projects {
  padding: calc(107 * var(--u)) 0 calc(129.7 * var(--u));
  background: var(--white);
}

.projects__head { text-align: center; }

.projects .section-sub { margin-top: calc(30.9 * var(--u)); }

.projects .carousel { margin-top: calc(75.9 * var(--u)); }

.carousel__bar { padding-right: calc(33.3 * var(--u)); }

/* ===================================================== CLIENTES 9884–10460 */

.brands {
  padding: calc(72.5 * var(--u)) 0 calc(144.7 * var(--u));
  background: var(--slate);
}

.brands .section-title { color: var(--cream); }

.brands__row { margin-top: calc(113.3 * var(--u)); }

/* ==================================================== CONTACTO 10460–11677 */

.contact {
  padding: calc(142.4 * var(--u)) 0 calc(160.1 * var(--u));
  background: var(--gray-200);
}

.contact__panel {
  display: grid;
  grid-template-columns: calc(798.9 * var(--u)) calc(807.8 * var(--u));
  width: calc(1606.7 * var(--u));
  min-height: calc(914.5 * var(--u));
  margin-inline: auto;
  background: var(--slate);
  border-radius: var(--r-panel);
}

.contact__form-side {
  padding: calc(91.9 * var(--u)) calc(60 * var(--u)) calc(75 * var(--u)) calc(101.4 * var(--u));
  background: var(--cream);
  border-radius: var(--r-panel);
}

.contact__claim {
  margin-top: calc(27.9 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: var(--lh);
  color: var(--slate);
}

.contact__text {
  margin-top: calc(35.6 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 400;
  line-height: var(--lh);
  color: var(--slate);
}

.contact__photo-side {
  display: grid;
  place-items: center;
  padding-bottom: calc(44 * var(--u));
  border-radius: var(--r-panel);
}

.contact__photo-label {
  font-size: calc(75 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}