/* ───────────────────────────────────────────────────────────────────────────
 * Boton "Compra por Changelly" de la cabecera del home.
 *
 * Color: verde de marca Changelly (#B1FF8C) con texto casi negro (#0A0A0A),
 * el mismo par que ya usamos en los creativos de correo. Contraste sobre la
 * cabecera morada: 14.6:1 (AAA).
 *
 * Compatibilidad deliberada (Android/iOS/Windows/macOS, Chrome/Safari/Firefox/
 * Samsung Internet/Edge):
 *   - Sin `gap` en flex: se usa margen en la etiqueta, porque iOS Safari solo
 *     soporta gap en flexbox desde 14.1 y todavia hay trafico por debajo.
 *   - `-webkit-appearance: none` para que iOS no repinte el boton.
 *   - `touch-action: manipulation` para matar el delay de 300 ms al toque.
 *   - Area tactil minima 44x44 en tactil (guia de Apple) sin agrandar la
 *     cabecera en escritorio.
 *   - Nada de `:has()`, `clamp()` anidado ni contenedores query.
 *
 * Escalera responsive de la etiqueta (el aria-label siempre dice la frase
 * completa, asi que el lector de pantalla nunca pierde el texto). El modo NO
 * lo decide un breakpoint sino js/header-buy-changelly.js midiendo espacio:
 *   largo ..... [logo] Compra por Changelly     (escritorio holgado)
 *   corto ..... [logo] Changelly                (horizontal)
 *   apilado ... [logo] arriba + "Changelly" abajo, 82x44 (moviles 360-430:
 *               validado con UX — texto 11px minimo, pastilla radius 999)
 *   icono ..... solo la logomarca (40x40)
 *   oculto .... no se pinta
 * ─────────────────────────────────────────────────────────────────────────── */
.cl-header-buy-card {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  height: 40px;
  max-width: 100%;
  padding: 0 16px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: #B1FF8C;
  background-image: -webkit-linear-gradient(315deg, #C8FFAA 0%, #8FE86A 100%);
  background-image: linear-gradient(135deg, #C8FFAA 0%, #8FE86A 100%);
  color: #0A0A0A;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 10px rgba(140, 230, 100, 0.28);
  box-shadow: 0 2px 10px rgba(140, 230, 100, 0.28);
  -webkit-transition: -webkit-transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.cl-header-buy-card:hover {
  -webkit-filter: brightness(1.05);
  filter: brightness(1.05);
  -webkit-box-shadow: 0 4px 16px rgba(140, 230, 100, 0.42);
  box-shadow: 0 4px 16px rgba(140, 230, 100, 0.42);
}

.cl-header-buy-card:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.cl-header-buy-card:focus { outline: none; }
.cl-header-buy-card:focus-visible {
  outline: 2px solid #B1FF8C;
  outline-offset: 2px;
}

/* Icono */
.cl-header-buy-card__ico {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  display: block;
  width: 18px;
  height: 18px;
}

/* Etiqueta: margen en vez de `gap` por compatibilidad con iOS < 14.1 */
.cl-header-buy-card__label { margin-left: 7px; }

/* Texto largo / corto segun ancho. El nodo largo se oculta, no se recorta. */
.cl-header-buy-card__label--corto { display: none; }

/* ── Modos de ancho ────────────────────────────────────────────────────────
 * El modo NO lo decide un breakpoint: lo decide js/header-buy-changelly.js
 * midiendo el espacio libre real que queda en .cl-home-header__actions. Un
 * breakpoint fijo no sirve aqui porque la fila cambia de contenido segun
 * sesion, idioma e instalacion PWA. Arranca en "corto" para que nunca haya
 * un salto de tamano visible; el JS lo sube a "largo" solo si cabe.
 *
 *   data-modo="largo"   ->  [logo] Compra por Changelly
 *   data-modo="corto"   ->  [logo] Changelly            (por defecto)
 *   data-modo="apilado" ->  [logo] / Changelly          (vertical, 82x44)
 *   data-modo="icono"   ->  [logo]                      (40x40)
 *   data-modo="oculto"  ->  no se pinta (no cabe ni el icono)
 * ─────────────────────────────────────────────────────────────────────────── */
.cl-header-buy-card { padding: 0 13px; font-size: 13px; }
.cl-header-buy-card__label--largo { display: none; }
.cl-header-buy-card__label--corto { display: inline; }

.cl-header-buy-card[data-modo="largo"] { padding: 0 16px; font-size: 14px; }
.cl-header-buy-card[data-modo="largo"] .cl-header-buy-card__label--largo { display: inline; }
.cl-header-buy-card[data-modo="largo"] .cl-header-buy-card__label--corto { display: none; }

.cl-header-buy-card[data-modo="icono"] { width: 40px; padding: 0; }
.cl-header-buy-card[data-modo="icono"] .cl-header-buy-card__label { display: none; }

.cl-header-buy-card[data-modo="oculto"] { display: none !important; }

/* Tactil / movil: misma etiqueta corta, area tactil de 44px sin crecer la barra */
@media (max-width: 640px) {
  .cl-header-buy-card {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }
  .cl-header-buy-card__ico { width: 17px; height: 17px; }
  .cl-header-buy-card__label { margin-left: 6px; }
  /* Extiende el area tactil a 44px de alto sin mover el layout */
  .cl-header-buy-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    bottom: -2px;
  }
}

/* Pantallas muy angostas (Galaxy Fold cerrado, 280-360px): solo icono */
@media (max-width: 359px) {
  /* Pantallas muy angostas (Galaxy Fold cerrado, 280-359px): solo icono.
   * Los selectores llevan [data-modo] a proposito: sin el, la regla de modo
   * "largo" (0,3,0) le ganaba a esta y la etiqueta se salia de la caja de 40px. */
  .cl-header-buy-card,
  .cl-header-buy-card[data-modo] {
    width: 40px;
    padding: 0;
  }
  .cl-header-buy-card__label,
  .cl-header-buy-card[data-modo] .cl-header-buy-card__label { display: none; }
}

/* Estado de espera mientras carga el widget (reintentos del snippet.js) */
.cl-header-buy-card.is-loading { opacity: 0.72; cursor: progress; }
.cl-header-buy-card.is-loading .cl-header-buy-card__ico {
  -webkit-animation: cl-hbc-pulse 0.9s ease-in-out infinite;
  animation: cl-hbc-pulse 0.9s ease-in-out infinite;
}

@-webkit-keyframes cl-hbc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes cl-hbc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-header-buy-card,
  .cl-header-buy-card__ico {
    -webkit-transition: none;
    transition: none;
    -webkit-animation: none;
    animation: none;
  }
}

/* Modo alto contraste de Windows: el fondo se pierde, el borde lo sostiene */
@media (forced-colors: active) {
  .cl-header-buy-card {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * VISIBILIDAD: solo con sesion activa.
 *
 * Dos razones:
 *   1) Recargar exige wallet, y la wallet solo existe con sesion. Sin sesion el
 *      cliente caeria en la vista de compra sin direccion de destino.
 *   2) Con sesion cerrada la cabecera ya lleva "PLAY NOW", "Login" y "Sign up";
 *      sumar 234px mas empujaba "Sign up" fuera de pantalla entre 1280 y 1680px
 *      (medido: borde derecho 1570 en un viewport de 1440).
 *
 * La clase la pone snippet.js escuchando #cl-balance-pill[data-authed].
 * ─────────────────────────────────────────────────────────────────────────── */
.cl-header-buy-card { display: none; }

.cl-header-buy-card.is-visible {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}

@media (max-width: 359px) {
  .cl-header-buy-card.is-visible,
  .cl-header-buy-card.is-visible[data-modo] { width: 40px; padding: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * BLINDAJE DEL LOGO: la marca nunca cede espacio ante la fila de acciones.
 *
 * Por que vive aqui y no en styles.css: este boton fue quien agrego la
 * demanda horizontal que dispara el problema, y este CSS solo lo carga
 * index.html (blast radius minimo).
 *
 * El mecanismo del fallo (medido en movil con sesion activa, 320-430px):
 * el flex item de .cl-home-header__inner es el ANCLA .cl-home-header__brand,
 * no la imagen. La img lleva flex-shrink:0, pero eso no protege al padre:
 * el ancla conserva el flex-shrink:1 por defecto, el flex la comprime
 * primero, y la regla global img{max-width:100%} resuelve el logo contra esa
 * caja ya encogida — llegaba a 0px sin que nada desbordara por la derecha,
 * asi que la degradacion del boton (largo→corto→icono→oculto) nunca se
 * enteraba. Con la marca rigida, el desborde pasa al borde derecho, que es
 * exactamente la senal que mide js/header-buy-changelly.js.
 * ─────────────────────────────────────────────────────────────────────────── */
body.cl-home-v3 .cl-home-header__brand {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* ───────────────────────────────────────────────────────────────────────────
 * MODO APILADO (validado con UX/arquitecto, ago-2026): logomarca arriba y
 * "Changelly" debajo en una pastilla 82x44. Mete el texto de marca en los
 * moviles 360-430px donde el horizontal (121px) no cabe. Reglas del experto:
 * texto MINIMO 11px (no condensar, no recortar el nombre), radius 999 se
 * conserva (pastilla, no tarjeta), area tactil nativa 82x44.
 *
 * Va dentro de @media (min-width:360px) a proposito: bajo 360 la regla
 * <=359 fuerza solo-icono y este bloque no debe poder ganarle.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 360px) {
  .cl-header-buy-card[data-modo="apilado"] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 44px;
    min-width: 82px;
    padding: 4px 10px;
  }
  .cl-header-buy-card[data-modo="apilado"] .cl-header-buy-card__ico {
    width: 18px;
    height: 18px;
  }
  .cl-header-buy-card[data-modo="apilado"] .cl-header-buy-card__label--largo { display: none; }
  .cl-header-buy-card[data-modo="apilado"] .cl-header-buy-card__label--corto {
    display: block;
    margin: 2px 0 0; /* pisa el margin-left horizontal */
    font-size: 11px; /* minimo UX: menos es letra de contrato */
    line-height: 1.15;
    letter-spacing: 0.01em;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
 * PELDANOS DE RESCATE (los aplica js/header-buy-changelly.js por medicion,
 * nunca un breakpoint ciego; cada estado se aplica completo y se revierte):
 *
 * 1) Pildora ESTRECHA: solo recorta aire interno (padding y gaps). El icono
 *    wallet, el monto y el chevron siguen visibles — orden UX: el aire cede
 *    antes que cualquier contenido. Compra ~10px.
 * 2) Marca 56: el logo baja al minimo digno historico (56px de ancho, mismo
 *    alto efectivo via margin). Ultimo recurso antes de degradar el texto
 *    del boton a solo-icono.
 * ─────────────────────────────────────────────────────────────────────────── */
body.cl-home-v3 #cl-balance-pill.cl-pill-estrecha {
  padding: 6px 8px 6px 10px;
  gap: 6px; /* la pildora ya usa gap en su CSS base: override seguro */
}

body.cl-home-v3 .cl-home-header__brand.cl-marca-56 img,
body.cl-home-v3 .cl-home-header__brand.cl-marca-56 .header-logo {
  height: 56px;
  max-width: 156px;
  margin: -2px 0; /* alto efectivo 52px, igual que el logo de 72 con -10 */
}