/* GASOLINAGO — SIGNAL
   Cartel de gasolinera clásica reinventado.
   Rojo + mostaza + tinta negra. Contornos gruesos. Sin sombras suaves. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

@media (min-width: 1000px) {
  :root{--signal-red:#D83A2E;--signal-yellow:#E6B83F;--signal-yellow-light:#F4D978;--signal-ink:#171512;--signal-paper:#F6EFD9;--signal-cream:#FFF9E9;--signal-white:#FFFDF5;--signal-muted:#665F51}
  *{box-shadow:none!important}
  body{padding:0 32px 64px;background:var(--signal-paper);color:var(--signal-ink);font-family:'Hanken Grotesk',system-ui,sans-serif}
  .wrap{width:min(1540px,100%);max-width:none;margin:0 auto;animation:none;display:grid;grid-template-columns:minmax(370px,.78fr) minmax(620px,1.22fr);column-gap:24px}
  header.head{grid-column:1/-1;min-height:110px;padding:25px 4px 18px;display:flex;align-items:center;border-bottom:3px solid var(--signal-ink)}
  header.head h1{font-size:0!important;line-height:.9;white-space:nowrap}
  header.head h1::before{content:'Gasolina';display:inline-block;font-family:'Archivo Black','Bricolage Grotesque',sans-serif;font-size:clamp(42px,5vw,68px);letter-spacing:-.055em;background:linear-gradient(90deg,#168A66 0 12%,var(--signal-ink) 12% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  header.head h1::after{content:'Go';display:inline-block;font-family:'Archivo Black','Bricolage Grotesque',sans-serif;font-size:clamp(42px,5vw,68px);letter-spacing:-.055em;color:transparent;background:linear-gradient(90deg,#168A66 0 48%,var(--signal-ink) 48% 100%);-webkit-background-clip:text;background-clip:text}
  /* Claim: una sola línea visual, sin dejar que se estire verticalmente. */
  .sub{font-size:0!important;margin:10px 0 0;max-width:760px;line-height:1.25;white-space:nowrap;height:auto}.sub::after{content:'Encuentra la gasolinera que más te conviene, compara precios y ahorra en cada repostaje.';font-size:15px;color:var(--signal-muted);font-weight:600;line-height:1.25;display:block}
  .count{background:var(--signal-yellow);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:7px;padding:9px 13px;font-weight:800}
  .estado{grid-column:1/-1;margin:16px 0 18px;background:var(--signal-cream);border:3px solid var(--signal-ink);border-radius:7px;color:var(--signal-ink);font-family:'DM Mono',monospace;font-weight:700;padding:9px 13px}
  .estado .led{background:var(--signal-yellow);border:2px solid var(--signal-ink)}.estado.ok .led{background:#56A94A}.estado.aviso .led{background:var(--signal-red)}
  .controls{grid-column:1/-1;margin:0 0 24px;padding:16px;display:grid;grid-template-columns:auto auto minmax(280px,1fr);grid-template-areas:'territories fuels search' 'bar bar bar';gap:14px;background:var(--signal-white);border:3px solid var(--signal-ink);border-radius:9px}
  .controls .fuellabel{display:none}.controls .terrs{grid-area:territories;align-self:center}.controls .fuels{grid-area:fuels;align-self:center}.controls .searchbox{grid-area:search;min-width:0}.controls .bar{grid-area:bar;padding-top:13px;border-top:3px solid var(--signal-ink)}
  .terrs,.fuels{gap:7px;flex-wrap:nowrap}.terr,.fuel{white-space:nowrap;background:var(--signal-cream);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:7px!important;padding:9px 14px;font-weight:800}.terr:hover,.fuel:hover{transform:translateY(-2px);border-color:var(--signal-red)}.terr.on,.fuel.on{background:var(--signal-red);border-color:var(--signal-ink);color:#fff}.fuel .dot{border:2px solid var(--signal-ink)}.fuel.on .dot{background:var(--signal-yellow)!important;border-color:#fff}
  .search{min-height:45px;background:var(--signal-cream);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:7px;font-weight:600}.search:focus{outline:none;border-color:var(--signal-red)}
  .sort{background:var(--signal-ink);padding:4px;gap:3px;border-radius:7px!important}.sort button{color:#fff;padding:8px 14px;border-radius:5px!important}.sort button.on{background:var(--signal-yellow);color:var(--signal-ink)}
  .radio,.loc,.toggle-abierto{background:var(--signal-cream);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:7px!important;padding:8px 13px;font-weight:800}.radio.on,.toggle-abierto.on{background:var(--signal-yellow);color:var(--signal-ink);border-color:var(--signal-ink)}.loc:hover,.radio:hover,.toggle-abierto:hover{background:var(--signal-yellow-light)}.locstatus{color:var(--signal-muted);font-weight:700}.locstatus b,.demo{color:var(--signal-red);font-weight:800}

  /* HERO: ficha roja y mapa comparten fila y altura. */
  #totemZone{grid-column:1;grid-row:5;display:flex;min-width:0;margin:0;align-self:start}
  .totem{width:100%;min-height:620px;height:620px;margin:0;padding:30px;display:flex;align-items:center;background:var(--signal-red);color:#fff;border:4px solid var(--signal-ink);border-radius:9px;position:relative;overflow:hidden}.totem::after{content:'GO';position:absolute;right:-20px;bottom:-40px;font-family:'Archivo Black',sans-serif;font-size:190px;line-height:1;color:rgba(23,21,18,.1);pointer-events:none}.totem-grid{width:100%;display:block;position:relative;z-index:1}
  .eyebrow{display:inline-block;margin-bottom:20px;padding:6px 9px;background:var(--signal-yellow);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:5px;font-family:'DM Mono',monospace;font-weight:700;letter-spacing:.1em}.totem-brand{font-family:'Archivo Black','Bricolage Grotesque',sans-serif;font-size:clamp(27px,3vw,40px);line-height:1}.totem-place{color:#FFE9D9;font-size:15px;font-weight:600;margin-top:7px}.totem-price{display:inline-block;margin-top:38px;padding:10px 16px 8px;background:var(--signal-yellow);color:var(--signal-ink);border:4px solid var(--signal-ink);border-radius:7px;font-family:'Archivo Black','DM Mono',sans-serif;font-size:clamp(60px,7vw,98px);line-height:.95;letter-spacing:-.06em}.totem-price small{font-size:.27em;color:var(--signal-ink);margin-left:5px}.media{display:inline-block;margin-top:15px;padding:7px 10px;background:var(--signal-white);color:var(--signal-ink);border:3px solid var(--signal-ink);border-radius:5px;font-family:'DM Mono',monospace;font-weight:700}.media.cara{color:var(--signal-red)}
  h2.sect:first-of-type{grid-column:2;grid-row:5;margin:0 0 10px;padding-left:2px;align-self:end;font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:.01em;color:var(--signal-ink)}
  #map{grid-column:2;grid-row:6;width:100%;height:620px;min-height:620px;border:4px solid var(--signal-ink);border-radius:9px;overflow:hidden;background:#D8D0BB}.leaflet-control-zoom{margin:14px!important;border:3px solid var(--signal-ink)!important;border-radius:7px!important;overflow:hidden}.leaflet-control-zoom a{width:38px!important;height:38px!important;line-height:34px!important;background:var(--signal-yellow)!important;color:var(--signal-ink)!important;border:none!important;font-weight:900}.leaflet-control-zoom a+a{border-top:3px solid var(--signal-ink)!important}

  /* EVOLUCIÓN: va después del bloque hero, no compite con el precio + mapa. */
  #grafSeccion{grid-column:1/-1;grid-row:7;margin-top:30px}
  .grafbox{background:var(--signal-white);border:3px solid var(--signal-ink);border-radius:9px;margin-top:10px}.rangos{background:var(--signal-ink);border-radius:7px}.rangos button{color:#fff;border-radius:5px}.rangos button.on{background:var(--signal-yellow);color:var(--signal-ink)}
  #listTitle,#leyenda,#list,#masBtn,footer{grid-column:1/-1}h2.sect{color:var(--signal-ink);font-family:'Archivo Black',sans-serif;font-size:16px}.leyenda{color:var(--signal-muted);font-weight:600}

  /* Ranking: oro / plata / bronce mucho más protagonistas. */
  #list .row{background:var(--signal-white);border:3px solid var(--signal-ink);border-radius:8px;padding:15px 17px;position:relative;overflow:hidden}.row:hover{transform:translateX(4px);border-color:var(--signal-red)}
  #list .row.oro{background:linear-gradient(90deg,#F7D75C 0%,#FFF1B0 48%,var(--signal-white) 100%);border-color:#9B7210;border-width:4px}.row.plata{background:linear-gradient(90deg,#DCE0DF 0%,#F7F8F7 48%,var(--signal-white) 100%);border-color:#707875;border-width:3px}.row.bronce{background:linear-gradient(90deg,#E8B27A 0%,#F8DEC3 48%,var(--signal-white) 100%);border-color:#9A5C2C;border-width:3px}
  #list .row.oro::before{content:'🥇  1º MÁS BARATA';position:absolute;top:0;left:0;background:var(--signal-red);color:#fff;border-right:3px solid var(--signal-ink);border-bottom:3px solid var(--signal-ink);padding:5px 10px;font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.02em}.row.plata::before{content:'🥈  2º MÁS BARATA';position:absolute;top:0;left:0;background:#59615E;color:#fff;border-right:3px solid var(--signal-ink);border-bottom:3px solid var(--signal-ink);padding:5px 10px;font-family:'Archivo Black',sans-serif;font-size:11px}.row.bronce::before{content:'🥉  3º MÁS BARATA';position:absolute;top:0;left:0;background:#9A5C2C;color:#fff;border-right:3px solid var(--signal-ink);border-bottom:3px solid var(--signal-ink);padding:5px 10px;font-family:'Archivo Black',sans-serif;font-size:11px}
  #list .row.oro .price{font-size:30px}.price{font-family:'Archivo Black','DM Mono',sans-serif;font-size:24px}.chip{color:var(--signal-ink);border:2px solid var(--signal-ink);border-radius:4px;background:var(--signal-yellow);font-weight:800}.row.oro .best{background:var(--signal-red);color:#fff;border-radius:4px;border:2px solid var(--signal-ink)}.masbtn{background:var(--signal-red);color:#fff;border:3px solid var(--signal-ink);border-radius:7px;font-weight:800}.masbtn:hover{background:var(--signal-yellow);color:var(--signal-ink)}footer{border-top:3px solid var(--signal-ink);color:var(--signal-muted)}footer a{color:var(--signal-red)!important;font-weight:800}
  @media (min-width:1350px){.wrap{grid-template-columns:minmax(410px,.72fr) minmax(700px,1.28fr);column-gap:28px}.totem,#map{min-height:660px;height:660px}}
}
@media (max-width:999px){.wrap{width:100%}}