/* ============================================================
   NUESTRA HISTORIA — página "sobre nosotros"
   Layout y ritmo adaptados de phenomenonstudio.com (bloques oscuros y claros
   alternados con esquinas redondeadas, rejillas de hairlines, índice sticky,
   celdas numeradas, micro-etiquetas técnicas) con la identidad PowerMe.
   Depende de styles.css (tokens, nav, botones, footer, .glyph).
   ============================================================ */

.page-historia {
  background: var(--sheet);
  --slab: clamp(22px, 2.6vw, 44px); /* redondeo de los bloques oscuros */
  --hline-d: rgba(241, 241, 241, 0.14);
  --hline-l: rgba(12, 12, 12, 0.13);
  /* cian legible sobre blanco/hueso: el --cyan-text de la portada se queda en
     3.85:1 y estas micro-etiquetas son de 11px. #06808f daba 4.28 sobre
     --sheet (F5F5F1): un paso más oscuro deja 5.0+ en los dos fondos claros */
  --cyan-ink: #067481;
  --ease-h: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Micro-etiquetas técnicas: monoespaciada del sistema. Además de ser el tono
   correcto para coordenadas y códigos, esquiva los glifos roto de la Commuters
   DEMO (4, +, %, /), que en esta página aparecen por todas partes. */
.mono {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-feature-settings: 'tnum' 1;
}

.hist { padding-top: 0; }

/* ---------- bloques: oscuro sobre página clara ---------- */
.sec--dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.sec--light {
  background: var(--sheet);
  color: var(--ink);
}
/* primer oscuro tras un claro → esquinas de arriba; último antes de un claro →
   esquinas de abajo (longhands para que un bloque aislado reciba las cuatro) */
.sec--light + .sec--dark {
  border-top-left-radius: var(--slab);
  border-top-right-radius: var(--slab);
}
.sec--dark:has(+ .sec--light) {
  border-bottom-left-radius: var(--slab);
  border-bottom-right-radius: var(--slab);
}

.sec--dark,
.sec--light { padding-block: clamp(72px, 9vw, 132px); }

/* ---------- tipografía de la página ---------- */
.hlabel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-d);
}
.hlabel::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--cyan);
  flex: none;
}
.sec--light .hlabel { color: var(--muted-l); }

.hh2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(27px, 4.2vw, 58px);
  line-height: 1.03;
  letter-spacing: 0.005em;
  margin-top: clamp(14px, 1.6vw, 22px);
}
.hlead {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
}

/* ============================================================
   HERO
   ============================================================ */
.hhero {
  /* El texto alinea con el resto de la página; la foto sale por la derecha.
     Se usa en .hhero__grid y en .hhero__facts para que las dos capas compartan
     el mismo borde izquierdo. */
  --hpad: max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
  position: relative;
  min-height: 84svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(96px, 12.5vh, 168px) clamp(24px, 3vh, 40px);
  overflow: clip;
}
/* Logotipo en wireframe a escala arquitectónica: la textura del hero. Va
   centrado y recortado por los dos lados (left/width en vez de translateX
   porque GSAP le anima el transform con parallax). */
.hhero__mark {
  position: absolute;
  left: -16%;
  top: 44%;
  width: 132%;
  max-width: none;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.hhero__grid { position: relative; padding-inline: var(--hpad); }

.hhero__title {
  font-family: var(--font-display);
  font-weight: 300;
  /* el componente vh es lo que hace que el hero quepa en una pantalla: en
     monitores bajos el titular cede antes de empujar los datos fuera de vista */
  font-size: clamp(36px, min(6vw, 14vh), 92px);
  line-height: 0.99;
  letter-spacing: 0.004em;
  margin-top: clamp(14px, 2.6vh, 26px);
  /* sin max-width: la columna del grid ya lo limita y así cada .hline sigue
     siendo UNA línea visual, que es lo que la máscara de entrada asume */
}
.hline {
  display: block;
  overflow: clip;
  padding-bottom: 0.06em;
}
.hline > span { display: block; }
.hhero__lead {
  margin-top: clamp(18px, 3vh, 28px);
  max-width: 52ch;
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  color: var(--muted-d);
}

/* ---------- foto que sangra por la derecha ---------- */
.hhero__media {
  position: relative;
  margin: clamp(26px, 4vw, 40px) 0 0;
}
.hhero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 34%;
  border-radius: clamp(14px, 3vw, 20px);
  background: rgba(241, 241, 241, 0.05);
}
/* el pie va sobre la foto, con su propio velo: dice qué estás viendo sin
   robarle alto al hero */
.hhero__media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(26px, 4vw, 44px) clamp(14px, 1.6vw, 22px) clamp(11px, 1.4vw, 15px);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 241, 241, 0.88);
  background: linear-gradient(to top, rgba(6, 6, 6, 0.82), rgba(6, 6, 6, 0));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ---------- tira de 3 datos que cierra el hero ----------
   El hairline superior va a todo el ancho de página (la tira es hija directa
   del hero) pero el contenido respeta --hpad, así que alinea con el titular. */
.hhero__facts {
  position: relative;
  margin-top: clamp(20px, 3.4vh, 34px);
  padding: clamp(13px, 2vh, 19px) var(--hpad) 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3.4vw, 56px);
}
/* regla superior como pseudo-elemento: entra dibujándose de izquierda a derecha */
.hhero__facts::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--hline-d);
  transform: scaleX(var(--rule, 1));
  transform-origin: left center;
}
.hhero__facts dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(241, 241, 241, 0.52);
}
.hhero__facts dd {
  margin-top: 6px;
  font-size: clamp(13.5px, 1.1vw, 15px);
  line-height: 1.35;
  color: var(--paper);
}
/* la fecha es el dato que da nombre a la página: se lleva el acento y el
   decode. Cian sobre #0C0C0C = 10.2:1 */
.hhero__date { color: var(--cyan); }

/* El indicador de scroll es un overlay: en flujo se comía ~52px de alto y por
   eso la última fila del hero caía debajo del pliegue. Va al extremo DERECHO de
   la tira de datos: centrado se montaba encima de "MTY — MER — GDL". */
.hscroll {
  position: absolute;
  right: var(--hpad);
  bottom: clamp(24px, 3vh, 40px);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-d);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* riel con un punto que baja en bucle: la única animación perpetua de la página,
   y sirve para algo (indica hacia dónde sigue) */
.hscroll__rail {
  position: relative;
  width: 1px;
  height: 34px;
  background: var(--hline-d);
  overflow: clip;
}
.hscroll__rail b {
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: linear-gradient(var(--cyan), transparent);
  animation: hdrop 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hdrop {
  0% { transform: translateY(-12px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* ============================================================
   QUIÉNES SOMOS + MARCAS + NÚMEROS (media fija, columna que corre)
   ============================================================ */
.hintro__media {
  margin: 0;
  position: relative;
}
.hintro__media img,
.hintro__media video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: clamp(16px, 1.8vw, 26px);
  background: #141414;
}
.hintro__media figcaption {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-d);
}
.hintro__text {
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  max-width: 34ch;
}

/* ---------- fila de marcas (patrón de la fila de inversores) ---------- */
.hbrands { margin-top: clamp(38px, 5vw, 68px); }
.hbrands__row {
  margin-top: clamp(18px, 2.2vw, 28px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hline-d);
  border-bottom: 1px solid var(--hline-d);
}
.hbrands__row li {
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.6vw, 34px) clamp(8px, 1.4vw, 18px);
}
.hbrands__row li + li { border-left: 1px solid var(--hline-d); }
.hbrands__row img {
  height: clamp(17px, 1.8vw, 25px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.72;
  transition: opacity 240ms ease;
}
.hbrands__wide { height: clamp(13px, 1.35vw, 19px) !important; }
/* el logo de ATESS es oscuro con rojo: se unifica a blanco para que la fila
   sea monocroma (como la de logos de la referencia) y se lea sobre el negro */
.hbrands__mono { filter: brightness(0) invert(1); }
@media (hover: hover) and (pointer: fine) {
  .hbrands__row li:hover img { opacity: 1; }
}

/* ---------- canales de venta ----------
   Van como texto y no como logos: no tengo las marcas de Walmart, Costco,
   Sam's Club, Liverpool, Sears ni TikTok, y no se inventan logos de terceros. */
.hchans { margin-top: clamp(30px, 3.6vw, 46px); }
.hchans__list {
  margin-top: clamp(14px, 1.8vw, 20px);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}
.hchans__list li {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(241, 241, 241, 0.82);
}
.hchans__list li::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.55;
  margin-inline: 12px;
}
.hchans__list li:last-child::after { display: none; }

/* ---------- rejilla de números ---------- */
.hnums { margin-top: clamp(34px, 4.4vw, 60px); }
.hnums__grid {
  margin-top: clamp(18px, 2.2vw, 28px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hline-d);
}
.hnum {
  padding: clamp(22px, 2.8vw, 40px) clamp(14px, 1.8vw, 26px) clamp(24px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--hline-d);
}
.hnum dd {
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-feature-settings: 'tnum' 1;
}
.hnum dt {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-d);
  max-width: 26ch;
}

/* ============================================================
   01 · LÍNEA DE TIEMPO (índice sticky + pasos que corren)
   ============================================================ */
.htl__range {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.htl__index {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}
.htl__index li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(241, 241, 241, 0.52);
  transition: color 260ms ease;
}
.htl__code {
  min-width: 44px;
  color: rgba(241, 241, 241, 0.5);
  transition: color 260ms ease;
}
.htl__index li.is-active { color: var(--paper); }
.htl__index li.is-active .htl__code { color: var(--cyan); }

.htl__steps {
  list-style: none;
  margin-top: clamp(38px, 5vw, 0px);
}
.htl__step {
  border-top: 1px solid var(--hline-d);
  padding: clamp(24px, 3vw, 40px) 0 clamp(30px, 5vw, 64px);
}
.htl__date {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.htl__step h3 {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(21px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}
.htl__step > p:last-child {
  margin-top: 12px;
  max-width: 54ch;
  color: var(--muted-d);
}

/* ============================================================
   02 · PROPÓSITO (diapositivas que se apilan)
   ============================================================ */
.hpur { --hpur-top: clamp(84px, 11vh, 116px); }
.hpur__stack { margin-top: clamp(26px, 3vw, 44px); }

/* Cada tarjeta es opaca y con esquinas superiores redondeadas: al montarse sobre
   la anterior se lee como una diapositiva encima de otra, no como un salto. */
.hpur__slide {
  position: relative;
  background: #fcfcfa;
  border-top: 1px solid var(--hline-l);
  border-top-left-radius: clamp(18px, 2vw, 30px);
  border-top-right-radius: clamp(18px, 2vw, 30px);
  padding-block: clamp(30px, 4.6vh, 62px);
  box-shadow: 0 -14px 34px rgba(12, 12, 12, 0.05);
}
.hpur__grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 44px);
}
.hpur__code {
  font-size: 11px;
  letter-spacing: 0.16em;
  /* el cian de texto queda en 3.85:1 sobre la tarjeta (11px pide 4.5) */
  color: var(--cyan-ink);
}
.hpur__aside .hh2 { margin-top: 10px; }
.hpur__body p + p {
  margin-top: 16px;
  color: var(--muted-l);
  max-width: 62ch;
}
.hpur__media { margin: 0; }
.hpur__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  object-fit: cover;
  border-radius: clamp(14px, 1.4vw, 20px);
  background: rgba(12, 12, 12, 0.06);
}
.hpur__media figcaption {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-l);
}

/* ============================================================
   03 · VALORES (celdas numeradas)
   ============================================================ */
.hval__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hval__count {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted-d);
}
.hval__grid {
  margin-top: clamp(34px, 4.4vw, 60px);
  list-style: none;
  display: grid;
  border-top: 1px solid var(--hline-d);
}
/* La celda es como la de Phenomenon: en reposo solo número arriba y texto
   abajo; al hacer hover la foto llena TODO el cuadro por detrás del texto. */
.hvcard {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: clamp(28px, 4vw, 56px);
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 34px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--hline-d);
  overflow: hidden;
  min-height: clamp(280px, 70vw, 380px); /* en móvil la foto siempre está: que tenga lienzo */
  transition: background-color 300ms ease;
}
/* el índice pesa como en la referencia: es la jerarquía de la celda */
.hvcard__n {
  position: relative;
  z-index: 1;
  font-size: clamp(19px, 2vw, 27px);
  letter-spacing: 0.05em;
  line-height: 1;
  /* 0.42 daba 3.75:1 y a 900px el número mide 18px (texto normal, pide 4.5) */
  color: rgba(241, 241, 241, 0.5);
  transition: color 260ms ease;
}
/* ---------- Esquema técnico de la celda ----------
   Reemplazó a las fotos de evento (se veían genéricas y el velo no dejaba ver
   nada). Va anclado arriba a la derecha, no centrado: centrado se lee como
   "icono", anclado se lee como fragmento de plano técnico. El número vive
   arriba a la izquierda y el texto abajo, así que no se estorban. */
/* Móvil primero: la celda es baja (≈280px) y el esquema está SIEMPRE visible
   porque no hay hover, así que va chico y arrinconado. Medido: a 66% la tinta
   se montaba 32–57px encima del título. A 150px queda con 17px de holgura en
   el peor caso (celda 04). */
.hvcard__art {
  position: absolute;
  top: 0;
  right: 3%;
  width: 40%;
  max-width: 150px;
  aspect-ratio: 1;
  z-index: 0;
  color: var(--cyan);
  pointer-events: none;
}
.hvcard__art svg { width: 100%; height: 100%; overflow: visible; }
/* lavado cian que despega la celda del fondo (va en la celda, no en el svg:
   el svg está acotado arriba a la derecha y el lavado debe cubrir todo) */
.hvcard__art::before {
  content: '';
  position: absolute;
  inset: -4% -4% -1000% -1000%;
  background:
    radial-gradient(90% 70% at 74% 22%, rgba(11, 206, 225, 0.15), rgba(11, 206, 225, 0) 64%),
    linear-gradient(180deg, rgba(11, 206, 225, 0.045), rgba(11, 206, 225, 0));
}
.hvart__pulse { transform-box: fill-box; transform-origin: center; }
@keyframes hvart-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- Celda con foto real (para las de showroom que faltan) ----------
   Uso: <li class="hvcard hvcard--foto"> con el <figure class="hvcard__shot">
   en lugar del <span class="hvcard__art">. La foto debe venir ya recortada
   CUADRADA (la celda es ~1:1, no 3:2) y con el duotono cian/negro quemado en
   el archivo — así no cuesta blend-modes en runtime y el contraste es medible. */

/* la foto de fondo: cubre la celda completa, detrás del contenido */
.hvcard__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
.hvcard__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* velo sobre la foto: cargado abajo, donde vive el texto */
.hvcard__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 0.66 arriba: con 0.5 el número cian quedaba en 2.26:1 sobre las fotos
     claras (grande, pide 3:1); medido queda ≥3.4 en las cinco */
  background: linear-gradient(
    0deg,
    rgba(6, 6, 6, 0.88) 0%,
    rgba(6, 6, 6, 0.76) 42%,
    rgba(6, 6, 6, 0.66) 100%
  );
}
.hvcard__txt {
  position: relative;
  z-index: 1;
  align-self: end;
}
.hvcard h3 {
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.2;
}
/* la regla cian se dibuja al pasar el mouse: subraya el valor activo */
.hvcard h3::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-h);
}
.hvcard p {
  margin-top: 10px;
  color: var(--muted-d);
  max-width: 40ch;
}

/* En táctil no hay hover: la foto de fondo se queda puesta (con su velo el
   texto sigue leyéndose) y el subrayado dibujado */
@media (hover: none) {
  .hvcard h3::after { transform: scaleX(1); }
  .hvcard p { color: rgba(241, 241, 241, 0.78); }
}

@media (hover: hover) and (pointer: fine) {
  /* el esquema se arma en cascada: cada <g> es una capa del dibujo */
  .hvcard__art { opacity: 0; transition: opacity 300ms var(--ease-h); }
  .hvcard__art g {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 400ms var(--ease-h), transform 460ms var(--ease-h);
  }
  .hvcard:hover .hvcard__art { opacity: 1; }
  .hvcard:hover .hvcard__art g { opacity: 1; transform: none; }
  .hvcard:hover .hvcard__art g:nth-child(2) { transition-delay: 70ms; }
  .hvcard:hover .hvcard__art g:nth-child(3) { transition-delay: 140ms; }
  .hvcard:hover .hvcard__art g:nth-child(4) { transition-delay: 210ms; }
  /* el latido solo corre mientras hay hover: si no, repinta sin que se vea */
  .hvcard:hover .hvart__pulse { animation: hvart-pulse 2.6s var(--ease-h) infinite 0.5s; }

  /* la foto cubre la celda desde el principio (position absolute: al aparecer
     no empuja nada) y entra con blur para que no se sienta un corte */
  .hvcard__shot {
    opacity: 0;
    transition: opacity 320ms var(--ease-h);
  }
  .hvcard__shot img {
    transform: scale(1.06);
    filter: blur(9px);
    transition: transform 480ms var(--ease-h), filter 340ms var(--ease-h);
  }
  .hvcard:hover { background: rgba(241, 241, 241, 0.03); }
  .hvcard:hover .hvcard__n { color: var(--cyan); }
  .hvcard:hover h3::after { transform: scaleX(1); }
  .hvcard:hover .hvcard__shot { opacity: 1; }
  .hvcard:hover .hvcard__shot img {
    transform: scale(1);
    filter: blur(0px);
  }
  /* sobre la foto el gris del párrafo se pierde: sube un punto */
  .hvcard:hover p { color: rgba(241, 241, 241, 0.82); }
}

/* ============================================================
   04 · EN LA INDUSTRIA (casos estilo Phenomenon)
   ============================================================ */
/* hairline entre dos bloques claros consecutivos (este y el mapa) */
.hcase {
  border-bottom: 1px solid var(--hline-l);
  --hcase-top: clamp(64px, 9vh, 96px);
}
/* La sección no vive dentro de .container: las hojas van a ancho completo de
   página. El encabezado y las tarjetas llevan el mismo padding lateral para
   que el texto de las dos capas alinee al mismo borde. */
.hcase__head { padding-inline: var(--pad); }
/* la frase grande de intro: sans en caja baja, como la referencia (el display
   de la casa es solo mayúsculas y una frase larga en caps pesa demasiado) */
.hcase__intro {
  margin-top: clamp(18px, 2.4vw, 34px);
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 27ch;
}
.hcase__list {
  margin-top: clamp(36px, 5vw, 70px);
  list-style: none;
  display: grid;
}
.hcase__item {
  border-top: 1px solid var(--hline-l);
  /* el componente vh compacta la tarjeta en pantallas cortas: tiene que caber
     completa bajo --hcase-top para que el apilado no corte el final */
  padding-block: clamp(22px, 4.4vh, 56px);
  padding-inline: var(--pad);
  display: grid;
  gap: clamp(20px, 3vw, 48px);
}
.hcase__media { margin: 0; }
.hcase__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 48vh;
  object-fit: cover;
  border-radius: clamp(14px, 1.6vw, 24px);
  background: rgba(12, 12, 12, 0.05);
}
.hcase__tags {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-ink);
}
.hcase__title {
  margin-top: 14px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.005em;
  max-width: 24ch;
}
.hcase__chips {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hcase__chips span {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(12, 12, 12, 0.24);
  border-radius: 999px;
}
.hcase__meta {
  margin-top: clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hcase__meta > div {
  border-top: 1px solid var(--hline-l);
  padding-top: 12px;
  padding-right: 18px;
}
.hcase__meta > div + div {
  border-left: 1px solid var(--hline-l);
  padding-left: 18px;
}
.hcase__meta dt {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-l);
}
.hcase__meta dd { margin-top: 6px; font-size: 14.5px; }
.hcase__results { margin-top: clamp(20px, 2.6vw, 34px); }
.hcase__results > p {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-l);
}
.hcase__results ul { list-style: none; margin-top: 4px; }
.hcase__results li {
  padding-block: 11px;
  border-bottom: 1px solid var(--hline-l);
  font-size: 15px;
}

/* ============================================================
   05 · RED DE SHOWROOMS
   ============================================================ */
.hnet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hnet__badge {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-l);
}
/* Mapa real Leaflet, calcado del componente de ecoflow.powerme.mx/contacto:
   lienzo claro CARTO, pines cian pulsantes con etiqueta y tarjeta flotante
   "Elige tu ciudad". La tipografía mono reusa la pila de .mono. */
.hxmap {
  position: relative;
  margin-top: clamp(30px, 4vw, 52px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--hline-l);
  background: #e9e8e3;
}
.hxmap__canvas {
  height: clamp(430px, 62vh, 620px);
  z-index: 0;
}
.hxmap__card {
  position: absolute;
  z-index: 500;
  top: 18px;
  left: 18px;
  width: min(330px, 100% - 36px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hline-l);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 22px 60px rgba(10, 12, 15, 0.16);
  display: grid;
  gap: 6px;
}
.hxmap__card > .mono {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-l);
  margin: 2px 2px 6px;
}
.hxmap__city {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-h);
}
.hxmap__city:active { transform: scale(0.985); }
.hxmap__city b {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cyan-ink);
  border: 1px solid rgba(12, 12, 12, 0.24);
  border-radius: 8px;
  padding: 6px 0;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.hxmap__city span {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
}
.hxmap__city small {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--muted-l);
  margin-top: 3px;
  line-height: 1.45;
}
.hxmap__city.is-active { background: var(--sheet); border-color: var(--hline-l); }
.hxmap__city.is-active b { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .hxmap__city:hover { background: var(--sheet); }
}
.hxmap__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  width: fit-content;
  border-bottom: 1px solid rgba(12, 12, 12, 0.24);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hxmap__go:hover { color: var(--ink); border-color: var(--ink); }
}

/* pines: punto cian con borde blanco + anillo que pulsa + etiqueta arriba */
/* Showroom por abrir: pin atenuado, sin pulso, y etiqueta "Próximamente" */
.hxpin--soon { opacity: .6; }
.hxpin--soon i { animation: none !important; }
.hxmap__soon {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px 1px;
  border: 1px solid rgba(10, 147, 161, 0.55);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  vertical-align: 2px;
  white-space: nowrap;
}

.hxpin { position: relative; }
.hxpin i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(10, 12, 15, 0.35);
}
.hxpin::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  animation: hxpulse 2.4s ease-in-out infinite;
}
@keyframes hxpulse {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.hxpin b {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hline-l);
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: 0 4px 14px rgba(10, 12, 15, 0.14);
}

/* controles de Leaflet al tono de la página */
.hxmap .leaflet-container {
  font-family: var(--font-body), system-ui, sans-serif;
  background: #e9e8e3;
}
.hxmap .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 10px 30px rgba(10, 12, 15, 0.14);
  border-radius: 12px;
  overflow: hidden;
}
.hxmap .leaflet-control-zoom a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--hline-l);
}
.hxmap .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted-l);
}

/* en pantallas chicas la tarjeta baja del mapa y deja el lienzo completo */
@media (max-width: 720px) {
  .hxmap__card {
    position: static;
    width: auto;
    margin: 12px;
    box-shadow: none;
  }
  .hxmap__canvas { height: clamp(320px, 48vh, 430px); }
}

/* ============================================================
   05 · HABLEMOS
   ============================================================ */
.hcta__lead {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 46ch;
  color: var(--muted-d);
}
.hchan {
  margin-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--hline-d);
}
.hchan > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--hline-d);
}
.hchan dt {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-d);
}
.hchan dd { font-size: 14.5px; }
.hchan a {
  border-bottom: 1px solid transparent;
  transition: color 240ms ease, border-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hchan a:hover { color: var(--cyan); border-color: var(--cyan); }
}

/* ---------- tarjeta de bolsa de trabajo (toda la tarjeta es el enlace) ---------- */
.hjobs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(90px, 14vh, 170px);
  min-height: clamp(420px, 58vh, 560px);
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(241, 241, 241, 0.12);
  isolation: isolate;
  transition: border-color 300ms ease, transform 300ms var(--ease-h);
}
.hjobs__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(0.95) brightness(0.9);
  transition: transform 500ms var(--ease-h), filter 360ms ease;
}
/* velo cargado abajo, donde vive el texto */
.hjobs::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 0.66 arriba: la etiqueta "Bolsa de trabajo" vive ahí y con 0.38 se
     quedaba en 1.6:1 sobre las zonas claras de la foto */
  background: linear-gradient(
    0deg,
    rgba(6, 6, 6, 0.9) 0%,
    rgba(6, 6, 6, 0.72) 52%,
    rgba(6, 6, 6, 0.66) 100%
  );
}
.hjobs__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hjobs__top .hlabel { color: rgba(241, 241, 241, 0.88); }
.hjobs__geo {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(241, 241, 241, 0.8);
  white-space: nowrap;
}
.hjobs__body { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.hjobs__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.06;
}
.hjobs__text {
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(241, 241, 241, 0.82);
}
/* el "botón" es decorativo: el enlace es la tarjeta completa */
.hjobs__cta {
  justify-self: start;
  margin-top: 4px;
  background: var(--paper);
  color: var(--ink);
  pointer-events: none;
}
.hjobs__cta .btn__circle {
  background: var(--cyan);
  color: var(--ink);
  transition: transform 300ms var(--ease-h);
}
@media (hover: hover) and (pointer: fine) {
  .hjobs:hover { border-color: rgba(11, 206, 225, 0.4); }
  .hjobs:hover .hjobs__img {
    transform: scale(1.08);
    filter: saturate(1.05) brightness(1);
  }
  /* la flecha ya apunta ↗: al hover se mueve en su propia dirección */
  .hjobs:hover .hjobs__cta .btn__circle { transform: translate(3px, -3px); }
}
.hjobs:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ============================================================
   BANDA DISTRIBUIDORES
   ============================================================ */
.hband { padding-block: clamp(56px, 6.4vw, 96px); }
.hband__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 48px);
  flex-wrap: wrap;
}
.hband .hh2 { max-width: 20ch; }

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width: 900px) {
  /* Texto a la izquierda dentro del ancho de página; foto a la derecha SIN
     padding, así llega a la orilla de la pantalla y se recorta ahí. */
  .hhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
    column-gap: clamp(28px, 4vw, 64px);
    align-items: end;
    padding-right: 0;
  }
  /* la foto se estira al alto de la columna de texto: las dos capas cierran
     en la misma línea de base */
  .hhero__media {
    margin: 0;
    align-self: stretch;
    min-height: clamp(240px, 34vh, 420px);
  }
  .hhero__media img {
    height: 100%;
    aspect-ratio: auto;
    border-radius: clamp(16px, 2vw, 28px) 0 0 clamp(16px, 2vw, 28px);
  }
  .hhero__media figcaption {
    border-bottom-right-radius: 0;
    padding-inline: clamp(18px, 2vw, 28px);
  }

  /* media fija mientras la columna derecha corre */
  .hintro__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(40px, 6vw, 104px);
    align-items: start;
  }
  /* La foto se queda fija y CENTRADA en la pantalla mientras la columna de la
     derecha corre: el bloque sticky mide casi el alto del viewport y la imagen
     se centra dentro, en vez de quedar colgada del borde de arriba. */
  .hintro__media {
    position: sticky;
    top: clamp(90px, 11vh, 118px);
    min-height: calc(100svh - clamp(150px, 19vh, 200px));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hnums__grid { grid-template-columns: 1fr 1fr; }
  .hnum:nth-child(even) {
    border-left: 1px solid var(--hline-d);
    padding-left: clamp(24px, 3vw, 44px);
  }

  .htl__grid {
    display: grid;
    grid-template-columns: minmax(240px, 32%) 1fr;
    gap: clamp(30px, 5vw, 96px);
    align-items: start;
  }
  .htl__side {
    position: sticky;
    top: clamp(104px, 13vh, 150px);
  }
  .htl__step { min-height: 42svh; }

  /* propósito: código+título | texto | foto */
  .hpur__grid {
    grid-template-columns: minmax(160px, 19%) minmax(0, 1fr) minmax(0, 29%);
    align-items: start;
  }
  .hpur__body { padding-right: clamp(8px, 2vw, 36px); }
  /* 3 celdas arriba + 2 abajo: nadie queda huérfano y la rejilla se lee
     compuesta en vez de sobrar un hueco al final. El aire entre el número y
     el texto es a propósito: es el lienzo que llena la foto al hacer hover. */
  .hval__grid { grid-template-columns: repeat(6, 1fr); }
  .hvcard { min-height: clamp(300px, 30vw, 430px); }
  .hvcard:nth-child(-n + 3) { grid-column: span 2; }
  .hvcard:nth-child(n + 4) { grid-column: span 3; }
  /* hairline vertical solo entre celdas de la misma fila */
  .hvcard:not(:nth-child(1)):not(:nth-child(4)) {
    border-left: 1px solid var(--hline-d);
  }
  /* el texto de las dos celdas anchas no se estira a todo el ancho */
  .hvcard:nth-child(n + 4) .hvcard__txt { max-width: 62%; }
  /* en desktop la celda es alta y el esquema solo se ve al hover: puede crecer */
  .hvcard__art { top: 2%; right: 2%; width: 66%; max-width: 300px; }
  /* las dos anchas: el esquema sube y encoge — medido, con 300px la tinta
     quedaba a 19px del título (se sentía apretado); así queda a ~56px */
  .hvcard:nth-child(n + 4) .hvcard__art { top: 0; width: 44%; max-width: 268px; }

  /* casos: imagen a la izquierda, datos a la derecha */
  .hcase__item {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-items: start;
  }

  .hcta__grid {
    display: grid;
    grid-template-columns: 1fr minmax(340px, 46%);
    gap: clamp(36px, 6vw, 96px);
    align-items: start;
  }
}

/* ---------- apilado de las diapositivas de propósito ----------
   Se activa solo si hay ancho Y alto: una tarjeta más alta que la pantalla,
   pegada arriba, dejaría su parte de abajo imposible de leer. */
@media (min-width: 900px) and (min-height: 500px) {
  .hpur__slide {
    position: sticky;
    top: var(--hpur-top);
    transform-origin: center top;
  }
}

/* ---------- apilado de los casos de "En la industria" ----------
   Mismo truco: cada caso es una hoja opaca sticky al mismo top; el siguiente
   sube y la tapa. La opacidad del anterior ya la atenúa el scrub del JS. */
@media (min-width: 900px) and (min-height: 540px) {
  .hcase__item {
    position: sticky;
    top: var(--hcase-top);
    background: var(--sheet);
    border-top-left-radius: clamp(16px, 1.8vw, 26px);
    border-top-right-radius: clamp(16px, 1.8vw, 26px);
    box-shadow: 0 -14px 34px rgba(12, 12, 12, 0.05);
    transform-origin: center top;
  }
}
/* pantalla corta: la tarjeta completa tiene que caber bajo --hcase-top
   (medido a 1422×588: 562px vs 524 disponibles → se compacta ~60px) */
@media (min-width: 900px) and (min-height: 540px) and (max-height: 660px) {
  .hcase__item { padding-block: 18px; }
  .hcase__title { font-size: 26px; }
  .hcase__chips { margin-top: 14px; }
  .hcase__meta,
  .hcase__results { margin-top: 18px; }
  .hcase__results li { padding-block: 8px; font-size: 14px; }
}

/* ============================================================
   ESTADOS INICIALES (solo si GSAP los va a animar)
   ============================================================ */
html.js .hhero .hline > span {
  transform: translateY(106%);
  filter: blur(9px);
}
html.js .hhero .hlabel,
html.js .hhero__lead,
html.js .hhero__media,
html.js .hhero__facts > div,
html.js .hscroll { opacity: 0; }
/* las reglas se dibujan solas: la variable la anima GSAP (scaleX/scaleY, nunca width) */
html.js .hhero__facts { --rule: 0; }

@media (prefers-reduced-motion: reduce) {
  .hxpin::after,
  .hscroll__rail b { animation: none; }
  .hscroll__rail b { opacity: 0.6; transform: none; }
  /* la foto del valor aparece, pero sin zoom ni blur */
  .hvcard__shot { transition: opacity 150ms linear; }
  .hvcard__shot img {
    transform: none !important;
    filter: none !important;
    transition: none;
  }
  .hvcard h3::after { transition: none; }
  /* el esquema aparece completo, sin cascada ni latido */
  .hvart__pulse { animation: none !important; }
  .hvcard__art { transition: opacity 150ms linear; }
  .hvcard__art g {
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}