/* ============================================================
   PowerMe Energy — Rediseño del home (powerme.mx)
   Archivo NUEVO y autónomo: no toca styles.css ni el home actual.
   Sirve a home-rediseno.html.

   Idea rectora (referencia de Luis: la llave sobre negro con vídeo
   dentro): el LOGO OFICIAL de PowerMe funciona como ventana. La foto
   ocupa toda la pantalla y solo se ve a través del logotipo; al bajar,
   la ventana se abre hasta revelar la foto completa.

   Prefijo `hv-` (home v2) para no chocar jamás con las clases del
   home actual si algún día conviven.
   ============================================================ */

/* ---------- Fuentes de marca (mismas rutas que el home actual) ---------- */
@font-face {
  font-family: 'ABChanel Couture';
  src: url('../fonts/ABChanelCouture-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commuters Sans';
  src: url('../fonts/Fontspring-DEMO-commuterssans-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commuters Sans';
  src: url('../fonts/Fontspring-DEMO-commuterssans-regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commuters Sans';
  src: url('../fonts/Fontspring-DEMO-commuterssans-semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Commuters Sans';
  src: url('../fonts/Fontspring-DEMO-commuterssans-bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens (heredados del sistema de marca) ---------- */
:root {
  --ink: #0C0C0C;
  --void: #060606;           /* negro del hero, como la referencia */
  --paper: #F1F1F1;
  --cyan: #0BCEE1;
  --hyper: #E1FE01;          /* Power Yellow, acento Hypershell */
  --atess: #E23D2E;
  --line-d: rgba(241, 241, 241, 0.14);
  --muted-d: rgba(241, 241, 241, 0.6);
  --font-display: 'ABChanel Couture', 'Commuters Sans', Georgia, serif;
  --font-body: 'Commuters Sans', 'Segoe UI', Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1360px;
  --pad: clamp(20px, 4vw, 52px);
  --nav-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* Commuters Sans es DEMO: los glifos 4 + % / salen rotos.
   Todo carácter de esos va envuelto en .glyph (ver notas.md). */
.glyph { font-family: 'Segoe UI', Arial, sans-serif; }

.hv-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Antetítulo de sección: número + rótulo, patrón de la casa */
.hv-head { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2.6vw, 30px); }
.hv-head__num {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--cyan);
}
.hv-head__kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted-d);
}
.hv-head::after { content: ""; flex: 1; height: 1px; background: var(--line-d); }

/* ABChanel es caps-only y muy ancha (ver notas.md): a 62px un título de
   cuatro palabras se partía en tres renglones dentro de las columnas
   estrechas. Con esta escala los títulos caben en una o dos líneas. */
.hv-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(27px, 3.5vw, 48px);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.hv-lead {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
  color: var(--muted-d);
  max-width: 62ch;
}

/* Botón pastilla de la casa */
.hv-btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 10px 0 26px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .15s ease;
}
.hv-btn__circle {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  transition: transform .3s var(--ease-out);
}
.hv-btn__circle svg { width: 17px; height: 17px; }
.hv-btn:hover .hv-btn__circle { transform: translateX(3px); }
.hv-btn:active { transform: scale(.98); }
.hv-btn--cyan { background: var(--cyan); color: var(--ink); }
.hv-btn--cyan .hv-btn__circle { background: var(--ink); color: var(--cyan); }
.hv-btn--cyan:hover { background: #23dced; }
.hv-btn--ghost { border: 1px solid var(--line-d); color: var(--paper); }
.hv-btn--ghost .hv-btn__circle { background: rgba(241,241,241,.1); color: var(--paper); }
.hv-btn--ghost:hover { background: rgba(241,241,241,.07); }

/* ============================================================
   NAV
   ============================================================ */
.hv-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.hv-nav.is-solid {
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line-d);
}
.hv-nav__inner {
  width: 100%; max-width: calc(var(--container) + 40px);
  margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Las secciones ancladas dejan sitio a la barra fija al navegar */
#tiendas, #somos, #marcas, #porque, #logros, #faq, #galeria, #contacto, #empleo {
  scroll-margin-top: var(--nav-h);
}

.hv-nav__logo img { height: 32px; width: auto; }
@media (max-width: 560px) { .hv-nav__logo img { height: 26px; } }

/* "Nuestra historia": entrada destacada de la nav — más grande que los
   enlaces normales, en cian y con flecha que avanza al hover */
.hv-nav__historia {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: var(--cyan); white-space: nowrap;
  padding: 10px 18px; border: 1px solid rgba(11, 206, 225, .45);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease;
}
.hv-nav__historia svg { width: 17px; height: 17px; transition: transform .25s ease; }
.hv-nav__historia:hover { background: rgba(11, 206, 225, .1); border-color: var(--cyan); }
.hv-nav__historia:hover svg { transform: translateX(4px); }
@media (max-width: 560px) {
  .hv-nav__historia { font-size: 13px; padding: 8px 14px; }
}
.hv-nav__links { display: flex; gap: 30px; }
.hv-nav__links a {
  font-size: 13px; color: rgba(241,241,241,.72);
  transition: color .25s ease;
}
.hv-nav__links a:hover { color: var(--paper); }
@media (max-width: 900px) { .hv-nav__links { display: none; } }

/* ============================================================
   HERO — el logo oficial como ventana
   ============================================================ */
.hv-hero { position: relative; height: 260vh; background: var(--void); }
.hv-hero__pin {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--void);
}

/* Capa de fotos: ocupan TODA la pantalla; solo se ven a través del logo */
.hv-hero__photos { position: absolute; inset: 0; }
.hv-hero__photos img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hv-hero__photos img.is-on { opacity: 1; }
/* Dentro del logo la foto compite contra negro puro y a ese tamaño se
   lee poco: se levanta el brillo SOLO en la capa enmascarada. La capa
   completa (el remate) se queda con el color real de la foto. */
.hv-hero__window .hv-hero__photos img { filter: brightness(1.45) contrast(1.06) saturate(1.08); }

/* La ventana: máscara con el LOGO OFICIAL (SVG vectorial de identidad).
   --mw vive en el PIN (lo mueve el JS con el scroll) para que máscara y
   contorno compartan exactamente el mismo tamaño. */
.hv-hero__pin { --mw: min(74vw, 1020px); }
.hv-hero__window {
  position: absolute; inset: 0;
  -webkit-mask-image: url('../logos/LOGO_PowerMe_MainB.svg');
          mask-image: url('../logos/LOGO_PowerMe_MainB.svg');
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: var(--mw) auto; mask-size: var(--mw) auto;
  will-change: mask-size;
}
/* Velo que aclara el interior de las letras: sin él, las zonas oscuras
   de la foto se funden con el fondo negro y el logo no se distingue. */
.hv-hero__window::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(241,241,241,.08);
}
/* Contorno del logotipo (LOGO_PowerMe_Main_outline.svg, trazo #f1f1f1
   de identidad): delinea las letras aunque la foto de dentro sea oscura.
   Mismo viewBox 1080×156.56 que la máscara y mismo --mw → alineación
   exacta. El JS lo desvanece cuando la ventana empieza a abrirse. */
.hv-hero__trazo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--mw); height: auto;
  opacity: .55; pointer-events: none;
}
/* Foto sin máscara: entra al final para rematar el reveal */
.hv-hero__full { position: absolute; inset: 0; opacity: 0; }
.hv-hero__veil {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(6,6,6,.92) 8%, rgba(6,6,6,.55) 46%, rgba(6,6,6,.25) 100%);
}

/* Rótulos del hero */
.hv-hero__kicker {
  position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(24px, 6vh, 60px));
  text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(241,241,241,.55);
}
.hv-hero__claim {
  position: absolute; left: 0; right: 0; bottom: clamp(90px, 16vh, 170px);
  padding-inline: var(--pad);
  text-align: center;
  opacity: 0;
}
.hv-hero__claim h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(29px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 26ch; margin-inline: auto;   /* "Independencia energética" es larga: sin esto caía a 3 líneas */
}
.hv-hero__claim p {
  margin-top: 18px; font-size: clamp(14px, 1.3vw, 17px);
  color: rgba(241,241,241,.75); max-width: 52ch; margin-inline: auto;
}
.hv-hero__scroll {
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vh, 46px);
  text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(241,241,241,.45);
}
.hv-hero__scroll span { display: block; width: 1px; height: 34px; margin: 12px auto 0; background: linear-gradient(var(--cyan), transparent); }

/* Sin soporte de máscara (navegador viejo): el logo se pinta encima y ya */
.hv-hero__fallback { display: none; }
@supports not ((mask-size: 10px) or (-webkit-mask-size: 10px)) {
  .hv-hero__window { display: none; }
  .hv-hero__fallback {
    display: block;
    position: absolute; inset: 0;
    display: grid; place-items: center;
  }
  .hv-hero__fallback img { width: min(74vw, 1020px); }
  .hv-hero__full { opacity: .35; }
}

/* ============================================================
   ACCESOS RÁPIDOS A LAS TRES TIENDAS
   Adaptación del componente Hero08 (shadcn/React) que pasó Luis:
   cabecera a dos columnas (título | descripción + prueba social) y
   rejilla de tarjetas con foto a sangre, degradado, texto y CTA.
   Aquí en HTML/CSS, que es el stack de esta landing.
   ============================================================ */
.hv-tiendas { position: relative; padding: clamp(70px, 10vw, 120px) 0 clamp(60px, 8vw, 100px); background: var(--ink); }
.hv-tiendas__head { display: grid; gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(34px, 5vw, 56px); }
@media (min-width: 900px) { .hv-tiendas__head { grid-template-columns: 1.1fr .9fr; } }
.hv-tiendas__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hv-tiendas__proof { font-size: 13px; color: rgba(241,241,241,.5); }
.hv-tiendas__proof b { color: var(--paper); font-weight: 600; }

.hv-tiendas__grid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .hv-tiendas__grid { grid-template-columns: repeat(3, 1fr); } }

.hv-tienda {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 16 / 13;
  border-radius: 18px;
  outline: 1px solid rgba(241,241,241,.12); outline-offset: -1px;
  padding: clamp(20px, 2.2vw, 30px);
  transition: outline-color .35s var(--ease-out), transform .45s var(--ease-out);
}
@media (min-width: 720px) and (max-width: 1100px) { .hv-tienda { aspect-ratio: 3 / 4; } }
/* Clase propia para la foto: si el selector fuera `.hv-tienda img`
   también posicionaría en absoluto el logo de la marca. */
.hv-tienda__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out);
}
/* Dos degradados: el de abajo sostiene el texto y el de arriba asienta
   el logo de la marca (la foto de EcoFlow es clara justo ahí y el
   lockup blanco se perdía contra la ventana de la cocina). */
.hv-tienda::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,6,6,.95) 6%, rgba(6,6,6,.7) 42%, rgba(6,6,6,.22) 100%),
    linear-gradient(to bottom, rgba(6,6,6,.55) 0%, rgba(6,6,6,0) 32%);
}
.hv-tienda:hover { outline-color: rgba(11,206,225,.55); transform: translateY(-4px); }
.hv-tienda:hover .hv-tienda__foto { transform: scale(1.05); }
/* Altura por marca: igualar la caja, no la tinta (los tres lockups
   tienen proporciones distintas y a tinta igual se ven desparejos). */
.hv-tienda__logo { width: auto; margin-bottom: auto; object-fit: contain; }
.hv-tienda__logo--ef { height: clamp(38px, 4vw, 54px); }
.hv-tienda__logo--hs { height: clamp(28px, 3vw, 40px); }
.hv-tienda__logo--atess { height: clamp(32px, 3.4vw, 46px); filter: brightness(0) invert(1); }
.hv-tienda h3 { margin-top: 18px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.01em; }
.hv-tienda p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: rgba(241,241,241,.7); }
.hv-tienda__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--cyan);
}
.hv-tienda__cta svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.hv-tienda:hover .hv-tienda__cta svg { transform: translate(2px, -2px); }
/* El enlace cubre toda la tarjeta: se puede hacer clic en cualquier parte */
.hv-tienda__link { position: absolute; inset: 0; z-index: 3; }
.hv-tienda__link:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; border-radius: 18px; }

/* Entrada escalonada con desenfoque, como el componente de referencia */
.hv-rv--blur { filter: blur(7px); }
.hv-rv--blur.is-in { filter: blur(0); }

/* ============================================================
   QUIÉNES SOMOS
   ============================================================ */
.hv-somos { position: relative; padding: clamp(90px, 13vw, 170px) 0 clamp(70px, 10vw, 120px); background: var(--ink); }
.hv-somos__grid { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .hv-somos__grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.hv-somos__paras { display: grid; gap: 18px; }
.hv-somos__paras p { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.8; color: var(--muted-d); }
.hv-somos__paras strong { color: var(--paper); font-weight: 600; }
.hv-somos__card {
  border: 1px solid var(--line-d); border-radius: 20px;
  padding: clamp(24px, 3vw, 34px);
  background: rgba(241,241,241,.02);
}
.hv-somos__card dl { display: grid; gap: 20px; }
.hv-somos__card dt { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,241,241,.45); }
.hv-somos__card dd { margin-top: 5px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; letter-spacing: -.01em; }
.hv-somos__card dd small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--muted-d); letter-spacing: 0; }

/* ============================================================
   LAS 3 MARCAS — paneles a pantalla completa (foco de la página)
   ============================================================ */
.hv-marcas { position: relative; background: var(--ink); }
/* OJO: longhand a propósito — el shorthand `padding: X 0 Y` pisaba los
   laterales del .hv-wrap y la intro quedaba pegada al borde izquierdo */
.hv-marcas__intro { padding-top: clamp(60px, 9vw, 110px); padding-bottom: clamp(40px, 6vw, 70px); }
.hv-marcas__intro .hv-lead { margin-top: 20px; }

/* ── Galería Zoom Parallax (adaptación del componente React/framer-motion
   que pasó Luis, en CSS/JS vanilla): 7 fotos repartidas alrededor del
   centro dentro de un pin de 100vh; al hacer scroll por los 300vh del
   contenedor, cada capa escala a un ritmo distinto (4×–9×) y la central
   termina llenando la pantalla. Solo transform: scale → va por GPU. ── */
.hv-zoom { position: relative; height: 300vh; }
.hv-zoom__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.hv-zoom__capa {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.hv-zoom__capa > div { position: relative; width: 25vw; height: 25vh; }
.hv-zoom__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Posiciones y tamaños por capa: los mismos valores vw/vh del componente */
.hv-zoom__capa:nth-child(2) > div { top: -30vh;  left: 5vw;     height: 30vh; width: 35vw; }
.hv-zoom__capa:nth-child(3) > div { top: -10vh;  left: -25vw;   height: 45vh; width: 20vw; }
.hv-zoom__capa:nth-child(4) > div { left: 27.5vw;               height: 25vh; width: 25vw; }
.hv-zoom__capa:nth-child(5) > div { top: 27.5vh; left: 5vw;     height: 25vh; width: 20vw; }
.hv-zoom__capa:nth-child(6) > div { top: 27.5vh; left: -22.5vw; height: 25vh; width: 30vw; }
.hv-zoom__capa:nth-child(7) > div { top: 22.5vh; left: 25vw;    height: 15vh; width: 15vw; }
@media (prefers-reduced-motion: reduce) {
  .hv-zoom { height: auto; }
  .hv-zoom__pin { position: relative; }
}

/* ── Paneles de marca a pantalla completa: van DESPUÉS de la galería
   zoom (Luis pidió combinar ambos, 17 ago): el zoom remata en pantalla
   completa y enseguida cada panel se apila sobre el anterior (sticky). ── */
.hv-panel {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  overflow: hidden;
  display: grid; align-items: end;
  border-top: 1px solid var(--line-d);
  /* Tiempo de lectura (pedido de Luis): el margen alarga el tramo de
     scroll en el que el panel ya está fijo y completo antes de que el
     siguiente empiece a taparlo. El margen queda DETRÁS del panel
     fijado, así que no se ve ningún hueco. */
  margin-bottom: 34vh;
}
.hv-panel__bg { position: absolute; inset: 0; }
.hv-panel__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hv-panel__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,6,.95) 4%, rgba(6,6,6,.72) 38%, rgba(6,6,6,.3) 74%, rgba(6,6,6,.55) 100%);
}
/* La foto de ATESS es clara (equipos blancos, ladrillo iluminado): su velo
   suma una capa de izquierda a derecha bajo la columna del texto. */
.hv-panel--at .hv-panel__bg::after {
  background:
    linear-gradient(to right, rgba(6,6,6,.86) 0%, rgba(6,6,6,.6) 38%, rgba(6,6,6,.22) 72%, rgba(6,6,6,.08) 100%),
    linear-gradient(to top, rgba(6,6,6,.95) 4%, rgba(6,6,6,.6) 38%, rgba(6,6,6,.24) 74%, rgba(6,6,6,.5) 100%);
}
/* El panel está fijado a 100vh y recorta lo que sobre: todos los
   tamaños de dentro se atan también a vh para que el bloque completo
   —incluido el botón— quepa siempre en una pantalla. */
.hv-panel__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding: 0 var(--pad) clamp(26px, 6vh, 86px);
}
.hv-panel__top {
  position: absolute; top: calc(var(--nav-h) + clamp(16px, 4vh, 40px));
  left: 0; right: 0; z-index: 2;
  padding-inline: var(--pad);
}
.hv-panel__count {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241,241,241,.5);
}
.hv-panel__count b { color: var(--paper); font-weight: 700; }

/* Logos con presencia (pedido de Luis): ~40% más grandes, con sombra
   para despegarlos de la foto y altura calibrada POR MARCA — los tres
   lockups tienen proporciones distintas y a caja igual se ven desparejos. */
.hv-panel__logo {
  /* base = EcoFlow: su lockup es compacto (casi cuadrado) y a la misma
     caja se ve menor que los anchos — por eso su altura es mayor */
  height: clamp(54px, min(8vw, 9.6vh), 104px); width: auto;
  margin-bottom: clamp(14px, 2.6vh, 32px);
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.55));
}
/* El wordmark ECOFLOW es 9.4:1: su altura es altura de letra pura,
   calibrada para leerse a la par del lockup de Hypershell */
.hv-panel__logo--efwm { height: clamp(30px, min(4.6vw, 5.4vh), 56px); }
.hv-panel__logo--hs { height: clamp(46px, min(6.8vw, 8.4vh), 90px); }
.hv-panel__logo--atess { height: clamp(50px, min(7.4vw, 9vh), 98px); filter: brightness(0) invert(1) drop-shadow(0 3px 16px rgba(0,0,0,.55)); }
.hv-panel__rol {
  /* Kicker limpio (sin píldora) — el rediseño de EF extendido a los 3 */
  display: inline-block; margin-bottom: clamp(10px, 1.6vh, 14px);
  font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(241,241,241,.78);
}
.hv-panel__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, min(3.6vw, 4.8vh), 50px); line-height: 1.06; letter-spacing: -.02em;
  max-width: 19ch; text-wrap: balance;
}
/* El título de EcoFlow mide 12.665em en ABChanel: su tamaño se calcula
   del ancho disponible para caber SIEMPRE en una línea */
.hv-panel--ef .hv-panel__title {
  white-space: nowrap; max-width: none;
  font-size: min(64px, calc((100vw - 2 * var(--pad)) / 12.75));
}
.hv-panel__copy { margin-top: clamp(10px, 1.8vh, 16px); font-size: clamp(13.5px, min(1.3vw, 1.9vh), 17px); line-height: 1.7; color: rgba(241,241,241,.78); max-width: 54ch; }

/* Datos como índice editorial en LOS TRES paneles: filas hairline con
   numeración en el acento de cada marca. Sustituye a los chips de cifras
   gigantes de colores (Luis: "se ve muy saturado"). El valor va en blanco
   y solo toma el color de marca al hover. */
.hv-panel__data {
  display: block; counter-reset: fila;
  margin: clamp(16px, 3vh, 36px) 0 0;
  border-top: 1px solid rgba(241,241,241,.16);
  max-width: 520px;
}
.hv-panel__data > div {
  display: grid; grid-template-columns: 30px 118px 1fr;
  align-items: baseline; column-gap: 14px;
  padding-block: clamp(11px, 1.8vh, 16px);
  border-bottom: 1px solid rgba(241,241,241,.16);
  transition: background .3s ease;
}
.hv-panel__data > div:hover { background: rgba(241,241,241,.04); }
.hv-panel__data > div::before {
  counter-increment: fila;
  content: "0" counter(fila);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.hv-panel--ef .hv-panel__data > div::before { color: rgba(11,206,225,.8); }
.hv-panel--hs .hv-panel__data > div::before { color: rgba(225,254,1,.75); }
.hv-panel--at .hv-panel__data > div::before { color: rgba(255,106,92,.85); }
.hv-panel__data b {
  color: var(--paper); white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: color .3s ease;
}
/* Cifras con 4 o + : Commuters Sans DEMO los rompe → sans del sistema */
.hv-panel__data b.num { font-family: 'Segoe UI', Arial, sans-serif; letter-spacing: .1em; }
.hv-panel--ef .hv-panel__data > div:hover b { color: var(--cyan); }
.hv-panel--hs .hv-panel__data > div:hover b { color: var(--hyper); }
.hv-panel--at .hv-panel__data > div:hover b { color: #ff6a5c; }
.hv-panel__data span { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(241,241,241,.62); }
.hv-panel__inner .hv-btn { margin-top: clamp(18px, 3.2vh, 34px); }

/* Split asimétrico ≥980 (los 3): relato a la izquierda, índice al pie
   derecho tras una hairline vertical */
@media (min-width: 980px) {
  .hv-panel__inner {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    grid-template-areas: "logo data" "rol data" "title data" "copy data" "btn data";
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(44px, 5vw, 96px);
    align-items: start;
  }
  .hv-panel__logo { grid-area: logo; }
  .hv-panel__rol { grid-area: rol; }
  .hv-panel__title { grid-area: title; }
  .hv-panel--ef .hv-panel__title {
    font-size: min(64px, calc((min(100vw, 1360px) - 2 * var(--pad) - clamp(44px, 5vw, 96px)) * 0.56 / 12.75));
  }
  .hv-panel__copy { grid-area: copy; }
  .hv-panel__data {
    grid-area: data; align-self: end; max-width: none;
    border-left: 1px solid rgba(241,241,241,.14);
    padding-left: clamp(24px, 2.6vw, 44px);
    border-top: 0;
  }
  .hv-panel__inner .hv-btn { grid-area: btn; justify-self: start; }
}
@media (max-width: 620px) {
  .hv-panel__data > div { grid-template-columns: 26px 1fr; }
  .hv-panel__data span { grid-column: 2; margin-top: 3px; }
}

/* Entrada en cascada cuando cada panel queda fijado (is-live vía JS) */
@media (prefers-reduced-motion: no-preference) {
  .hv-panel .hv-panel__bg img { transform: scale(1.14); transition: transform 1.6s var(--ease-out); }
  .hv-panel.is-live .hv-panel__bg img { transform: scale(1.06); }
  .hv-panel .hv-panel__inner > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity .65s var(--ease-out), transform .75s var(--ease-out);
  }
  .hv-panel.is-live .hv-panel__inner > * { opacity: 1; transform: none; }
  .hv-panel.is-live .hv-panel__inner > *:nth-child(2) { transition-delay: .07s; }
  .hv-panel.is-live .hv-panel__inner > *:nth-child(3) { transition-delay: .14s; }
  .hv-panel.is-live .hv-panel__inner > *:nth-child(4) { transition-delay: .22s; }
  .hv-panel.is-live .hv-panel__inner > *:nth-child(5) { transition-delay: .32s; }
  .hv-panel.is-live .hv-panel__inner > *:nth-child(6) { transition-delay: .44s; }
}

/* ============================================================
   CANALES OFICIALES — marquee infinito de puntos de venta
   (pedido de Luis con su ejemplo de EcoFlow, 17 ago). Los logos se
   descargaron a assets/img/canales/ para no depender de terceros.
   Tratamiento monocromo blanco (brightness 0 + invert) para que 11
   marcas de colores distintos no compitan con la página; quitar el
   filtro en .hv-canales__logo img si se quieren a color.
   ============================================================ */
.hv-canales { position: relative; z-index: 3; padding: clamp(48px, 6vw, 76px) 0; background: var(--ink); border-top: 1px solid var(--line-d); overflow: hidden; }
.hv-canales__label {
  text-align: center; margin-bottom: clamp(28px, 4vw, 44px);
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-d);
}
.hv-canales__marquee {
  overflow: hidden;
  /* La máscara desvanece logos Y hairlines hacia los bordes (adaptación
     del logo-cloud que pasó Luis, 21 ago) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  border-top: 1px solid rgba(241,241,241,.16);
  border-bottom: 1px solid rgba(241,241,241,.16);
  padding-block: clamp(18px, 2.6vw, 30px);
}
.hv-canales__track { display: flex; width: max-content; animation: hv-slide 38s linear infinite; }
/* Los dos juegos deben ser IDÉNTICOS: el bucle mueve el track -50%.
   min-width:100vw garantiza que un juego cubra la pantalla también en
   monitores anchos (sin él, a 1920 el bucle mostraría un hueco). */
.hv-canales__set { display: flex; align-items: center; justify-content: space-around; min-width: 100vw; gap: clamp(40px, 4.6vw, 84px); padding-inline: clamp(20px, 2.3vw, 42px); }
.hv-canales__logo { flex: none; display: block; }
/* A COLOR (Luis lo confirmó el 21 ago al adaptar el logo-cloud: "quiero
   que los logos tengan color"). Cada logo trae su altura en --h (px),
   calibrada uno a uno: a caja igual, un wordmark denso (Sears) pesa el
   doble que uno ligero (Amazon) y los iconos cuadrados se pierden.
   --k escala todo el juego en pantallas angostas. */
.hv-canales__logo img {
  display: block; width: auto;
  height: calc(var(--h, 26) * var(--k, 1) * 1px);
  opacity: .95;
  transition: opacity .3s ease;
}
@media (max-width: 760px) { .hv-canales__track { --k: .74; } }
.hv-canales__logo:hover img { opacity: 1; }
/* Excepción: el logo de Amazon es texto NEGRO y desaparecería sobre el
   fondo oscuro — solo ese va en silueta blanca. */
.hv-canales__logo--blanco img { filter: brightness(0) invert(1); }
/* Al pasar el mouse el carrusel se detiene para poder mirar */
@media (hover: hover) and (pointer: fine) {
  .hv-canales__marquee:hover .hv-canales__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .hv-canales__track { animation: none; } }

/* ============================================================
   POR QUÉ POWERME
   ============================================================ */
.hv-porque { position: relative; z-index: 3; padding: clamp(80px, 12vw, 150px) 0; background: var(--ink); border-top: 1px solid var(--line-d); }
/* Rejilla bento (adaptación del bloque Features-8 de shadcn que pasó
   Luis, 17 ago): 6 columnas — arriba tres tarjetas de 2, abajo dos de 3,
   cada una con un gráfico decorativo en SVG puro. */
.hv-bento { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); margin-top: clamp(34px, 5vw, 60px); }
.hv-bcard {
  position: relative; overflow: hidden;
  grid-column: span 6;
  border: 1px solid var(--line-d); border-radius: 20px;
  background: rgba(241,241,241,.02);
  padding: clamp(24px, 2.6vw, 34px);
  transition: background .35s ease, border-color .35s ease;
}
.hv-bcard:hover { background: rgba(241,241,241,.045); border-color: rgba(241,241,241,.22); }
@media (min-width: 700px) { .hv-bcard--s { grid-column: span 3; } }
@media (min-width: 1060px) {
  .hv-bcard--s { grid-column: span 2; }
  .hv-bcard--a { grid-column: span 2; }
  .hv-bcard--m { grid-column: span 3; }
}
.hv-bcard h3 { font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; letter-spacing: -.01em; }
.hv-bcard p { margin-top: 9px; font-size: 13.5px; line-height: 1.7; color: var(--muted-d); }

/* Tarjeta A: cifra grande con garabato ovalado alrededor */
.hv-bcard--a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hv-bento__cien { position: relative; display: flex; align-items: center; justify-content: center; width: 224px; height: 96px; }
.hv-bento__cien svg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(11,206,225,.35); }
.hv-bento__cien b {
  font-family: var(--font-display); font-weight: 300;
  font-size: 46px; letter-spacing: -.02em; line-height: 1;
}
.hv-bcard--a h3 { margin-top: 22px; }

/* Tarjetas B y C: gráfico arriba, texto centrado abajo */
.hv-bcard--v { text-align: center; }
.hv-bcard--v h3 { margin-top: 22px; }
/* Aro doble alrededor del icono (el before:-inset-2 de la referencia) */
.hv-bento__aro {
  position: relative; display: grid; place-items: center;
  width: 96px; height: 96px; margin-inline: auto;
  border: 1px solid var(--line-d); border-radius: 50%;
}
.hv-bento__aro::before { content: ""; position: absolute; inset: -9px; border: 1px solid rgba(241,241,241,.07); border-radius: 50%; }
.hv-bento__aro svg { width: 34px; height: 34px; color: var(--cyan); }
.hv-bento__ruta { display: block; width: min(100%, 250px); height: auto; margin: 6px auto 0; }

/* Tarjetas D y E: dos columnas — texto | gráfico */
.hv-bcard--m { display: grid; gap: 26px; }
@media (min-width: 640px) { .hv-bcard--m { grid-template-columns: 1fr 1fr; } }
.hv-bento__lado { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.hv-bento__aro--chico { width: 52px; height: 52px; margin: 0; }
.hv-bento__aro--chico::before { inset: -7px; }
.hv-bento__aro--chico svg { width: 22px; height: 22px; }

/* Marco tipo ventana (esquina con 3 puntos) que sangra hacia la esquina
   inferior derecha, como la referencia */
.hv-bento__ventana {
  position: relative;
  margin: 10px calc(clamp(24px, 2.6vw, 34px) * -1) calc(clamp(24px, 2.6vw, 34px) * -1) 0;
  padding: 26px 0 0 18px;
  border-left: 1px solid var(--line-d); border-top: 1px solid var(--line-d);
  border-top-left-radius: 16px;
}
.hv-bento__ventana::before {
  content: ""; position: absolute; left: 12px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(241,241,241,.22);
  box-shadow: 11px 0 0 rgba(241,241,241,.22), 22px 0 0 rgba(241,241,241,.22);
}
.hv-bento__ventana svg { display: block; width: 100%; height: auto; }

/* Chips de canales alrededor de una línea central (los avatares de la
   referencia, aquí con marcas de iniciales) */
.hv-bento__canales { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 8px; }
.hv-bento__canales::before { content: ""; position: absolute; inset: 0; margin-inline: auto; width: 1px; background: var(--line-d); }
.hv-bento__canal { position: relative; display: flex; align-items: center; gap: 10px; }
.hv-bento__canal--der { width: calc(50% + 16px); justify-content: flex-end; }
.hv-bento__canal--izq { margin-left: calc(50% - 16px); }
.hv-bento__canal i {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-d); background: var(--ink);
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--cyan);
}
.hv-bento__canal span {
  padding: 5px 10px; border: 1px solid var(--line-d); border-radius: 7px;
  background: rgba(12,12,12,.85);
  font-size: 11.5px; color: rgba(241,241,241,.8); white-space: nowrap;
}

/* ============================================================
   LOGROS
   ============================================================ */
.hv-logros { position: relative; z-index: 3; padding: clamp(80px, 12vw, 150px) 0; background: var(--void); border-top: 1px solid var(--line-d); }
.hv-logros__cifras {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(34px, 5vw, 58px);
}
@media (min-width: 860px) { .hv-logros__cifras { grid-template-columns: repeat(3, 1fr); } }
.hv-cifra { border-top: 1px solid var(--line-d); padding-top: 20px; }
/* Los contadores los escribe el JS y contienen 4 y +, rotos en
   Commuters Sans DEMO. Van en ABChanel Couture, que según notas.md
   sí trae dígitos y símbolos completos (y es la fuente de titulares). */
.hv-cifra b {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(38px, 5.4vw, 76px); line-height: .95; letter-spacing: -.03em;
  color: var(--cyan);
  white-space: nowrap;   /* el "+" no debe caer al renglón de abajo */
}
/* ABChanel tiene los dígitos pero NO el "+" (notas.md): el signo se
   pinta aparte, en fuente del sistema y como superíndice. */
.hv-cifra b .glyph { font-family: 'Segoe UI', Arial, sans-serif; font-size: .5em; vertical-align: .55em; margin-left: .04em; }
/* OJO: hijo directo. Con `.hv-cifra span` este display:block alcanzaba
   también al <span class="glyph"> del signo dentro del <b> y lo tiraba
   a su propio renglón (ningún nowrap puede con un display:block). */
.hv-cifra > span { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted-d); }

/* Credenciales como bento monocromo (adaptación del componente
   bento-monochrome que pasó Luis, 17 ago): rejilla de 6 columnas con
   tramos asimétricos 4+2 / 2+4, insignia flotante en aro, chip de
   categoría y brillo radial cian muy sutil. Tokens de la casa. */
/* Credenciales como lista de bullets: filas con línea de pelo, el aro
   EF/ML/RE/CES de viñeta y el chip de categoría a la derecha. */
.hv-logros__lista {
  list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0;
}
.hv-logros__lista li {
  display: grid; grid-template-columns: 52px 1fr auto;
  align-items: center; gap: clamp(16px, 2.4vw, 28px);
  padding-block: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line-d);
  transition: background .3s ease;
}
.hv-logros__lista li:last-child { border-bottom: 1px solid var(--line-d); }
.hv-logros__lista li:hover { background: rgba(241,241,241,.025); }
.hv-logro-item__mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-d); background: rgba(12,12,12,.65);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--cyan);
  transition: border-color .3s ease;
}
.hv-logros__lista li:hover .hv-logro-item__mark { border-color: rgba(11,206,225,.5); }
.hv-logro-item__cuerpo { min-width: 0; }
.hv-logro-item__cuerpo b { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.hv-logro-item__cuerpo p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--muted-d); }
.hv-logro-item__meta {
  padding: 4px 11px; border: 1px solid var(--line-d); border-radius: 999px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241,241,241,.55); white-space: nowrap;
}
@media (max-width: 560px) {
  .hv-logros__lista li { grid-template-columns: 44px 1fr; }
  .hv-logro-item__mark { width: 44px; height: 44px; font-size: 11px; }
  .hv-logro-item__meta { display: none; }
}

/* ============================================================
   PREGUNTAS FRECUENTES
   ============================================================ */
.hv-faq { position: relative; z-index: 3; padding: clamp(80px, 12vw, 150px) 0; background: var(--ink); border-top: 1px solid var(--line-d); }
.hv-faq__grid { display: grid; gap: clamp(30px, 5vw, 60px); }
/* .95fr y no .8fr: con la columna más estrecha el título de la sección
   se partía en tres renglones. */
@media (min-width: 960px) { .hv-faq__grid { grid-template-columns: .95fr 1.15fr; align-items: start; } }
.hv-faq__list { border-top: 1px solid var(--line-d); }
.hv-faq details { border-bottom: 1px solid var(--line-d); }
.hv-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vw, 26px) 0;
  font-size: clamp(15px, 1.45vw, 18px); font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; list-style: none;
  transition: color .25s ease;
}
.hv-faq summary::-webkit-details-marker { display: none; }
.hv-faq summary:hover { color: var(--cyan); }
.hv-faq__sign { position: relative; flex: none; width: 16px; height: 16px; }
.hv-faq__sign::before, .hv-faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--ease-out);
}
.hv-faq__sign::after { transform: rotate(90deg); }
.hv-faq details[open] .hv-faq__sign::after { transform: rotate(0deg); }
.hv-faq details[open] summary { color: var(--cyan); }
.hv-faq__answer { padding-bottom: clamp(20px, 2.4vw, 28px); font-size: 14.5px; line-height: 1.8; color: var(--muted-d); max-width: 62ch; }
.hv-faq__answer a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   GALERÍA "POWERME EN ACCIÓN" — sticky scroll
   Adaptación del componente sticky-scroll (React/lenis) que pasó
   Luis: columnas laterales que fluyen y columna CENTRAL fija a
   pantalla completa mientras se recorre la sección. El pie de cada
   foto aparece al hacer hover (siempre visible en táctil).
   ============================================================ */
.hv-galeria { position: relative; z-index: 3; padding: clamp(80px, 12vw, 150px) 0 clamp(40px, 6vw, 80px); background: var(--void); border-top: 1px solid var(--line-d); overflow: clip; }
/* El lienzo recibe la transición de entrada/salida (opacidad + escala
   sutil) que pinta el JS según la posición de la sección en pantalla */
.hv-galeria__lienzo { will-change: transform, opacity; }
.hv-galeria__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(34px, 5vw, 60px); }
.hv-galeria__col { display: grid; gap: 10px; align-content: start; }
.hv-galeria__col--fija {
  position: sticky; top: 0; align-self: start;
  height: 100vh; padding-block: 10px;
  grid-template-rows: repeat(3, 1fr); align-content: stretch;
}
.hv-gfoto { position: relative; overflow: hidden; border-radius: 14px; background: #161616; margin: 0; }
.hv-galeria__col--flujo .hv-gfoto { height: clamp(220px, 38vh, 380px); }
.hv-galeria__col--fija .hv-gfoto { height: 100%; min-height: 0; }
.hv-gfoto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
/* Fotos verticales con las caras en el tercio superior: el recorte
   centrado de object-fit las decapitaba — se sube el encuadre. */
.hv-gfoto--arriba img { object-position: center 12%; }
.hv-gfoto:hover img { transform: scale(1.05); }
.hv-gfoto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 46px 16px 14px;
  background: linear-gradient(to top, rgba(6,6,6,.92) 30%, transparent);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s var(--ease-out);
}
.hv-gfoto:hover figcaption, .hv-gfoto:focus-within figcaption { opacity: 1; transform: translateY(0); }
.hv-gfoto figcaption b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.hv-gfoto figcaption p { margin-top: 4px; font-size: 12px; line-height: 1.55; color: rgba(241,241,241,.68); }
/* En táctil no hay hover: el pie va siempre visible */
@media (hover: none) {
  .hv-gfoto figcaption { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .hv-galeria__grid { grid-template-columns: 1fr 1fr; }
  .hv-galeria__col--fija { position: static; height: auto; padding-block: 0; grid-template-rows: none; grid-column: span 2; grid-template-columns: repeat(3, 1fr); display: grid; }
  .hv-galeria__col--fija .hv-gfoto { height: clamp(140px, 22vh, 240px); }
}
@media (max-width: 560px) {
  .hv-galeria__grid { grid-template-columns: 1fr; }
  .hv-galeria__col--fija { grid-column: auto; grid-template-columns: 1fr; }
  .hv-galeria__col--fija .hv-gfoto, .hv-galeria__col--flujo .hv-gfoto { height: clamp(200px, 30vh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-gfoto img, .hv-gfoto figcaption { transition: none; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.hv-cta { position: relative; z-index: 3; padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px); background: var(--void); border-top: 1px solid var(--line-d); text-align: center; overflow: hidden; }
.hv-cta__marquee { overflow: hidden; margin-bottom: clamp(50px, 7vw, 90px); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hv-cta__track { display: flex; width: max-content; animation: hv-slide 30s linear infinite; }
/* Los dos grupos son IDÉNTICOS: el bucle mueve el track -50% y con
   contenidos distintos se vería el salto. min-width:100vw garantiza
   que un grupo cubra la pantalla sin repetir logos. */
.hv-cta__set {
  display: flex; align-items: center; justify-content: space-around;
  min-width: 100vw; gap: clamp(28px, 3vw, 60px);
  padding-inline: clamp(16px, 1.6vw, 32px);
}
.hv-cta__logo { width: auto; flex: none; opacity: .85; }
.hv-cta__logo--ef { height: clamp(17px, 1.8vw, 26px); }
.hv-cta__logo--hs { height: clamp(20px, 2.1vw, 30px); }
.hv-cta__logo--at { height: clamp(24px, 2.6vw, 38px); filter: brightness(0) invert(1); }
.hv-cta__logo--pm { height: clamp(18px, 1.9vw, 27px); }
@keyframes hv-slide { to { transform: translateX(-50%); } }

.hv-cta__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; margin-inline: auto; }
.hv-cta__copy { margin: 20px auto 34px; font-size: clamp(14px, 1.3vw, 17px); color: var(--muted-d); max-width: 48ch; }
.hv-cta__botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================
   ÚNETE AL EQUIPO — CTA de reclutamiento tras el CTA final
   (adaptación del hero-with-image-text-and-two-buttons de shadcn:
   badge + título + copy + dos botones | imagen). El botón principal
   lleva a la bolsa de trabajo real: empleo.powerme.mx.
   ============================================================ */
.hv-empleo { position: relative; z-index: 3; padding: clamp(70px, 10vw, 130px) 0; background: var(--ink); border-top: 1px solid var(--line-d); }
.hv-empleo__grid { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .hv-empleo__grid { grid-template-columns: 1.05fr .95fr; } }
.hv-empleo__badge {
  display: inline-block; margin-bottom: 18px;
  padding: 6px 14px; border: 1px solid var(--line-d); border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241,241,241,.7);
}
.hv-empleo__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hv-empleo__foto { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line-d); background: #161616; }
.hv-empleo__foto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 899px) { .hv-empleo__foto img { aspect-ratio: 4 / 3; } }

/* ============================================================
   FOOTER
   ============================================================ */
.hv-footer { padding: clamp(44px, 6vw, 70px) 0 clamp(30px, 4vw, 46px); background: var(--void); border-top: 1px solid var(--line-d); }
.hv-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hv-footer__row img { height: 30px; width: auto; }
.hv-footer__links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; color: rgba(241,241,241,.6); }
.hv-footer__links a:hover { color: var(--cyan); }
/* Redes sociales */
.hv-footer__social {
  margin-top: clamp(26px, 3vw, 38px);
  display: flex; gap: 12px; flex-wrap: wrap;
}
.hv-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-d);
  color: rgba(241,241,241,.72);
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.hv-footer__social a svg { width: 19px; height: 19px; }
.hv-footer__social a:hover {
  color: var(--cyan); border-color: rgba(11, 206, 225, .55);
  transform: translateY(-2px);
}

.hv-footer__legal { margin-top: clamp(26px, 3vw, 38px); padding-top: 22px; border-top: 1px solid var(--line-d); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(241,241,241,.38); }

/* ============================================================
   Reveals (IntersectionObserver)
   ============================================================ */
.hv-rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.hv-rv.is-in { opacity: 1; transform: none; }
.hv-rv--d1 { transition-delay: .08s; }
.hv-rv--d2 { transition-delay: .16s; }
.hv-rv--d3 { transition-delay: .24s; }

/* En móvil el JS no anima la máscara (repintarla cada frame es lo caro
   del efecto), así que el hero NO debe reservar 260vh: sin animación
   serían dos pantallas y media de scroll sin que pase nada. */
@media (max-width: 760px) {
  .hv-hero { height: 100vh; }
  .hv-hero__pin { position: relative; }
  /* En el modo estático el titular convive con el logo en pantalla:
     el logo sube al 34% y el bloque de texto conserva su franja abajo
     sin pisar al indicio de scroll. El trazo usa translate -34% para
     calcar la semántica de mask-position (P% del elemento sobre P%
     de la caja) y seguir alineado. */
  .hv-hero__window { -webkit-mask-position: center 34%; mask-position: center 34%; }
  .hv-hero__trazo { top: 34%; transform: translate(-50%, -34%); }
  .hv-hero__claim { bottom: clamp(120px, 19vh, 180px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hv-rv { opacity: 1; transform: none; filter: none; transition: none; }
  .hv-cta__track { animation: none; }
  .hv-hero { height: 100vh; }
  .hv-hero__pin { position: relative; }
}