/* RESET/BASE ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;line-height:1.5;background:#f4f6f8;color:#222}
img{display:block;max-width:100%;height:auto}

/* LAYOUT ----------------------------------------------------------------- */
.container{width:90%;max-width:1200px;margin-inline:auto}
.header{position:sticky;top:0;z-index:100;/* background image for top header */
  background-image: url("assets/fundo_topo.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* keep a fallback color for very small viewports / loading */
  background-color: #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.header__wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{
  height:auto;
  width:auto;
  filter: drop-shadow(10px 0px 9px rgba(0, 0, 0, 0.95));
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.3rem 0 0 0;
}

.main-nav a {
  color: #222;
  text-decoration: none;
  font-weight: 600;
}

.main-nav a:hover {
  color: #ff7b00;
}

/* Small screens: make header more compact so logos fit */
@media (max-width: 600px) {
  .header__wrap {
    padding: .25rem 0;
  }
  .header__wrap > div {
    display: flex;
    align-items: center;
    gap: .4rem;
  }
  .logo {
    max-height: 60px;
    height: auto;
    width: auto;
    filter: drop-shadow(6px 0px 5px rgba(0,0,0,0.85));
  }
  .main-nav {
    padding: .2rem 0 0 0;
    gap: .6rem;
    font-size: .95rem;
  }
  .main-nav a {
    padding: .1rem .25rem;
  }
}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin:0.5rem 0}
.filters input,.filters select{
  flex:1 1 220px;
  padding:.6rem .9rem;
  border:1px solid #ccc;border-radius:6px;
  font-size:1rem
}
.filters input:focus,.filters select:focus{outline:2px solid #2abf6e;outline-offset:1px}

/* Default: single column on very small screens; switch to two columns at 360px */
.grid{display:grid;grid-template-columns:1fr;grid-gap:.8rem;padding-bottom:2rem}
@media (min-width: 360px) {
  .grid{grid-template-columns:repeat(2,1fr);grid-gap:1.2rem}
}
@media(min-width:480px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1400px){.grid{grid-template-columns:repeat(5,1fr)}}

/* CARD ------------------------------------------------------------------- */
.card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;
      transition:transform .25s,box-shadow .25s;background:#e0e0e0}
.card,
.card:visited,
.card:active,
.card:focus,
.card:hover {
  color: #0057d8 !important;
  text-decoration: none !important;
  font-weight: 600;
}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 18px rgba(0,0,0,.1)}
.card__img{height:160px;background:#e9ecef;display:flex;align-items:center;justify-content:center}
.card__img img{max-height:150px;max-width:136px}
.card__body{padding:1rem}
.card__title{
  font-size:1.0rem;
  font-weight:600;
  margin-bottom:.4rem;
  min-height:44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.card__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.card__title a,
.card__title a:visited,
.card__title a:active,
.card__title a:focus,
.card__title a:hover {
  color: #0057d8 !important;
  text-decoration: none !important;
  font-weight: 600;
}
.card__flag{width:30px;height:auto;vertical-align:middle;margin-right:.4rem}

/* ícone inline usado como fallback quando não há arquivo de bandeira */
.inline-flag{
  display:inline-block;
  width:30px;
  height:auto;
  vertical-align:middle;
  margin-right:.4rem;
  color:#222;
  /* aumentar o emoji quando usado como texto */
  font-size:21px;
  line-height:1;
  text-align:center;
}

/* small screens adjustments (phones <360px) */
@media (max-width: 600px) {
  .grid { grid-gap: .6rem; padding-bottom: 1.2rem; }
  .card__img { height: 120px; }
  .card__img img { max-height: 90px; max-width: 85px; }
  .card__body { padding: .6rem; }
  .card__title { font-size: .9rem; min-height: 38px; gap: .25rem; }
  .card__flag, .inline-flag { width:22px; font-size:18px; margin-right:.3rem }
}

/* Very small screens adjustments (phones <360px) */
@media (max-width: 359px) {
  .grid { grid-gap: .6rem; padding-bottom: 1.2rem; }
  .card__img { height: 120px; }
  .card__img img { max-height: 85px; max-width: 80px; }
  .card__body { padding: .6rem; }
  .card__title { font-size: .8rem; min-height: 38px; gap: .25rem; }
  .card__flag, .inline-flag { width:20px; font-size:18px; margin-right:.3rem }
}

.sim-viewer__header {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.footer{background:#101820;color:#fff;padding:1rem 0;font-size:.9rem;text-align:center}

/* ACCESSIBILITY HINT (focus ring) --------------------------------------- */
a:focus,button:focus,.card:focus{outline:3px solid #ff7b00;outline-offset:2px}

/* ============ SIMULADOR VIEWER ============ */
/* Full viewport overlay with own scroll */
#sim-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f4f6f8;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sim-viewer.hidden {
  display: none !important;
}

.sim-viewer__header {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.1rem 1rem 0.1rem;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0.1rem;
}

.btn-close {
  background: #ff7b00;
  color: #fff;
  border: none;
  padding: .5rem .8rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  font-size: .75rem;
}

.btn-close:hover {
  background: #e66d00;
}

#sim-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

#sim-frame.loaded {
  opacity: 1;
}