/* ==========================================================================
   BlueBox — Landing
   Consume las variables de tokens.css. No declara colores propios.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--bb-font);
  font-size:var(--bb-fs-body);
  line-height:1.65;
  color:var(--bb-ink);
  background:var(--bb-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{
  font-family:var(--bb-font-display);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
  font-weight:700;
}

p{ margin:0 }
img,svg{ display:block; max-width:100% }
a{ color:var(--bb-primary); text-decoration:none }
a:hover{ text-decoration:underline }

/* Foco visible y consistente: se ve solo con teclado, nunca se elimina. */
:focus-visible{
  outline:2px solid var(--bb-blue-600);
  outline-offset:2px;
  border-radius:var(--bb-r-sm);
}

/* Para lectores de pantalla: presente en el árbol de accesibilidad, invisible. */
.bb-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Enlace de salto: aparece al tabular, primer elemento de la página. */
.bb-skip{
  position:absolute; left:50%; top:-60px; transform:translateX(-50%);
  z-index:100; padding:.7rem 1.2rem;
  background:var(--bb-blue-900); color:#fff; border-radius:0 0 var(--bb-r) var(--bb-r);
  font-weight:600; font-size:var(--bb-fs-sm);
  transition:top .18s var(--bb-ease);
}
.bb-skip:focus{ top:0; text-decoration:none }

.bb-wrap{
  width:100%; max-width:var(--bb-content-max);
  margin-inline:auto; padding-inline:var(--bb-gutter);
}

/* ==========================================================================
   Encabezado
   ========================================================================== */

.bb-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  /* El desenfoque es un adorno: si el navegador no lo soporta, el fondo
     semiopaco de arriba ya garantiza que el texto se lea. */
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  box-shadow:var(--bb-topbar-shadow);
  transition:box-shadow .2s var(--bb-ease), background .2s var(--bb-ease);
}

/* Al bajar, la barra se despega del contenido con una sombra. Arriba del todo
   lleva solo la línea, para que no compita con la portada. */
.bb-header.is-scrolled{
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 0 var(--bb-line), 0 6px 18px -10px rgba(13,43,62,.30);
}

.bb-header__inner{
  min-height:var(--bb-topbar-h);
  display:flex; align-items:center; gap:1.25rem;
}

.bb-brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto }
.bb-brand:hover{ text-decoration:none }
.bb-brand img{ height:46px; width:auto }

/* En monitores grandes la barra crece, y con ella el logo y la palabra: si no,
   quedan diminutos en medio de tanto espacio. */
@media (min-width:1600px){
  .bb-brand img{ height:52px }
  .bb-brand__word{ font-size:1.5rem }
  .bb-nav__link{ font-size:1rem }
  .bb-nav{ gap:.6rem }
}

/* El logo es vertical (441x480). Hasta que llegue la versión horizontal del
   diseñador, la palabra va en texto al lado: así la marca se lee sin tener que
   agrandar el logo hasta que descuadre la barra. Cuando llegue el archivo
   horizontal, se borra .bb-brand__word y se sube la altura de la imagen. */
.bb-brand__word{
  font-family:var(--bb-font-display);
  font-weight:800; font-size:1.3rem; letter-spacing:-.02em;
  color:var(--bb-blue-800); line-height:1;
}
.bb-brand__word span{ color:var(--bb-amber-600) }

.bb-nav{ display:flex; align-items:center; gap:.4rem }

.bb-nav__link{
  padding:.55rem .9rem; border-radius:var(--bb-r-pill);
  color:var(--bb-ink-soft); font-weight:600; font-size:var(--bb-fs-sm);
  transition:background .16s var(--bb-ease), color .16s var(--bb-ease);
}
.bb-nav__link:hover{ background:var(--bb-blue-050); color:var(--bb-blue-700); text-decoration:none }

/* Aqui vivia `.bb-wa-pill`, el telefono con icono de WhatsApp en el encabezado.
   Se retiro de las cuatro paginas: el unico canal visible de WhatsApp es la
   burbuja flotante. */

/* En telefono los enlaces se aprietan pero NO se esconden. Antes se ocultaban
   porque la pildora de WhatsApp quedaba como unico elemento del menu; sin ella,
   esconderlos dejaria el encabezado con solo el logo y sin forma de navegar. */
/* En telefono los enlaces se aprietan de ancho pero NO de alto: 44px es el area
   de toque minima recomendada, y median 37. Con solo dos enlaces sobra espacio
   para darles ese alto sin que el encabezado se descuadre. */
@media (max-width:860px){
  .bb-brand img{ height:38px }
  .bb-brand__word{ font-size:1.1rem }
  .bb-nav{ gap:.25rem }
  .bb-nav__link{
    display:flex; align-items:center; min-height:44px;
    padding:0 .7rem; font-size:var(--bb-fs-xs);
  }
}
@media (max-width:400px){
  .bb-brand__word{ display:none }
}

/* ==========================================================================
   Portada
   ========================================================================== */

.bb-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(204,132,66,.22), transparent 62%),
    radial-gradient(760px 460px at 4% 8%,   rgba(43,122,171,.34), transparent 60%),
    linear-gradient(158deg, var(--bb-blue-900) 0%, var(--bb-blue-800) 46%, #0a2233 100%);
  color:#fff;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3.5rem,8vw,6rem);
}

/* Trama de puntos tenue: da textura sin competir con el texto.
   Cuando el diseñador entregue una fotografía, se agrega como capa acá:
       .bb-hero{ background-image:url('../img/hero.jpg'), <los gradientes> }
   con background-size:cover y los gradientes por delante como velo, para que
   el contraste del texto no dependa de la foto. */
.bb-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 90% at 30% 0%, #000 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%, #000 25%, transparent 75%);
}

/* ---- Marca de agua del monograma ----
   Dos en escritorio, una sola en telefono, pedido del cliente.

   Va como MASCARA y no como imagen. El monograma es azul y ambar; sobre este
   fondo azul marino la parte azul desaparece y solo se ve media figura. Con
   `mask-image` la forma se recorta del alfa del archivo y el color lo pone
   `background`, asi que sale una silueta blanca entera y legible.

   Se usan DOS capas de mascara en un solo pseudoelemento en vez de dos
   elementos: es decoracion pura, no debe existir en el HTML ni llegar a un
   lector de pantalla. `.bb-hero::before` ya esta ocupado por la trama de puntos.

   `bluebox-marca-agua.png` sale del original de 3000x3000, no del logo de
   111x160 de la barra: a este tamaño ese archivo se veria borroso.

   Las dos van en los margenes de afuera, no detras del texto. El contenido topa
   en `--bb-content-max` y en pantalla ancha sobran unos 150px por lado; ahi
   caben. `left:-4%` y `right:-6%` las sacan un poco de cuadro a proposito, para
   que se lean como marca de agua recortada por el borde y no como dos logos
   sueltos. Al 7% no compiten con el texto: el blanco sobre el azul marino queda
   apenas insinuado. */
.bb-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:#fff;
  opacity:.07;

  mask-image:url('../img/bluebox-marca-agua.png'), url('../img/bluebox-marca-agua.png');
  mask-repeat:no-repeat, no-repeat;
  mask-position:left -4% center, right -6% center;
  mask-size:auto 76%, auto 62%;
  -webkit-mask-image:url('../img/bluebox-marca-agua.png'), url('../img/bluebox-marca-agua.png');
  -webkit-mask-repeat:no-repeat, no-repeat;
  -webkit-mask-position:left -4% center, right -6% center;
  -webkit-mask-size:auto 76%, auto 62%;
}

/* Entre 981 y 1340px las dos marcas se achican.
   El contenido topa en 1200px, asi que a 1280 no sobra margen: cualquier marca
   visible en los costados pasa por detras del titular. Medido a 1280 con el
   tamaño grande, la marca izquierda llegaba a x=331 y el titular arranca en x=80,
   o sea 251px por detras del texto. Achicandolas, la parte con silueta queda
   sobre el borde y lo que cruza el texto es la zona transparente del archivo.
   Al 7% el blanco sobre azul marino no le quita contraste al texto —sigue por
   encima de 10:1— pero una figura reconocible detras de un titular se lee como
   suciedad, no como marca de agua. */
@media (max-width:1340px){
  .bb-hero::after{
    mask-size:auto 54%, auto 46%;
    -webkit-mask-size:auto 54%, auto 46%;
  }
}

/* Debajo de 980px la portada pasa a una sola columna y los margenes laterales
   se comen: dos marcas quedarian detras del texto. Se deja UNA, arriba a la
   derecha, a la altura del rotulo, que es el unico hueco libre.

   El tamaño va en PIXELES y no en porcentaje del alto. En una sola columna la
   portada mide mas del doble, asi que un `auto 34%` daba una marca de 200px de
   alto que cruzaba el titular. Con medida fija no depende de cuanto crezca la
   portada al apilarse el contenido. */
@media (max-width:980px){
  .bb-hero::after{
    opacity:.10;
    mask-image:url('../img/bluebox-marca-agua.png');
    mask-repeat:no-repeat;
    mask-position:right -18px top 10px;
    mask-size:132px auto;
    -webkit-mask-image:url('../img/bluebox-marca-agua.png');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:right -18px top 10px;
    -webkit-mask-size:132px auto;
  }
}

/* Quien pidio menos animacion no pidio menos decoracion, asi que la marca se
   queda. Pero si el navegador no soporta mascaras, `background:#fff` pintaria
   un rectangulo blanco encima de la portada: mejor no mostrar nada. */
@supports not ((mask-image:url('')) or (-webkit-mask-image:url(''))){
  .bb-hero::after{ display:none }
}

.bb-hero__grid{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
@media (max-width:980px){
  .bb-hero__grid{ grid-template-columns:1fr }
}

.bb-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; margin-bottom:1.25rem;
  border-radius:var(--bb-r-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  font-size:var(--bb-fs-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.bb-eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--bb-amber-300);
}

.bb-hero h1{ font-size:var(--bb-fs-hero); font-weight:800; max-width:20ch }
.bb-hero h1 em{ font-style:normal; color:var(--bb-amber-300) }

.bb-hero__sub{
  margin-top:1.1rem; max-width:46ch;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  color:rgba(255,255,255,.82);
}

/* ---- Buscador de rastreo ---- */

.bb-track{ margin-top:clamp(1.75rem,3vw,2.5rem); max-width:560px }

.bb-track__form{
  display:flex; gap:.6rem; padding:.6rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--bb-r-lg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (max-width:560px){
  .bb-track__form{ flex-direction:column }
}

.bb-track__input{
  flex:1 1 auto; min-width:0;
  padding:.95rem 1.1rem;
  font-family:inherit; font-size:1rem; font-weight:600;
  color:var(--bb-ink); background:#fff;
  border:1px solid transparent; border-radius:var(--bb-r);
}
.bb-track__input::placeholder{ color:var(--bb-muted); font-weight:500 }
.bb-track__input:focus{ outline:none; box-shadow:var(--bb-ring); border-color:#fff }

.bb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem; border:1px solid transparent; border-radius:var(--bb-r);
  font-family:var(--bb-font); font-size:var(--bb-fs-sm); font-weight:800;
  letter-spacing:.03em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
  transition:transform .12s var(--bb-ease), background .16s var(--bb-ease), box-shadow .16s var(--bb-ease);
}
.bb-btn:hover{ text-decoration:none }
.bb-btn:active{ transform:translateY(1px) }
.bb-btn[disabled]{ opacity:.65; cursor:progress }

/* Ámbar oscuro, no el del logo: el 600 con texto blanco da 3.0:1 y no cumple.
   El 700 llega a 4.7:1. */
.bb-btn--accent{ background:var(--bb-accent-strong); color:#fff; box-shadow:var(--bb-shadow) }
.bb-btn--accent:hover{ background:#8f5626 }

.bb-btn--block{ width:100% }

.bb-track__hint{
  margin-top:.7rem; font-size:var(--bb-fs-xs);
  color:rgba(255,255,255,.62);
}

/* ---- Resultado del rastreo ---- */

.bb-result{
  margin-top:1.1rem; padding:1.15rem 1.25rem;
  background:#fff; color:var(--bb-ink);
  border-radius:var(--bb-r-lg); box-shadow:var(--bb-shadow-lg);
}
.bb-result[hidden]{ display:none }

.bb-result__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding-bottom:.85rem; margin-bottom:.85rem;
  border-bottom:1px solid var(--bb-line);
}
.bb-result__num{
  font-family:var(--bb-font-display); font-weight:700; font-size:1.1rem;
  letter-spacing:.01em; word-break:break-all;
}
.bb-result__shipper{ font-size:var(--bb-fs-sm); color:var(--bb-muted) }

.bb-result__msg{ font-size:var(--bb-fs-sm); display:flex; gap:.6rem; align-items:flex-start }
.bb-result__msg--error{ color:var(--bb-danger); font-weight:600 }

/* Línea de tiempo de eventos */
.bb-events{ list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto }
.bb-events li{
  position:relative; padding:.55rem 0 .55rem 1.65rem;
  font-size:var(--bb-fs-sm);
}
.bb-events li::before{
  content:''; position:absolute; left:.25rem; top:1.05rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--bb-blue-300); box-shadow:0 0 0 3px var(--bb-blue-050);
}
/* La línea vertical une los puntos; no se dibuja en el último. */
.bb-events li:not(:last-child)::after{
  content:''; position:absolute; left:.58rem; top:1.75rem; bottom:-.35rem;
  width:2px; background:var(--bb-line);
}
/* El primero es el estado actual: se destaca. */
.bb-events li:first-child::before{ background:var(--bb-amber-600); box-shadow:0 0 0 3px var(--bb-amber-100) }
.bb-events li:first-child .bb-events__detail{ font-weight:700 }

.bb-events__detail{ display:block; color:var(--bb-ink) }
.bb-events__meta{ display:block; font-size:var(--bb-fs-xs); color:var(--bb-muted); margin-top:.1rem }

/* Indicador de carga */
.bb-spin{
  width:16px; height:16px; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:bb-spin .7s linear infinite;
}
@keyframes bb-spin{ to{ transform:rotate(360deg) } }

/* ==========================================================================
   Tarjeta de acceso al portal
   ========================================================================== */

.bb-login{
  background:var(--bb-blue-900);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--bb-r-lg);
  box-shadow:var(--bb-shadow-lg);
  overflow:hidden;
}

.bb-login__body{ padding:clamp(1.5rem,3vw,1.9rem) }

.bb-login h2{
  font-size:1.35rem; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase;
  color:#fff;
}
.bb-login__intro{
  margin-top:.4rem; margin-bottom:1.35rem;
  font-size:var(--bb-fs-sm); color:rgba(255,255,255,.72);
}

.bb-field{ margin-bottom:.9rem }
.bb-field label{
  display:block; margin-bottom:.4rem;
  font-size:var(--bb-fs-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.bb-field input{
  width:100%; padding:.9rem 1rem;
  font-family:inherit; font-size:1rem;
  color:var(--bb-ink); background:#fff;
  border:1px solid transparent; border-radius:var(--bb-r);
}
.bb-field input::placeholder{ color:var(--bb-muted) }
.bb-field input:focus{ outline:none; box-shadow:var(--bb-ring); border-color:#fff }

.bb-login__submit{ margin-top:1.25rem }

.bb-login__forgot{
  display:inline-block; margin-top:1rem;
  font-size:var(--bb-fs-sm); font-weight:600;
  color:var(--bb-amber-300);
}

.bb-login__foot{
  padding:1.1rem clamp(1.5rem,3vw,1.9rem);
  background:rgba(255,255,255,.06);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--bb-fs-sm); color:rgba(255,255,255,.78);
  display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:baseline;
}
.bb-login__foot a{ color:#fff; font-weight:800; text-decoration:underline }

/* Aviso de que la contraseña se envía al portal por conexión cifrada. */
.bb-login__secure{
  display:flex; align-items:center; gap:.45rem;
  margin-top:1rem; font-size:var(--bb-fs-xs);
  color:rgba(255,255,255,.55);
}
.bb-login__secure svg{ width:13px; height:13px; fill:currentColor; flex:0 0 auto }

/* ==========================================================================
   Servicios
   ========================================================================== */

.bb-section{ padding-block:var(--bb-section-y) }
.bb-section--soft{ background:var(--bb-ground) }

.bb-section__head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem) }
.bb-section__head h2{ font-size:var(--bb-fs-h2); font-weight:800 }
.bb-section__head p{ margin-top:.85rem; color:var(--bb-muted); font-size:1.0625rem }

.bb-cards{
  display:grid; gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}

.bb-card{
  position:relative;
  /* Flex en columna para que un aviso al final pueda empujarse al borde de abajo
     con `margin-top:auto`. Ver `.bb-card__nota`. */
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.5vw,2rem);
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-r-lg);
  box-shadow:var(--bb-shadow-sm);
  transition:transform .2s var(--bb-ease), box-shadow .2s var(--bb-ease), border-color .2s var(--bb-ease);
}
.bb-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--bb-shadow);
  border-color:var(--bb-line-strong);
}

/* Filete superior en el color de la marca: el detalle que amarra las tarjetas
   con el resto de la identidad. */
.bb-card::before{
  content:''; position:absolute; left:clamp(1.6rem,2.5vw,2rem); top:0;
  width:42px; height:3px; border-radius:0 0 3px 3px;
  background:var(--bb-primary);
}
.bb-card:nth-child(2)::before{ background:var(--bb-accent) }

.bb-card__icon{
  display:grid; place-items:center;
  width:48px; height:48px; margin-bottom:1.1rem;
  border-radius:var(--bb-r);
  background:var(--bb-blue-050); color:var(--bb-blue-700);
}
.bb-card:nth-child(2) .bb-card__icon{ background:var(--bb-amber-100); color:var(--bb-amber-700) }

/* Aviso de que algo no aplica a todas las rutas. Lleva el mismo punto ambar que
   en la pagina de tarifas marca un aviso —no un beneficio—, para que el lenguaje
   visual sea el mismo en las dos paginas: una vista significa "lo tenes", un
   punto ambar significa "tenelo en cuenta".
   Va con `margin-top:auto` para que quede pegado al borde de abajo: la rejilla
   estira las tres tarjetas a la misma altura, y un aviso suelto a media tarjeta
   se leeria como parte del parrafo. */
/* Selector largo a proposito. `.bb-card p` pinta los parrafos de gris apagado, y
   una clase suelta EMPATA con el en especificidad: como esa regla va despues en
   el archivo, ganaba por orden y el aviso salia del mismo gris que la
   descripcion, sin distinguirse de ella. */
.bb-card p.bb-card__nota{
  position:relative;
  margin-top:auto; padding-top:1rem; padding-left:1rem;
  font-size:var(--bb-fs-xs); font-weight:600;
  color:var(--bb-amber-700);   /* 4,67:1 sobre blanco */
}
.bb-card__nota::before{
  content:''; position:absolute; left:0; top:1.35rem;
  width:6px; height:6px; border-radius:50%;
  background:var(--bb-amber-600);
}
.bb-card__icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }

/* Reserva dos renglones para el título aunque ocupe uno.
   Un título que se parte en dos líneas empuja su descripción hacia abajo, y
   entonces los párrafos de las tres tarjetas arrancan a distinta altura. La
   caja siempre midió igual —la rejilla las estira— pero el contenido quedaba
   desalineado. El valor va en em para que sean dos renglones exactos del
   propio título, sin depender del tamaño en píxeles. */
.bb-card h3{
  font-size:var(--bb-fs-h3); font-weight:700;
  min-height:2.24em;   /* 2 renglones: 2 x line-height 1.12 */
}
.bb-card p{ margin-top:.6rem; color:var(--bb-muted); font-size:var(--bb-fs-sm) }

/* ==========================================================================
   Carrusel de tiendas
   ========================================================================== */

.bb-stores{ padding-block:clamp(2.5rem,5vw,4rem); overflow:hidden }

/* Difumina los extremos para que las marcas entren y salgan sin cortarse. */
.bb-marquee{
  position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.bb-marquee__track{
  display:flex; width:max-content;
  animation:bb-marquee 42s linear infinite;
}
.bb-marquee:hover .bb-marquee__track{ animation-play-state:paused }

/* La pista lleva la lista DUPLICADA. Se desplaza exactamente la mitad y vuelve
   a cero: el salto coincide con el inicio de la copia, así que no se ve. */
@keyframes bb-marquee{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* Cada mitad de la pista. Va en clase y no en atributo style para que la
   politica de seguridad pueda prohibir estilos incrustados. */
.bb-marquee__group{ display:flex }

/* Pastilla de tienda: logo + nombre, y es un enlace a la tienda. */
.bb-store{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.6rem;
  margin-inline:.4rem;
  padding:.6rem 1.15rem .6rem .7rem;
  background:var(--bb-surface);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-r-pill);
  box-shadow:var(--bb-shadow-sm);
  color:var(--bb-blue-800);
  font-family:var(--bb-font-display);
  font-size:clamp(.95rem,1.2vw,1.05rem); font-weight:700;
  letter-spacing:-.01em; white-space:nowrap;
  transition:transform .16s var(--bb-ease), box-shadow .16s var(--bb-ease),
             border-color .16s var(--bb-ease);
}
.bb-store:hover{
  transform:translateY(-2px);
  box-shadow:var(--bb-shadow);
  border-color:var(--bb-line-strong);
  text-decoration:none;
}

.bb-store img{
  width:28px; height:28px; flex:0 0 auto;
  object-fit:contain;
  /* Los logos vienen en lienzo cuadrado de 96px; se muestran a 28px, así que
     en pantallas de alta densidad siguen nítidos. */
}

/* ==========================================================================
   Pie
   ========================================================================== */

.bb-footer{
  background:var(--bb-blue-900); color:rgba(255,255,255,.72);
  font-size:var(--bb-fs-sm);
}

/* El pie NO usa `--bb-content-max` como el resto del sitio. Esa variable llega a
   1560px en un monitor grande, y con tres columnas de texto corto el bloque se
   estiraba de punta a punta: se leia como tres islas sueltas y no como un pie.
   Un tope propio y mas estrecho lo mantiene compacto a cualquier ancho. */
.bb-footer .bb-wrap{ max-width:1120px }

.bb-footer__inner{
  padding-block:clamp(2.25rem,4vw,3.25rem);
}

/* Tres columnas: la marca, las secciones del sitio y el casillero. Eran cuatro;
   la de "Escribinos" se retiro junto con su boton verde y su telefono.
   Columnas parejas y separacion fija de 2.5rem: antes la marca pesaba 1.7fr y la
   separacion crecia con la pantalla, asi que en un monitor ancho quedaban 200px
   de vacio entre el texto de la marca y la primera columna de enlaces. */
.bb-footer__grid{
  display:grid; gap:2.5rem;
  grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));
  align-items:start;
}
/* En tableta: la marca ocupa el ancho completo y las dos columnas de enlaces se
   reparten debajo. */
@media (max-width:900px){
  .bb-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bb-footer__col--brand{ grid-column:1 / -1 }
}
@media (max-width:520px){
  .bb-footer__grid{ grid-template-columns:1fr; gap:2rem }
}

/* Sin regla propia la clase quedaba como un gancho vacio. `min-width:0` es la
   proteccion estandar contra que una palabra larga estire una celda de rejilla
   por encima de su reparto. */
.bb-footer__col{ min-width:0 }

.bb-footer__brand{ display:flex; align-items:center; gap:.7rem }
.bb-footer__brand:hover{ text-decoration:none }
.bb-footer__brand img{ height:36px; width:auto }
.bb-footer__brand .bb-brand__word{ color:#fff; font-size:1.05rem }

/* Una linea que explique a que se dedica la empresa. Sin ella la columna de la
   marca era solo un logo suelto y desequilibraba la rejilla. */
.bb-footer__tagline{
  margin-top:.75rem; max-width:32ch;
  color:rgba(255,255,255,.6); font-size:var(--bb-fs-xs); line-height:1.6;
}

.bb-footer__title{
  margin-bottom:.9rem;
  font-family:var(--bb-font-display);
  font-size:var(--bb-fs-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff;
}

.bb-footer__links{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start }
.bb-footer__links a{
  color:rgba(255,255,255,.72); font-weight:500;
  transition:color .16s var(--bb-ease);
}
.bb-footer__links a:hover{ color:#fff }

/* Redes sociales */
.bb-social{ display:flex; gap:.6rem; margin-top:1rem }
.bb-social a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--bb-r-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  transition:background .16s var(--bb-ease), transform .16s var(--bb-ease);
}
.bb-social a:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px) }
.bb-social svg{ width:19px; height:19px; fill:currentColor }

/* CENTRADA, y el borde cruza toda la pantalla.
   Antes iba con `justify-content:space-between`, asi que el enlace de terminos
   quedaba en la esquina inferior derecha: exactamente donde se para la burbuja
   de WhatsApp. Habia que reservarle 142px de relleno al pie para que no lo
   tapara, y eso solo lo hacia mas alto. Centrando el contenido, la esquina queda
   libre y el relleno extra sobra. */
.bb-footer__bottom{
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem;
  align-items:center; justify-content:center;
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.15rem;
  font-size:var(--bb-fs-xs); color:rgba(255,255,255,.55);
}
/* `inline-block` con relleno: como texto suelto el area de toque era de 18px de
   alto, el objetivo mas chico del sitio. */
.bb-footer__bottom a{
  display:inline-block; padding:.45rem .3rem;
  color:rgba(255,255,255,.8); text-decoration:underline;
}

/* En telefono la burbuja es de 48px y se pega a la esquina; ahi si puede rozar
   el texto centrado, que ocupa casi todo el ancho. Un poco de aire abajo. */
@media (max-width:560px){
  .bb-footer__bottom{ padding-bottom:calc(1.15rem + 48px) }
}

/* ==========================================================================
   Burbuja flotante de WhatsApp
   ========================================================================== */

/* Visible desde que se entra, y en las cuatro paginas. Antes aparecia solo tras
   bajar 320px; ahora es el UNICO boton verde del sitio, asi que no puede
   depender del scroll. Los demas enlaces a WhatsApp van en contorno, con
   `.bb-btn-wa` mas abajo, para que no compitan con ella. */
.bb-bubble{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:60;
  display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:var(--bb-whatsapp); color:#fff;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
  transition:transform .18s var(--bb-ease), background .18s var(--bb-ease);
}
.bb-bubble:hover{ transform:scale(1.07); background:var(--bb-whatsapp-dark); text-decoration:none }
.bb-bubble svg{ width:31px; height:31px; fill:currentColor }

/* En telefono la burbuja se encoge y se pega mas a la esquina. Al estar visible
   siempre, en una pantalla angosta se para sobre el borde derecho de los campos
   de acceso y del boton INGRESAR, que ocupan todo el ancho; un toque ahi abriria
   WhatsApp en lugar de entrar al casillero. Medido en 390px: la franja en
   conflicto baja de 54px a 14px en los controles de acceso (el 4% del boton) y
   a 29px en RASTREAR. Es el precio de que acompanie en toda la pagina, y es el
   mismo que paga cualquier sitio con boton flotante. */
@media (max-width:560px){
  .bb-bubble{
    right:.6rem; bottom:.6rem;
    width:48px; height:48px;
  }
  .bb-bubble svg{ width:26px; height:26px }
}

/* ---- Enlace a WhatsApp dentro del contenido ----
   En contorno, no en verde relleno. Tres botones verdes en una misma pantalla
   se leen como desorden y ninguno destaca; con la burbuja siempre presente,
   estos son un segundo camino, no el principal. El icono conserva su verde
   para que se reconozca de un vistazo. */
.bb-btn-wa{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:var(--bb-r-pill);
  background:var(--bb-surface); color:var(--bb-blue-800);
  border:1px solid var(--bb-blue-300);
  font-weight:800; font-size:var(--bb-fs-sm); letter-spacing:.02em;
  transition:background .16s var(--bb-ease), border-color .16s var(--bb-ease),
             transform .16s var(--bb-ease);
}
.bb-btn-wa:hover{
  background:var(--bb-blue-050); border-color:var(--bb-primary);
  transform:translateY(-2px); text-decoration:none;
}
.bb-btn-wa svg{ width:18px; height:18px; fill:var(--bb-whatsapp-dark) }

/* ==========================================================================
   Animación de entrada
   ========================================================================== */

/* Entrada discreta. Arranca en 0.35 y no en 0: si algo saliera mal con el
   observador, el contenido queda tenue pero legible, nunca invisible. */
.bb-reveal{ opacity:.35; transform:translateY(14px) }
.bb-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .4s var(--bb-ease), transform .4s var(--bb-ease);
}
/* Sin JavaScript el contenido debe verse igual: la clase la pone el script, y
   si no corre, este respaldo lo deja visible. */
.no-js .bb-reveal{ opacity:1; transform:none }

/* ==========================================================================
   Página legal (términos y condiciones)
   ========================================================================== */

/* ---------------------------------------------- Credito del desarrollador ----
   Discreto por diseno: es el pie de un sitio de un cliente, no una firma. Va en
   su propia linea debajo de la barra inferior, atenuado al 45%, y solo toma color
   completo al pasar el puntero o al recibir el foco con el teclado. El logo se
   mantiene chico —18px de alto— y se sirve desde este dominio, porque la politica
   de contenido no permite imagenes de otros. */
.bb-footer__credito{
  display:flex; justify-content:center;
  padding-bottom:1.15rem;
}
@media (max-width:560px){
  /* La burbuja de WhatsApp vive en esa esquina: se le deja espacio. */
  .bb-footer__credito{ padding-bottom:calc(1.15rem + 44px) }
}
.bb-footer__credito a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem;
  border-radius:var(--bb-r-sm);
  text-decoration:none;
  opacity:.45;
  transition:opacity .18s var(--bb-ease);
}
.bb-footer__credito a:hover,
.bb-footer__credito a:focus-visible{ opacity:1; text-decoration:none }
.bb-footer__credito a:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.55) }
.bb-footer__credito span{
  font-size:.6875rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:#fff;
}
.bb-footer__credito img{
  display:block;
  height:18px; width:auto;
}

.bb-legal{ padding-block:clamp(2.5rem,6vw,4.5rem) }
/* Centrado: la columna de 74ch es para que el texto legal se lea sin barrer la
   pantalla con la vista, pero pegada a la izquierda en un monitor ancho la
   pagina parece a medio terminar. */
.bb-legal__inner{ max-width:74ch; margin-inline:auto }

.bb-legal h1{
  font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800;
  margin-bottom:.6rem;
}
.bb-legal__updated{
  font-size:var(--bb-fs-sm); color:var(--bb-muted);
  padding-bottom:1.75rem; margin-bottom:2.25rem;
  border-bottom:1px solid var(--bb-line);
}

.bb-legal h2{
  font-size:1.3rem; font-weight:700;
  margin-top:2.5rem; margin-bottom:.75rem;
}
.bb-legal p, .bb-legal li{ color:var(--bb-ink-soft) }
.bb-legal p{ margin-bottom:1rem }
.bb-legal ul{ margin:0 0 1rem; padding-left:1.35rem }
.bb-legal li{ margin-bottom:.45rem }

/* Aviso de contenido por definir. Que se vea distinto es a propósito: nadie
   debe publicar la página creyendo que el texto legal ya está. */
/* Subapartados del texto legal (8.1, 8.2). Mas chicos que un h2 y sin el mismo
   aire arriba, para que se lean como parte de su apartado y no como uno nuevo. */
.bb-legal h3{
  margin:1.75rem 0 .6rem;
  font-family:var(--bb-font-display);
  font-size:1.0625rem; font-weight:700;
  color:var(--bb-ink);
}

/* Bloque con los datos de la empresa: es el que identifica a quien se obliga con
   el texto, asi que se separa del cuerpo en vez de perderse entre parrafos. */
.bb-legal__identidad{
  margin:1.25rem 0 1.75rem;
  padding:1rem 1.15rem;
  border-left:3px solid var(--bb-blue-300);
  background:var(--bb-blue-050);
  border-radius:0 var(--bb-r-sm) var(--bb-r-sm) 0;
}
.bb-legal__identidad p{ margin:0; line-height:1.7 }

/* La frase de cierre: es la que cuenta juridicamente, asi que no queda como un
   parrafo mas al final de la pagina. */
.bb-legal__cierre{
  margin-top:2rem;
  padding-top:1.25rem;
  border-top:1px solid var(--bb-line);
  font-weight:600;
  color:var(--bb-ink)!important;
}

.bb-back{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-bottom:2rem; font-weight:600; font-size:var(--bb-fs-sm);
}

/* La seccion de tiendas ya no lleva titulo: el carrusel de logos se explica
   solo. La regla de `.bb-stores__title` se retiro con el. */