*{box-sizing:border-box;margin:0;padding:0}

    :root{
      --azul:#072a63;
      --rojo:#d71920;
      --verde:#159447;
      --amarillo:#f6c915;
      --celeste:#65b8e8;
      --naranja:#f18b20;
      --blanco:#fffaf0;

      /* Paleta tomada del afiche */
      --vino:#96001f;
      --naranja-afiche:#f2a12e;
      --naranja-claro:#f7b24d;
      --coral:#f45a46;
      --verde-afiche:#2d8b4f;
      --amarillo-afiche:#f3c32a;
      --crema:#f4eee3;
      --marron:#7e2f23;
      --panel:#fff8ef;
    }


    .countdown-latam{
      position:relative;
      width:100%;
      min-height:690px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:78px 22px 120px;
      isolation:isolate;
      background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.97) 0 23%, rgba(255,255,255,.90) 24% 36%, transparent 37%),
        linear-gradient(140deg,#75bce6 0%,#75bce6 14%,#ffffff 14%,#ffffff 22%,#75bce6 22%,#75bce6 31%,#d71920 31%,#d71920 39%,#159447 39%,#159447 48%,#f6c915 48%,#f6c915 57%,#65b8e8 57%,#65b8e8 66%,#ffffff 66%,#ffffff 73%,#d71920 73%,#d71920 81%,#0a3d7c 81%,#0a3d7c 90%,#159447 90%,#159447 100%);
    }

    .countdown-latam::before,
    .countdown-latam::after{
      content:"";
      position:absolute;
      left:-8%;
      width:116%;
      height:130px;
      z-index:-2;
      opacity:.95;
      background:
        linear-gradient(9deg,
          #75bce6 0 12%, #ffffff 12% 21%, #75bce6 21% 30%,
          #009b3a 30% 36%, #fedf00 36% 43%, #002776 43% 49%,
          #fcd116 49% 56%, #003893 56% 62%, #ce1126 62% 68%,
          #75bce6 68% 76%, #ffffff 76% 84%, #d52b1e 84% 90%,
          #0038a8 90% 95%, #ffffff 95% 100%);
      box-shadow:0 6px 24px rgba(0,0,0,.15);
    }

    .countdown-latam::before{top:-45px;transform:rotate(-2deg)}
    .countdown-latam::after{bottom:-55px;transform:rotate(2deg)}

    .flag-confetti{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.23;
      z-index:-2;
      background-image:
        radial-gradient(circle at 10% 20%, #fff 0 4px, transparent 5px),
        radial-gradient(circle at 80% 30%, #f6c915 0 5px, transparent 6px),
        radial-gradient(circle at 20% 80%, #159447 0 5px, transparent 6px),
        radial-gradient(circle at 70% 75%, #d71920 0 5px, transparent 6px),
        radial-gradient(circle at 47% 14%, #65b8e8 0 4px, transparent 5px);
      background-size:170px 170px,210px 210px,230px 230px,190px 190px,250px 250px;
    }

    .argentina-highlight{
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:.9;
      background:
        radial-gradient(circle at 50% 22%, rgba(117,188,230,.40) 0 16%, rgba(117,188,230,.15) 17% 27%, transparent 28%),
        linear-gradient(180deg, rgba(117,188,230,.34) 0 12%, rgba(255,255,255,.30) 12% 18%, rgba(117,188,230,.18) 18% 26%, transparent 26% 74%, rgba(117,188,230,.13) 74% 82%, rgba(255,255,255,.20) 82% 88%, rgba(117,188,230,.24) 88% 100%);
      mix-blend-mode:screen;
    }

    .argentina-ribbon{
      position:absolute;
      top:52px;
      left:50%;
      transform:translateX(-50%);
      width:min(92%,1200px);
      height:105px;
      z-index:0;
      pointer-events:none;
      opacity:.92;
      filter:drop-shadow(0 12px 26px rgba(7,42,99,.16));
    }

    .argentina-ribbon svg{width:100%;height:100%;display:block}

    .tandil-landscape{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      width:100%;
      height:235px;
      z-index:-1;
      pointer-events:none;
    }

    .tandil-landscape svg{width:100%;height:100%;display:block}

    .tourism-badges{
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:.17;
    }

    .badge{
      position:absolute;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff8ef;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      border-radius:999px;
      border:2px solid rgba(255,248,239,.34);
      background:rgba(150,0,31,.42);
      backdrop-filter:blur(2px);
      box-shadow:0 8px 18px rgba(0,0,0,.10);
      font-size:.78rem;
      padding:10px 14px;
    }

    .badge.one{top:132px;left:4%}
    .badge.two{top:170px;right:5%}
    .badge.three{bottom:148px;left:6%}
    .badge.four{bottom:165px;right:7%}

    .panel{
      position:relative;
      width:min(980px,100%);
      padding:42px 42px 34px;
      border-radius:42px;
      background:rgba(255,248,239,.95);
      border:5px solid rgba(255,255,255,.9);
      box-shadow:0 24px 60px rgba(4,30,74,.22);
      text-align:center;
      backdrop-filter:blur(7px);
      z-index:1;
    }

    .panel::before{
      content:"";
      position:absolute;
      inset:10px;
      border:2px solid rgba(150,0,31,.18);
      border-radius:30px;
      pointer-events:none;
    }

    .eyebrow2{
      display:inline-block;
      margin-bottom:10px;
      padding:7px 14px;
      border-radius:999px;
      background:var(--vino);
      color:var(--naranja-afiche);
      text-transform:uppercase;
      letter-spacing:.13em;
      font-size:.78rem;
      font-weight:700;
      box-shadow:0 6px 18px rgba(150,0,31,.18);
    }

    h1{
      color:var(--naranja-afiche);
      font-size:clamp(2rem,5vw,4.2rem);
      line-height:.95;
      margin:10px 0 8px;
      font-weight:900;
      text-transform:uppercase;
    }

    .subtitle{
      max-width:760px;
      margin:0 auto;
      color:var(--marron);
      font-size:clamp(1rem,2vw,1.28rem);
      line-height:1.45;
      font-weight:700;
    }

    .date{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      color:var(--vino);
      font-size:clamp(1rem,2vw,1.2rem);
      font-weight:800;
    }

    .timer{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin:34px auto 28px;
    }

    .time-box{
      min-width:0;
      padding:22px 8px 17px;
      border-radius:24px;
      background:linear-gradient(180deg,#fff8ef 0%, #fff2d8 100%);
      border:1px solid rgba(242,161,46,.38);
      box-shadow:0 9px 24px rgba(150,0,31,.10);
      position:relative;
      overflow:hidden;
    }

    .time-box::after{
      content:"";
      position:absolute;
      height:6px;
      left:0;right:0;bottom:0;
    }
    .time-box:nth-child(1)::after{background:linear-gradient(90deg,var(--coral),var(--naranja-afiche),var(--amarillo-afiche))}
    .time-box:nth-child(2)::after{background:linear-gradient(90deg,var(--verde-afiche),var(--amarillo-afiche),var(--naranja-afiche))}
    .time-box:nth-child(3)::after{background:linear-gradient(90deg,var(--coral),var(--verde-afiche),var(--naranja-afiche))}
    .time-box:nth-child(4)::after{background:linear-gradient(90deg,var(--amarillo-afiche),var(--coral),var(--verde-afiche))}

    .number{
      display:block;
      font-size:clamp(2.6rem,7vw,5.8rem);
      line-height:1;
      font-weight:900;
      color:var(--naranja-afiche);
      font-variant-numeric:tabular-nums;
      text-shadow:0 2px 0 rgba(126,47,35,.08);
    }

    .label{
      display:block;
      margin-top:8px;
      color:var(--vino);
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.13em;
      font-weight:800;
    }

    .flags{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:6px 10px;
      max-width:820px;
      margin:0 auto;
      font-size:clamp(1.25rem,3vw,1.75rem);
      line-height:1.1;
      filter:saturate(1.08);
    }

    .final-message{
      display:none;
      margin:30px 0 22px;
      padding:24px;
      border-radius:24px;
      background:linear-gradient(120deg,var(--vino),var(--naranja-afiche));
      color:#fff8ef;
      font-size:clamp(1.7rem,4vw,3.2rem);
      font-weight:900;
    }

    .small-note{
      margin-top:18px;
      color:var(--vino);
      font-size:.84rem;
      font-weight:700;
    }

    @media (max-width:900px){
      .badge{font-size:.68rem;padding:8px 10px}
      .badge.one{top:125px;left:2%}
      .badge.two{top:170px;right:2%}
      .badge.three{bottom:158px;left:2%}
      .badge.four{bottom:170px;right:2%}
      .tandil-landscape{height:200px}
    }

    @media (max-width:700px){
      .countdown-latam{min-height:620px;padding:55px 14px 105px}
      .panel{padding:34px 14px 28px;border-radius:28px}
      .panel::before{inset:7px;border-radius:21px}
      .timer{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
      .time-box{padding:18px 7px 14px;border-radius:18px}
      .flags{gap:5px 8px}
      .tourism-badges{display:none}
      .tandil-landscape{height:145px}
      .argentina-ribbon{top:34px;height:74px;width:96%}
    }

    @media (max-width:380px){
      .countdown-latam{padding-left:9px;padding-right:9px}
      .panel{padding-left:10px;padding-right:10px}
      .label{font-size:.68rem;letter-spacing:.09em}
      .argentina-ribbon{top:28px;height:60px}
    }

    @media (prefers-reduced-motion:no-preference){
      .number.tick{animation:pop .28s ease}
      @keyframes pop{50%{transform:scale(1.06)}}
    }
