/* RKT Distribuidores — estilos copiados del sitio original (assets/styles.css).
   Tamaños en PX (= rem original x16) para ser inmunes al font-size raíz del sitio WP
   (que es menor a 16px y encogía todo lo definido en rem). Así la sección queda
   EXACTAMENTE como en la página original. */

:root{
	--blue:#1A3674;--navy:#0D1B45;--yellow:#FFCA00;--yellow-dk:#E5B400;--red:#FF0616;--gray:#F5F5F0;
	--font-display:'CWM','Kinship Sans',sans-serif;--font-body:'Inter RKT','Inter','Outfit',sans-serif;
}

/* ---- barra de filtros ---- */
.rkt-dist-wrap .dist-filter{background:#fff;border:1px solid rgba(0,0,0,.1);padding:22px;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;margin-bottom:32px}
.rkt-dist-wrap .dist-input{border:none;border-bottom:2px solid var(--blue);padding:10px 4px;font-family:var(--font-body);font-size:15px;background:transparent;width:100%;outline:none;color:var(--navy)}
.rkt-dist-wrap .dist-input:focus{border-bottom-color:var(--yellow)}
.rkt-dist-wrap .dist-select{border:1px solid rgba(0,0,0,.15);padding:11px 14px;font-family:var(--font-body);font-size:14px;background:#fff;width:100%;outline:none;color:var(--navy);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A3674' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:32px}
.rkt-dist-wrap .field-lbl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#666;margin-bottom:5px;display:block}

/* ---- botón skew ---- */
.rkt-dist-wrap .btn-rkt{display:inline-flex;align-items:center;position:relative;transform:skewX(-9deg);transition:transform .25s,box-shadow .25s;cursor:pointer;border:none;text-decoration:none;outline:none}
.rkt-dist-wrap .btn-rkt:hover{transform:skewX(-9deg) translateY(-2px)}
.rkt-dist-wrap .btn-rkt:active{transform:skewX(-9deg) scale(.97)}
.rkt-dist-wrap .btn-rkt span{display:inline-block;transform:skewX(9deg);padding:14px 30px;font-weight:700;font-size:13px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.rkt-dist-wrap .btn-blue{background:var(--blue);color:#fff}
.rkt-dist-wrap .btn-blue:hover{box-shadow:0 10px 30px -8px rgba(26,54,116,.5)}

/* ---- grid mapa + lista (col-span 3 / 2 → 3fr 2fr) ---- */
.rkt-dist-grid{display:grid;grid-template-columns:3fr 2fr;gap:24px}
#rkt-map{height:520px;width:100%;border:1px solid rgba(0,0,0,.1)}
#rkt-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;padding-right:8px}

/* ---- leyenda ---- */
.rkt-dist-legend{margin-top:12px;display:flex;align-items:center;gap:20px;font-size:12px;color:#6b7280}
.rkt-leg-item{display:flex;align-items:center;gap:8px}
.rkt-leg-pin{display:inline-block;width:14px;height:14px;clip-path:polygon(15% 0,100% 0,85% 100%,0 100%)}
.rkt-leg-pin.yellow{background:#FFCA00;border:2px solid #1A3674}
.rkt-leg-pin.red{background:#FF0616;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* ---- cards ---- */
.rkt-dist-wrap .dist-card{border:1px solid rgba(0,0,0,.09);padding:20px 22px;background:#fff;border-left:4px solid var(--blue);transition:all .25s;cursor:pointer;display:flex;flex-direction:column;gap:7px}
.rkt-dist-wrap .dist-card:hover{border-left-color:var(--yellow);box-shadow:0 8px 24px -10px rgba(26,54,116,.18);transform:translateX(3px)}
.rkt-dist-wrap .dist-card.red{border-left-color:var(--red)}
.rkt-dist-wrap .dist-card .city{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.rkt-dist-wrap .dist-card .name{font-family:var(--font-display);font-size:21px;color:var(--navy);letter-spacing:.04em;line-height:1}
.rkt-dist-wrap .dist-card .addr{font-size:13px;color:#666;line-height:1.5}
.rkt-dist-wrap .dist-card .meta{font-size:12px;color:#888;display:flex;gap:16px;margin-top:3px}

/* ---- popup del mapa ---- */
.rkt-pop{font-family:'Outfit',sans-serif;min-width:180px}
.rkt-pop .pn{font-family:var(--font-display);font-size:18px;color:#0D1B45}
.rkt-pop .pc{font-size:12px;color:#FF0616;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:3px 0}
.rkt-pop .pa{font-size:13px;color:#555;line-height:1.4}
.rkt-pop .pp{font-size:13px;color:#1A3674;font-weight:600;margin-top:6px}

/* ---- responsive (igual que el original @media 900px) ---- */
@media(max-width:900px){
	.rkt-dist-wrap .dist-filter{grid-template-columns:1fr}
	.rkt-dist-grid{grid-template-columns:1fr}
	#rkt-map{height:380px}
}