/* Out.pa — look "Arcade moderno" (v1). Esquinas redondeadas + bordes ink de 2px + sombra dura.
   Solo CSS: no toca el bundle. Para volver atrás, quitar el <link> en index.html. */
:root{--r-card:16px;--r-btn:12px;--r-field:12px;--r-img:12px}

/* Fuente pixel más legible (Pixelify Sans en lugar de Press Start 2P) */
.font-pixel,.eyebrow{font-family:"Pixelify Sans","Press Start 2P",monospace;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.2}

/* Botones */
.btn,.btn-pink,.btn-solid,.btn-ghost,button.border-2,a.border-2,label.border-2,summary.border-2{border-radius:var(--r-btn)}
/* Chips / filtros → píldoras */
.chip,span.chip,a.chip,button.chip{border-radius:999px}
/* Campos de formulario */
.field,input.border-2,select.border-2,textarea.border-2,form.border-2{border-radius:var(--r-field)}
/* Cajas y tarjetas */
.box,.box-pop,div.border-2,article.border-2,section.border-2,li.border-2,aside.border-2,nav.border-2,figure.border-2,span.border-2,details.border-2,ul.border-2,table.border-2,p.border-2{border-radius:var(--r-card)}
img.border-2,video.border-2,iframe.border-2{border-radius:var(--r-img)}
/* Imagen superior dentro de una tarjeta */
.border-2>img:first-child,.border-2>a:first-child>img:first-child{border-top-left-radius:calc(var(--r-card) - 2px);border-top-right-radius:calc(var(--r-card) - 2px)}
/* Piezas pegadas a otra (sin borde abajo/arriba) no se redondean por ese lado */
.border-2.border-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}
@media (min-width:640px){.border-2.sm\:border-t-0{border-top-left-radius:0;border-top-right-radius:0}}
@media (min-width:1024px){.border-2.lg\:border-b-0{border-bottom-left-radius:0;border-bottom-right-radius:0}.border-2.lg\:border-t-0{border-top-left-radius:0;border-top-right-radius:0}}
/* Elementos muy pequeños (puntos, checks): radio suave */
.border-2.h-3,.border-2.h-3\.5,.border-2.h-4,.border-2.h-5,.border-2.h-6{border-radius:6px}

/* Módulos DOM (home, guías, intro, hubs, filtros, extras, ciudades, videos) */
.ohd-chip,.ohd-nav button,.ohd-all button,.ohx-more,.oxd a,.oxd button,.oht-more,.ofl-sf .go,.ofl-sf .rs,.ofl-x,.oc-cross{border-radius:var(--r-btn)}
.ohd-door,.ogd,.oid-card,.oid-li,.oid-q,.ohx,.ovd-card,.oc-menu,.ofl-s{border-radius:var(--r-card)}
.ofl-c,.ofl-o{border-radius:999px}
.ofl .ofl-find,.oxd-form textarea,.oxd-form input{border-radius:var(--r-field)!important}

/* Mapa (Leaflet) */
.leaflet-popup-content-wrapper{border-radius:var(--r-card)!important}
.leaflet-bar a:first-child{border-top-left-radius:10px!important;border-top-right-radius:10px!important}
.leaflet-bar a:last-child{border-bottom-left-radius:10px!important;border-bottom-right-radius:10px!important}
.leaflet-control-attribution{border-top-left-radius:10px}

/* Lo que ya era redondo sigue redondo */
.rounded-full{border-radius:9999px!important}

/* v3 — arreglos de desborde en móvil */
div.grid:has(>article[id^="entry-"]){grid-template-columns:minmax(0,1fr)}
#out-filters{min-width:0}
@media (max-width:1023px){
  header>div{gap:8px}
  header .oc-btn{max-width:118px}
  header a[aria-label] img{height:40px}
  body{overflow-x:clip}
}

/* v4 — contraste del texto gris (WCAG AA) */
:root{--c-ink-mute:102 102 102}
.dark{--c-ink-mute:168 160 172}
.text-ink-mute\/60,.text-ink-mute\/70,.text-ink-mute\/80{color:rgb(var(--c-ink-mute))!important}
.placeholder\:text-ink-mute\/60::placeholder{color:rgb(var(--c-ink-mute) / .9)!important}

/* v4 — el mapa del listado empieza oculto en móvil (modo Lista) para que no salte la página */
@media (max-width:1023px){
  html:not(.oxa-mapmode) div.border-y-2.bg-paper[class*="z-[800]"]~div.relative.border-2:not(:has(article)){position:absolute!important;left:-300vw!important;top:0!important;width:calc(100vw - 32px)!important;visibility:hidden!important;pointer-events:none!important}
}