/* =========================================================
   NÜMO · landing /distribuidores (23-oct-2026)
   Página de destino de los anuncios "se buscan distribuidores".
   Prioridad: el formulario. En PC va a la derecha del titular, dentro del
   hero; en el móvil, justo debajo del titular. El resto (ventajas, envases,
   negocios) es corto y va después.
   Hereda tokens, botones, títulos y pie de css/home.css; el formulario lo
   pinta js/distributor.js dentro de [data-dist-inline] con las clases del
   modal de contacto (css/contact-modal.css + css/distributor.css).
   ========================================================= */

/* ---------- cabecera: solo el logo, sin anclar (petición del usuario) ---------- */
.nav--static { position: static; background: var(--bg-0); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- hero: titular + formulario ---------- */
.dhero { position: relative; overflow: hidden; padding-block: 28px 44px; background: var(--bg-0); }
.dhero::before { content: ""; position: absolute; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(60% 60% at 50% 100%, rgba(166,103,68,.2), transparent 70%); pointer-events: none; }
/* minmax(0,1fr) + min-width:0 en los hijos: sin ello, el ancho intrínseco del
   campo del teléfono (prefijo + número) ensanchaba la columna más que la
   pantalla del móvil y el titular salía cortado por la derecha. */
.dhero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.dhero__grid > * { min-width: 0; }
.dhero__copy { display: grid; gap: 12px; }
.dhero__title { font-size: clamp(36px, 8.5vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.dhero__title .accent { color: var(--copper-hot); }
.dhero__lead { font-size: 17px; color: var(--ink-soft); max-width: 40ch; }
/* Bloque que VENDE antes del formulario (el 99 % entra por el móvil):
   envases a la izquierda y las cuatro ventajas a la derecha. */
.dhero__more { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 6px; }
.dhero__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.dhero__list li { display: flex; gap: 10px; align-items: baseline; }
.dhero__list li::before { content: "✓"; color: var(--copper-hot); font-weight: 800; }
.dhero__cans { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.dhero__cans img { height: 190px; width: auto; max-width: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.dhero__cans img:first-child { transform: translateY(4%) rotate(-4deg); }
.dhero__cans img:last-child { transform: rotate(4deg); }

/* Titulares con la Ü de NÜMO: interlineado algo más abierto para que los puntos
   no toquen la línea de arriba (home.css los lleva a 1.05 / .96). */
.dhero .h2, .sec .h2 { line-height: 1.12; }
.ask__title { line-height: 1.2; }

/* ---------- formulario ---------- */
.ask { scroll-margin-top: 76px; }
.ask__card { padding: 22px 18px; border: 1px solid var(--copper-line); border-radius: 20px; background: var(--bg-card); box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
.ask__head { display: grid; gap: 4px; margin-bottom: 18px; }
.ask__title { font-size: 22px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.ask__sub { font-size: 14px; color: var(--ink-mute); }
.ask__card .contact-modal__form { gap: 12px; }
.ask__card .contact-modal__field textarea { min-height: 70px; }
.ask__card .contact-modal__submit { width: 100%; min-height: 54px; }
.ask__done[hidden] { display: none; }
.ask__done { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 24px 18px; margin-bottom: 16px; border-radius: 16px; border: 1px solid var(--copper-line); background: var(--copper-soft); }
.ask__done svg { width: 44px; height: 44px; color: var(--copper-hot); }
.ask__done h3 { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.ask__done p { font-size: 15px; color: var(--ink-soft); max-width: 40ch; }
/* una vez enviado, el formulario se queda apagado debajo del aviso */
.dist-inline.is-sent form { opacity: .45; pointer-events: none; }
.dist-inline .contact-modal__field.is-invalid input,
.dist-inline .contact-modal__field.is-invalid select { border-color: #e26f57; background-color: #221417; box-shadow: 0 0 0 3px rgba(226, 111, 87, .18); }
.dist-inline .contact-modal__field.is-invalid .contact-modal__label { color: #e26f57; }
.dist-inline .contact-modal__field.is-shaking { animation: dist-shake .38s ease; }

/* ---------- para quién ---------- */
.who { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.who li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); font-size: 14px; font-weight: 700; }

/* ---------- pie ---------- */
/* idiomas: enlaces planos; i18n.client.js guarda la elección y navega */
.dlang { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.dlang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-mute); transition: color .2s, background-color .2s; }
.dlang a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.dlang a[aria-current="true"] { color: var(--copper-hot); background: var(--copper-soft); }
.dfoot__mail { font-size: 14px; }
.dfoot__mail a { color: var(--copper-hot); }

/* ---------- barra fija del móvil: solo cuando el formulario no está a la vista ---------- */
.dbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(13,13,13,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); transition: transform .25s ease, opacity .25s ease; }
.dbar span { font-size: 13px; color: var(--ink-soft); }
.dbar .btn { min-height: 46px; padding-inline: 18px; }
.dbar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (max-width: 759px) { .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- PC (desde 760px) ---------- */
@media (min-width: 760px) {
  .dhero { padding-block: 56px 64px; }
  .dhero__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy ask" "more ask"; gap: 20px 48px; align-content: start; }
  .dhero__copy { grid-area: copy; }
  .ask { grid-area: ask; align-self: start; }
  .dhero__more { grid-area: more; grid-template-columns: 1fr auto; align-items: end; gap: 28px; }
  .dhero__more .dhero__cans { order: 2; }
  .dhero__lead { font-size: 18px; }
  .dhero__cans img { height: 240px; }
  .ask__card { padding: 28px 26px; }
  .ask__title { font-size: 24px; }
  .dbar { display: none; }
}
@media (min-width: 1100px) {
  .dhero__grid { grid-template-columns: 1.1fr .9fr; }
  .dhero__cans img { height: 280px; }
}

/* =========================================================
   Secciones de apoyo DEBAJO del formulario (recuperadas 23-oct a petición
   del usuario): ventajas en tarjetas, los dos productos, dónde encaja y
   los tres pasos.
   ========================================================= */
/* ---------- ventajas ---------- */
.why { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.why li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); }
.why__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--copper-soft); border: 1px solid var(--copper-line); color: var(--copper-hot); }
.why__ic svg { width: 22px; height: 22px; }
.why h3 { font-size: 16px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.why p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- productos ---------- */
.prods { display: grid; gap: 12px; }
.prod { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--v-line); border-radius: 18px; background: linear-gradient(135deg, var(--v-soft), transparent 60%), var(--bg-card); }
.prod__img { display: grid; place-items: center; height: 180px; }
/* Alto FIJO en px y sin el max-width:100% de home.css: con él, en una columna
   de 96px el navegador recalculaba el alto por la proporción del envase
   (162×600) y la lata se salía de la tarjeta en el móvil. */
.prod__img img { height: 180px; width: auto; max-width: none; filter: drop-shadow(0 16px 24px rgba(0,0,0,.55)); }
.prod__body { display: grid; gap: 8px; }
.prod__name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; }
.prod__name span { color: var(--v); }
.prod__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.prod__facts li { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.prod__p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- pasos ---------- */
.dsteps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.dsteps li { counter-increment: paso; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.dsteps li::before { content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--btn-copper); color: #fff; font-weight: 800; font-size: 15px; box-shadow: var(--btn-copper-shadow); }
.dsteps h3 { font-size: 16px; font-weight: 800; line-height: 1.2; margin: 8px 0 4px; }
.dsteps p { font-size: 14.5px; color: var(--ink-soft); }

/* los chips de negocios van alineados a la izquierda, bajo el titular */
.who { justify-content: flex-start; }

@media (min-width: 760px) {
  .why { grid-template-columns: repeat(2, 1fr); }
  .prods { grid-template-columns: 1fr 1fr; }
  .prod { grid-template-columns: 120px minmax(0, 1fr); }
  .prod__img { height: 220px; }
  .prod__img img { height: 220px; }
  .dsteps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1000px) {
  .why { grid-template-columns: repeat(4, 1fr); }
  .why li { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Ü de NÜMO en los titulares: puntos en el naranja del logo ----------
   Dos capas con la misma anchura: debajo, la Ü en naranja; encima, la U en el
   color del texto. Solo asoman los puntos. (z-index negativo = debajo del texto.) */
.numo { white-space: nowrap; } /* la palabra no se parte por el inline-block */
.ue { position: relative; display: inline-block; z-index: 0; }
.ue__d { position: absolute; inset: 0; z-index: -1; color: #ff9900; pointer-events: none; }