:root{
      --blue-950:#071634;
      --blue-900:#0b1f4a;
      --blue-800:#12357d;
      --blue-700:#1d4ed8;
      --blue-600:#2563eb;
      --blue-200:#bfdbfe;
      --blue-100:#dbeafe;
      --blue-50:#eff6ff;

      --text:#0b1220;
      --muted:#64748b;
      --border:#e5e7eb;
      --bg:#ffffff;

      --shadow: 0 2px 12px rgba(2,6,23,.06);
      --r-xl:18px;
      --r-lg:14px;
      --r-md:10px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
    }

    /* ====== Layout ====== */
    .container{
      max-width:1120px;
      margin:0 auto;
      padding:40px 16px 40px;
    }

    /* ====== Header (B2B rápido) ====== */
    .top{
      display:flex;
      gap:16px;
      align-items:stretch;
      justify-content:space-between;
      flex-wrap:wrap;
      padding:22px;
      border:1px solid #d7e3ff;
      border-radius:var(--r-xl);
      background:
        radial-gradient(120% 140% at 0% 0%, #f5f9ff 0%, #ffffff 58%),
        linear-gradient(180deg, #ffffff, #fbfdff);
      box-shadow:0 8px 24px rgba(11,31,74,.08);
    }
    .topLeft{ flex: 1 1 560px; min-width:280px; }
    .topRight{ flex: 0 0 360px; min-width:280px; display:flex; flex-direction:column; gap:10px; }

    .kicker{
      font-size:12px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--blue-700);
    }
    .title{
      margin:10px 0 0;
      font-size:30px;
      line-height:1.15;
      font-weight:1000;
      color:var(--blue-900);
    }
    .subtitle{
      margin:10px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
      max-width:58ch;
    }

    .ctaRow{
      margin-top:14px;
      list-style: disc;
      padding-left:20px;
      color:var(--blue-800);
      font-size:24px;
      font-weight:800;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .pill{
      display:list-item;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 14px;
      border-radius:12px;
      font-weight:1000;
      font-size:14px;
      text-decoration:none;
      cursor:pointer;
      user-select:none;
      border:1px solid transparent;
      transition: transform .06s ease, background .14s ease;
      text-align:center;
      width:100%;
    }
    .btn:active{ transform: translateY(1px); }

    .btnPrimary{
      background: var(--blue-600);
      color:#fff;
      box-shadow: 0 6px 18px rgba(37,99,235,.18);
    }
    .btnPrimary:hover{ background:#1e4fd6; }

    .note{
      border:1px solid var(--border);
      background:#fff;
      border-radius:var(--r-lg);
      padding:12px;
    }
    .noteStrong{ font-weight:1000; color:var(--blue-900); }
    .noteSmall{ margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5; }

    /* ====== Tabs ====== */
    .tabs{
      margin-top:26px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .tab{
      border:1px solid var(--border);
      background:#fff;
      color:var(--blue-900);
      border-radius:999px;
      padding:10px 12px;
      font-weight:1000;
      font-size:13px;
      cursor:pointer;
      transition: background .14s ease, border-color .14s ease;
    }
    .tab:hover{ background: var(--blue-50); border-color: var(--blue-100); }
    .tab.active{
      background: var(--blue-600);
      border-color: var(--blue-600);
      color:#fff;
    }

    /* ====== Grid head (mínimo texto) ====== */
    .gridHead{
      margin-top:24px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .gridTitle{
      font-size:16px;
      font-weight:1000;
      color:var(--blue-900);
    }
    .gridActions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .chip{
      font-size:11px;
      font-weight:1000;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--blue-100);
      background: #fff;
      color: var(--blue-700);
      white-space:nowrap;
    }
    .chipSoft{ background: var(--blue-50); }

    /* ====== Muestrario (tiles B2B) ====== */
    .grid{
      margin-top:18px;
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
    }
    @media(min-width:720px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
    @media(min-width:1024px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

    .tile{
      border:1px solid var(--border);
      border-radius:var(--r-xl);
      background:#fff;
      padding:22px;
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      gap:16px;
      min-height:240px;
      transition: transform .08s ease, border-color .14s ease;
    }
    .tile:hover{
      transform: translateY(-1px);
      border-color: var(--blue-200);
    }

    .tileTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .tileIcon{
      width:56px;height:56px;
      border-radius:14px;
      border:1px solid var(--blue-100);
      background: var(--blue-50);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--blue-700);
      font-size:28px;
      flex:0 0 auto;
    }
    .tileName{
      font-weight:1000;
      color:var(--blue-900);
      font-size:15px;
      line-height:1.25;
      margin-top:2px;
    }
    .tileDesc{
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
      margin-top:-2px;
    }
    .tileTag{
      font-size:10px;
      font-weight:1000;
      padding:6px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--muted);
      white-space:nowrap;
    }

    .tileChips{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .miniChip{
      font-size:11px;
      font-weight:900;
      padding:6px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--muted);
      white-space:nowrap;
    }
    .miniChip.blue{
      border-color: var(--blue-100);
      background: var(--blue-50);
      color: var(--blue-800);
    }

    /* ====== CTA Strip ====== */
    .ctaStrip{
      margin-top:24px;
      border:1px solid var(--blue-100);
      background: linear-gradient(180deg, var(--blue-50), #ffffff);
      border-radius:var(--r-xl);
      padding:14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      box-shadow:var(--shadow);
    }
    .ctaStrip .left{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .ctaStrip .strong{
      font-weight:1000;
      color:var(--blue-900);
      font-size:13px;
    }
    .ctaStrip .small{
      color:var(--muted);
      font-size:12px;
    }
    .ctaStrip .btn{
      width:auto;
      padding:10px 12px;
    }

    /* ====== Brand band (full-bleed, sin márgenes) ====== */
    .brandBandWrap{
      margin-top:30px;
      width:100%;
      background: var(--blue-950);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .brandBand{
      padding: 12px 0;
      overflow:hidden;
      position:relative;
    }

    .brandTrack{
      display:flex;
      gap:14px;
      overflow:auto;
      padding: 10px 14px;
      cursor: grab;

      /* infinito + visual */
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.18) transparent;
    }
    .brandTrack:active{ cursor: grabbing; }
    .brandTrack::-webkit-scrollbar{ height:10px; }
    .brandTrack::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:999px; }

    .brandLogo{
      flex: 0 0 auto;
      width: 220px;          /* ✅ grande */
      height: 78px;          /* ✅ grande */
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      display:flex;
      align-items:center;
      justify-content:center;
      backdrop-filter: blur(8px);
    }
    .brandLogo img{
      width: 196px;
      height: 56px;
      object-fit: contain;
      display:block;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
    }

    /* Controles sobre banda */
    .bandControls{
      position:absolute;
      inset: 0 0 auto 0;
      display:flex;
      justify-content:space-between;
      pointer-events:none;
    }
    .bandBtn{
      pointer-events:auto;
      width:44px;height:44px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      color:#fff;
      font-size:22px;
      font-weight:1000;
      cursor:pointer;
      margin: 18px 10px;
      backdrop-filter: blur(8px);
    }
    .bandBtn:hover{ background: rgba(255,255,255,.16); }

    .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;
    }