:root {
      --font: "Tw Cen MT", "Tw Cen MT Std", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
      --apoca-blue: #1e40af;
      --apoca-blue-light: #3b82f6;
      --ataliba-red: #dc2626;
      --ataliba-red-light: #ef4444;
      --gold: #fbbf24;
      --gold-dark: #d97706;
      --dark: #0f172a;
      --darker: #020617;
      --grass: #166534;
      --grass-light: #22c55e;
    }

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

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      background: var(--darker);
      color: #fff;
      overflow-x: hidden;
    }

    /* Animated grass background */
    .grass-bg {
      position: fixed;
      inset: 0;
      z-index: -2;
      background: 
        radial-gradient(ellipse at 50% 0%, rgba(22,101,52,0.3) 0%, transparent 70%),
        radial-gradient(ellipse at 20% 80%, rgba(30,64,175,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(220,38,38,0.15) 0%, transparent 50%),
        var(--darker);
    }

    .grass-bg::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40vh;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23166534' fill-opacity='0.15' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,208C1248,192,1344,192,1392,192L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
      background-size: cover;
    }

    /* Floating particles */
    .particles {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: var(--gold);
      border-radius: 50%;
      opacity: 0.3;
      animation: float 15s infinite ease-in-out;
    }

    @keyframes float {
      0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.6; }
      100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
    }

    /* Header */
    header {
      text-align: center;
      padding: 3rem 1rem 1rem;
      position: relative;
    }

    .badge-top {
      display: inline-block;
      background: var(--gold);
      color: var(--dark);
      font-family: var(--font);
      font-size: 1.1rem;
      letter-spacing: 0.15em;
      padding: 0.4rem 1.5rem;
      transform: rotate(-2deg);
      box-shadow: 0 4px 20px rgba(251,191,36,0.4);
      margin-bottom: 1.5rem;
    }

    .main-title {
      font-family: var(--font);
      font-size: clamp(3rem, 10vw, 7rem);
      line-height: 0.9;
      letter-spacing: 0.02em;
      text-shadow: 0 0 40px rgba(251,191,36,0.3);
    }

    .main-title .line1 { color: var(--gold); display: block; }
    .main-title .line2 { 
      color: #fff; 
      display: block;
      font-size: clamp(.85rem, 2.5vw, 1.25rem);
      letter-spacing: 0.12em;
      margin-top: 0.2em;
    }

    .subtitle {
      font-family: var(--font);
      font-style: italic;
      font-size: 1.3rem;
      color: rgba(255,255,255,0.75);
      margin-top: 1rem;
    }

    /* VS Section */
    .vs-section {
      max-width: 900px;
      margin: 3rem auto;
      padding: 0 1rem;
    }

    .vs-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 1rem;
    }

    .team-card {
      text-align: center;
      padding: 2rem 1rem;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .team-card:hover { transform: translateY(-5px); }

    .team-card.apoca {
      background: linear-gradient(135deg, rgba(30,64,175,0.3), rgba(30,64,175,0.1));
      border: 2px solid rgba(59,130,246,0.4);
    }

    .team-card.ataliba {
      background: linear-gradient(135deg, rgba(220,38,38,0.3), rgba(220,38,38,0.1));
      border: 2px solid rgba(239,68,68,0.4);
    }

    .team-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
      animation: pulse-glow 4s ease-in-out infinite;
    }

    @keyframes pulse-glow {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(1.1); opacity: 1; }
    }

    .team-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      object-fit: cover;
      border: 4px solid;
      position: relative;
      z-index: 1;
    }

    .apoca .team-avatar { border-color: var(--apoca-blue-light); }
    .ataliba .team-avatar { border-color: var(--ataliba-red-light); }

    .team-name {
      font-family: var(--font);
      font-size: 2rem;
      letter-spacing: 0.1em;
      position: relative;
      z-index: 1;
    }

    .team-squad {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.7);
      margin-top: 0.3rem;
      position: relative;
      z-index: 1;
    }

    .vs-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 2rem;
      color: var(--dark);
      box-shadow: 0 0 30px rgba(251,191,36,0.5);
      position: relative;
      z-index: 2;
      animation: vs-bounce 2s ease-in-out infinite;
    }

    @keyframes vs-bounce {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    /* Countdown */
    .countdown-section {
      max-width: 800px;
      margin: 3rem auto;
      padding: 0 1rem;
      text-align: center;
    }

    .countdown-label {
      font-family: var(--font);
      font-size: 1.2rem;
      letter-spacing: 0.12em;
      color: var(--gold);
      margin-bottom: 1.5rem;
    }

    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      max-width: 600px;
      margin: 0 auto;
    }

    .countdown-box {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 1.5rem 0.5rem;
      position: relative;
      overflow: hidden;
    }

    .countdown-box::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--apoca-blue), var(--gold), var(--ataliba-red));
    }

    .countdown-number {
      font-family: var(--font);
      font-size: clamp(2.5rem, 8vw, 4rem);
      line-height: 1;
      background: linear-gradient(180deg, #fff, rgba(255,255,255,0.6));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .countdown-unit {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: rgba(255,255,255,0.72);
      margin-top: 0.5rem;
    }

    .match-datetime {
      margin-top: 2rem;
      padding: 1rem 2rem;
      background: rgba(251,191,36,0.1);
      border: 1px solid rgba(251,191,36,0.3);
      border-radius: 12px;
      display: inline-block;
    }

    .match-datetime p {
      font-family: var(--font);
      font-size: 1.3rem;
      letter-spacing: 0.1em;
      color: var(--gold);
    }

    /* Info Cards */
    .info-section {
      max-width: 900px;
      margin: 3rem auto;
      padding: 0 1rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
    }

    .info-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s ease;
    }

    .info-card:hover {
      background: rgba(255,255,255,0.06);
      border-color: rgba(251,191,36,0.3);
      transform: translateY(-3px);
    }

    .info-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-size: 1.5rem;
    }

    .info-card h3 {
      font-family: var(--font);
      font-size: 1.3rem;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }

    .info-card p {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.75);
      line-height: 1.5;
    }

    /* Sponsors */
    .sponsors-section {
      max-width: 900px;
      margin: 4rem auto;
      padding: 0 1rem;
      text-align: center;
    }

    .sponsors-title {
      font-family: var(--font);
      font-size: 2rem;
      letter-spacing: 0.2em;
      color: var(--gold);
      margin-bottom: 0.5rem;
    }

    .sponsors-subtitle {
      font-family: var(--font);
      font-style: italic;
      color: rgba(255,255,255,0.72);
      margin-bottom: 2rem;
    }

    .sponsors-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
    }

    .sponsor-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 1.2rem 1rem;
      font-size: 0.9rem;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      transition: all 0.3s ease;
      cursor: default;
    }

    .sponsor-card:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(251,191,36,0.4);
      transform: scale(1.03);
    }

    .sponsor-card.delicias {
      background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(217,119,6,0.1));
      border-color: var(--gold);
      color: var(--gold);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .sponsor-card.delicias::before {
      content: '👆 Clique Aqui';
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 0.6rem;
      background: var(--gold);
      color: var(--dark);
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
      animation: click-pulse 2s ease-in-out infinite;
    }

    @keyframes click-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .sponsor-card.delicias:hover {
      background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(217,119,6,0.2));
      box-shadow: 0 0 30px rgba(251,191,36,0.2);
    }

    /* IBAN */
    .iban-section {
      max-width: 600px;
      margin: 3rem auto;
      padding: 0 1rem;
      text-align: center;
    }

    .iban-box {
      background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(251,191,36,0.05));
      border: 2px solid var(--gold);
      border-radius: 16px;
      padding: 1.5rem;
      position: relative;
    }

    .iban-label {
      font-family: var(--font);
      font-size: 1rem;
      letter-spacing: 0.12em;
      color: var(--gold);
      margin-bottom: 0.5rem;
    }

    .iban-number {
      font-family: var(--font);
      font-size: clamp(1.2rem, 4vw, 1.8rem);
      letter-spacing: 0.15em;
      color: #fff;
      word-break: break-all;
    }

    .copy-btn {
      margin-top: 1rem;
      background: var(--gold);
      color: var(--dark);
      border: none;
      padding: 0.6rem 1.5rem;
      border-radius: 8px;
      font-family: var(--font);
      font-weight: 700;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-btn:hover {
      background: var(--gold-dark);
      transform: scale(1.05);
    }

    .copy-btn.copied {
      background: var(--grass-light);
      color: #fff;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 3rem 1rem;
      margin-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    .footer-tagline {
      font-family: var(--font);
      font-size: 2rem;
      letter-spacing: 0.15em;
      color: var(--gold);
      text-shadow: 0 0 20px rgba(251,191,36,0.3);
    }

    .footer-credit {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.72);
      margin-top: 1rem;
    }

    /* Responsive */
    @media (max-width: 640px) {
      .vs-container { grid-template-columns: 1fr; gap: 1.5rem; }
      .vs-circle { margin: 0 auto; }
      .countdown-grid { grid-template-columns: repeat(2, 1fr); }
      .main-title { font-size: 3rem; }
    }


    body { line-height: 1.5; font-size: 18px; }
    a { color: var(--gold); text-underline-offset: .2em; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
    .main-title { font-weight: 800; line-height: 1; }
    .main-title .line2 { line-height: 1.6; margin: 1rem auto 0; max-width: 38rem; }
    .badge-top, .team-name, .countdown-label, .sponsors-title, .iban-label, .footer-tagline { font-weight: 700; }
    .team-name { line-height: 1.2; }
    .team-avatar { font-family: var(--font) !important; font-weight: 700; }
    .countdown-number { font-weight: 700; font-variant-numeric: tabular-nums; }
    .info-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .info-card p, .team-squad, .sponsor-card { font-size: 1rem; }
    .copy-btn { min-height: 44px; font-size: 1rem; }
    .copy-btn.copied { color: var(--dark); }
    .iban-number { letter-spacing: .06em; user-select: all; font-variant-numeric: tabular-nums; word-break: normal; }
    .copy-status { min-height: 1.6em; margin-top: .7rem; color: #dce5f0; font-size: .95rem; }
    .event-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
    .event-actions a { border: 1px solid rgba(251,191,36,.5); border-radius: 10px; padding: .65rem 1rem; min-height: 44px; text-decoration: none; }
    .event-actions a:hover { background: rgba(251,191,36,.12); }
    .time-zone { font-size: .95rem; color: #cbd5e1; margin-top: .4rem; }
    .footer-credit { font-size: 1rem; }
    .skip-link { position: fixed; left: 1rem; top: 1rem; transform: translateY(-200%); z-index: 10; padding: .5rem 1rem; background: var(--gold); color: var(--dark); }
    .skip-link:focus { transform: translateY(0); }
    .sponsor-card.delicias::before { content: 'Visitar ↗'; animation: none; font-size: .7rem; }
    .sponsor-card.delicias { padding-top: 1.8rem; }
    @media (max-width: 640px) {
      header { padding-top: 2rem; }
      .main-title { font-size: clamp(2.6rem, 12vw, 4rem); }
      .main-title .line2 { letter-spacing: .05em; }
      .info-section { grid-template-columns: 1fr; }
      .match-datetime { padding: 1rem; }
      .vs-section, .countdown-section { margin: 2rem auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      .particles { display: none; }
    }