/* ============================================================
   TUBOLETA · PUNTOS DE VENTA — hoja de estilos
   Se carga desde index.html. Los colores, radios y sombras solo
   se escriben en el bloque :root de aquí abajo.
   ============================================================ */
/* ============================================================
   TUBOLETA · PUNTOS DE VENTA
   Layout de 2 columnas: lista scrolleable + mapa sticky
   ============================================================ */

:root{
  --tb-blue:#006EB7;
  --tb-blue-600:#005A96;
  --tb-blue-50:#EAF4FD;
  --tb-navy:#262B47;
  --tb-yellow:#FBBA13;
  --tb-ink:#1B2033;
  --tb-body:#4A5163;
  --tb-muted:#7A8194;
  --tb-line:#E3E7EF;
  --tb-bg:#FFFFFF;
  --tb-white:#FFFFFF;
  --tb-surface:#F5F8FC;
  --tb-green:#0E8A4F;
  --tb-green-bg:#E6F5EE;
  --tb-red:#C0392B;
  --tb-red-bg:#FDEDEB;
  --tb-amber:#8A6100;
  --tb-amber-bg:#FFF6DB;

  --tb-radius:14px;
  --tb-radius-sm:10px;
  --tb-shadow:0 1px 2px rgba(27,32,51,.06), 0 8px 24px rgba(27,32,51,.06);
  --tb-shadow-lg:0 12px 40px rgba(27,32,51,.16);

  /* Escala del pie. El texto va en rgba(255,255,255,.90): el azul claro
     del tema da 3.42:1 sobre el azul de marca y no pasa AA; el .90 da 4.66:1. */
  --pie-texto:rgba(255,255,255,.90);
  --pie-linea:rgba(255,255,255,.22);
  --pie-linea-suave:rgba(255,255,255,.14);
  --pie-calle:clamp(16px,4vw,24px);
  --pie-fila-y:clamp(16px,2.2vw,20px);
  /* Alto máximo del panel abierto. Tiene que superar el alto real del
     contenido o lo recorta: medido son 313 px a 1366 y 386 px a 1024. */
  --pie-panel-max:460px;

  --header-h:64px;
  /* Alto real de la barra de búsqueda. Lo mide el JS al cargar y al
     redimensionar: es responsive y de él depende que la columna del
     mapa no se pase de alto ni quede debajo de la barra. */
  --toolbar-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tb-body);
  background:var(--tb-bg);
  font-size:15px;
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
/* Los controles de formulario no heredan la fuente por defecto:
   sin esto el navegador les pone la del sistema. */
button,input,select,textarea,optgroup,option{font-family:inherit}
button{font:inherit;color:inherit}
a{color:var(--tb-blue);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--tb-blue);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--tb-shadow-lg);font-weight:600;transition:top .15s}
.skip-link:focus{top:12px}

/* ---------- Header ---------- */
.tb-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;gap:16px;
  padding:0 clamp(16px,3vw,32px);
  background:var(--tb-blue);
  color:#fff;
}
.tb-header__logo img{height:26px;width:auto}
.tb-header__spacer{flex:1}
.tb-btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid rgba(255,255,255,.7);color:#fff;background:transparent;
  padding:8px 18px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.tb-btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;text-decoration:none}

/* ---------- Banner de cabecera ----------
   Se recorta con object-fit para que no empuje el mapa fuera de la
   primera pantalla: la pieza es mucho más alta de lo que conviene
   aquí. El banner no es sticky, así que desaparece al hacer scroll
   y la barra de búsqueda queda siempre a la vista. */
.tb-banner{background:var(--tb-blue);line-height:0}
.tb-banner img{
  width:100%;height:auto;
  max-height:300px;
  object-fit:cover;object-position:center;
}
@media (max-width:480px){
  /* La pieza vertical (4:5) va completa: recortarla parte la
     composicion, se pierde "CONOCE" arriba y el pin abajo. Solo se
     usa hasta 480 px porque por encima creceria demasiado alto
     (a 767 px de ancho mediria 958 px). */
  .tb-banner img{max-height:none}
}

/* ---------- Barra de título y filtro de ciudad ----------
   El título y el selector van en la misma línea, uno frente al otro.
   Sin buscador, el selector es el único control y no necesita fila
   propia: así la barra ocupa menos alto y el mapa sube. */
.tb-toolbar{
  position:sticky;top:var(--header-h);z-index:40;
  background:var(--tb-bg);
  border-bottom:1px solid var(--tb-line);
  padding:14px clamp(16px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.tb-toolbar__texto{min-width:0}
.tb-toolbar__title{
  margin:0 0 2px;font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--tb-ink);
  letter-spacing:-.02em;
}
.tb-toolbar__sub{margin:0;font-size:13.5px;color:var(--tb-muted)}

.tb-select{position:relative;flex:none}
.tb-select select{
  appearance:none;-webkit-appearance:none;
  height:44px;border:1.5px solid var(--tb-line);border-radius:999px;
  padding:0 38px 0 16px;font:inherit;font-size:14.5px;font-weight:600;color:var(--tb-ink);
  background:#fff;cursor:pointer;
}
.tb-select select:focus{outline:none;border-color:var(--tb-blue);box-shadow:0 0 0 3px var(--tb-blue-50)}
.tb-select::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2px solid var(--tb-body);border-bottom:2px solid var(--tb-body);
  transform:translateY(-70%) rotate(45deg);
}

/* ---------- Layout principal: 2 columnas ---------- */
.tb-layout{
  display:grid;
  grid-template-columns:minmax(360px,42%) 1fr;
  align-items:start;
  /* Aire antes del pie: sin esto el listado queda pegado al azul. */
  margin-bottom:clamp(32px,4vw,56px);
}

.tb-list-col{border-right:1px solid var(--tb-line);min-width:0}
.tb-list-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px clamp(16px,2vw,24px) 8px;
}
.tb-list-head h2{margin:0;font-size:17px;font-weight:800;color:var(--tb-ink)}
.tb-count{font-size:13px;color:var(--tb-muted);font-weight:600}
.tb-list{
  list-style:none;margin:0;
  padding:0 clamp(16px,2vw,24px) 48px;
  display:flex;flex-direction:column;gap:10px;
}

/* Tarjeta de punto */
.tb-card{
  position:relative;
  width:100%;text-align:left;
  display:grid;grid-template-columns:52px 1fr;gap:14px;
  padding:14px 16px;
  background:#fff;border:1.5px solid var(--tb-line);border-radius:var(--tb-radius);
  cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;
}
.tb-card:hover{border-color:#BCD9F2;box-shadow:var(--tb-shadow)}
.tb-card[aria-current="true"]{
  border-color:var(--tb-blue);background:var(--tb-blue-50);
  box-shadow:0 0 0 1px var(--tb-blue);
}
.tb-card[aria-current="true"]::before{
  content:"";position:absolute;left:-1.5px;top:14px;bottom:14px;width:4px;
  background:var(--tb-blue);border-radius:0 4px 4px 0;
}
.tb-card__logo{
  width:52px;height:52px;border-radius:10px;background:var(--tb-surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px;
}
.tb-card__logo img{max-height:100%;width:auto;object-fit:contain}
.tb-card__body{min-width:0}
/* los hijos de la tarjeta son <span> dentro de un <button>: hay que blockificarlos */
.tb-card__name{display:block;margin:0 0 3px;font-size:15px;font-weight:700;color:var(--tb-ink);line-height:1.3}
.tb-card__addr{
  margin:0;font-size:13.5px;color:var(--tb-body);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tb-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}

/* Estado abierto / cerrado */
.tb-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
}
.tb-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tb-status--open{color:var(--tb-green);background:var(--tb-green-bg)}
.tb-status--closed{color:var(--tb-red);background:var(--tb-red-bg)}
.tb-status--cond{color:var(--tb-amber);background:var(--tb-amber-bg)}
.tb-status--cond::before{display:none}

.tb-tag{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--tb-surface);color:var(--tb-muted)}

.tb-empty{padding:48px 24px;text-align:center;color:var(--tb-muted)}
.tb-empty strong{display:block;color:var(--tb-ink);font-size:16px;margin-bottom:6px}

/* Columna derecha: mapa sticky */
.tb-map-col{
  position:sticky;top:calc(var(--header-h) + var(--toolbar-h));
  height:calc(100vh - var(--header-h) - var(--toolbar-h));
  display:flex;flex-direction:column;
  background:var(--tb-surface);min-width:0;
}
.tb-map-frame{position:relative;flex:1;min-height:0}
.tb-map-frame iframe{width:100%;height:100%;border:0;display:block}

.tb-map-back{
  position:absolute;top:14px;left:14px;z-index:5;
  display:none;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--tb-line);border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--tb-ink);
  box-shadow:var(--tb-shadow);cursor:pointer;
}
.tb-map-back.is-visible{display:inline-flex}
.tb-map-back:hover{background:var(--tb-surface)}

/* Panel de detalle */
.tb-detail{
  position:relative;
  border-top:1px solid var(--tb-line);
  background:#fff;
  max-height:48%;
  overflow-y:auto;
  padding:18px clamp(16px,2vw,24px) 20px;
  box-shadow:0 -8px 24px rgba(27,32,51,.06);
}
.tb-detail[hidden]{display:none}
.tb-detail__head{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.tb-detail__logo{
  width:56px;height:56px;border-radius:12px;background:var(--tb-surface);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:7px;
}
.tb-detail__logo img{max-height:100%;width:auto;object-fit:contain}
.tb-detail__title{margin:0 0 2px;font-size:19px;font-weight:800;color:var(--tb-ink);line-height:1.25}
.tb-detail__city{display:block;font-size:13px;color:var(--tb-muted);font-weight:600}
.tb-detail__addr{margin:10px 0 0;font-size:14.5px;color:var(--tb-ink);font-weight:600}

/* Nombre, dirección y acciones a la izquierda; imágenes a la derecha,
   arrancando a la misma altura que el logo y el título. El horario va
   debajo, a ancho completo: es una tabla de dos columnas y se lee
   mucho mejor sin estrechar. */
.tb-detail__top{
  display:grid;grid-template-columns:minmax(0,1fr) 220px;
  gap:22px;align-items:start;
}
.tb-detail__top.is-solo{grid-template-columns:1fr}
.tb-detail__topmain{min-width:0}
.tb-detail__media{min-width:0}
@media (max-width:640px){
  /* Una sola columna: dirección y botones primero, foto después.
     Decidir cómo llegar pesa más que ver el sitio. */
  .tb-detail__top{grid-template-columns:1fr;gap:16px}
  .tb-detail__media{max-width:300px}
}

.tb-gallery{display:flex;flex-direction:column;gap:8px}
.tb-gallery__main{
  border-radius:10px;overflow:hidden;background:var(--tb-surface);
  aspect-ratio:4/3;border:1px solid var(--tb-line);
}
.tb-gallery__main img{width:100%;height:100%;object-fit:cover}
.tb-gallery__thumbs{display:flex;gap:6px;flex-wrap:wrap}
.tb-gallery__thumb{
  width:46px;height:46px;padding:0;overflow:hidden;cursor:pointer;
  border:2px solid var(--tb-line);border-radius:8px;background:var(--tb-surface);
  transition:border-color .15s;
}
.tb-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.tb-gallery__thumb:hover{border-color:#BCD9F2}
.tb-gallery__thumb.is-active{border-color:var(--tb-blue)}

/* Espacio reservado mientras no hay fotos cargadas */
.tb-gallery__placeholder{
  aspect-ratio:4/3;border-radius:10px;
  border:1.5px dashed #C3D3E6;background:var(--tb-surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:14px;text-align:center;color:var(--tb-muted);
}
.tb-gallery__placeholder svg{opacity:.55}
.tb-gallery__placeholder-t{font-size:12.5px;font-weight:700;color:var(--tb-body)}
.tb-gallery__placeholder-s{font-size:11.5px;line-height:1.4}

.tb-detail__actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.tb-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  height:42px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:700;
  border:1.5px solid transparent;cursor:pointer;transition:all .15s;
}
.tb-btn--primary{background:var(--tb-blue);color:#fff}
.tb-btn--primary:hover{background:var(--tb-blue-600);text-decoration:none}
.tb-btn--secondary{background:#fff;color:var(--tb-ink);border-color:var(--tb-line)}
.tb-btn--secondary:hover{border-color:var(--tb-blue);color:var(--tb-blue);text-decoration:none}

.tb-hours{margin:16px 0 0;border-top:1px solid var(--tb-line);padding-top:14px}
.tb-hours h4{
  margin:0 0 10px;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--tb-muted);
}
.tb-hours dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px}
.tb-hours dt{font-weight:700;color:var(--tb-ink);white-space:nowrap}
.tb-hours dd{margin:0;color:var(--tb-body)}
.tb-hours .is-today{color:var(--tb-blue-600)}

.tb-notes{
  margin:14px 0 0;padding:11px 13px;border-radius:var(--tb-radius-sm);
  background:var(--tb-amber-bg);color:var(--tb-amber);font-size:13px;font-weight:600;
  display:flex;gap:9px;align-items:flex-start;
}
.tb-notes svg{flex:none;margin-top:2px}

.tb-detail__close{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;border-radius:50%;border:0;background:var(--tb-surface);
  cursor:pointer;display:none;align-items:center;justify-content:center;
}

/* ==========================================================================
   Footer · versión C
   Franja de marca en horizontal y el resto de la navegación dentro de un
   panel desplegable. Tres piezas: franja, desplegable y barra inferior.
   ========================================================================== */
.pie{background:var(--tb-blue);color:var(--pie-texto);font-size:15px}

/* El anillo de foco de la página es azul y sobre el azul del pie no se ve. */
.pie :focus-visible{outline-color:var(--tb-yellow)}

/* Replica los anchos de .container de Bootstrap: este pie va debajo del
   sitio real y sus bordes tienen que alinear con los del header. */
.pie__ancho{width:100%;margin-inline:auto;padding-inline:var(--pie-calle)}
@media (min-width:576px) {.pie__ancho{max-width:540px}}
@media (min-width:768px) {.pie__ancho{max-width:720px}}
@media (min-width:992px) {.pie__ancho{max-width:960px}}
@media (min-width:1200px){.pie__ancho{max-width:1140px}}
@media (min-width:1400px){.pie__ancho{max-width:1320px}}

.pie a{color:var(--pie-texto);text-decoration:none;transition:color .15s}
/* Sobre el azul, pasar de rgba(255,255,255,.90) a blanco puro casi no se
   percibe: el que hace el trabajo es el subrayado. */
.pie a:hover{
  color:var(--tb-white);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
}
/* Los enlaces sin texto tienen su propio estado; un subrayado ahí no dice nada. */
.pie .pie-marca__logo:hover,
.pie .pie-redes a:hover,
.pie .pie-apps__badges a:hover{text-decoration:none}
/* :where() para que estos reseteos no pesen en la especificidad. */
.pie :where(p){margin:0}
.pie :where(ul){list-style:none;margin:0;padding:0}

/* --- Franja de marca --- */
.pie-franja{
  display:flex;align-items:center;gap:clamp(24px,4vw,64px);
  padding-top:calc(var(--pie-fila-y) * 1.6);
  padding-bottom:calc(var(--pie-fila-y) * 1.6);
}
.pie-franja__marca{flex:1 1 auto;min-width:0}
.pie-marca__logo{display:inline-block;margin-bottom:12px}
/* 140 px de ancho dan 25 px de alto: el mismo tamaño visual que el
   logo del header, que mide 98x26. */
.pie-marca__logo img{width:140px}
.pie-franja__texto p{font-size:14px;line-height:1.5;max-width:78ch}
.pie-franja__texto p + p{margin-top:8px}
.pie-enlace-prosa{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.pie-apps{flex:0 0 auto}
.pie-apps__tit{font-weight:700;color:var(--tb-white);margin-bottom:10px;font-size:14px}
.pie-apps__badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pie-apps__badges a{display:inline-flex;border-radius:8px;transition:opacity .16s}
.pie-apps__badges a:hover{opacity:.82}
.pie-apps__badges img{display:block;width:auto;height:38px}
/* El PNG de Google reserva 11,6 % de margen transparente arriba y abajo (arte
   de 646x192 dentro de 646x250). Se escala 38 / 0,768 = 49 px para que el
   badge visible quede del mismo alto que el de Apple. */
.pie-apps__badges .es-play img{height:49px;margin-block:-6px}

@media (max-width:991.98px){
  .pie-franja{display:block}
  .pie-franja__marca{margin-bottom:20px}
}

/* --- Desplegable ---
   La pestaña se posiciona sobre el borde superior del panel: absolute,
   centrada, sin borde inferior y desplazada 1 px para tapar la línea. */
.pie-desp{position:relative;padding-top:32px}
.pie-desp__tit{margin:0;font-size:inherit;font-weight:inherit}
.pie-desp__btn{
  position:absolute;left:50%;top:0;transform:translate(-50%,1px);
  display:inline-flex;align-items:center;gap:8px;
  height:33px;padding:0 20px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--tb-white);
  background:var(--tb-blue);
  border:1px solid var(--pie-linea);border-bottom:0;
  border-radius:6px 6px 0 0;
  cursor:pointer;z-index:1;
  transition:background .2s linear;
}
/* La flecha apunta arriba con el panel cerrado y gira abajo al abrirlo: no
   señala hacia dónde crece el panel, sino la acción. */
.pie-desp__flecha{
  width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(2px) rotate(-135deg);
  transition:transform .2s linear;
}
.pie-desp__btn[aria-expanded="true"] .pie-desp__flecha{transform:translateY(-2px) rotate(45deg)}

/* Tres estados en positivo. El orden importa: por defecto el panel está
   ABIERTO, que es lo que hay que ver si el JS no corre; cuando el script
   arranca marca .pie[data-js] y ahí se cierra; con data-abierto vuelve a abrir. */
.pie-desp__panel{
  background:var(--tb-blue-600);
  border-top:1px solid var(--pie-linea);
  max-height:var(--pie-panel-max);
  overflow:hidden;
  transition:max-height .2s ease-in;
}
.pie[data-js] .pie-desp__panel{max-height:0;border-top-width:0}
.pie[data-js] .pie-desp[data-abierto] .pie-desp__panel{
  max-height:var(--pie-panel-max);
  border-top-width:1px;
}
.pie-desp[data-abierto] .pie-desp__btn{background:var(--tb-blue-600)}

/* --- Columnas del panel --- */
.pie-desp__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
  padding-top:calc(var(--pie-fila-y) * 1.6);
  padding-bottom:calc(var(--pie-fila-y) * 1.6);
}
.pie-col__tit{margin:0;font-size:inherit;font-weight:inherit}
.pie-col__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:transparent;border:0;padding:16px 0;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--tb-white);
  letter-spacing:-.01em;text-align:left;cursor:pointer;
  min-height:44px;
}
.pie-col__flecha{
  flex:0 0 auto;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .15s;opacity:.6;
}
.pie-col__btn[aria-expanded="true"] .pie-col__flecha{transform:translateY(2px) rotate(-135deg)}
.pie-col__btn:hover .pie-col__flecha{opacity:1}

.pie-col__panel{padding-bottom:20px}
.pie-col__panel[hidden]{display:none}
.pie-col__panel li + li{margin-top:10px}
.pie-col__panel a{display:inline-block;padding:3px 0;line-height:1.4;font-size:14px}

@media (min-width:992px){
  /* En escritorio las columnas están abiertas y la flecha sobra. El botón
     sigue existiendo y funcionando para que aria-expanded nunca diga algo
     distinto de lo que se ve. */
  .pie-col__btn{padding:0 0 14px;cursor:default}
  .pie-col__flecha{display:none}
  .pie-col__panel{padding-bottom:0}
  .pie-col__panel li + li{margin-top:4px}
  .pie-col__panel a{padding:1px 0}
}

/* Datos y redes, en la cuarta columna */
.pie-dato{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin-bottom:16px}
.pie-dato svg{flex:0 0 auto;width:18px;height:18px;fill:currentColor;opacity:.85;margin-top:2px}
.pie-dato__et{display:block;color:var(--tb-white);font-weight:600}
.pie-tel{font-variant-numeric:tabular-nums}

.pie-redes{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pie-redes a{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--pie-linea);color:var(--tb-white);
  transition:background .15s,border-color .15s;
}
.pie-redes a:hover{background:rgba(255,255,255,.12);border-color:var(--tb-white)}
.pie-redes svg{width:19px;height:19px;fill:currentColor}
@media (min-width:992px){
  /* 34 px y 8 px de hueco: el mínimo de 44 px es área táctil y con ratón no
     aplica. Con cinco redes es lo que hace que quepan en una sola fila dentro
     de la columna, que mide ~204 px útiles: 5x34 + 4x8 = 202. */
  .pie-redes{gap:8px}
  .pie-redes a{width:34px;height:34px}
  .pie-redes svg{width:16px;height:16px}
}

/* En móvil no hay pestaña: el panel queda siempre abierto y las cuatro
   columnas vuelven a ser acordeón. */
@media (max-width:991.98px){
  .pie-desp{padding-top:0}
  .pie-desp__tit{display:none}
  /* Los tres selectores del estado de escritorio, repetidos para ganarles en
     especificidad: sin esto el panel se topa en 460 px y recorta el contenido
     con los cuatro acordeones abiertos. */
  .pie-desp__panel,
  .pie[data-js] .pie-desp__panel,
  .pie[data-js] .pie-desp[data-abierto] .pie-desp__panel{
    max-height:none;
    border-top-width:1px;
    background:var(--tb-blue);
  }
  .pie-desp__cols{display:block;padding-top:0;padding-bottom:var(--pie-fila-y)}
  .pie-desp__cols > *{border-top:1px solid var(--pie-linea-suave)}
  .pie-desp__cols > *:first-child{border-top:0}
  .pie-col--datos{padding-top:var(--pie-fila-y)}
}

/* --- Barra inferior --- */
.pie-base{border-top:1px solid var(--pie-linea)}
.pie-base__in{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:var(--pie-fila-y);padding-bottom:var(--pie-fila-y);
  text-align:center;
}
.pie-base__enlaces{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 0;
}
.pie-base__enlaces li{display:flex;align-items:center}
.pie-base__enlaces li:not(:last-child)::after{
  content:"";flex:0 0 auto;
  width:1px;height:12px;margin:0 14px;
  background:var(--pie-linea);
}
.pie-base__enlaces a{font-size:14px}
.pie-base__legal{font-size:13.5px;line-height:1.5}
/* ---------- Móvil ---------- */
.tb-mobile-toggle{display:none}

@media (max-width:1023px){
  .tb-layout{grid-template-columns:1fr}
  .tb-list-col{border-right:0;order:2}
  .tb-map-col{
    order:1;position:sticky;top:calc(var(--header-h) + var(--toolbar-h));
    height:auto;z-index:30;border-bottom:1px solid var(--tb-line);
  }
  .tb-map-frame{height:34vh;min-height:210px;flex:none;transition:height .2s}
  .tb-map-col.is-collapsed .tb-map-frame{height:0;min-height:0;overflow:hidden}
  .tb-mobile-toggle{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    border:0;border-top:1px solid var(--tb-line);background:#fff;
    padding:10px;font-size:13.5px;font-weight:700;color:var(--tb-blue);cursor:pointer;
  }
  .tb-detail{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    max-height:78vh;border-radius:20px 20px 0 0;border-top:0;
    box-shadow:var(--tb-shadow-lg);padding-top:28px;
  }
  .tb-detail__close{display:flex}
  /* Mientras la hoja está abierta, la columna sube por encima de la
     barra de búsqueda (40) y del scrim (55). Sin esto la hoja queda
     atrapada en el contexto de apilamiento de la columna. */
  body.tb-sheet-open .tb-map-col{z-index:70}
}
@media (min-width:1024px){
  .tb-scrim{display:none !important}
}
.tb-scrim{position:fixed;inset:0;background:rgba(27,32,51,.42);z-index:55}
.tb-scrim[hidden]{display:none}

@media (max-width:520px){
  /* Angosto: el selector baja y ocupa todo el ancho */
  .tb-toolbar{padding:12px 16px;gap:12px}
  .tb-toolbar__texto{flex:1 1 100%}
  .tb-select{flex:1 1 100%}
  .tb-select select{width:100%}
}