/* SACCRO — Puerta de país (EE. UU.) · estilos
   Vive como archivo en /wp-content/uploads/saccro/ y lo encola el
   fragmento «SACCRO — Puerta de país». No editar en el servidor:
   el original es codigo/usa/assets/puerta-us.css. */
/* Instrument Sans es la del sitio y ya está cargada; aquí solo se pide. */
.sacpais[hidden]{display:none!important}
.sacpais{
  /* 100010: por encima de todo lo que hay. Medido en la página viva, el techo
     de z-index es 100001 (Elementor) y los botones flotantes están en 9980. */
  position:fixed;inset:0;z-index:100010;
  display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:"Instrument Sans",sans-serif}

.sacpais__velo{position:absolute;inset:0;background:rgba(18,18,18,.46);
  opacity:0;transition:opacity .24s cubic-bezier(.22,.61,.36,1)}
.sacpais.esta-visible .sacpais__velo{opacity:1}

.sacpais__caja{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border-radius:20px;padding:30px 30px 26px;color:#17171A;
  box-shadow:0 40px 80px -40px rgba(18,18,18,.45);
  opacity:0;transform:translateY(14px);
  transition:opacity .26s cubic-bezier(.22,.61,.36,1),transform .26s cubic-bezier(.22,.61,.36,1)}
.sacpais.esta-visible .sacpais__caja{opacity:1;transform:none}

/* La microetiqueta de 12/600 con tracking abierto: es el elemento que sostiene
   toda la tipografía de la marca. */
.sacpais__ceja{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#706D6E}
.sacpais__ceja[hidden]{display:none}
.sacpais__titulo{margin:0 0 10px;font-size:27px;font-weight:600;letter-spacing:-.02em;
  line-height:1.15;color:#17171A;text-wrap:balance}
.sacpais__aviso{margin:0 0 22px;font-size:14.5px;line-height:1.55;color:#54525A;text-wrap:pretty}

/* ---------------------------------------------------------------------------
 * `minmax(0,1fr)` NO ES DECORACIÓN: ES EL ARREGLO DEL 10-SEP
 * ---------------------------------------------------------------------------
 * Esto era `display:grid;gap:12px` a secas. Sin columnas declaradas, la rejilla
 * crea una columna implícita `auto`, y una pista `auto` se dimensiona por el
 * MAX-CONTENT de su contenido. El detalle más largo de una opción —«Envío a
 * toda Colombia · Paga con PSE o tarjeta · Sitio en español»— mide 411 px sin
 * cortar. En un teléfono de 390, con la caja en 350 de contenido, la opción
 * salía 411 y se iba 61 px fuera de la pantalla: el texto quedaba cortado por
 * el borde derecho. En escritorio no se veía porque ahí caben los 411.
 *
 * `minmax(0,1fr)` fija el mínimo de la pista en cero, así que la columna ya no
 * puede crecer por encima de la caja y el texto vuelve a partirse en líneas.
 * El `min-width:0` de dentro es la otra mitad del mismo problema: los hijos de
 * una rejilla tampoco encogen por debajo de su min-content si no se les dice.
 * ------------------------------------------------------------------------- */
.sacpais__ops{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}

/* ---------------------------------------------------------------------------
 * EL `!important` DE AQUÍ NO ES PEREZA
 * ---------------------------------------------------------------------------
 * Una de las dos opciones es un `<button>` de verdad (quedarse NO es navegar,
 * es una acción) y el tema le cae encima con TODO: fondo negro, letra blanca,
 * `text-transform:capitalize` —que escribía «Comprar En Pesos Colombianos»—,
 * radio 0 y su propio acolchado. Medido en la página viva. Es el mismo tema que
 * pinta de negro cualquier cosa con clase `button`, ya conocido de la ficha de
 * producto. Contra eso no gana un selector razonable: se le devuelve al botón
 * su estado neutro, propiedad por propiedad, y se construye desde ahí.
 * ------------------------------------------------------------------------- */
.sacpais__op{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:5px;width:100%;max-width:100%!important;min-width:0!important;text-align:left!important;
  background:#F5F8FF!important;border:1px solid #E3E6EE!important;border-radius:16px!important;
  padding:16px 18px!important;margin:0!important;min-height:0!important;
  font:inherit!important;font-size:inherit!important;letter-spacing:normal!important;
  text-transform:none!important;color:#17171A!important;text-decoration:none!important;
  box-shadow:none!important;cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.sacpais__op *{text-transform:none;min-width:0}
.sacpais__detalle,.sacpais__que{overflow-wrap:anywhere}
.sacpais__op:hover{border-color:#C9C5BE!important;background:#EFF3FB!important}
.sacpais__op:active{transform:translateY(1px)}
.sacpais__op:focus-visible{outline:2px solid #17171A;outline-offset:2px}

.sacpais__rotulo{display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase!important;color:#706D6E}
.sacpais__bandera{width:20px;height:16px;flex:0 0 auto;border-radius:2px;display:block}
.sacpais__que{font-size:17px;font-weight:600;letter-spacing:-.01em;color:#17171A}
.sacpais__detalle{font-size:13px;line-height:1.5;color:#706D6E}
.sacpais__accion{justify-self:start;margin-top:9px;border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:500;background:transparent;border:1px solid #C9C5BE;color:#17171A}
/* Un solo acento por bloque: la tienda que le corresponde se marca con la
   tinta, no con un color nuevo. */
.sacpais__op.es-principal{border-color:#17171A!important}
.sacpais__op.es-principal .sacpais__accion{background:#17171A;border-color:#17171A;color:#fff}

.sacpais__nota{margin:18px 0 0;font-size:12px;line-height:1.5;color:#8C8A90}

/* En el teléfono baja como hoja desde abajo, que es donde llega el pulgar. */
@media (max-width:560px){
  .sacpais{align-items:flex-end;padding:0}
  .sacpais__caja{width:100%;max-height:88dvh;border-radius:20px 20px 0 0;padding:26px 20px 26px;
    transform:translateY(30px)}
}

@media (prefers-reduced-motion:reduce){
  .sacpais__velo,.sacpais__caja,.sacpais__op{transition:none}
  .sacpais__caja{transform:none}
}

/* ---------------------------------------------------------------------------
 * EL DESPLEGABLE «PAÍS» DE LA CABECERA
 * ---------------------------------------------------------------------------
 * Solo se le añaden dos cosas: marcar cuál es la tienda en la que ya está, y la
 * nota del carrito. La caja, las banderas y el resto son suyos y no se tocan.
 * ------------------------------------------------------------------------- */
.saccro-country-option.es-la-actual{background:rgba(18,18,18,.055);cursor:default}
.saccro-country-option.es-la-actual small{color:#6E6C70}

.sacpais__aviso-cabecera{
  margin:7px 7px 2px!important;padding-top:8px;
  border-top:1px solid rgba(0,0,0,.08);
  font-family:"Instrument Sans",sans-serif;
  font-size:11.5px;line-height:1.45;color:#6E6C70;text-wrap:pretty}

/* ---------------------------------------------------------------------------
 * LA LÍNEA DEL PIE — solo donde el desplegable no se ve (el teléfono)
 * ------------------------------------------------------------------------- */
.sacpais__pie[hidden]{display:none!important}
/* El acolchado de abajo es de 92 px y no es capricho: los botones flotantes
   (WhatsApp, Instagram, TikTok) están fijos a la esquina, así que al llegar al
   final de la página se sientan encima de lo último que haya. Medido: el de
   WhatsApp se comía «precios en pesos». */
.sacpais__pie{padding:14px 20px 92px;text-align:center;
  font-family:"Instrument Sans",sans-serif;font-size:12.5px;line-height:1.6;color:#706D6E}
.sacpais__pie b{font-weight:600;color:#17171A}
.sacpais__pie button{font:inherit!important;color:#17171A!important;background:none!important;
  border:0!important;padding:0!important;margin:0 0 0 5px!important;min-height:0!important;
  text-transform:none!important;letter-spacing:normal!important;box-shadow:none!important;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}