@font-face{font-family:"Aktiv Grotesk Ex";src:url("assets/fonts/AktivGroteskEx_Rg.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Aktiv Grotesk Ex";src:url("assets/fonts/AktivGroteskEx_Md.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Aktiv Grotesk Ex";src:url("assets/fonts/AktivGroteskEx_Bd.woff2") format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Infinix Display";src:url("assets/fonts/InfinixDisplay.woff2") format("woff2");font-weight:400;font-display:swap}

  :root{
    /* ---- BASE DE MARCA — no cambia entre campañas ---- */
    --black:#000000;
    --ink-1:#0C0C0C;
    --ink-2:#151515;
    --line:#2A2A2A;
    --off-white:#F3F3F3;
    --white:#FFFFFF;
    --grey-1:#212121;
    --grey-2:#737373;
    --grey-3:#B2B2B2;
    --grey-4:#E2E2E2;
    --green:#64FF00;          /* Infinix Green — interacción/estado */

    /* ---- TEMA DE CAMPAÑA — se cambia cada mes ---- */
    --camp:#5FE3F0;           /* GT 50 Pro: cian hielo */
    --camp-soft:#9CC9E0;
    --camp-deep:#2C6C93;

    --radius:12px;
    --maxw:1200px;
  }

  *{box-sizing:border-box}

  body{
    margin:0;background:var(--black);color:var(--off-white);
    font-family:"Aktiv Grotesk Ex","Helvetica Neue",Arial,sans-serif;
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.01em}
  a{color:inherit}
  img{max-width:100%;display:block}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  .mocknote{
    background:var(--ink-2);border-bottom:1px solid var(--line);
    font-size:12px;color:var(--grey-3);text-align:center;padding:9px 24px;letter-spacing:.02em;
  }
  .mocknote b{color:var(--camp);font-weight:500}

  /* ---------- nav ---------- */
  .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap}
  .nav>img{width:118px;height:auto}
  .nav-right{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .nav-links{display:flex;gap:24px;font-size:14px;color:var(--grey-3)}
  .nav-links a{text-decoration:none}
  .nav-links a:hover{color:var(--green)}
  @media(max-width:900px){.nav-links{display:none}}

  .follow{display:flex;align-items:center;gap:12px;padding-left:26px;border-left:1px solid var(--line)}
  @media(max-width:900px){.follow{padding-left:0;border-left:0}}
  .follow-label{font-size:13px;color:var(--grey-3);font-weight:500;white-space:nowrap}
  .follow a{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);color:var(--grey-3);
    transition:color .14s ease,border-color .14s ease,background .14s ease;
  }
  .follow a:hover{color:var(--black);background:var(--green);border-color:var(--green)}
  .follow svg{width:17px;height:17px}

  /* ---------- banner de campaña ---------- */
  .campaign-band{padding-bottom:8px}
  .kv{
    border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
    background:var(--ink-1);
  }
  .kv img{width:100%;height:auto}

  .campaign-bar{
    display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:end;
    background:linear-gradient(180deg,var(--ink-2),var(--ink-1));
    border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--radius) var(--radius);
    margin-top:-1px;padding:22px 24px;
  }
  @media(max-width:820px){.campaign-bar{grid-template-columns:1fr}}
  .campaign-bar h2{font-size:clamp(19px,2.4vw,24px)}
  .campaign-bar p{margin:6px 0 0;color:var(--grey-3);font-size:14px}

  .field{display:flex;flex-direction:column;gap:7px;min-width:200px}
  .field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);font-weight:500}

  select,input[type=search]{
    width:100%;background:var(--black);color:var(--off-white);
    border:1px solid var(--line);border-radius:8px;padding:12px 14px;
    font-family:inherit;font-size:15px;
  }
  select:focus-visible,input:focus-visible,button:focus-visible,a:focus-visible{
    outline:2px solid var(--green);outline-offset:2px;
  }

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:8px;cursor:pointer;background:var(--green);color:var(--black);
    font-family:inherit;font-weight:700;font-size:15px;padding:13px 22px;white-space:nowrap;
    transition:filter .12s ease,transform .12s ease;
  }
  .btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

  /* ---------- accesos secundarios ---------- */
  .entries{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  @media(max-width:760px){.entries{grid-template-columns:1fr}}
  .entry{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    background:var(--ink-1);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;text-decoration:none;transition:border-color .15s ease,background .15s ease;
  }
  .entry:hover{border-color:var(--green);background:var(--ink-2)}
  .entry h3{font-size:17px}
  .entry p{margin:4px 0 0;font-size:13px;color:var(--grey-2)}
  .entry .arrow{color:var(--green);font-size:20px;line-height:1;font-weight:700}

  /* ---------- catálogo ---------- */
  .catalogo{background:var(--black);padding:70px 0 76px;border-top:1px solid var(--line)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .catalogo h2,.cuotas h2{font-family:"Infinix Display","Aktiv Grotesk Ex",sans-serif;font-weight:400;
    font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:0}
  .catalogo .sub,.cuotas .sub{color:var(--grey-2);margin:10px 0 0;font-size:15px;max-width:58ch}

  .models{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
  @media(max-width:900px){.models{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.models{grid-template-columns:1fr}}
  .model{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink-1);
    cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left;display:block;width:100%;
    transition:border-color .14s ease,transform .14s ease;
  }
  .model:hover{border-color:var(--green);transform:translateY(-3px)}
  .model img{width:100%;height:auto;aspect-ratio:998/769;object-fit:cover}
  .model-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px}
  .model-foot span:first-child{font-weight:700;font-size:15px}
  .model-foot .ficha{font-size:12.5px;color:var(--grey-2)}
  .model:hover .ficha{color:var(--green)}

  /* visor */
  dialog.viewer{
    border:0;padding:0;background:transparent;max-width:min(1080px,94vw);width:100%;
  }
  dialog.viewer::backdrop{background:rgba(0,0,0,.88)}
  .viewer-box{background:var(--white);border-radius:var(--radius);overflow:hidden}
  .viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 18px;border-bottom:1px solid var(--grey-4)}
  .viewer-bar strong{color:var(--black);font-size:16px}
  .viewer-close{
    border:1px solid var(--grey-4);background:var(--white);color:var(--black);
    border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;
  }
  .viewer-close:hover{background:var(--off-white)}
  .viewer-box img{width:100%;height:auto;max-height:78vh;object-fit:contain;background:var(--white)}

  /* ---------- comunidad ---------- */
  .comunidad{background:var(--black);padding:0 0 76px}
  .comunidad-box{
    background:linear-gradient(120deg,var(--ink-2),var(--ink-1));
    border:1px solid var(--line);border-radius:var(--radius);
    padding:38px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  }
  .comunidad-box h2{font-size:clamp(22px,3vw,30px)}
  .comunidad-box p{color:var(--grey-2);margin:8px 0 0;font-size:15px;max-width:52ch}

  /* ---------- aliados de cuotas ---------- */
  .cuotas{background:var(--black);padding:64px 0 72px;border-top:1px solid var(--line)}
  .cuotas h2{font-family:"Infinix Display","Aktiv Grotesk Ex",sans-serif;font-weight:400;
    font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:0}
  .cuotas .sub{color:var(--grey-2);margin:10px 0 0;font-size:15px;max-width:58ch}
  .partners{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
  @media(max-width:820px){.partners{grid-template-columns:1fr}}
  .partner{
    display:flex;flex-direction:column;gap:18px;
    background:var(--white);border-radius:var(--radius);padding:26px;text-decoration:none;
    transition:transform .14s ease,box-shadow .14s ease;
  }
  .partner:hover{transform:translateY(-3px);box-shadow:0 14px 34px -14px rgba(100,255,0,.35)}
  .partner-logo{height:46px;display:flex;align-items:center}
  .partner-logo img{height:100%;width:auto;object-fit:contain}
  .partner p{color:var(--grey-2);font-size:14px;margin:0;flex:1}
  .partner .go{
    display:inline-flex;align-items:center;gap:8px;color:var(--black);
    font-weight:700;font-size:14px;
  }
  .partner .go::after{content:"→";transition:transform .14s ease}
  .partner:hover .go::after{transform:translateX(4px)}

  /* ---------- corte de hielo ---------- */
  .icebreak{display:block;width:100%;height:auto;margin-top:52px}

  /* ---------- resultados ---------- */
  .results{background:var(--off-white);color:var(--black);padding:8px 0 76px;margin-top:-1px}
  .results h2{
    font-family:"Infinix Display","Aktiv Grotesk Ex",sans-serif;font-weight:400;
    font-size:clamp(30px,4.6vw,48px);letter-spacing:0;line-height:1.05;
  }
  .results .sub{color:var(--grey-2);margin:10px 0 0;font-size:15px;max-width:60ch}

  .toolbar{
    position:sticky;top:0;z-index:5;background:var(--off-white);
    padding:22px 0 12px;margin-top:22px;
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  }
  .toolbar input[type=search],.toolbar select{
    background:var(--white);color:var(--black);border:1px solid var(--grey-4);
  }
  .toolbar input[type=search]{flex:1 1 280px}
  .toolbar select{flex:0 0 auto;width:auto;min-width:190px}

  .chips{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px}
  .chip{
    font-family:inherit;font-size:13px;font-weight:500;
    background:var(--white);border:1px solid var(--grey-4);color:var(--grey-2);
    border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .12s ease;
  }
  .chip:hover{border-color:var(--grey-3)}
  .chip[aria-pressed=true]{background:var(--black);border-color:var(--black);color:var(--green)}
  .chip.camp[aria-pressed=true]{color:var(--camp)}

  .count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);
    font-weight:500;margin-bottom:18px}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}

  .card{
    background:var(--white);border:1px solid var(--grey-4);border-radius:var(--radius);
    padding:22px;display:flex;flex-direction:column;gap:13px;
  }
  .card.gt{border-color:var(--camp-deep);box-shadow:inset 3px 0 0 var(--camp-deep)}
  .city{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);font-weight:500}
  .card h3{font-size:18px;line-height:1.25;margin-top:6px}
  .badges{display:flex;flex-wrap:wrap;gap:6px}
  .badge{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
    border-radius:4px;padding:5px 9px}
  .badge.gt{background:var(--black);color:var(--camp)}
  .badge.exp{background:var(--black);color:var(--green)}
  .addr{font-size:14px;color:var(--grey-2);margin:0;line-height:1.5}
  .actions{display:flex;gap:8px;margin-top:auto;padding-top:4px}
  .action{
    flex:1 1 0;text-align:center;text-decoration:none;border-radius:8px;padding:11px 10px;
    font-size:14px;font-weight:500;border:1px solid var(--grey-4);color:var(--black);
    transition:all .12s ease;
  }
  .action:hover{border-color:var(--black)}
  .action.wa{background:var(--black);border-color:var(--black);color:var(--white)}
  .action.wa:hover{background:var(--grey-1)}
  .action.off{opacity:.4;pointer-events:none}

  .empty{grid-column:1/-1;padding:40px 0;color:var(--grey-2)}

  /* ---------- footer ---------- */
  footer{background:var(--black);padding:52px 0;border-top:1px solid var(--line)}
  .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
  footer img{width:104px;margin-bottom:14px}
  footer p{color:var(--grey-2);font-size:13px;margin:6px 0 0;max-width:46ch}
  footer a{color:var(--grey-3);text-decoration:none}
  footer a:hover{color:var(--green)}
  .socials{display:flex;gap:18px;font-size:14px;margin-top:10px}

  @media(prefers-reduced-motion:reduce){*{transition:none!important}}