/* Facilita site: styles for site-sections.js (approved 13 Oct 2026; brand/motion/README.md, section 3).
   Uses the tokens from brand/tokens.css. Structure straight, software round; transform and opacity only. */

/* ---------- Productos panel */
.nav-products { font: inherit; font-size: 1rem; font-weight: var(--weight-medium); color: var(--color-text); background: none; border: 0;
  padding: 12px; border-radius: var(--radius-control); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-products .chev { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) { .nav-products:hover { background: var(--tinte); } }
.nav-products[aria-expanded="true"] { background: var(--tinte); }
.products { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 12px 24px rgba(20, 28, 48, 0.08); }
.products[hidden] { display: none; }
.site-header .products-in { display: grid; min-height: 0; justify-content: start; grid-template-columns: 200px minmax(0, 420px) minmax(0, 360px);
  gap: 24px; align-items: stretch; padding-top: 28px; padding-bottom: 32px; }
.products-label { margin: 0; padding-top: 10px; font-size: 0.9375rem; font-weight: var(--weight-medium); color: var(--color-text-muted); }
.product { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 16px; border-radius: var(--radius-structure);
  border: 1px solid var(--color-border); text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { a.product:hover { background: var(--tinte); border-color: var(--tinte); } }
.product .ico { width: 56px; height: 56px; display: block; }
.product .wm { height: 24px; width: auto; display: block; }
.product .desc { display: block; margin-top: 6px; font-size: 0.9375rem; color: var(--color-text-muted); }
.product .go { font-size: 1.25rem; color: var(--naranja-texto); }
.product-soon { border-style: dashed; color: var(--color-text-muted); grid-template-columns: 56px 1fr; }
.product-soon svg { width: 56px; height: 56px; display: block; }
.product-soon span { font-size: 0.9375rem; }
.nav .nav-cta { white-space: nowrap; }
@media (max-width: 760px) {
  .nav .nav-products { display: inline-flex; padding: 10px 8px; }
  .site-header .products-in { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; padding-bottom: 20px; }
  .products-label { padding: 0; }
}
@media (max-width: 420px) {
  .nav { gap: 0; }
  .nav .nav-products, .nav .lang { padding: 10px 6px; }
  .nav-products .chev { display: none; }
  .nav .nav-cta { display: none; }   /* phones: the CTA lives in the sticky bar at the bottom */
}

/* ---------- Lo que escuchamos: voice notes */
.vn { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; height: 36px; }
.vn-play { width: 32px; height: 32px; border-radius: 50%; background: var(--naranja); position: relative; flex: none; }
.vn-play::after { content: ""; position: absolute; left: 12px; top: 10px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.vn-wave { position: relative; }
.vn-bars { display: flex; align-items: center; gap: 3px; height: 28px; }
.vn-bars i { display: block; width: 3px; background: var(--niebla); }
.vn-bars.on { position: absolute; inset: 0; }
.vn-bars.on i { background: var(--overol); }
.quote .w { display: inline-block; }

/* ---------- Facilita: frames and badges in the background */
#facilita { position: relative; overflow: hidden; }
#facilita > .wrap { position: relative; z-index: 1; }
.fb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@media (max-width: 899px) { #facilita { padding-bottom: 260px; } }

/* ---------- Para quién es: icons */
.card .ico { display: block; width: 96px; height: 64px; margin-bottom: 20px; overflow: visible; }

/* ---------- Lo que gana tu empresa: the scene sits under the text as a landscape; the figure meets the section's bottom edge */
#gana { padding-bottom: 0; }
.gana-stage { margin-top: 48px; }
.gana-stage svg { display: block; width: 100%; height: auto; overflow: hidden; }
@media (max-width: 760px) { .gana-stage { margin: 32px -16px 0; } }

/* ---------- El problema: the scene beside the text (sticky), below it on phones */
.prob-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 64px; align-items: start; }
.prob-aside { position: sticky; top: 104px; }
.prob-aside svg { display: block; width: 100%; height: auto; }
@media (max-width: 999px) {
  .prob-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prob-aside { position: static; max-width: 340px; margin: 0 auto; }
}