@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Rubik:wght@400;500;600;700&display=swap');

 :root{
    --navy:#0B1626;
    --navy-mid:#132A45;
    --paper:#F6F2E7;
    --paper-line:#E3DBC7;
    --ink:#16233B;
    --gray:#6B7280;
    --gold:#52d2ed;
    --gold-soft:#DCC98A;
    --sky:#52d2ed;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  .localizacao{
    background:#D7DBE3;
    background-image:radial-gradient(rgba(11,22,38,0.07) 1px, transparent 1px);
    background-size:22px 22px;
    font-family:'Inter', sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    font-family: 'Rubik', Courier, monospace;
  }

  .stage-wrap{
    max-width:1360px;
    margin:56px auto;
    padding:0 24px;
        font-family: 'Rubik', Courier, monospace;

  }

  .ticket{
    display:flex;
    background:var(--paper);
    box-shadow:0 30px 80px rgba(11,22,38,0.28), 0 2px 0 rgba(255,255,255,0.4) inset;
    position:relative;
    min-height:660px;
  }

  /* ============ STUB (left) ============ */
  .stub{
    width:88px;
    flex-shrink:0;
    background:var(--navy);
    background-image:
      linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    padding:26px 0;
    position:relative;
  }
  .stub-code{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
        font-family: 'Rubik', Courier, monospace;

    font-weight:700;
    font-size:12.5px;
    letter-spacing:0.28em;
    color:var(--gold-soft);
    text-transform:uppercase;
  }
  .stub-barcode{
    display:flex;
    gap:3px;
    writing-mode:vertical-rl;
  }
  .stub-barcode span{
    width:3px;
    background:rgba(230,220,195,0.55);
  }
  .stub-plane{
    width:20px; height:20px;
    color:var(--gold);
  }

  /* perforation between stub and content */
  .perf{
    width:0;
    border-left:2px dashed rgba(11,22,38,0.22);
    position:relative;
  }
  .perf::before, .perf::after{
    content:'';
    position:absolute;
    left:-11px;
    width:22px; height:22px;
    border-radius:50%;
    background:#DCDFE6;
  }
  .perf::before{ top:-11px; }
  .perf::after{ bottom:-11px; }

  /* ============ CONTENT ============ */
  .content{
    flex:1;
    padding:48px 60px 44px;
    min-width:0;
  }

  .top-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:30px;
    padding-bottom:24px;
    border-bottom:1px solid var(--paper-line);
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Rubik', monospace;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.16em;
    color:var(--sky);
    margin-bottom:10px;
  }
  .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); }
  h1{
    font-family:'Rubik', monospace;

    font-weight:700;
    font-size:34px;
    letter-spacing:-0.015em;
    color:var(--ink);
    line-height:1.18;
    max-width:560px;
  }

  .iata{
    text-align:right;
    flex-shrink:0;
  }
  .iata-code{
    font-weight:700;
    font-size:38px;
    letter-spacing:0.04em;
    color:var(--navy);
    line-height:1;
        font-family:'Rubik', monospace;

  }
  .iata-sub{
    font-size:10px;
    letter-spacing:0.2em;
    color:var(--gray);
    margin-top:6px;
        font-family:'Rubik', monospace;

  }

  /* address stamp */
  .address-stamp{
    display:flex;
    align-items:stretch;
    border:1px solid var(--paper-line);
    background:#FBF9F3;
    margin-bottom:30px;
  }
  .address-field{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px 22px;
  }
  .address-field.grow{ flex:1; }
  .address-field.aux{
    flex-shrink:0;
    align-items:center;
    border-left:1px dashed var(--paper-line);
  }
  .address-stamp svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:2px; }
  .address-field.aux svg{ margin-top:0; }
  .address-stamp .lbl{
    font-size:10px;
    font-weight:600;
    letter-spacing:0.12em;
    color:var(--gray);
    margin-bottom:3px;
        font-family:'Rubik', monospace;

  }
  .address-stamp p{ font-size:13.5px; line-height:1.55; color:var(--ink); max-width:440px; }
  .address-field.aux .lbl{ margin-bottom:2px; }
  .address-field.aux .val{
    font-weight:600;
    font-size:16px;
    color:var(--navy);
        font-family:'Rubik', monospace;

  }
  .address-field.aux .val span{
    font-weight:400;
    font-size:11px;
    color:var(--gray);
    margin-left:4px;
        font-family:'Rubik', monospace;

  }

  /* ============ GRID ============ */
  .grid{
    display:grid;
    grid-template-columns: 380px 1fr;
    gap:44px;
  }

  /* ---- MAP IMAGE PANEL ---- */
  .radar-panel{
    background:var(--navy);
    height:400px;
    position:relative;
    overflow:hidden;
    box-shadow:0 1px 0 rgba(255,255,255,0.05) inset;
    border-radius:4px;
  }
  .radar-panel img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* ---- route manifest ---- */
  .manifest-head{
    display:flex;
    justify-content:space-between;
    font-size:9.5px;
    letter-spacing:0.1em;
    color:var(--gray);
    padding-bottom:8px;
    border-bottom:1px solid var(--paper-line);
    margin-bottom:4px;
        font-family:'Rubik', monospace;

  }

  .route-row{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid var(--paper-line);
  }
  .route-row:first-of-type{ padding-top:14px; }

  .route-icon{
    width:34px; height:34px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-soft);
  }
  .route-icon svg{ width:15px; height:15px; }

  .route-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:14.5px;
    color:var(--ink);
    flex-shrink:0;
    width:210px;
  }

  .route-line{
    flex:1;
    position:relative;
    height:1px;
    background-image:linear-gradient(90deg, var(--paper-line) 0 6px, transparent 6px 10px);
    background-size:10px 1px;
    margin:0 4px;
    min-width:30px;
  }
  .route-line svg{
    position:absolute;
    top:50%; right:0;
    transform:translateY(-50%);
    width:13px; height:13px;
    color:var(--sky);
  }

  .route-meta{
    flex-shrink:0;
    text-align:right;
    min-width:110px;
  }
  .route-km{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    font-size:15px;
    color:var(--navy);
  }
  .route-min{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--gray);
  }

  /* ---- info stubs ---- */
  .info-stubs{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:34px;
  }
  .info-stub{
    display:flex;
    align-items:flex-start;
    gap:14px;
    border:1px dashed var(--paper-line);
    background:#FBF9F3;
    padding:20px 24px;
    position:relative;
  }
  .info-stub::before{
    content:'';
    position:absolute;
    top:50%; left:-1px;
    transform:translateY(-50%);
    width:14px; height:14px;
    border-radius:50%;
    background:#DCDFE6;
  }
  .info-stub-icon{
    width:38px; height:38px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-soft);
    margin-top:2px;
  }
  .info-stub-icon svg{ width:17px; height:17px; }
  .info-head{ margin-bottom:6px; }
  .info-head h3{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    font-size:11px;
    letter-spacing:0.09em;
    color:var(--ink);
    text-transform:uppercase;
  }
  .info-stub p{ font-size:12.5px; line-height:1.6; color:var(--gray); }

  /* ---- footer strip ---- */
  .ticket-footer{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:36px;
    padding-top:22px;
    border-top:1px dashed var(--paper-line);
  }
  .footer-barcode{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:26px;
  }
  .footer-barcode span{
    width:2.5px;
    background:var(--navy);
    opacity:0.75;
  }
  .footer-note{
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    letter-spacing:0.14em;
    color:var(--gray);
    text-align:right;
  }

  @media (max-width: 760px){
    .ticket{ flex-direction:column; min-height:auto; }
    .stub{ width:100%; flex-direction:row; padding:12px 20px; }
    .stub-code{ writing-mode:horizontal-tb; transform:none; }
    .stub-barcode{ writing-mode:horizontal-tb; }
    .perf{ display:none; }
    .content{ padding:28px 22px 30px; }
    .top-row{ flex-direction:column; gap:14px; }
    .iata{ text-align:left; }
    .grid{ grid-template-columns:1fr; }
    .route-name{ width:120px; }
    .info-stubs{ grid-template-columns:1fr; }
  }