* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(120deg, #6a11cb, #2575fc);
    color: #fff;
  }

  .container { max-width: 1100px; margin: 0 auto; padding: 20px; }

  .carousel-container { text-align: center; margin-top: 10px; position: relative; display: inline-block; }
  .slide { width: 95%; max-width: 400px; border-radius: 8px; box-shadow: 0 0 15px #000000aa; display: none; }
  .slide.active { display: inline-block; }
  button.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: #00000080; color: white; border: none; border-radius: 50%;
    width: 30px; height: 30px; cursor: pointer; z-index: 10;
  }
  .left-btn { left: 5px; } .right-btn { right: 5px; }

  .login-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px; border-radius: 12px; width: 300px; margin: 30px auto;
    box-shadow: 0 0 10px #00000077;
  }

  input, select, button {
    border: none; padding: 8px; border-radius: 6px; width: 100%; margin-top: 5px; font-size: 14px;
  }
  button { background: #00c3ff; color: #fff; font-weight: bold; cursor: pointer; margin-top: 10px; }
  button:hover { background: #00b0e6; }

  .logo { text-align: center; margin-bottom: 20px; }
  .logo img { max-width: 300px; }

  nav.menu-topo {
    position: fixed; top: 0; width: 100%; background: rgba(0, 0, 0, 0.85); color: white; z-index: 9999;
    font-family: Arial, sans-serif; box-shadow: 0 2px 10px #000;
  }
  nav.menu-topo ul { margin: 0; padding: 10px 0; display: flex; justify-content: center; list-style: none; }
  nav.menu-topo ul li { margin: 0 15px; }
  nav.menu-topo ul li a { color: #00c3ff; text-decoration: none; font-weight: bold; }
  nav.menu-topo ul li a:hover { text-decoration: underline; }

  .banner-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
  .banner-card {
    width: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 0 10px #000;
    overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .banner-card:hover { transform: scale(1.07); box-shadow: 0 0 25px #00c3ff; }
  .banner-card img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
  .banner-card:hover img { transform: scale(1.05); }
  .banner-card div { padding: 10px; color: #fff; font-weight: bold; text-align: center; }

  /* ==== LEMBRETES (lado ESQ/DIR do login) ==== */
  .login-and-notes{
    display:flex; justify-content:center; align-items:stretch; gap:20px;
    margin: 30px 0; flex-wrap: wrap; /* empilha no mobile */
  }
  .login-and-notes .login-box{ margin:0; } /* mantém seu login igual */

  .note-card{
    width:300px; background: rgba(255,255,255,0.10);
    border-radius:12px; box-shadow:0 0 10px #00000077;
    padding:16px 14px 18px; border:1px solid rgba(255,255,255,0.15);
    position:relative; transition: transform .2s ease, box-shadow .2s ease;
  }
  .note-card:hover{ transform: translateY(-2px); box-shadow:0 0 22px rgba(0,195,255,0.35); }
  .note-title{ font-weight:700; text-align:center; margin:4px 0 10px 0; letter-spacing:.5px; }
  .note-body{ font-size:14px; line-height:1.35; color:#f3f7ff; }
  .note-body ul, .note-body p { margin:8px 0 0 0; padding:0; }
  .note-badge{
    position:absolute; top:-10px; left:14px; font-size:20px; font-weight:700;
    padding:4px 8px; border-radius:8px; background:#0ff3; border:1px solid #00e1ff55;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
  }
  .note-accent{ height:4px; border-radius:8px; margin-top:6px; opacity:.9; }
  .note-novidade .note-accent{ background: linear-gradient(90deg,#00e1ff,#4facfe); }
  .note-aviso .note-accent{ background: linear-gradient(90deg,#ff6b6b,#ffa04d); }
  .note-novidade .note-badge{ background:#00e1ff22; border-color:#00e1ff66; }
  .note-aviso .note-badge{ background:#ff6b6b22; border-color:#ff6b6b66; }

  /* Hero (imagem) na NOVIDADE – ocupa a área do antigo título + linha */
  .note-hero{
    width:100%; height:120px;
    border-radius:10px; object-fit:cover; object-position:center;
    box-shadow:0 0 10px rgba(0,0,0,.25);
    margin-bottom:8px;
    border:1px solid rgba(255,255,255,.15);
  }
  .note-caption{ font-size:13px; margin-top:6px; }
  .note-caption b{ color:#fff; }
  .note-caption u{ text-underline-offset:2px; }

  /* AVISO – elementos “top” */
  .caution-strip{
    height:6px; border-radius:6px; margin:4px 0 10px;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 12px, transparent 12px 24px),
      linear-gradient(90deg,#ff6b6b,#ffa04d);
  }
  .icon-row{ display:flex; justify-content:space-between; gap:8px; margin:8px 0 10px; }
  .icon-chip{
    flex:1; height:58px; border-radius:10px; background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    box-shadow: inset 0 0 10px rgba(0,0,0,.35);
  }
  .icon-chip svg{ width:36px; height:36px; }
  .penalty-bar{ display:flex; gap:4px; margin-top:8px; }
  .penalty-bar span{ flex:1; height:8px; border-radius:6px; background: rgba(255,255,255,.22); }
  .penalty-bar span:last-child{
    background: linear-gradient(90deg,#ff6b6b,#ffa04d);
    animation: glow 2s infinite;
  }
  .penalty-labels{ display:flex; justify-content:space-between; font-size:11px; opacity:.9; margin-top:4px; }
  @keyframes glow{ 0%{box-shadow:0 0 0 rgba(255,0,0,0)} 50%{box-shadow:0 0 10px rgba(255,80,80,.9)} 100%{box-shadow:0 0 0 rgba(255,0,0,0)} }
  .status-line{ margin-top:10px; font-size:12px; opacity:.95; display:flex; align-items:center; gap:6px; }
  .led{ width:8px; height:8px; border-radius:50%; background:#4dff91; box-shadow:0 0 8px #4dff91; }

  /* RODAPÉ */
  .footer {
    background: rgba(0, 0, 0, 0.85);
    color: #ccc; text-align: center; padding: 15px; margin-top: 40px; font-size: 13px; border-top: 1px solid #444;
  }
  .footer strong { color: #fff; }


.login-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    width: 300px;
    margin: 30px auto;
    box-shadow: 0 0 10px #00000077;
}

.login-and-notes .login-box {
    margin: 0;
}