/* ============================================================
   PowerMe Energy — Landing corporativa (powerme.mx)
   Hero claro (ref. fintech) → secciones oscuras (ref. AWE)
   ============================================================ */

/* ---------- Fuentes de marca (locales) ---------- */
@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 ---------- */
:root {
  --ink: #0C0C0C;
  --ink-2: #131311;
  --paper: #F1F1F1;
  --bg-light: #E9EAE4;
  --sheet: #F5F5F1;
  --cyan: #0BCEE1;
  --cyan-text: #078D9D;      /* cian legible en fondo claro */
  --hyper: #E1FE01;
  --atess: #E23D2E;
  --line-d: rgba(241, 241, 241, 0.14);
  --line-l: rgba(12, 12, 12, 0.14);
  --muted-d: rgba(241, 241, 241, 0.6);
  --muted-l: rgba(12, 12, 12, 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);
  --ease-inout: cubic-bezier(0.77, 0, 0.18, 1);
  --radius-lg: clamp(22px, 2.4vw, 34px);
  --container: 1360px;
  --pad: clamp(20px, 4vw, 52px);
  --nav-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--ink); /* overscroll inferior oscuro */
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg-light);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--cyan); color: var(--ink); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* La fuente DEMO de Commuters trae glifos sustituidos en símbolos (+ % / · © ®):
   los envolvemos en .glyph para usar una fuente del sistema */
.glyph { font-family: 'Segoe UI', Arial, sans-serif; }

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

/* Grano sutil global */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 9px 9px 9px 26px;
  transition: transform 0.35s var(--ease-out), background-color 0.35s, color 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }

.btn__circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.45s var(--ease-out);
}
.btn__circle svg { width: 19px; height: 19px; }
.btn:hover .btn__circle { transform: rotate(-38deg); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink .btn__circle { background: var(--cyan); color: var(--ink); }

.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--cyan .btn__circle { background: var(--ink); color: var(--cyan); }
.btn--cyan:hover { background: #23dced; }

.btn--ghost { border: 1px solid var(--line-d); color: var(--paper); }
.btn--ghost .btn__circle { border: 1px solid var(--line-d); }
.btn--ghost:hover { border-color: rgba(241, 241, 241, 0.4); }

/* Contorno para FONDO CLARO (--ghost es para fondo oscuro). El CTA del hero era
   una segunda píldora negra idéntica a la del nav, en la misma pantalla: así la
   jerarquía queda clara — el nav (Contáctanos, la conversión) se queda sólido y
   este, que solo lleva a explorar marcas, pesa menos. El 0.5 del borde no es
   estético: con menos alfa el contorno baja de 3:1 contra el sheet. Al hover se
   rellena a negro, que es justo el estado que antes tenía en reposo. */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(12, 12, 12, 0.5);
}
.btn--outline .btn__circle { background: var(--cyan); color: var(--ink); }
.btn--outline:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--lg { font-size: 16px; }
.btn--xl { font-size: 17px; padding-left: 32px; }
.btn--xl .btn__circle { width: 54px; height: 54px; }

[data-pending] { position: relative; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.45s, backdrop-filter 0.45s;
}
.nav__inner {
  max-width: calc(var(--container) + 40px);
  margin-inline: auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo img { height: 30px; width: auto; }
.nav__logo-light { display: none; }

.nav__links {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  font-size: 14.5px;
  font-weight: 600;
}
.nav__links a {
  position: relative;
  padding-block: 6px;
  opacity: 0.82;
  transition: opacity 0.3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--cyan);
  transition: right 0.4s var(--ease-out);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { right: 0; }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__cta { padding: 6px 6px 6px 20px; font-size: 14px; }
.nav__cta .btn__circle { width: 38px; height: 38px; }
.nav__cta .btn__circle svg { width: 16px; height: 16px; }

.nav__burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-l);
  place-items: center;
  align-content: center;
  gap: 6px;
}
.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}

/* Nav con fondo al hacer scroll */
.nav.is-scrolled {
  background: rgba(233, 234, 228, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(12, 12, 12, 0.07);
}

/* Nav sobre secciones oscuras */
.nav.on-dark { color: var(--paper); }
.nav.on-dark .nav__logo-dark { display: none; }
.nav.on-dark .nav__logo-light { display: block; }
.nav.on-dark .nav__burger { border-color: var(--line-d); }
.nav.on-dark.is-scrolled {
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(241, 241, 241, 0.08);
}
.nav.on-dark .nav__cta { background: var(--paper); color: var(--ink); }
.nav.on-dark .nav__cta .btn__circle { background: var(--cyan); color: var(--ink); }

/* Menú móvil */
.nav__panel-open { overflow: hidden; }
@media (max-width: 760px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--pad);
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(34px, 9vw, 52px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  .nav.menu-open .nav__links { opacity: 1; pointer-events: auto; }
  .nav.menu-open { color: var(--paper); }
  .nav.menu-open .nav__logo-dark { display: none; }
  .nav.menu-open .nav__logo-light { display: block; }
  .nav.menu-open .nav__burger { border-color: var(--line-d); }
  .nav.menu-open .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.menu-open .nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__burger { display: grid; }
  .nav__cta { display: none; }
  .nav__logo { position: relative; z-index: 5; }
  .nav__actions { position: relative; z-index: 5; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: calc(var(--nav-h) + 12px) clamp(10px, 1.6vw, 22px) 0;
  position: relative;
}
.hero__sheet {
  position: relative;
  background: var(--sheet);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.5vw, 70px) 0 clamp(18px, 2.4vw, 34px);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(12, 12, 12, 0.35);
}
/* Ondas finas de fondo (guiño a la identidad PowerMe) */
.hero__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%230C0C0C' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M-60 90 C 260 30, 520 170, 840 96 S 1240 40, 1320 120'/%3E%3Cpath d='M-60 150 C 280 90, 540 230, 860 156 S 1250 100, 1330 180'/%3E%3Cpath d='M-60 210 C 300 150, 560 290, 880 216 S 1260 160, 1340 240'/%3E%3Cpath d='M-40 560 C 300 640, 640 500, 940 590 S 1240 660, 1340 580'/%3E%3Cpath d='M-40 620 C 320 700, 660 560, 960 650 S 1250 710, 1350 640'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
.hero__head { position: relative; }


/* El minmax de la derecha es un seguro: sin él, un renglón sin corte que no
   cupiera se comería la columna del botón y le partiría el texto en dos. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(312px, 0.82fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}

/* El titular va SIEMPRE en 3 renglones (nowrap): el tamaño está calibrado
   para que el renglón más largo ("que impulsa" ≈ 8.45em) quepa en la columna
   izquierda del grid. El tope de 88px NO es estético: arriba de ~1500px el
   container se topa en 1360px y deja de crecer, así que la tipografía tampoco
   puede. Si se cambia el copy o el reparto de columnas hay que recalcular. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 6.15vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.hero__line { display: block; white-space: nowrap; }
.hero__accent {
  font-style: normal;
  position: relative;
  display: inline-block;
  color: var(--ink);
}
.hero__scribble {
  position: absolute;
  left: -3%;
  bottom: -0.14em;
  width: 106%;
  height: 0.32em;
  overflow: visible;
}

/* ---------- Sello de marca en el último renglón ---------- */
.hero__lastrow {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 36px);
}
.hero__seal {
  --seal: clamp(56px, 8vw, 112px);
  --seal-top: 0.22em;    /* el trazo cian cuelga 0.14em del renglón de arriba */
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--seal);
  aspect-ratio: 1;
  /* Los márgenes hacen que la caja externa mida exactamente un renglón (1.02em):
     así el sello NO estira la fila y el interlineado de los 3 renglones queda
     parejo; el círculo sobresale por abajo, que es espacio libre. */
  margin-top: var(--seal-top);
  margin-bottom: calc(1.02em - var(--seal) - var(--seal-top));
}
.hero__seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: seal-spin 34s linear infinite;
}
.hero__seal-edge {
  fill: none;
  stroke: rgba(12, 12, 12, 0.18);
  stroke-width: 1;
}
.hero__seal-type {
  font-family: var(--font-body);
  font-size: 14px;           /* unidades del viewBox, no px de pantalla */
  font-weight: 600;
  letter-spacing: 1.6px;
  fill: var(--muted-l);
}
.hero__seal-sep { fill: var(--cyan-text); }
/* Disco oscuro: el isotipo de 3 barras suelto sobre fondo claro se lee como
   icono de menú. Sobre el disco lee como logo, y además deja usar el cian de
   marca (#0BCEE1 sobre claro da 1.8:1; sobre el negro da 10.2:1). */
.hero__seal-disc {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(12, 12, 12, 0.5);
}
.hero__seal-mark {
  position: relative;
  width: 32%;
  fill: var(--cyan);
}
@keyframes seal-spin { to { transform: rotate(360deg); } }

.hero__aside { padding-bottom: 0.6em; }
/* Logotipo arriba del párrafo, en lugar del antiguo kicker. Más grande que el
   del nav (30px de alto) para que se lea como firma de marca y no como una
   repetición accidental del logo de la barra. */
.hero__logo {
  width: min(100%, clamp(210px, 25vw, 360px));
  height: auto;
  margin-bottom: clamp(20px, 2vw, 30px);
}
.hero__sub {
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  color: var(--muted-l);
  max-width: 42ch;
  margin-bottom: 26px;
}

/* ---------- Tarjetas de marca (hero) ---------- */
.hero__cards {
  position: relative;
  display: flex;
  gap: clamp(10px, 1.3vw, 18px);
  height: clamp(420px, 46vw, 560px);
  margin-top: clamp(34px, 4.6vw, 64px);
}
.bcard {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: clamp(18px, 1.9vw, 26px);
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  contain: layout style paint;
  transition: flex 0.7s var(--ease-inout);
}
.bcard.is-active { flex: 3.8; }

/* Foto de fondo con zoom */
.bcard__media { position: absolute; inset: 0; z-index: -1; background: var(--ink-2); }
.bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 0.85s var(--ease-inout);
  will-change: transform;
}
.bcard.is-active .bcard__media img { transform: scale(1.03); }

/* Tinte de marca + velo para legibilidad */
.bcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.7s;
}
.bcard--ecoflow .bcard__media img { object-position: center 62%; }
.bcard--ecoflow .bcard__media::after {
  background:
    linear-gradient(205deg, rgba(11, 206, 225, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(5, 18, 22, 0.1) 0%, rgba(5, 18, 22, 0.18) 40%, rgba(5, 18, 22, 0.72) 90%);
}
.bcard--hypershell .bcard__media::after {
  background:
    linear-gradient(205deg, rgba(225, 254, 1, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(14, 16, 5, 0.42) 0%, rgba(14, 16, 5, 0.5) 40%, rgba(14, 16, 5, 0.88) 90%);
}
.bcard--atess .bcard__media::after {
  background:
    linear-gradient(205deg, rgba(226, 61, 46, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(18, 8, 6, 0.34) 0%, rgba(18, 8, 6, 0.44) 40%, rgba(18, 8, 6, 0.86) 90%);
}

.bcard__label {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 1.6vw, 24px);
  bottom: clamp(18px, 2vw, 28px);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: 0.02em;
  color: var(--paper);
  text-shadow: 0 1px 14px rgba(12, 12, 12, 0.4);
  transition: opacity 0.4s, transform 0.6s var(--ease-inout);
}
.bcard.is-active .bcard__label { opacity: 0; transform: rotate(180deg) translateY(-18px); }

.bcard__content {
  position: absolute;
  z-index: 2;
  inset: auto clamp(18px, 2.2vw, 32px) clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
  color: var(--paper);
  max-width: 640px;
}
/* Fallback sin JS: el reveal del contenido lo dirige GSAP cuando hay .js */
html:not(.js) .bcard__content > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
html:not(.js) .bcard.is-active .bcard__content > * { opacity: 1; transform: none; }

.bcard__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.bcard__logo { height: 56px; width: auto; margin-bottom: 4px; filter: drop-shadow(0 2px 14px rgba(12, 12, 12, 0.55)); }
.bcard__logo--wide { height: 42px; }
.bcard__chip {
  background: var(--paper);
  border-radius: 999px;
  padding: 9px 20px;
  display: inline-block;
  margin-bottom: 4px;
}
.bcard__chip img { height: 26px; width: auto; }

.bcard__head h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.08;
}
.bcard__head p {
  font-size: 14px;
  color: rgba(241, 241, 241, 0.8);
  max-width: 52ch;
}

/* Objetos flotantes (widget blanco + lista glass, como la referencia) */
.bcard__objects {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

.bcard__widget {
  background: rgba(246, 246, 242, 0.96);
  color: var(--ink);
  border-radius: 18px;
  padding: 13px 15px;
  width: 224px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px -18px rgba(12, 12, 12, 0.55);
}
.bcard__widget-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bcard__widget-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; }
.bcard__widget-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(11, 206, 225, 0.16);
  color: #067585;
}
.bcard__widget-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}
.bcard__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
}
.bcard__bars i {
  flex: 1;
  height: calc(var(--h) * 46px);
  background: #dcddd4;
  border-radius: 3px;
}
.bcard__bars i.hi { background: var(--cyan); }
.bcard__widget-foot { display: flex; align-items: baseline; gap: 7px; }
.bcard__widget-foot strong { font-size: 16px; font-weight: 700; }
.bcard__widget-foot span { font-size: 11px; color: var(--muted-l); }

.bcard__meter { display: flex; flex-direction: column; gap: 1px; }
.bcard__meter strong { font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
/* el "hasta" del dato del fabricante: matiz obligado, pero a 27px rompía el widget */
.bcard__meter small { font-size: 12px; font-weight: 600; color: var(--muted-l); margin-right: 5px; }
.bcard__meter span { font-size: 11px; color: var(--muted-l); }
.bcard__modes { display: flex; gap: 5px; }
.bcard__modes span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(12, 12, 12, 0.18);
  color: var(--muted-l);
}
.bcard__modes span.on { background: var(--ink); color: var(--hyper); border-color: var(--ink); }

/* Widget EcoFlow: flujo de energía estilo app (Solar → Batería → Casa) */
.bcard__widget--flow { width: 254px; }
.bcard__flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-block: 3px;
}
.bcard__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 54px;
}
.bcard__node svg { width: 20px; height: 20px; color: #55554f; margin-bottom: 4px; }
.bcard__node--core svg { color: #078d9d; }
.bcard__node strong { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.bcard__node span { font-size: 10px; letter-spacing: 0.03em; color: var(--muted-l); }
.bcard__stream { display: flex; gap: 3px; flex: none; padding-bottom: 16px; }
.bcard__stream i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.25;
  animation: stream-pulse 1.3s ease-in-out infinite;
}
.bcard__stream i:nth-child(2) { animation-delay: 0.18s; }
.bcard__stream i:nth-child(3) { animation-delay: 0.36s; }
@keyframes stream-pulse {
  0%, 100% { opacity: 0.2; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2.5px); }
}

/* Acentos del widget por marca */
.bcard--hypershell .bcard__widget-chip { background: rgba(225, 254, 1, 0.32); color: #55600a; }
.bcard--hypershell .bcard__widget-chip i { background: #b8cf05; }
.bcard--atess .bcard__widget-chip { background: rgba(226, 61, 46, 0.14); color: #ab2519; }
.bcard--atess .bcard__widget-chip i { background: var(--atess); }
.bcard--atess .bcard__bars i.hi { background: var(--atess); }

.bcard__glass {
  align-self: stretch;
  min-width: 218px;
  flex: 1;
  max-width: 260px;
  border-radius: 18px;
  background: rgba(30, 30, 30, 0.38);
  border: 1px solid rgba(241, 241, 241, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bcard__glass li {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 8px 0;
}
.bcard__glass li + li { border-top: 1px solid rgba(241, 241, 241, 0.16); }
/* Antes era un punto de 8px con aro luminoso. El bullet-con-glow es justo el
   detalle que hace que una lista se lea como generada: una regla vertical fina
   en el color de la marca cumple la misma función (identifica la tarjeta) pero
   se lee como ficha técnica. El margen vertical es a propósito: separa la regla
   de los hairlines de arriba y abajo, y eso es lo que la hace ver dibujada. */
.bcard__glass .gdot {
  width: 2px;
  flex: none;
  margin-block: 2px;
  border-radius: 2px;
  background: var(--cyan);
}
.bcard--hypershell .bcard__glass .gdot { background: var(--hyper); }
.bcard--atess .bcard__glass .gdot { background: var(--atess); }
.bcard__glass strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.bcard__glass em { display: block; font-style: normal; font-size: 11px; color: rgba(241, 241, 241, 0.66); }

.bcard__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-out), background-color 0.3s;
}
.bcard__pill svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease-out); }
.bcard__pill:hover { background: #fff; transform: translateY(-2px); }
.bcard__pill:hover svg { transform: translate(2px, -2px); }

.bcard__go {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 1.8vw, 26px);
  bottom: clamp(16px, 1.8vw, 26px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: var(--paper);
  transition: background-color 0.3s, color 0.3s;
}
.bcard__go svg { width: 20px; height: 20px; }
.bcard__go:hover { background: var(--cyan); color: var(--ink); }
html:not(.js) .bcard__go { opacity: 0; transform: scale(0.6); transition: opacity 0.45s, transform 0.45s var(--ease-out); }
html:not(.js) .bcard.is-active .bcard__go { opacity: 1; transform: scale(1); transition-delay: 0.55s; }

/* ============================================================
   SECCIONES OSCURAS — base
   ============================================================ */
.section-dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  padding-block: clamp(90px, 11vw, 150px);
}
main { position: relative; }

/* La primera sección oscura redondea la transición desde el hero claro */
.about {
  margin-top: clamp(26px, 3vw, 44px);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 54px);
}
.section-kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.section-kicker::before { content: none; }
.section-head::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.7;
}
.section-num {
  position: absolute;
  top: clamp(40px, 5vw, 70px);
  right: var(--pad);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(70px, 10vw, 150px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 241, 0.16);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   QUIÉNES SOMOS
   ============================================================ */
/* Estilo hero de AWE: statement centrado + trail de imágenes al mover el mouse */
.about .container { position: relative; z-index: 2; }
.about .section-head { justify-content: center; }
.about .section-head::before { content: none; }
.about .section-num { display: none; }

.about__mark {
  display: block;
  margin: 0 auto clamp(18px, 2.2vw, 28px);
  height: clamp(28px, 3vw, 38px);
  width: auto;
}
.about__statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(33px, 4.9vw, 74px);
  line-height: 1.06;
  max-width: 17ch;
  margin-inline: auto;
  text-align: center;
}
.about__paras {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 56ch;
  margin: clamp(30px, 3.8vw, 52px) auto 0;
  text-align: center;
  color: var(--muted-d);
  font-size: clamp(15.5px, 1.25vw, 17.5px);
}
.about__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* Capa del image trail (casos de uso) */
.trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.trail img {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 12vw, 160px);
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  /* el will-change lo pone el JS solo mientras la tarjeta está viva: con 30 nodos
     permanentemente promovidos a capa el compositor se atraganta */
  will-change: auto;
}

/* ============================================================
   NUESTRAS MARCAS — franja de confianza + columnas
   ============================================================ */
.brands { padding-bottom: 0; }

/* ---------- Franja de confianza (celdas altas con hairlines, patrón stats de AWE) ---------- */
.proof {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  border-block: 1px solid var(--line-d);
  margin-bottom: clamp(90px, 12vw, 170px);
}
.proof__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(380px, 60vh, 560px);
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 38px) clamp(24px, 2.6vw, 36px);
  transition: background-color 0.35s;
}
.proof__cell:hover { background: var(--ink-2); }
.proof__cell + .proof__cell { border-left: 1px solid var(--line-d); }

.proof__title {
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.proof__para {
  color: var(--muted-d);
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.55;
  max-width: 36ch;
}
.proof__list {
  list-style: none;
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proof__list li {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-d);
  line-height: 1.5;
}
.proof__list li::before { content: '—  '; white-space: pre; }

.proof__big {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 8.2vw, 124px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: -0.04em 0 16px;
  transition: color 0.35s;
}
.proof__big .glyph {
  font-size: 0.5em;
  font-weight: 300;
  line-height: 1;
  vertical-align: 0.5em;
  margin-left: 0.05em;
}
.proof__cell--atess:hover .proof__big { color: var(--atess); }
.proof__cell--hyper:hover .proof__big { color: var(--hyper); }
.proof__cap {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-d);
  line-height: 1.65;
  max-width: 30ch;
}

@media (max-width: 1000px) {
  .proof { grid-template-columns: 1fr; }
  .proof__cell { min-height: 0; padding-block: 26px 28px; }
  .proof__cell + .proof__cell { border-left: 0; border-top: 1px solid var(--line-d); }
  .proof__big { font-size: clamp(56px, 15vw, 96px); margin-bottom: 10px; }
  .proof__list, .proof__cap { padding-top: 18px; }
}

/* Intro centrado estilo AWE (título display gigante) */
.brands .section-head { justify-content: center; }
.brands .section-head::before { content: none; }
.brands .section-num { display: none; }
.brands__intro {
  text-align: center;
  margin-bottom: clamp(60px, 9vw, 130px);
}
.brands__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(33px, 5.2vw, 76px);
  line-height: 1.04;
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.brands__copy {
  color: var(--muted-d);
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  max-width: 52ch;
  margin-inline: auto;
}

/* Columnas altas y aireadas, cubren el intro fijo al hacer scroll */
.brands__columns {
  display: flex;
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  min-height: clamp(580px, 88vh, 800px);
  background: var(--ink);
  position: relative;
  z-index: 2;
}
.bcol {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line-d);
  display: flex;
  flex-direction: column;
  transition: flex 0.9s var(--ease-inout), background-color 0.5s;
}
.bcol:first-child { border-left: 1px solid var(--line-d); }
.bcol:hover { background: rgba(241, 241, 241, 0.02); }
.bcol.is-open { flex: 3.2; }

.bcol__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2.4vw, 30px);
  cursor: pointer;
}
.bcol__num {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-d);
  white-space: nowrap;
  transition: color 0.4s;
}
.bcol.is-open .bcol__num { color: var(--cyan); }
.bcol__plus {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.5s var(--ease-out);
}
.bcol__plus::before, .bcol__plus::after {
  content: "";
  position: absolute;
  background: var(--paper);
  opacity: 0.75;
}
.bcol__plus::before { inset: 50% 0 auto 0; height: 1.6px; transform: translateY(-50%); }
.bcol__plus::after { inset: 0 auto 0 50%; width: 1.6px; transform: translateX(-50%); }
.bcol.is-open .bcol__plus { transform: rotate(45deg); }

.bcol__vertical {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 3.6vw, 48px);
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: clamp(19px, 2vw, 30px);
  letter-spacing: 0.01em;
  color: var(--paper);
  opacity: 0.8;
  white-space: nowrap;
  transition: opacity 0.4s;
  pointer-events: none;
}
.bcol.is-open .bcol__vertical { opacity: 0; }

.bcol__body {
  flex: 1;
  width: 100%;
  padding: clamp(18px, 2.2vw, 34px) clamp(18px, 2.6vw, 38px) clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 660px;
  min-width: clamp(280px, 38vw, 560px);
}
.bcol__body > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.bcol.is-open .bcol__body > * { opacity: 1; transform: none; }
.bcol.is-open .bcol__body > *:nth-child(1) { transition-delay: 0.3s; }
.bcol.is-open .bcol__body > *:nth-child(2) { transition-delay: 0.38s; }
.bcol.is-open .bcol__body > *:nth-child(3) { transition-delay: 0.46s; }
.bcol.is-open .bcol__body > *:nth-child(4) { transition-delay: 0.54s; }
.bcol.is-open .bcol__body > *:nth-child(5) { transition-delay: 0.62s; }

.bcol__logo { height: 42px; width: auto; }
.bcol__logo--wide { height: 44px; }
.bcol__chip { background: var(--paper); border-radius: 999px; padding: 10px 22px; display: inline-block; }
.bcol__chip img { height: 28px; width: auto; }

/* Marca que resuelve el caso */
.bcol__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-d);
  margin-bottom: -6px;
}
.bcol__brand::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--cyan);
}
.bcol[data-brand="hypershell"] .bcol__brand::before { background: var(--hyper); }
.bcol[data-brand="atess"] .bcol__brand::before { background: var(--atess); }

/* Título blanco + lead gris del mismo peso, como los módulos de AWE */
.bcol__body h3 {
  font-weight: 600;
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.28;
  letter-spacing: 0.005em;
  max-width: 22ch;
}
.bcol__lead {
  color: var(--muted-d);
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 600;
  line-height: 1.32;
  max-width: 26ch;
  margin-bottom: auto;
}

/* Lista numerada con hairlines (como las filas Agent/Event Registry de AWE) */
.bcol__items { width: 100%; list-style: none; }
.bcol__items li {
  display: grid;
  grid-template-columns: 24px minmax(108px, 0.85fr) 1.35fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 11px;
  border-top: 1px solid var(--line-d);
}
.bcol__items li:last-child { border-bottom: 1px solid var(--line-d); }
.bcol__items .it-num { font-size: 11px; font-weight: 600; color: var(--muted-d); }
.bcol__items .it-name { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.bcol__items .it-desc { font-size: 12.5px; color: var(--muted-d); line-height: 1.45; }

/* Acento por marca: solo un punto sutil junto al número de la columna abierta */
.bcol__num::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--cyan);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.bcol.is-open .bcol__num::before { opacity: 1; transform: none; }
.bcol[data-brand="hypershell"] .bcol__num::before { background: var(--hyper); }
.bcol[data-brand="atess"] .bcol__num::before { background: var(--atess); }

/* ============================================================
   MARCAS DESTACADAS — slider numerado estilo AWE
   ============================================================ */
.mslider {
  position: relative;
  overflow: hidden;
  padding-block: clamp(110px, 14vw, 190px) clamp(90px, 11vw, 150px);
}

/* Logo PowerMe wireframe de fondo (como el logo outline de AWE) */
.mslider__ghost {
  position: absolute;
  top: clamp(14px, 2.2vw, 40px);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 1150px);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.mslider__inner { position: relative; z-index: 1; }

/* Deck: una tarjeta grande al frente y las demás asomando arriba (geometría de AWE:
   top/left/width/height animados con transición, sin transform) */
.mslider__deck {
  position: relative;
  width: min(100%, 780px);
  margin-inline: auto;
  aspect-ratio: 2 / 1;
  min-height: 320px;
}
.mcard {
  position: absolute;
  display: grid;
  grid-template-columns: 44fr 56fr;
  background: linear-gradient(100deg, #141417, #1d2024);
  border: 1px solid rgba(241, 241, 241, 0.06);
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  transition: top 0.7s var(--ease-inout), left 0.7s var(--ease-inout), width 0.7s var(--ease-inout), height 0.7s var(--ease-inout), filter 0.7s var(--ease-inout);
}
/* Las de atrás se oscurecen (profundidad): promover una tarjeta se siente
   como traerla a la luz. brightness/saturate se transicionan junto con la
   geometría. */
.mcard[data-pos="0"] { top: 40px; left: 0; width: 100%; height: calc(100% - 40px); z-index: 3; }
.mcard[data-pos="1"] { top: 20px; left: 5%; width: 90%; height: calc((100% - 40px) * 0.9); z-index: 2; filter: brightness(0.68) saturate(0.88); }
.mcard[data-pos="2"] { top: 0; left: 10%; width: 80%; height: calc((100% - 40px) * 0.8); z-index: 1; filter: brightness(0.48) saturate(0.78); }

.mcard__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 1.9vw, 26px) clamp(16px, 1.8vw, 24px);
}
.mcard__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 7.5vw, 110px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--paper);
  opacity: 0.2;
  user-select: none;
}
.mcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.mcard__body h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.08;
  max-width: 18ch;
}
.mcard__body p {
  color: var(--muted-d);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.5;
  max-width: 42ch;
}
.mcard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid rgba(241, 241, 241, 0.4);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.mcard__link svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-out); }
.mcard__link:hover { color: var(--cyan); border-color: var(--cyan); }
.mcard__link:hover svg { transform: translate(3px, -3px); }

/* Coreografía del contenido: solo la tarjeta del frente muestra su texto.
   Al salir del frente se oculta al instante (sin delay) y al promover entra
   en cascada — los delays solo viven bajo [data-pos="0"], así la ida y la
   vuelta no comparten timing. La foto queda siempre visible: es lo que asoma
   de las tarjetas de atrás. */
.mcard__num,
.mcard__body > * {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.mcard:not([data-pos="0"]) .mcard__num { opacity: 0; }
.mcard:not([data-pos="0"]) .mcard__body > * { opacity: 0; transform: translateY(12px); }
.mcard[data-pos="0"] .mcard__num { transition-delay: 0.2s; }
.mcard[data-pos="0"] .mcard__body > :nth-child(1) { transition-delay: 0.26s; }
.mcard[data-pos="0"] .mcard__body > :nth-child(2) { transition-delay: 0.33s; }
.mcard[data-pos="0"] .mcard__body > :nth-child(3) { transition-delay: 0.4s; }

/* Imagen inset con esquinas redondeadas, como la tarjeta de AWE */
.mcard__media {
  position: relative;
  margin: clamp(8px, 1vw, 12px);
  border-radius: clamp(9px, 1vw, 12px);
  overflow: hidden;
}
.mcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Flechas delgadas en los extremos (como AWE, sin círculo) */
.mslider__arrow {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 5;
  width: clamp(36px, 3.4vw, 52px);
  height: 34px;
  border: 0;
  background: none;
  color: rgba(241, 241, 241, 0.45);
  display: grid;
  place-items: center;
  transition: color 0.3s, transform 0.3s var(--ease-out);
}
.mslider__arrow svg { width: 100%; height: auto; transition: transform 0.16s var(--ease-out); }
/* feedback de presión en la flecha (el transform del hover vive en el botón,
   el del press en el svg: no se pisan) */
.mslider__arrow:active svg { transform: scale(0.86); }
.mslider__arrow:hover { color: var(--paper); }
.mslider__arrow--prev { left: clamp(14px, 3vw, 56px); }
.mslider__arrow--next { right: clamp(14px, 3vw, 56px); }
.mslider__arrow--prev:hover { transform: translateY(-50%) translateX(-4px); }
.mslider__arrow--next:hover { transform: translateY(-50%) translateX(4px); }

@media (max-width: 900px) {
  .mslider__deck { aspect-ratio: auto; height: clamp(430px, 110vw, 480px); min-height: 0; }
  .mcard { grid-template-columns: 1fr; grid-template-rows: 44% 1fr; }
  .mcard[data-pos="0"] { top: 32px; height: calc(100% - 32px); }
  .mcard[data-pos="1"] { top: 16px; left: 4%; width: 92%; height: calc((100% - 32px) * 0.92); }
  .mcard[data-pos="2"] { top: 0; left: 8%; width: 84%; height: calc((100% - 32px) * 0.84); }
  .mcard__media { order: -1; margin-bottom: 0; }
  .mcard__content { padding: 16px; }
  .mcard__num { font-size: 44px; opacity: 0.18; }
  .mcard__body h3 { font-size: 18px; max-width: none; }
  .mcard__body p { font-size: 13px; max-width: none; }
  .mslider__arrow { top: auto; bottom: 28px; transform: none; }
  .mslider__arrow--prev { left: calc(50% - 70px); }
  .mslider__arrow--next { right: calc(50% - 70px); }
  .mslider__arrow--prev:hover { transform: translateX(-4px); }
  .mslider__arrow--next:hover { transform: translateX(4px); }
  .mslider { padding-bottom: 130px; }
}

/* ============================================================
   PROCESO — steps con pin
   ============================================================ */
.steps { padding-block: 0; }
.steps__pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 9vw, 120px);
}
.steps__pin > .container { width: 100%; }

.steps__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(36px, 5vw, 70px);
}
.steps__top .section-head { margin-bottom: 0; }

.steps__indicator {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.steps__ind-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-d);
  margin-right: 6px;
}
.steps__ind-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  color: var(--paper);
  opacity: 0.22;
  transition: opacity 0.4s, color 0.4s;
}
.steps__ind-num.is-active { opacity: 1; color: var(--cyan); }

.steps__stage { position: relative; min-height: clamp(380px, 52vh, 520px); }
.steps__panels { position: absolute; inset: 0; }

.step-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.step-panel.is-active { opacity: 1; visibility: visible; }

.step-panel__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.step-panel__text p {
  color: var(--muted-d);
  font-size: clamp(15.5px, 1.25vw, 17.5px);
  max-width: 48ch;
}

.step-panel__visual {
  position: relative;
  height: 100%;
  min-height: 340px;
  border-radius: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-d);
}
.step-panel__visual--a { background: radial-gradient(120% 130% at 20% 10%, rgba(11, 206, 225, 0.28), transparent 55%), radial-gradient(120% 130% at 85% 90%, rgba(11, 206, 225, 0.12), transparent 60%), var(--ink-2); }
.step-panel__visual--b { background: radial-gradient(120% 130% at 80% 12%, rgba(11, 206, 225, 0.22), transparent 55%), radial-gradient(130% 130% at 15% 88%, rgba(225, 254, 1, 0.08), transparent 60%), var(--ink-2); }
.step-panel__visual--c { background: radial-gradient(130% 140% at 50% 0%, rgba(11, 206, 225, 0.3), transparent 58%), radial-gradient(120% 130% at 88% 90%, rgba(226, 61, 46, 0.1), transparent 60%), var(--ink-2); }

.step-ghost {
  position: absolute;
  right: 4%;
  bottom: -6%;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(160px, 20vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 241, 0.14);
  user-select: none;
}
.step-art { text-align: center; padding: 30px; }
.step-art svg { width: 52px; height: 52px; margin-inline: auto; color: var(--cyan); margin-bottom: 18px; }
.step-art p { font-weight: 600; font-size: 16.5px; line-height: 1.5; }
.step-art small { font-weight: 400; font-size: 13.5px; color: var(--muted-d); }

/* Fallback sin pin (móvil / reduced motion) */
.steps.no-pin .steps__pin { min-height: 0; }
.steps.no-pin .steps__stage { min-height: 0; }
.steps.no-pin .steps__panels { position: static; }
.steps.no-pin .step-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  margin-bottom: clamp(50px, 8vw, 90px);
}
.steps.no-pin .steps__indicator { display: none; }

/* ============================================================
   GALERÍA — equipo en eventos (mosaico completo, sin recortes)
   ============================================================ */
.gallery {
  /* curvas propias: las de CSS son demasiado flojas para que se sienta intencional */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  padding-block: clamp(74px, 9vw, 120px) clamp(84px, 10vw, 140px);
}
.gallery__inner { width: 100%; }
.gallery__head { margin-bottom: clamp(30px, 3.4vw, 52px); }
.gallery__head .section-head { margin-bottom: clamp(12px, 1.4vw, 20px); }
.gallery__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--paper);
}

/* Móvil (base): mosaico estático en 2 columnas */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}
.gallery__col { display: contents; }

.gcard {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #141414;
  border: 1px solid rgba(241, 241, 241, 0.07);
  transition:
    transform 260ms var(--ease-out),
    border-color 260ms ease,
    box-shadow 260ms ease;
}
.gcard--wide { aspect-ratio: 4 / 3; }
.gcard--tall { aspect-ratio: 3 / 5; }
.gcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* el 1.02 evita bordes de subpíxel al asentarse la foto */
  transform: scale(1.02);
  /* apenas atenuada: unifica exposiciones distintas sin apagar el mosaico. El
     hover ahora oscurece (velo para leer), así que el reposo debe verse vivo. */
  filter: saturate(0.96) brightness(0.93);
  transition:
    transform 340ms var(--ease-out),
    filter 300ms ease;
}
/* Velo de hover: cubre TODA la foto, no solo la base. En las tarjetas anchas el
   texto sube más arriba que un degradado inferior, y sobre fotos claras (tienda,
   showroom) el texto blanco se perdía. Solo se anima la opacidad. */
.gcard::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 6, 6, 0.86) 0%, rgba(6, 6, 6, 0.78) 45%, rgba(6, 6, 6, 0.62) 85%, rgba(6, 6, 6, 0.55) 100%);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
/* Punto cian: pista de que la foto tiene contexto al pasar el cursor */
.gcard::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(11, 206, 225, 0.14);
  opacity: 0.45;
  transform: scale(0.9);
  transition:
    opacity 240ms ease,
    transform 240ms var(--ease-out);
}
/* Velo de reposo (siempre presente): asienta la base de la foto y da contraste
   a la etiqueta en táctil, donde no hay hover */
.gcard__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(15px, 1.5vw, 22px);
  background: linear-gradient(0deg, rgba(6, 6, 6, 0.72) 0%, rgba(6, 6, 6, 0.36) 38%, rgba(6, 6, 6, 0) 68%);
}
.gcard__label,
.gcard__desc {
  opacity: 0;
  transform: translateY(12px);
  /* red de seguridad contra reflejos claros puntuales de la foto */
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition:
    opacity 200ms ease,
    transform 300ms var(--ease-out);
}
.gcard__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e6e6e6;
}
/* Hairline cian que crece bajo la etiqueta (scaleX, no width) */
.gcard__label::before {
  content: '';
  display: block;
  width: 38px;
  height: 2px;
  margin-bottom: 12px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out) 80ms;
}
.gcard__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper);
  max-width: 34ch;
}

/* Hover solo con puntero fino: en táctil el "hover" se queda pegado al tocar */
@media (hover: hover) and (pointer: fine) {
  .gcard:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 206, 225, 0.3);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5);
  }
  .gcard:hover img {
    transform: scale(1.07);
    /* algo más de brillo/color para que la foto no se apague bajo el velo */
    filter: saturate(1.08) brightness(1.12);
  }
  .gcard:hover::after { opacity: 1; }
  .gcard:hover::before {
    opacity: 1;
    transform: scale(1);
  }
  .gcard:hover .gcard__label,
  .gcard:focus-within .gcard__label {
    opacity: 1;
    transform: none;
    transition-delay: 40ms;
  }
  .gcard:hover .gcard__desc,
  .gcard:focus-within .gcard__desc {
    opacity: 1;
    transform: none;
    transition-delay: 100ms;
  }
  .gcard:hover .gcard__label::before { transform: scaleX(1); }
}

/* Sin hover (táctil): etiqueta siempre visible, descripción oculta */
@media (hover: none) {
  /* medio velo permanente: la etiqueta se lee sin poder hacer hover */
  .gcard::after { opacity: 0.5; }
  .gcard::before { opacity: 0.7; }
  .gcard__label {
    opacity: 1;
    transform: none;
  }
  .gcard__label::before { transform: scaleX(1); }
  .gcard__desc { display: none; }
}

/* Escritorio: 4 columnas escalonadas, todas las tarjetas completas */
@media (min-width: 900px) {
  .gallery__grid {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.3vw, 20px);
  }
  .gallery__col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.3vw, 20px);
    flex: 1;
    min-width: 0;
    will-change: transform;
  }
  /* Desfase suave en diagonal: las 13 tarjetas ya están repartidas para que las
     columnas midan casi lo mismo, así que aquí basta un escalón corto. */
  .gallery__col:nth-child(2) { margin-top: clamp(14px, 2.6vw, 34px); }
  .gallery__col:nth-child(3) { margin-top: clamp(8px, 1.4vw, 18px); }
  .gallery__col:nth-child(4) { margin-top: clamp(20px, 4vw, 52px); }
}

/* ============================================================
   ¿POR QUÉ POWERME? — slider
   ============================================================ */
.why { overflow: clip; }
.why__introrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(36px, 4.6vw, 60px);
}
.why__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(27px, 3.4vw, 48px);
  line-height: 1.1;
  max-width: 24ch;
}
.why__nav { display: flex; gap: 12px; flex: none; }
.why__arrow {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line-d);
  display: grid;
  place-items: center;
  color: var(--paper);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s, opacity 0.3s;
}
.why__arrow svg { width: 20px; height: 20px; }
.why__arrow:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.why__arrow[disabled] { opacity: 0.3; pointer-events: none; }

.why__viewport { position: relative; }
.why__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  padding-inline: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
  /* `overflow-x: auto` fuerza `overflow-y: auto` (regla de CSS: si un eje deja
     de ser visible, el otro pasa de visible a auto), así que este carril RECORTA
     en vertical y todo lo que se mueva en Y dentro de él se corta. El reveal ya
     no desplaza (solo opacidad), así que el único movimiento que queda es el
     levantón de 6px del hover: de ahí el padding de arriba. Los márgenes
     negativos cancelan el hueco hacia afuera para no mover la separación. */
  padding-top: 8px;
  padding-bottom: 12px;
  margin-top: -8px;
  margin-bottom: -2px;
}
.why__track::-webkit-scrollbar { display: none; }
.why__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.why__track.is-dragging .wcard { pointer-events: none; }

.wcard {
  flex: 0 0 clamp(280px, 29vw, 400px);
  scroll-snap-align: start;
  border: 1px solid var(--line-d);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(24px, 2.6vw, 34px);
  min-height: clamp(320px, 36vh, 380px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: linear-gradient(165deg, rgba(241, 241, 241, 0.05), rgba(241, 241, 241, 0.012));
  transition: transform 0.5s var(--ease-out), border-color 0.5s;
}
.wcard:hover { transform: translateY(-6px); border-color: rgba(11, 206, 225, 0.55); }

.wcard__num {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 241, 241, 0.3);
}
.wcard__icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(11, 206, 225, 0.4);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  margin-bottom: auto;
}
.wcard__icon svg { width: 26px; height: 26px; }
.wcard h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.12;
}
.wcard p { color: var(--muted-d); font-size: 14.5px; }

.why__progress {
  height: 2px;
  background: var(--line-d);
  border-radius: 2px;
  margin-top: clamp(22px, 2.6vw, 34px);
  overflow: hidden;
}
.why__progress span {
  display: block;
  height: 100%;
  width: 15%;
  background: var(--cyan);
  border-radius: 2px;
  transition: width 0.2s linear;
}

/* ---------- Cifras ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line-d);
  margin-top: clamp(70px, 9vw, 120px);
  padding-top: clamp(30px, 4vw, 50px);
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(46px, 5.6vw, 86px);
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.stat__suffix { color: var(--cyan); font-size: 0.55em; font-family: 'Segoe UI', Arial, sans-serif; font-weight: 300; }
.stat__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-d);
  max-width: 22ch;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta {
  text-align: center;
  overflow: clip;
  padding-top: clamp(60px, 7vw, 100px);
}
.cta__marquee {
  overflow: hidden;
  margin-bottom: clamp(50px, 7vw, 90px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cta__marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}
/* Antes eran letras gigantes en contorno. Ahora es una banda de logos: justo
   antes del CTA final, los logos de las marcas pesan más que texto decorativo.
   Cada logo lleva su propia altura porque las proporciones no se parecen (el
   wordmark de PowerMe es 6.9:1 y el de EcoFlow 1.6:1): con una altura común los
   anchos se disparan y la fila se ve descuadrada. */
/* El bucle mueve el track un 50%, o sea el ancho de UN grupo: si el grupo es más
   angosto que la pantalla aparece un vacío a la derecha a media vuelta. Con
   separaciones fijas eso se cumplía por poco (1.05× a 1920) y se rompía en
   monitores más anchos. `min-width: 100vw` lo garantiza a cualquier medida sin
   números mágicos, y `space-around` reparte el aire que sobre. El padding
   lateral existe para que el último logo de un grupo no toque al primero del
   siguiente: en la unión suman los dos paddings. */
.cta__brands {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
  gap: clamp(28px, 3vw, 60px);
  padding-inline: clamp(16px, 1.6vw, 32px);
}
.cta__logo {
  width: auto;
  flex: none;
  opacity: 1;
}
/* Cada logo con su propia altura: las proporciones no se parecen (PowerMe 6.9:1,
   Hypershell 5.36:1, ATESS 2.61:1, EcoFlow 1.59:1) y con una altura común los
   wordmarks anchos aplastan a los compactos. Los valores están calibrados para
   que los cuatro pesen parecido, no para que midan lo mismo. */
.cta__logo--ef { height: clamp(42px, 4.6vw, 68px); }
.cta__logo--hyper { height: clamp(27px, 2.9vw, 44px); }
/* el logo de ATESS es oscuro con rojo (para fondo claro): se unifica a blanco
   con el mismo filtro que la fila de marcas de Nuestra historia */
.cta__logo--atess { height: clamp(34px, 3.8vw, 56px); filter: brightness(0) invert(1); }
.cta__logo--pwm { height: clamp(24px, 2.7vw, 40px); }
@keyframes marquee { to { transform: translateX(-50%); } }

.cta__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(33px, 5vw, 76px);
  line-height: 1.04;
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 22px;
}
.cta__copy {
  color: var(--muted-d);
  font-size: clamp(16px, 1.3vw, 18.5px);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: clamp(30px, 3.6vw, 46px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line-d);
  padding-block: clamp(60px, 7vw, 90px) 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  margin-bottom: clamp(50px, 6vw, 80px);
}
.footer__logo { height: 34px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: var(--muted-d); font-size: 14.5px; max-width: 36ch; }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-d);
  margin-bottom: 6px;
}
.footer__col a {
  font-size: 15px;
  opacity: 0.85;
  transition: opacity 0.3s, color 0.3s;
}
.footer__col a:hover { opacity: 1; color: var(--cyan); }

.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-d);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--muted-d);
}

/* ============================================================
   CURSOR PERSONALIZADO
   ============================================================ */
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 1000; pointer-events: none; }
.cursor__dot, .cursor__ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor__dot { width: 7px; height: 7px; background: var(--cyan); }
.cursor__ring {
  width: 38px;
  height: 38px;
  border: 1.4px solid rgba(11, 206, 225, 0.55);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), opacity 0.3s;
}
.cursor.is-hover .cursor__ring { width: 58px; height: 58px; opacity: 0.9; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   REVEALS (solo con JS activo)
   ============================================================ */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .split .split__word { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.js .split .split__inner { display: inline-block; transform: translateY(110%); }
html.js .hero__line { display: block; overflow: hidden; }
html.js .hero__line > .hero__line-inner { display: block; transform: translateY(112%); }
html.js .hero__aside > * { opacity: 0; transform: translateY(22px); }
html.js .hero__cards .bcard { opacity: 0; transform: translateY(44px); }
html.js .hero__scribble path { opacity: 0; }
html.js .hero__seal { opacity: 0; transform: scale(0.94); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .hero__aside { padding-bottom: 0; max-width: 560px; }
  /* a una columna el titular dispone de todo el container: puede crecer */
  .hero__title { font-size: clamp(30px, 9.4vw, 88px); }
  /* el aside pasa a ancho completo: el logo se mide contra él para conservar
     la misma proporción visual que en desktop (~80% de la columna) */
  .hero__logo { width: min(78%, 300px); }
}

@media (max-width: 900px) {
  :root { --nav-h: 72px; }

  /* Tarjetas hero → columna */
  .hero__cards { flex-direction: column; height: auto; }
  .bcard { flex: none; height: 92px; transition: height 0.65s var(--ease-inout); }
  .bcard.is-active { flex: none; height: 560px; }
  .bcard__label {
    writing-mode: horizontal-tb;
    transform: none;
    left: 22px;
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
    font-size: 21px;
  }
  .bcard.is-active .bcard__label { opacity: 0; transform: translateY(-14px); }
  .bcard__media img { transform: scale(1.12); }

  /* Marcas → acordeón vertical */
  .brands__intro { grid-template-columns: 1fr; align-items: start; }
  .brands__columns { flex-direction: column; min-height: 0; border-inline: 1px solid var(--line-d); }
  .bcol { border-right: 0; border-bottom: 1px solid var(--line-d); }
  .bcol:first-child { border-left: 0; }
  .bcol:last-child { border-bottom: 0; }
  .bcol.is-open { flex: none; }
  .bcol__vertical {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    order: -1;
    padding: 18px 22px 0;
    font-size: 30px;
    opacity: 0.95;
  }
  .bcol.is-open .bcol__vertical { opacity: 0.95; }
  .bcol__bar { order: -2; }
  .bcol__body {
    min-width: 0;
    max-height: 0;
    padding-block: 0;
    overflow: hidden;
    transition: max-height 0.8s var(--ease-inout), padding 0.8s var(--ease-inout);
  }
  .bcol.is-open .bcol__body { max-height: 900px; padding-block: 10px 30px; }

  /* Steps sin pin */
  .step-panel { grid-template-columns: 1fr; gap: 26px; }
  .step-panel__visual { min-height: 280px; }

  .steps__top { flex-direction: column; align-items: flex-start; gap: 18px; }

  .why__introrow { flex-direction: column; align-items: flex-start; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section-num { display: none; }
}

@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat__value { font-size: 52px; }
  .hero { padding-inline: 8px; }
  .bcard.is-active { height: 520px; }
  .bcard__glass { display: none; }
  .footer__legal { flex-direction: column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .reveal, html.js .hero__seal,
  html.js .hero__aside > *, html.js .hero__cards .bcard { opacity: 1; transform: none; }
}