/* soportepublicitario.com: lo que el sitio global suma a la hoja del sitio de Chile
   (sitio.css + diseno-3.css, maqueta 3). Mismos colores, formas y letra del manual
   de marca: aca no hay colores nuevos, degradados ni iconos. */

/* En que pais esta el visitante y como cambiarlo: una linea sobre la cabecera, en todos los anchos. */
.mercado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 8px 24px; background: var(--gris); border-bottom: 1px solid var(--borde); font-size: .8125rem; }
.mercado p { margin: 0; }
.mercado b { color: var(--azul); }
.m-rot { margin-right: .3em; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.m-mon { margin-left: .5em; color: var(--suave); }
.m-acc { display: flex; gap: 18px; }
.m-acc a { font-weight: 600; }

/* Segundo boton del heroe cuando no es WhatsApp: blanco, como el de WhatsApp sobre azul. */
.heroe-txt .btn.claro, .heroe-txt .btn.claro:hover { background: #fff; color: var(--azul); box-shadow: none; }

/* Elegir pais: tarjetas como las del catalogo, con la moneda y el impuesto de cada uno. */
.paises { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.paises a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r); background: #fff; color: var(--texto); text-decoration: none; }
.paises a:hover { border-color: var(--celeste); box-shadow: 0 4px 14px rgb(0 0 0 / .08); }
.paises b { color: var(--azul); }
.paises span { font-size: .8125rem; color: var(--suave); }
.paises .p-extra { margin-top: 4px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--naranja-rotulo); }
.paises .actual a { border-color: var(--naranja); box-shadow: 0 0 0 2px var(--naranja); }

/* "Sé distribuidor": una caja de "por que" (gris con borde superior azul). La caja destacada
   de borde naranja queda para el mensaje de la pagina (el precio, "Ustedes son nuestras cuentas"). */
.distribuidor { padding: 16px 18px; border-top: 4px solid var(--azul); border-radius: 0 0 6px 6px; background: var(--gris); }
.distribuidor h2 { margin-bottom: .35em; font-size: 1.0625rem; }
.distribuidor p { max-width: 70ch; margin: 0; font-size: .9rem; color: var(--suave); }
.distribuidor .acciones { margin: 12px 0 0; }
main > .distribuidor { margin-bottom: 36px; }
.contacto .distribuidor { margin-top: 24px; }
.ficha .distribuidor, .ficha .otros-paises { grid-column: 1 / -1; }

/* La misma ficha en los demas paises, con su precio. */
.otros-paises { padding: 0 16px; border: 1px solid var(--borde); border-radius: var(--r); }
.otros-paises summary { padding: 12px 0; font-weight: 700; color: var(--azul); cursor: pointer; }
.otros-paises table { margin-bottom: 12px; }
.otros-paises tbody th { font-weight: 600; }
.otros-paises td:nth-child(2) { font-weight: 700; color: var(--precio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.otros-paises td:last-child { text-align: right; }
.otros-paises .actual th, .otros-paises .actual td { background: var(--gris); }

/* Piezas que el sitio de Chile no usa en estos lugares. */
.campo select { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #aab3ba; border-radius: 6px; background: #fff; }
.campo [aria-invalid="true"] { border-color: var(--iva); background: #fff6f5; }
.datos p { margin: 0 0 6px; }
.cuentas h2 + p { margin-top: 0; }
.grilla + .nota, .paginas + .nota { margin-top: 16px; }

@media (max-width: 980px) {
  .mercado { padding-inline: 16px; }
}
@media (max-width: 560px) {
  .m-mon { display: block; margin-left: 0; }
  .paises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .otros-paises { padding: 0 10px; }
  .otros-paises td:nth-child(2) { white-space: normal; }
}
@media print { .mercado, .distribuidor, .otros-paises { display: none; } }