/* ============================================================
   Team Building LATAM · Estilos del sitio
   Hoja compartida por todas las páginas del sitio de Panamá
   Tipografía: Oswald (títulos) · Montserrat (cuerpo)
   ============================================================ */

/* === RESET DEFENSIVO: neutraliza reglas globales de tbe.css en los bloques nuevos === */
html, body{ margin:0 !important; padding:0 !important; width:100%; overflow-x:hidden; }

/* Solo la página de actividades de integración: `clip` recorta igual que `hidden` pero NO convierte
   a <body> en contenedor de scroll, que es lo que impedía que el catálogo se anclara.
   Acotado por clase para no alterar index.html ni el resto del sitio. */
html.int-catalogo,
html.int-catalogo body{ overflow-x:clip; }

.tbl-nav, .tbl-hero, .tbl-section, .clientes-carousel, footer{
  float:none !important; width:auto;
}
.tbl-hero, .tbl-section{ width:100%; box-sizing:border-box; }
.tbl-section *, .tbl-hero *, .tbl-nav *{ box-sizing:border-box; }
.tbl-section p{ margin:0 0 10px; }

/* === CARRUSEL DE CLIENTES (del sitio original) === */
.clientes-carousel{ overflow:hidden; background:#0a0a0a; padding:26px 0; width:100%; }
/* Los logos son de la trayectoria REGIONAL de Team Building LATAM, no de
   clientes atendidos en Panamá. El carrusel va sin encabezado (decisión de
   marca); .clientes-titulo se conserva por si se decide reponerlo. */
.clientes-titulo{
  font-family:'Oswald',sans-serif;
  font-size:12px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; text-align:center;
  color:#8d8d88; margin:0 0 16px; padding:0 20px;
}
.carousel-track{ display:flex; width:max-content; animation:scroll 60s linear infinite; }
.carousel-track .logo-item{ flex:0 0 auto; padding:0 30px; display:flex; align-items:center; float:none; }
.carousel-track .logo-item img{ height:46px; max-width:none; width:auto; opacity:.55; filter:grayscale(1) brightness(2); transition:opacity .3s ease; }
.carousel-track .logo-item img:hover{ opacity:1; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

:root{
  --tbl-red:#e51937;
  --tbl-nav-h:74px;   /* js/horizontal-catalog.js la reescribe con la altura medida */
  --tbl-black:#0a0a0a;
  --tbl-grey:#737373;
  --tbl-light:#f5f5f5;
}

.tbl-section{
  font-family:'Oswald',sans-serif;
  color:#111;
  padding:90px 0;
}
.tbl-wrap{ width:90%; max-width:1200px; margin:0 auto; }

.tbl-kicker{
  font-family:'Oswald',sans-serif;
  font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--tbl-red); font-size:15px; margin:0 0 14px;
}
.tbl-h2{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,4.5vw,52px); line-height:1.04; margin:0 0 22px; color:#0a0a0a;
}
.tbl-lead{
  font-family:montserrat,sans-serif; font-weight:400;
  font-size:clamp(16px,2vw,20px); line-height:1.6; color:#444; max-width:760px; margin:0 0 10px;
}

/* ---------- BOTÓN REUTILIZABLE ---------- */
.tbl-btn{
  display:inline-block; background:var(--tbl-red); color:#fff !important;
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; font-size:18px; padding:18px 44px; text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.tbl-btn:hover{ background:#c2152e; transform:translateY(-2px); }

/* ---------- DESTINOS ---------- */
.tbl-dest{ background:#fff; }
.tbl-dest .cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; margin-top:46px;
}
.tbl-card{
  position:relative; border:1px solid #e7e7e7; background:#fff; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tbl-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.12); }
.tbl-card .flag{ font-size:30px; }
.tbl-card .body{ padding:26px 24px 28px; }
.tbl-card h3{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:23px; margin:10px 0 8px; color:#0a0a0a;
}
.tbl-card p{
  font-family:montserrat,sans-serif; font-size:15px; color:#555; line-height:1.6; margin:0 0 14px;
}
.tbl-card .venue{
  font-family:montserrat,sans-serif; font-size:13px; color:#999;
  text-transform:uppercase; letter-spacing:.5px; border-top:1px solid #eee; padding-top:12px;
}
.tbl-card.feature{ border-color:var(--tbl-red); border-width:2px; }
.tbl-card.feature .tag{
  position:absolute; top:0; right:0; background:var(--tbl-red); color:#fff;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; letter-spacing:1px;
  padding:6px 14px; text-transform:uppercase;
}
.tbl-tier{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:2px; font-size:14px; color:#0a0a0a; margin:0 0 4px;
  padding:64px 0 10px; border-bottom:2px solid var(--tbl-red); display:inline-block;
}
/* El primer tier necesita menos espacio arriba */
.tbl-dest .tbl-tier:first-of-type{ padding-top:24px; }
.tbl-dest .cards{ margin-top:24px; }
.tbl-ampliables{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.tbl-ampliables span{
  font-family:montserrat,sans-serif; font-size:14px; color:#555;
  border:1px solid #ddd; padding:8px 18px; text-transform:uppercase; letter-spacing:.5px;
}

/* ---------- TARJETAS DE DESTINO CON FOTO (estilo mockup) ---------- */
.dest-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:24px; margin-bottom:0;
}
.dest-card{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden;
  border-radius:4px; background:#1a1a1a; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.12); transition:transform .22s ease, box-shadow .22s ease;
}
.dest-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(0,0,0,.22); }
.dest-card img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  z-index:0; transition:transform .4s ease;
}
.dest-card:hover img{ transform:scale(1.06); }
.dest-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 70%);
}
.dest-pin{
  position:absolute; left:0; right:0; bottom:16px; z-index:2; text-align:center;
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px;
  font-size:17px; color:#fff;
}
.dest-pin i{ color:var(--tbl-red); margin-right:5px; }
.dest-card.feature{ outline:3px solid var(--tbl-red); outline-offset:-3px; }
.dest-tag{
  position:absolute; top:12px; right:12px; z-index:2; background:var(--tbl-red); color:#fff;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; padding:5px 12px; border-radius:2px;
}

/* ---------- EXPERIENCIAS (franja negra con fotos) ---------- */
.tbl-exp{ background:var(--tbl-black); }
.tbl-exp-title{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; text-align:center;
  font-size:clamp(22px,3vw,34px); color:#fff; margin:0 0 8px; letter-spacing:.5px;
}
.tbl-exp-title .red{ color:var(--tbl-red); }
.tbl-exp-title::after{
  content:""; display:block; width:60px; height:3px; background:var(--tbl-red); margin:14px auto 0;
}
.exp-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:48px;
}
.exp-card{ display:flex; flex-direction:column; }
.exp-photo{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:#1a1a1a;
}
.exp-photo img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  transition:transform .4s ease;
}
.exp-card:hover .exp-photo img{ transform:scale(1.06); }
.exp-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
.exp-ico{
  position:absolute; left:16px; bottom:16px; z-index:2;
  width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
}
.exp-card h3{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:21px;
  line-height:1.1; margin:20px 0 10px; color:#fff;
}
.exp-card p{
  font-family:montserrat,sans-serif; font-size:14px; color:#b8b8b8; line-height:1.6; margin:0;
}

/* ---------- TIPOS DE EVENTO ---------- */
.tbl-types{ background:#fff; }
.tbl-types .types-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:40px;
}
.tbl-types .types-grid span{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px;
  font-size:17px; color:#0a0a0a; background:var(--tbl-light); padding:22px 24px;
  border-bottom:3px solid var(--tbl-red);
}
.tbl-diff{ margin-top:40px; border-left:4px solid var(--tbl-red); padding:6px 0 6px 26px; }
.tbl-diff p{
  font-family:montserrat,sans-serif; font-size:clamp(18px,2.4vw,25px);
  line-height:1.45; color:#0a0a0a; margin:0; max-width:840px;
}

/* ---------- CÓMO TRABAJAMOS ---------- */
.tbl-how{ background:var(--tbl-black); color:#fff; }
.tbl-how .tbl-h2{ color:#fff; }
.tbl-how .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px; margin-top:46px; }
.tbl-how .step .n{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:46px; color:var(--tbl-red); line-height:1;
}
.tbl-how .step h3{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; font-size:19px;
  margin:10px 0 8px;
}
.tbl-how .step p{
  font-family:montserrat,sans-serif; font-size:15px; color:#bbb; line-height:1.6; margin:0;
}

/* ---------- PRESENCIA ---------- */
.tbl-presence{ background:#fff; text-align:center; }
.tbl-presence .links{ margin-top:30px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.tbl-presence a.country{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1px;
  text-decoration:none; color:#0a0a0a; border:2px solid #0a0a0a; padding:14px 30px;
  transition:all .18s ease;
}
.tbl-presence a.country:hover{ background:#0a0a0a; color:#fff; }

/* ---------- CTA FINAL ---------- */
.tbl-cta{ background:var(--tbl-red); color:#fff; text-align:center; }
.tbl-cta .tbl-h2{ color:#fff; }
.tbl-cta p{
  font-family:montserrat,sans-serif; font-size:clamp(16px,2vw,20px);
  max-width:640px; margin:0 auto 34px; line-height:1.5;
}
.tbl-cta .tbl-btn{ background:#0a0a0a; }
.tbl-cta .tbl-btn:hover{ background:#000; }

@media (max-width:768px){
  .tbl-section{ padding:64px 0; }
  .tbl-stats .stat{ flex:1 1 40%; }
}

/* ============================================================
   HEADER NUEVO (estilo mockup)
============================================================ */
.tbl-nav{
  position:fixed; top:0; left:0; width:100%; z-index:9999;
  background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.06);
}
.tbl-nav-inner{
  width:100%; margin:0; padding:0 4% 0 5%; display:flex; align-items:center;
  justify-content:space-between; gap:20px; height:var(--tbl-nav-h); box-sizing:border-box;
}
.tbl-logo img{ height:42px; display:block; }
.tbl-menu{ display:flex; gap:26px; margin-left:auto; }
.tbl-menu a{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; font-size:14px; color:#e8e8e8; text-decoration:none; transition:color .15s;
}
.tbl-menu a:hover{ color:var(--tbl-red); }
.tbl-nav-cta{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  font-size:14px; color:#fff !important; background:var(--tbl-red); padding:12px 24px;
  text-decoration:none; transition:background .15s; white-space:nowrap;
}
.tbl-nav-cta:hover{ background:#c2152e; }
.tbl-burger{
  display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer;
}

/* ============================================================
   HERO FULL-BLEED
============================================================ */
.tbl-hero{
  position:relative; min-height:88vh; margin-top:74px;
  background:#0a0a0a url('../img/hero-team-building-latam.webp') center right / cover no-repeat;
  display:flex; flex-direction:column; justify-content:center;
}
.tbl-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.85) 32%, rgba(8,8,8,.45) 55%, rgba(8,8,8,.15) 75%, rgba(8,8,8,.05) 100%);
}
.tbl-hero-content{
  position:relative; z-index:2; width:100%; max-width:960px; margin:0;
  padding:40px 4% 120px 5%;
}
.tbl-hero-title .l1, .tbl-hero-title .l2{ white-space:nowrap; }
.tbl-hero-title{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  line-height:.95; margin:0 0 24px;
}
.tbl-hero-title .l1{ display:block; color:#fff; font-size:clamp(40px,7vw,92px); }
.tbl-hero-title .l2{ display:block; color:var(--tbl-red); font-size:clamp(48px,8.5vw,112px); }
.tbl-hero-sub{
  font-family:'Oswald',sans-serif; font-weight:400; color:#fff;
  font-size:clamp(20px,2.6vw,30px); line-height:1.25; margin:0 0 26px; max-width:560px;
}
.tbl-hero-sub strong{ font-weight:700; }
.tbl-hero-rule{ width:70px; height:4px; background:var(--tbl-red); margin:0 0 22px; }
.tbl-hero-lead{
  font-family:montserrat,sans-serif; font-weight:400; color:#d6d6d6;
  font-size:clamp(16px,2vw,20px); line-height:1.5; margin:0 0 34px; max-width:520px;
}
.tbl-hero-btn{
  display:inline-flex; align-items:center; gap:12px; background:var(--tbl-red);
  color:#fff !important; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; font-size:17px; padding:18px 38px; text-decoration:none;
  transition:transform .18s, background .18s;
}
.tbl-hero-btn:hover{ background:#c2152e; transform:translateY(-2px); }
.tbl-hero-btn i{ font-size:15px; }

.tbl-hero-stats{
  position:relative; z-index:2; width:100%;
  background:rgba(8,8,8,.78); border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
}
.tbl-hero-stats-inner{
  width:92%; max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:18px; padding:26px 0;
}
.tbl-hero-stats .hs{ display:flex; align-items:center; gap:14px; flex:1 1 200px; }
.tbl-hero-stats .hs i{ color:var(--tbl-red); font-size:30px; }
.tbl-hero-stats .hs .n{
  display:block; font-family:'Oswald',sans-serif; font-weight:700; color:#fff;
  font-size:24px; line-height:1.05;
}
.tbl-hero-stats .hs .l{
  display:block; font-family:montserrat,sans-serif; color:#bdbdbd;
  font-size:15px; text-transform:lowercase;
}

@media (max-width:980px){
  .tbl-menu{ display:none; }
  .tbl-burger{ display:block; }
  .tbl-nav.open .tbl-menu{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; width:100%;
    background:#0a0a0a; padding:18px 6%; gap:18px;
  }
  .tbl-hero-overlay{ background:linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.85) 100%); }
}
@media (max-width:560px){
  .tbl-nav-cta{ display:none; }
  .tbl-hero-stats .hs{ flex:1 1 45%; }
}

/* === BOTÓN FLOTANTE DE WHATSAPP === */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:9998;
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.whatsapp-float img{
  width:60px; height:60px; max-width:60px; display:block;
}
.whatsapp-float:hover{ transform:scale(1.08); }
@media (max-width:560px){
  .whatsapp-float{ bottom:18px; right:18px; width:54px; height:54px; }
  .whatsapp-float img{ width:54px; height:54px; max-width:54px; }
}

/* ── Estados del botón de envío y del aviso · js/form-submit.js ───────── */
.tbl-contact-form button[disabled],
.int-form button[disabled]{ opacity:.7; cursor:not-allowed; }

.tbl-form-sending::after{
  content:''; display:inline-block; width:14px; height:14px; margin-left:10px;
  vertical-align:-2px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:tblFormSpin .7s linear infinite;
}
@keyframes tblFormSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .tbl-form-sending::after{ animation:none; } }

/* Colores actuales, conservados exactamente: oscuro en index, claro en la página de integración */
.tbl-contact-form .tbl-form-status.ok{  color:#4caf50; }
.tbl-contact-form .tbl-form-status.err{ color:#e51937; }
.int-form .tbl-form-status.ok{  color:#1e7a34; }
.int-form .tbl-form-status.err{ color:#c2152e; }

/* ============================================================
   RETOS · catálogo horizontal enganchado al scroll vertical
   actividades-de-integracion-empresas-panama.html · sección #int-retos-pin
   Alturas y recorrido los calcula js/horizontal-catalog.js.
   Aquí no hay ni un valor fijo de vh inventado.
   ============================================================ */
.int-retos-pin{ position:relative; background:#232321; }
.int-retos-pin *{ box-sizing:border-box; }   /* `.tbl-section *` no alcanza a este bloque:
                                                 sin esto el padding se sumaba al 100vh */
.int-retos-sticky{
  position:sticky; top:var(--tbl-nav-h);
  height:calc(100vh - var(--tbl-nav-h));      /* borde inferior = borde inferior de la ventana */
  display:flex; flex-direction:column; justify-content:center;
  padding:28px 0 34px; overflow:hidden;
}
.int-retos-viewport{ flex:1 1 auto; min-height:0; overflow:hidden; margin-top:24px; }
.int-retos-track{
  height:100%; display:flex; align-items:stretch; gap:22px;
  padding:0 6vw; will-change:transform;
}
.int-reto{                        /* el afiche se come todo lo que sobra bajo el título:
                                      así el fondo muerto desaparece por construcción */
  flex:0 0 auto; height:100%; width:auto; aspect-ratio:1275/1875;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.int-reto img{ width:100%; height:100%; display:block; object-fit:cover; }

/* Móvil, tablet, "reducir movimiento" y sin JS: se desliza con el dedo.
   Sin sticky, sin altura extra, sin secuestro del scroll vertical. */
@media (max-width:900px), (prefers-reduced-motion:reduce), (scripting:none){
  .int-retos-pin{ height:auto !important; padding:60px 0; }
  .int-retos-sticky{ position:static; height:auto; padding:0; overflow:visible; }
  .int-retos-viewport{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scroll-padding-left:6vw; padding-bottom:6px;
  }
  .int-retos-track{ height:auto; }
  .int-reto{ height:auto; width:min(62vw,260px); scroll-snap-align:start; }
}

/* Afiche pulsable. Solo cursor y anillo de foco: ni una propiedad que
   toque la geometria calculada por js/horizontal-catalog.js.
   El offset va hacia dentro porque .int-retos-viewport recorta (overflow:hidden)
   y un anillo por fuera quedaria invisible. */
.int-reto[data-popup]{ cursor:pointer; }
.int-reto[data-popup]:focus-visible{ outline:3px solid var(--tbl-red); outline-offset:-4px; }

/* ============================================================
   MODAL DE PRODUCTO
   Identico al bloque inline de index.html (ahi sigue viviendo su
   propia copia, declarada despues de este archivo, asi que el index
   no cambia: gana la suya y los valores son los mismos).
   Aqui esta para que actividades-de-integracion-empresas-panama.html lo reutilice sin
   duplicar CSS en la pagina.
   ============================================================ */
.tbl-modal{
  position:fixed; inset:0; z-index:10000; display:none;
  background:rgba(6,6,6,.9); backdrop-filter:blur(3px);
  overflow-y:auto; padding:40px 20px;
}
.tbl-modal.open{ display:block; }
.tbl-modal-box{
  background:#0f0f0f; max-width:960px; margin:0 auto; position:relative;
  border:1px solid #262626; display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%);
}
.tbl-modal-img{ background:#0a0a0a; }
.tbl-modal-img img{ width:100%; height:auto; display:block; }
.tbl-modal-body{ padding:38px 34px; }
.tbl-modal-kicker{
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:3px;
  text-transform:uppercase; color:var(--tbl-red); font-size:12px; margin:0 0 10px;
}
.tbl-modal-body h2{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  color:#fff; font-size:30px; line-height:1.05; margin:0 0 14px;
}
.tbl-modal-desc{
  font-family:montserrat,sans-serif; font-size:15px; line-height:1.7; color:#c4c4c4; margin:0 0 24px;
}
.tbl-modal-specs{ list-style:none; padding:0; margin:0 0 26px; border-top:1px solid #262626; }
.tbl-modal-specs li{
  display:flex; gap:14px; padding:12px 0; border-bottom:1px solid #1e1e1e;
  font-family:montserrat,sans-serif; font-size:14px; color:#ddd;
}
.tbl-modal-specs .k{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; font-size:12px; color:#8a8a8a; min-width:110px; flex:0 0 110px;
}
.tbl-modal-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--tbl-red); color:#fff !important;
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  font-size:16px; padding:16px 30px; text-decoration:none; transition:background .18s;
}
.tbl-modal-cta:hover{ background:#c2152e; }
.tbl-modal-close{
  position:absolute; top:10px; right:10px; z-index:4; width:44px; height:44px;
  background:rgba(10,10,10,.8); border:1px solid #333; color:#fff; font-size:24px;
  line-height:1; cursor:pointer; border-radius:50%;
}
.tbl-modal-close:hover{ background:var(--tbl-red); border-color:var(--tbl-red); }
@media (max-width:820px){
  .tbl-modal{ padding:0; }
  .tbl-modal-box{ grid-template-columns:1fr; min-height:100%; }
  .tbl-modal-body{ padding:26px 22px 60px; }
  .tbl-modal-body h2{ font-size:25px; }
  .tbl-modal-close{ position:fixed; top:12px; right:12px; }
  .tbl-modal-cta{ width:100%; justify-content:center; }
}

/* === UTILIDADES (Panamá) ===
   [hidden] tiene que ganar a cualquier display de componente (p. ej. .whatsapp-float),
   porque js/config.js oculta así lo que depende de un dato aún no confirmado. */
[hidden]{ display:none !important; }
/* Texto solo para lectores de pantalla (etiquetas de formulario) */
.tbl-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}