/* Galería de pantallas — copiada de la web publicada. Variables locales para que resuelva igual. */
#pantallas, #lightbox {
  --white:#FFFFFF; --paper:#FAFBFC; --sand:#F5F4F0; --mist:#F4F6F9;
  --gold:#C5A059; --gold-dark:#8A6D3B; --gold-deep:#5C4622; --gold-light:#E6D5A8; --gold-soft:#F5EDD8;
  --blue:#0F4C81; --blue-deep:#0A355C;
  --ink-1:#1E2A3A; --ink-2:#3F4A5C; --ink-3:#6B7480;
  --line:#E6E9EE;
  --shadow-sm:0 1px 2px rgba(15,76,129,.04),0 1px 3px rgba(15,76,129,.05);
  --shadow-lg:0 16px 40px -12px rgba(15,76,129,.12),0 4px 12px rgba(15,76,129,.06);
  --shadow-blue:0 14px 40px -10px rgba(15,76,129,.25);
  --r-lg:20px; --r-xl:28px;
}
    .modulo-tabs{
      display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;
      overflow-x:auto;
      padding:6px 4px 14px;
      margin-bottom:24px;
      scrollbar-width:thin;
      -webkit-overflow-scrolling:touch;
    }
    .modulo-tabs::-webkit-scrollbar{height:6px}
    .modulo-tabs::-webkit-scrollbar-thumb{background:var(--gold-light);border-radius:6px}
    .modulo-tab{
      flex-shrink:0;
      padding:11px 22px;border-radius:999px;
      background:var(--white);
      border:1px solid var(--line);
      color:var(--ink-2);font-size:.92rem;font-weight:600;
      letter-spacing:.2px;
      transition:all .2s;
      cursor:pointer;
      box-shadow:var(--shadow-sm);
      white-space:nowrap;
      display:inline-flex;align-items:center;gap:8px;
    }
    .modulo-tab:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-1px)}
    .modulo-tab.active{
      background:linear-gradient(135deg,var(--blue),var(--blue-deep));
      color:#fff;border-color:transparent;
      box-shadow:var(--shadow-blue);
    }
    .modulo-tab .ico{font-size:1.05rem}
    .modulo-tab .count{
      font-size:.7rem;font-weight:700;
      padding:2px 7px;border-radius:999px;
      background:rgba(0,0,0,.08);
      margin-left:2px;
    }
    .modulo-tab.active .count{background:rgba(255,255,255,.22)}

    /* Contenedor scrolleable de la grilla */
    .galeria-scroll{
      max-height:78vh;overflow-y:auto;
      padding:4px 6px 24px;margin:-4px -6px 0;
      scrollbar-width:thin;
      scrollbar-color: var(--gold-light) transparent;
    }
    .galeria-scroll::-webkit-scrollbar{width:8px}
    .galeria-scroll::-webkit-scrollbar-track{background:transparent}
    .galeria-scroll::-webkit-scrollbar-thumb{background:var(--gold-light);border-radius:8px}
    .galeria-scroll::-webkit-scrollbar-thumb:hover{background:var(--gold)}

    .galeria-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);  /* 4 columnas por defecto */
      gap:18px;
    }
    @media (max-width:1100px){
      .galeria-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width:820px){
      .galeria-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    }
    @media (max-width:560px){
      .galeria-grid{grid-template-columns:1fr;gap:12px}
      .modulo-tab{padding:9px 14px;font-size:.82rem}
      .modulo-tab .count{display:none}  /* en móvil ocultar contador */
      .modulo-tabs{justify-content:flex-start;padding-left:8px}
    }
    /* Cards más compactas para que 4 quepan bien */
    .galeria-grid .shot-meta{padding:14px 16px}
    .galeria-grid .shot-card h3{font-size:.95rem}
    .galeria-grid .shot-card p{font-size:.78rem;line-height:1.45}
    .galeria-grid .shot-tag{font-size:.62rem;padding:2px 8px}
    .shot-card{
      position:relative;cursor:zoom-in;
      background:var(--white);
      border:1px solid var(--line);border-radius:var(--r-lg);
      overflow:hidden;box-shadow:var(--shadow-sm);
      transition:transform .35s,box-shadow .35s,border-color .35s;
    }
    .shot-card:hover{
      transform:translateY(-6px);
      border-color:var(--gold-light);
      box-shadow:var(--shadow-lg);
    }
    .shot-thumb{
      width:100%;aspect-ratio:16/10;
      background:linear-gradient(135deg,var(--mist),var(--paper));
      position:relative;overflow:hidden;
    }
    .shot-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
    .shot-mock{
      width:100%;height:100%;padding:18px 14px 14px;
      display:flex;flex-direction:column;gap:8px;
      position:relative;background:var(--white);
    }
    .shot-mock::before{
      content:'';position:absolute;top:0;left:0;right:0;height:22px;
      background:linear-gradient(180deg,#F1EEE6,#E8E4D8);
      border-bottom:1px solid var(--line);
    }
    .shot-mock-dots{position:absolute;top:7px;left:12px;display:flex;gap:5px;z-index:2}
    .shot-mock-dots span{width:7px;height:7px;border-radius:50%}
    .shot-mock-dots span:nth-child(1){background:#FF6058}
    .shot-mock-dots span:nth-child(2){background:#FFBD2E}
    .shot-mock-dots span:nth-child(3){background:#27C93F}
    .shot-mock-title{
      margin-top:14px;font-size:.72rem;color:var(--gold-deep);font-weight:800;letter-spacing:.4px;
    }
    .shot-mock-bars{display:flex;gap:6px;margin-top:6px}
    .shot-mock-bars span{flex:1;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
    .shot-mock-row{
      display:flex;gap:6px;align-items:center;
      padding:5px 9px;border-radius:5px;
      background:var(--mist);font-size:.6rem;color:var(--ink-2);
      border:1px solid var(--line);
    }
    .shot-mock-row.gold{background:var(--gold-soft);border-left:2px solid var(--gold);border-color:var(--gold-light);color:var(--gold-deep);font-weight:600}
    .shot-mock-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:4px}
    .shot-mock-grid > div{
      padding:6px 4px;border-radius:5px;background:var(--mist);
      text-align:center;font-size:.55rem;color:var(--ink-3);border:1px solid var(--line);
    }
    .shot-mock-grid > div strong{display:block;color:var(--gold-dark);font-size:.78rem;font-weight:800}
    .shot-mock-chart{flex:1;display:flex;align-items:flex-end;gap:4px;padding-top:6px}
    .shot-mock-chart span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-dark))}
    .shot-zoom{
      position:absolute;top:12px;right:12px;
      width:32px;height:32px;border-radius:50%;
      background:rgba(26,29,36,.65);backdrop-filter:blur(6px);
      display:flex;align-items:center;justify-content:center;
      color:#fff;font-size:.95rem;
      opacity:0;transition:opacity .3s;
    }
    .shot-card:hover .shot-zoom{opacity:1}
    .shot-meta{padding:18px 20px}
    .shot-tag{
      display:inline-block;padding:3px 10px;border-radius:999px;
      background:var(--gold-soft);color:var(--gold-deep);
      font-size:.66rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
      margin-bottom:8px;border:1px solid var(--gold-light);
    }
    .shot-card h3{font-size:1rem;font-weight:700;margin-bottom:4px;color:var(--ink-1)}
    .shot-card p{font-size:.82rem;color:var(--ink-2);line-height:1.5}

    /* Lightbox */
    .lightbox{
      position:fixed;inset:0;z-index:200;
      background:rgba(20,18,12,.78);backdrop-filter:blur(14px);
      display:none;align-items:center;justify-content:center;
      padding:30px;animation:fadeIn .25s;
    }
    .lightbox.open{display:flex}
    @keyframes fadeIn{from{opacity:0}}
    .lightbox-inner{
      max-width:1100px;max-height:90vh;width:100%;
      background:var(--white);border-radius:var(--r-xl);
      border:1px solid var(--line);
      overflow:hidden;display:flex;flex-direction:column;
      box-shadow:0 40px 100px -20px rgba(0,0,0,.5);
    }
    .lightbox-img{
      flex:1;overflow:hidden;background:var(--mist);
      display:flex;align-items:center;justify-content:center;
      min-height:400px;max-height:78vh;position:relative;
      cursor:zoom-in;
    }
    .lightbox-img.zoomed{cursor:grab}
    .lightbox-img.zoomed.dragging{cursor:grabbing}
    .lightbox-img img{
      display:block;max-width:100%;max-height:78vh;
      width:auto;height:auto;object-fit:contain;
      transition:transform .2s ease-out;
      transform-origin:center center;
      user-select:none;-webkit-user-drag:none;
      will-change:transform;
    }
    .lightbox-img .shot-mock{width:100%;max-height:78vh}

    /* Controles de zoom (en el footer del lightbox) */
    .lightbox-actions{display:flex;gap:14px;align-items:center;flex-shrink:0}
    .zoom-controls{
      display:flex;gap:4px;align-items:center;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:999px;padding:4px 6px 4px 14px;
      box-shadow:var(--shadow-sm);
    }
    .zoom-label{
      font-size:.72rem;color:var(--ink-3);font-weight:700;
      letter-spacing:1.2px;text-transform:uppercase;
      padding-right:8px;border-right:1px solid var(--line);
      margin-right:2px;
    }
    .zoom-btn{
      width:30px;height:30px;border-radius:50%;
      background:transparent;color:var(--ink-1);
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;font-weight:700;
      transition:background .15s,color .15s;
      cursor:pointer;
    }
    .zoom-btn:hover:not(:disabled){background:var(--gold-soft);color:var(--gold-deep)}
    .zoom-btn:disabled{opacity:.35;cursor:not-allowed}
    .zoom-level{
      min-width:46px;text-align:center;
      font-size:.82rem;color:var(--ink-1);font-weight:700;
      padding:0 2px;font-variant-numeric:tabular-nums;
    }
    .zoom-hint{
      position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
      background:rgba(20,20,30,.7);color:#fff;
      padding:5px 12px;border-radius:999px;
      font-size:.72rem;font-weight:500;letter-spacing:.4px;
      backdrop-filter:blur(8px);z-index:5;
      pointer-events:none;
      animation:hintFade 4s ease-in-out forwards;
    }
    @keyframes hintFade{
      0%{opacity:0;transform:translateX(-50%) translateY(8px)}
      15%,80%{opacity:1;transform:translateX(-50%) translateY(0)}
      100%{opacity:0;transform:translateX(-50%) translateY(-4px)}
    }

    .lightbox-meta{
      padding:20px 24px;border-top:1px solid var(--line);
      display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--white);
    }
    .lightbox-meta h3{font-size:1.2rem;font-weight:700;margin-bottom:4px;color:var(--ink-1)}
    .lightbox-meta p{color:var(--ink-2);font-size:.9rem}
    .lightbox-close{
      width:38px;height:38px;border-radius:50%;
      background:var(--mist);color:var(--ink-1);
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;flex-shrink:0;cursor:pointer;
      transition:background .2s;
    }
    .lightbox-close:hover{background:var(--gold-soft);color:var(--gold-deep)}

/* ===== Pestañas (imagen2): subrayado inferior dorado grueso igual en seleccionada y no, hover azul ===== */
#pantallas .modulo-tabs{ justify-content:center; flex-wrap:wrap; }
#pantallas .modulo-tab{ border-radius:10px 10px 4px 4px !important; background:#fff !important; border:none !important; color:#1e293b !important; font-weight:700 !important; box-shadow:inset 0 -3px 0 #C5A059 !important; padding:10px 18px !important; transition:all .18s !important; }
#pantallas .modulo-tab:hover{ background:linear-gradient(135deg,#3b82d4,#1c56b0) !important; color:#fff !important; box-shadow:inset 0 -3px 0 #C5A059 !important; transform:translateY(-1px); }
#pantallas .modulo-tab.active{ background:#0c2d52 !important; color:#fff !important; box-shadow:inset 0 -3px 0 #C5A059 !important; }
#pantallas .modulo-tab .count{ display:none !important; }
#pantallas .modulo-tab .ico{ font-size:1.05rem; }

/* ===== Subrayado inferior dorado grueso (imagen2) en TODOS los botones, SIN excepción — sin borde alrededor ===== */
button,
.button, .action-button,
.nav-links a, a.nav-login, a.nav-cta,
a.cta, a.go, a.go2, a.dc-btn, a.btn-oro, a.ver, a.btn-line,
.pl4 a.go, .pl4 a.go2,
.ck-btn, .ck-wompi-btn,
.cot-b, .cot-x, .hbl-btn, .hbl-x,
.bw-chip, .bw-bar button, .bw-hd .x,
.zoom-btn, .lightbox-close, .ck-hd button {
  border: none !important;
  box-shadow: inset 0 -3px 0 #C5A059, 0 4px 10px rgba(12,45,82,.10) !important;
}

/* ===== Perf: render diferido de secciones largas fuera de pantalla (primer pintado más rápido) ===== */
#paquetes, #tienda, footer { content-visibility:auto; contain-intrinsic-size:auto 700px; }