/* ============================================================
   TIENDAS / DÓNDE COMPRAR — tiendas.html (2 oct 2026)
   Opción A de powerme.mx/tiendas/referencias/: directorio por tipo de
   canal (los filtros se quitaron el 2 oct). Hoja autocontenida (tokens y fuentes del home);
   la barra viene de hv-nav.css. Prefijo `tn-`.
   ============================================================ */

@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-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;
}

:root {
  --ink: #0C0C0C;
  --void: #060606;
  --paper: #F1F1F1;
  --cyan: #0BCEE1;
  --line-d: rgba(241, 241, 241, 0.14);
  --muted-d: rgba(241, 241, 241, 0.6);
  --card: rgba(241, 241, 241, 0.035);
  --card-h: rgba(241, 241, 241, 0.065);
  --font-display: 'ABChanel Couture', 'Commuters Sans', Georgia, serif;
  --font-body: 'Commuters Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4vw, 52px);
  --nav-h: 76px;
}

*, *::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);
  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; }

/* La Commuters DEMO trae rotos el 4, +, % y / (ver notas.md): esos
   caracteres van en .glyph con la fuente del sistema */
.glyph { font-family: 'Segoe UI', Arial, sans-serif; }

.tn-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }

/* Cintillo con filete cian (mismo recurso del hero del home) */
.tn-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(241, 241, 241, .72);
}
.tn-kicker i { flex: none; width: 26px; height: 1px; background: var(--cyan); }

/* ============================================================
   HERO — adaptación de Integration Hero (21st.dev)
   Enfoque en el carrusel (2 oct): el hero ocupa la pantalla y los
   logos se dimensionan con el ALTO disponible (13svh) además del
   ancho (8vw), para que las dos filas quepan completas incluso en
   laptops con pantalla corta (1265×585 a 150 % de escala).
   ============================================================ */
.tn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* 90vw: en tableta vertical (820×1180) la pantalla completa dejaba
     ~600 px vacíos alrededor del contenido */
  min-height: min(100svh, 1000px, 90vw);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + clamp(16px, 4svh, 48px)) 0 clamp(24px, 4.5svh, 52px);
  text-align: center;
}
/* Resplandor cian arriba + cuadrícula de líneas finas (referencia de
   Luis, 2 oct: celdas que se desvanecen en óvalo; suavizada a pedido
   suyo: líneas al 6.5 % y desvanecido gradual sin borde). Celdas en px enteros:
   con clamp() salían de 51.2 px y las líneas se veían borrosas. */
.tn-hero::before, .tn-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tn-hero::before {
  background: radial-gradient(60% 55% at 50% 0%, rgba(11, 206, 225, .15), transparent 72%);
}
.tn-hero::after {
  background-image:
    linear-gradient(rgba(241, 241, 241, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 241, 241, .065) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 54% 58% at 50% 46%, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .18) 60%, transparent 82%);
          mask-image: radial-gradient(ellipse 54% 58% at 50% 46%, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .18) 60%, transparent 82%);
}
@media (max-width: 1100px) { .tn-hero::after { background-size: 48px 48px; } }
.tn-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

/* Sello PowerMe Energy · EcoFlow Partner (2 oct): el logo oficial arriba
   del titular, entre dos filetes cian que se desvanecen hacia afuera (eco
   del "Partner" en cian). El alto sale del ALTO de la pantalla (svh) para
   que en laptops bajas sigan cabiendo las dos filas del carrusel. Entra
   enfocándose (desenfoque → nítido), como los reveals del home. */
.tn-hero__marca {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(18px, 3.6svh, 34px);
}
.tn-hero__marca::before, .tn-hero__marca::after {
  content: ""; flex: none;
  width: clamp(28px, 7vw, 110px); height: 1px;
  background: linear-gradient(90deg, rgba(11, 206, 225, 0), rgba(11, 206, 225, .5));
}
.tn-hero__marca::after { transform: scaleX(-1); }
.tn-hero__marca img {
  display: block; width: auto;
  height: clamp(32px, 6.2svh, 50px);
  animation: tn-marca-entra 1s var(--ease-out) both;
}
@keyframes tn-marca-entra { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }

/* Titular en UN renglón desde tableta ("Nuestros canales de venta." ≈ 19.5em) */
.tn-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.02em;
  /* Degradado vertical sutil en el titular */
  background: linear-gradient(180deg, var(--paper) 35%, rgba(241, 241, 241, .66));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Botón secundario entre el texto y el carrusel (contorno: no compite
   con los logos). Con `.tn-hero` delante para ganarle a .tn-btn y
   .tn-btn--ghost, que se declaran más abajo con la misma especificidad
   (antes el relleno y el tamaño de letra no se aplicaban). */
.tn-hero .tn-hero__cta {
  margin-top: clamp(20px, 3.8svh, 32px);
  padding: 11px 20px 11px 22px; font-size: 14px;
}
.tn-hero__cta .tn-btn__ico { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.tn-hero__cta:hover .tn-btn__ico { transform: translateY(2px); }

/* ---------- Carrusel de logos ----------
   --logo manda todo (separación, radios, imagen) para que las
   proporciones del componente (64 / 40 / 40) se mantengan a cualquier
   tamaño. Cada logo lleva su separación como margen DERECHO (no `gap`):
   el ancho de la fila es exactamente 5 vueltas y −20 % es justo una.
   Sin backdrop-filter: son 70 piezas en movimiento. */
.tn-carr {
  --logo: clamp(60px, min(8vw, 13svh), 108px);
  position: relative; overflow: hidden;
  width: min(100%, 1920px); align-self: center;
  margin-top: clamp(28px, 5.5svh, 60px);
  padding-block: 6px 14px;  /* aire para la sombra de los logos */
}
.tn-carr::before, .tn-carr::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
  width: clamp(40px, 10vw, 200px); pointer-events: none;
}
.tn-carr::before { left: 0; background: linear-gradient(90deg, var(--void), rgba(6, 6, 6, 0)); }
.tn-carr::after { right: 0; background: linear-gradient(270deg, var(--void), rgba(6, 6, 6, 0)); }
.tn-carr__fila {
  display: flex; width: max-content;
  animation: tn-carr-izq 26s linear infinite;
  will-change: transform;
}
.tn-carr__fila + .tn-carr__fila { margin-top: calc(var(--logo) * .3); }
.tn-carr__fila--der { animation-name: tn-carr-der; }
@keyframes tn-carr-izq { from { transform: translateX(0); } to { transform: translateX(-20%); } }
@keyframes tn-carr-der { from { transform: translateX(-20%); } to { transform: translateX(0); } }

/* Cuadro del logo: 64 / 40 / radio 22 / imagen 10 del componente,
   escalados. Radios concéntricos: .34 − .1875 de relleno = .155 */
.tn-logo {
  flex: none; display: grid; place-items: center;
  width: var(--logo); height: var(--logo); margin-right: calc(var(--logo) * .5);
  border-radius: calc(var(--logo) * .34);
  background: #16181a;
  border: 1px solid rgba(241, 241, 241, .1);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tn-logo img {
  width: calc(var(--logo) * .625); height: calc(var(--logo) * .625);
  border-radius: calc(var(--logo) * .155);
  background: var(--bg, #fff);
  object-fit: cover;
}

@media (max-width: 760px) {
  .tn-hero { min-height: 0; padding: calc(var(--nav-h) + 36px) 0 40px; }
  .tn-hero::after {
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 82% 54% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .18) 60%, transparent 82%);
            mask-image: radial-gradient(ellipse 82% 54% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .18) 60%, transparent 82%);
  }
  /* "Nuestros canales" mide 12.03em en ABChanel: el tamaño sale del ancho
     real del bloque (cqi, no vw: vw incluye la barra de scroll); "de venta."
     baja sola al segundo renglón */
  .tn-hero__inner { container-type: inline-size; }
  .tn-hero__marca { gap: 12px; margin-bottom: 20px; }
  .tn-hero__marca::before, .tn-hero__marca::after { width: 24px; }
  .tn-hero__marca img { height: 30px; }
  .tn-hero h1 { font-size: min(30px, calc(100cqi / 12.2)); }
  .tn-carr { --logo: 56px; margin-top: 32px; }
  .tn-carr::before, .tn-carr::after { width: 40px; }
  .tn-hero .tn-hero__cta { margin-top: 24px; }
}

/* Botones */
.tn-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 22px; border-radius: 999px;
  background: var(--cyan); color: var(--ink);
  font-size: 14.5px; font-weight: 600;
  transition: background .25s ease, transform .16s ease;
}
.tn-btn__circ {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--cyan);
}
.tn-btn__circ svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.tn-btn--ghost {
  padding: 13px 22px; gap: 10px;
  background: transparent; color: var(--paper);
  border: 1px solid var(--line-d);
}
.tn-btn--ghost:hover { background: rgba(241, 241, 241, .07); border-color: rgba(241, 241, 241, .32); }
.tn-btn--ghost:active { transform: scale(.97); }
.tn-btn__ico { width: 19px; height: 19px; color: var(--cyan); }

/* ============================================================
   DIRECTORIO
   Sin barra de filtros (se quitó el 2 oct): los tres grupos siempre
   visibles. Ritmo: 48–80 px del hero al primer grupo, 80 + 64 px entre grupos
   (con filete editorial), ~28 px del título a las tarjetas.
   ============================================================ */
/* scroll-margin: el botón del hero (#directorio) y las anclas de cada
   grupo (#marketplaces…) aterrizan bajo la barra fija */
.tn-grupos { padding-block: clamp(48px, 6vw, 80px) clamp(56px, 6vw, 80px); scroll-margin-top: var(--nav-h); }
.tn-grupo { scroll-margin-top: var(--nav-h); }
.tn-grupo + .tn-grupo {
  margin-top: clamp(56px, 6vw, 80px);
  padding-top: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--line-d);
}
.tn-grupo__head { margin-bottom: clamp(22px, 2.4vw, 30px); }
.tn-grupo__kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: rgba(241, 241, 241, .48);
}
.tn-grupo__num { color: var(--cyan); }
.tn-grupo__kicker i { flex: none; width: 32px; height: 1px; background: rgba(241, 241, 241, .22); }
.tn-grupo h2 {
  margin-top: clamp(12px, 1.4vw, 16px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.1vw, 42px); line-height: 1.02; letter-spacing: -.018em;
  text-wrap: balance;
}

.tn-grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) { .tn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarjeta: placa blanca con el logo a color. Radios CONCÉNTRICOS:
   placa = tarjeta - relleno (24 - 12 = 12) */
.tn-card {
  display: flex; flex-direction: column;
  padding: 12px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line-d);
  transition: border-color .3s ease, background .3s ease, transform .35s var(--ease-out);
}
.tn-card__plate {
  display: grid; place-items: center;
  height: 104px; padding: 18px 24px;
  border-radius: 12px;
  background: #fff;
}
.tn-card__plate img {
  max-width: var(--lw, 74%); max-height: var(--lh, 40px);
  width: auto; height: auto; object-fit: contain;
  transition: transform .4s var(--ease-out);
}
.tn-card__txt { display: grid; gap: 4px; margin-top: 18px; padding-inline: 8px; }
.tn-card__txt b { font-size: 16.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.tn-card__txt span { font-size: 13.5px; line-height: 1.45; color: var(--muted-d); }
.tn-card__cta {
  margin-top: auto; padding: 22px 8px 6px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: rgba(241, 241, 241, .82);
  transition: color .25s ease;
}
.tn-card__cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }

@media (hover: hover) {
  .tn-card:hover { border-color: rgba(11, 206, 225, .45); background: var(--card-h); transform: translateY(-3px); }
  .tn-card:hover .tn-card__plate img { transform: scale(1.05); }
  .tn-card:hover .tn-card__cta { color: var(--cyan); }
  .tn-card:hover .tn-card__cta svg { transform: translate(2px, -2px); }
}
.tn-card:active { transform: scale(.985); }

/* Celular: lista con botón por fila (Integrations 02 de 21st.dev).
   Radios concéntricos también aquí: 18 - 8 = 10 */
@media (max-width: 760px) {
  .tn-grupos { padding-top: 32px; }
  .tn-grupo + .tn-grupo { margin-top: 48px; padding-top: 40px; }
  .tn-grupo__head { margin-bottom: 20px; }
  .tn-grid { grid-template-columns: 1fr; gap: 10px; }
  .tn-card { flex-direction: row; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 18px; }
  .tn-card__plate { flex: none; width: 108px; height: 62px; padding: 10px 14px; border-radius: 10px; }
  .tn-card__plate img { max-height: calc(var(--lh, 40px) * .7); max-width: 86%; }
  .tn-card__txt { flex: 1; min-width: 0; margin: 0; padding: 0; gap: 2px; }
  .tn-card__txt b { font-size: 15.5px; }
  .tn-card__txt span { font-size: 13px; }
  .tn-card__cta {
    margin: 0; padding: 0; flex: none;
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line-d); color: var(--cyan);
  }
  .tn-card__ctatxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Entrada en cascada al cargar y cada vez que cambia el filtro */
.tn-grupo.is-entrando .tn-card { animation: tn-entra .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.tn-grupo.is-entrando .tn-grupo__head { animation: tn-entra .5s var(--ease-out) both; }
@keyframes tn-entra {
  from { opacity: 0; transform: translateY(12px); }
}

/* ============================================================
   TIENDA OFICIAL — cierre minimalista
   Una línea editorial entre filetes: pregunta en gris, el dominio
   grande en ABChanel y una flecha en círculo. Toda la fila es el
   enlace. "ecoflow.powerme.mx" mide 14.49em: el tamaño sale del ancho
   real del renglón (cqi) para que nunca se desborde ni se parta.
   ============================================================ */
.tn-ofi {
  padding-block: clamp(44px, 5vw, 64px) clamp(88px, 10vw, 128px);
  /* Filete al ancho del CONTENIDO, como los de entre grupos (un border-top
     en .tn-wrap abarcaba también su relleno lateral y quedaba más largo) */
  background: linear-gradient(var(--line-d), var(--line-d)) center top / calc(100% - 2 * var(--pad)) 1px no-repeat;
}
.tn-ofi__link {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "pre flecha" "url flecha";
  column-gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(22px, 2.4vw, 30px);
}
.tn-ofi__pre { grid-area: pre; font-size: clamp(14px, 1.2vw, 15.5px); color: var(--muted-d); }
/* El h2 es el contenedor (su ancho lo da la columna de la rejilla) y el
   texto vive en el span: cqi se mide contra el contenedor PADRE */
.tn-ofi__url { grid-area: url; container-type: inline-size; margin-top: 10px; line-height: 1; }
.tn-ofi__url span {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: min(56px, calc(100cqi / 14.6));
  letter-spacing: -.02em; white-space: nowrap;
  transition: color .3s ease;
}
.tn-ofi__flecha {
  grid-area: flecha;
  display: grid; place-items: center;
  width: clamp(48px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-d); color: var(--paper);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.tn-ofi__flecha svg { width: 42%; height: 42%; transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .tn-ofi__link:hover .tn-ofi__url span { color: var(--cyan); }
  .tn-ofi__link:hover .tn-ofi__flecha { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
  .tn-ofi__link:hover .tn-ofi__flecha svg { transform: translate(2px, -2px); }
}
.tn-ofi__link:active .tn-ofi__flecha { transform: scale(.95); }
/* Celular: la flecha sube junto a la pregunta y el dominio usa todo el ancho */
@media (max-width: 760px) {
  .tn-ofi__link { grid-template-areas: "pre flecha" "url url"; row-gap: 4px; }
  .tn-ofi__flecha { width: 42px; }
}

/* ============================================================
   CONFIANZA + ASESORÍA
   ============================================================ */
.tn-confianza { padding-block: clamp(64px, 8vw, 104px); border-top: 1px solid var(--line-d); }
.tn-confianza__grid {
  margin-top: clamp(28px, 3.4vw, 40px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.tn-punto svg { width: 30px; height: 30px; color: var(--cyan); }
.tn-punto h3 { margin-top: 18px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.tn-punto p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted-d); max-width: 32ch; }

.tn-ayuda {
  margin-top: clamp(48px, 6vw, 72px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 40px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line-d);
}
.tn-ayuda h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.01em;
}
.tn-ayuda p { margin-top: 8px; font-size: 15px; color: var(--muted-d); }

@media (max-width: 760px) {
  .tn-confianza__grid { grid-template-columns: 1fr; gap: 28px; }
  .tn-punto { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; }
  .tn-punto svg { grid-row: span 2; }
  .tn-punto h3 { margin-top: 2px; }
  .tn-ayuda .tn-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FOOTER (copia de .hv-footer del home)
   ============================================================ */
.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); }
.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); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tn-carr__fila, .tn-hero__marca img, .tn-grupo.is-entrando .tn-card, .tn-grupo.is-entrando .tn-grupo__head { animation: none; }
  .tn-card, .tn-ofi__flecha, .tn-ofi__flecha svg { transition: none; }
}