/*
 * SANTA FE TE EXPONE · acabado móvil exclusivo.
 * Solo presentación CSS, sin cambiar lógica, JS de negocio, HTML de componentes,
 * permisos ni estructura de reclamos/mapas/publicidad.
 * Desktop/tablet (>700px) intactos.
 */
@media (max-width:700px) {
  /* 1. Cabecera en dos niveles: marca y controles + acción prioritaria */
  body.v21-quality .nav {
    box-shadow:0 7px 23px #01121f28!important;
    border-bottom:1px solid var(--edge)!important;
  }
  body.v21-quality .nav-in {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px 70px!important;
    grid-template-rows:48px 44px!important;
    column-gap:8px!important;
    row-gap:7px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 12px 10px!important;
    box-sizing:border-box;
    position:relative;
  }
  body.v21-quality .nav-in>.brand {
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    flex:none!important;
    min-width:0!important;
    width:100%;
    max-width:100%;
    gap:8px!important;
    margin:0!important;
    overflow:hidden;
  }
  body.v21-quality .nav-in>.brand>span:last-child {
    min-width:0;
    overflow:hidden;
  }
  body.v21-quality .nav-in .brand-mark {
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    border-radius:12px;
    font-size:17px;
  }
  body.v21-quality .nav-in .brand-name {
    display:block!important;
    max-width:100%;
    min-width:0;
    font-size:clamp(10px,2.85vw,13px)!important;
    line-height:1.25!important;
    letter-spacing:-.03em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.v21-quality .nav-in .brand-name small {display:none!important}
  body.v21-quality .nav-in #mobileMenuBtn {
    grid-column:2;
    grid-row:1;
    display:grid!important;
    place-items:center!important;
    position:relative;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px;
    font-size:22px!important;
    border:1px solid var(--edge)!important;
    color:var(--ink)!important;
    background:var(--panel-soft)!important;
    touch-action:manipulation;
  }
  body.v21-quality .nav-in #themeToggle {
    grid-column:3;
    grid-row:1;
    display:flex!important;
    align-items:center;
    justify-content:space-around;
    width:70px!important;
    min-width:70px!important;
    max-width:70px!important;
    height:44px!important;
    min-height:44px!important;
    flex:none!important;
    margin:0!important;
    padding:3px!important;
    border-radius:999px;
    touch-action:manipulation;
  }
  body.v21-quality .nav-in #publishHeaderBtn {
    grid-column:1 / -1;
    grid-row:2;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:10px 14px!important;
    margin:0!important;
    flex:none!important;
    font-size:13px!important;
    font-weight:850!important;
    line-height:1.1!important;
    letter-spacing:.015em;
    border-radius:11px!important;
    white-space:nowrap;
    touch-action:manipulation;
  }
  /* El texto original vuelve a verse cuando el botón tiene ancho completo. */
  body.v21-quality .nav-in #publishHeaderBtn::after {content:none!important}
  /* Solo en sesión propietaria: compartir la fila, nunca mostrar Admin al público. */
  body.v21-quality .nav-in #accountBtn:not([hidden]) {
    grid-column:1;
    grid-row:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:0;
    min-width:0;
    width:100%;
    height:44px;
    min-height:44px;
    padding:7px 9px;
    font-size:12px;
    border-radius:11px;
    touch-action:manipulation;
  }
  body.v21-quality .nav-in #accountBtn:not([hidden]) svg {
    width:16px;
    height:16px;
    flex:0 0 16px;
  }
  body.v21-quality .nav-in #accountBtn:not([hidden]) ~ #publishHeaderBtn {
    grid-column:2 / 4;
    font-size:0!important;
  }
  body.v21-quality .nav-in #accountBtn:not([hidden]) ~ #publishHeaderBtn::after {
    content:'+ Publicar'!important;
    font-size:12px!important;
    font-weight:850;
  }
  body.v21-quality .nav-in #accountBtn[hidden] {display:none!important}
  /* El mismo menú desplegable, anclado debajo de las dos filas. */
  body.v21-quality .nav-in #navLinks.nav-links {display:none!important}
  body.v21-quality .nav-in #navLinks.nav-links.open {
    display:flex!important;
    position:absolute!important;
    top:100%!important;
    right:10px!important;
    left:10px!important;
    bottom:auto!important;
    z-index:1600!important;
    flex-direction:column!important;
    max-height:min(68dvh,520px);
    overflow:auto;
    gap:3px!important;
    padding:12px!important;
    background:var(--panel)!important;
    border:1px solid var(--edge)!important;
    border-radius:0 0 16px 16px!important;
    box-shadow:0 18px 37px #0417246e!important;
  }
  body.v21-quality .nav-in #navLinks.nav-links.open>a,
  body.v21-quality .nav-in #navLinks.nav-links.open>button {
    display:flex;
    align-items:center;
    min-height:44px;
    padding:10px 12px!important;
    border-radius:10px;
    color:var(--ink)!important;
    font-size:13px;
    text-align:left;
    touch-action:manipulation;
  }
  body.v21-quality .nav-in .territory-menu {
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(70dvh,610px)!important;
    z-index:1700!important;
  }
  /* 2. Ticker legible sin tapar el contenido ni los controles anteriores */
  body.v21-quality .v18-top-ticker {
    width:calc(100% - 20px);
    max-width:calc(100% - 20px)!important;
    min-width:0;
    min-height:42px;
    margin:0 10px 7px!important;
    padding:5px 7px!important;
    gap:7px!important;
    border-radius:11px!important;
    box-sizing:border-box;
  }
  body.v21-quality .v18-top-ticker>strong {
    flex:0 0 auto;
    max-width:95px;
    white-space:normal;
    font-size:9px!important;
    line-height:1.25;
    letter-spacing:.045em;
  }
  body.v21-quality .v18-top-ticker .pulse-indicator {
    width:9px;
    height:9px;
    flex:0 0 9px;
  }
  body.v21-quality .v18-top-ticker .city-news-items {
    min-width:0!important;
    flex:1 1 0!important;
    gap:9px!important;
  }
  body.v21-quality .v18-top-ticker .ticker-item {
    max-width:235px;
    font-size:11px!important;
    line-height:1.3;
    padding:6px 5px!important;
    min-height:32px;
    white-space:nowrap;
  }
  body.v21-quality .v18-top-ticker .ticker-controls {
    flex:0 0 auto;
    gap:4px;
  }
  body.v21-quality .v18-top-ticker .ticker-controls button {
    width:30px;
    height:34px;
    min-width:30px;
    min-height:34px;
  }
  /* 3. Portada: foto y tipografía original con aire editorial */
  body.v21-quality .hero-in {
    min-height:0!important;
    padding:24px 16px 28px!important;
    gap:12px!important;
  }
  body.v21-quality .hero h1 {
    font-size:clamp(33px,9vw,43px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    margin:8px 0 10px!important;
    text-wrap:balance;
  }
  body.v21-quality .hero p {
    font-size:clamp(12px,3.4vw,14px)!important;
    line-height:1.55!important;
    max-width:36ch;
  }
  body.v21-quality .hero .actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px!important;
    margin-top:16px!important;
  }
  body.v21-quality .hero .actions button {
    min-height:44px!important;
    padding:11px 14px!important;
    font-size:12px!important;
    border-radius:11px!important;
    touch-action:manipulation;
  }
  /* 4. Dos reservas publicitarias visibles, sin tapar el reclamo ni crear anuncios falsos */
  body.v21-quality .portal-layout {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:10px!important;
    row-gap:20px!important;
    padding:14px 12px 24px!important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  body.v21-quality .portal-layout>:is(#publicidad,#sfteV222AdBand) {
    grid-row:1!important;
    position:static!important;
    display:flex!important;
    flex-direction:column;
    gap:5px;
    min-width:0!important;
    width:100%;
    min-height:138px;
    padding:10px!important;
    margin:0!important;
    border:1px solid var(--edge)!important;
    border-radius:14px!important;
    overflow:hidden;
    background:var(--panel)!important;
    box-shadow:0 5px 18px #00121d1c;
  }
  body.v21-quality .portal-layout>#publicidad {grid-column:1!important}
  body.v21-quality .portal-layout>#sfteV222AdBand {grid-column:2!important}
  body.v21-quality .portal-layout .sponsor-label {
    font-size:9px!important;
    letter-spacing:.16em;
    font-weight:850;
    text-align:center;
    color:var(--gold)!important;
  }
  body.v21-quality .portal-layout .sponsor-aside h2 {
    font-size:clamp(11px,3.05vw,14px)!important;
    line-height:1.25;
    margin:1px 0 3px!important;
    text-align:center;
    text-wrap:balance;
  }
  body.v21-quality .portal-layout .sponsor-aside .ad-slot {
    flex:1 1 auto;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:83px!important;
    width:100%;
    margin:0!important;
    padding:10px 7px!important;
    border:1px solid var(--edge)!important;
    border-radius:10px!important;
    background-size:cover!important;
    background-position:center!important;
  }
  body.v21-quality .portal-layout .sponsor-aside .ad-slot strong {
    display:block;
    max-width:100%;
    font-size:clamp(14px,3.8vw,18px)!important;
    line-height:1.2!important;
    text-align:center;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:0 2px 7px #001520d9;
    overflow-wrap:break-word;
  }
  body.v21-quality .portal-layout>main.wrap {
    grid-column:1/-1!important;
    grid-row:2!important;
    min-width:0;
    gap:22px!important;
  }
  /* 5. Reclamo principal: foto clara, etiquetas legibles, sin mover su enlace */
  body.v21-quality .city-lead-button {
    border-radius:14px!important;
    overflow:hidden;
    box-shadow:0 8px 22px #0415232a;
  }
  body.v21-quality .city-lead-graphic {
    height:clamp(175px,50vw,225px)!important;
    min-height:0!important;
  }
  body.v21-quality .city-lead-body {padding:16px!important}
  body.v21-quality .city-lead-body h3 {
    font-size:clamp(22px,6vw,28px)!important;
    line-height:1.15!important;
    margin:10px 0!important;
    overflow-wrap:break-word;
  }
  body.v21-quality .city-lead-tags {gap:7px;flex-wrap:wrap}
  body.v21-quality .city-lead-body .city-open {min-height:36px}
  body.v21-quality main .section-head {gap:7px!important}
  body.v21-quality main .section-head h2 {
    font-size:clamp(25px,7vw,32px)!important;
    line-height:1.14!important;
    letter-spacing:-.035em!important;
  }
  /* 6. Formulario del mapa: no cambiar las selecciones ni el motor de filtros */
  body.v21-quality #mapa .atlas-filters,
  body.v21-quality #mapa .atlas-center {
    border-radius:14px!important;
  }
  body.v21-quality #mapa .atlas-control :is(input,select) {
    min-height:44px!important;
    font-size:16px!important; /* iPhone: no zoom forzado al elegir filtros */
    padding:10px 12px!important;
    border-radius:11px!important;
  }
  body.v21-quality #mapa #atlasQuickFilters {
    gap:7px!important;
  }
  body.v21-quality #mapa #atlasQuickFilters button {
    min-height:40px!important;
    padding:9px 10px!important;
    font-size:11px!important;
    line-height:1.25!important;
    border-radius:999px!important;
    touch-action:manipulation;
  }
  body.v21-quality #mapa #atlasQuickFilters .atlas-chip-count {
    font-size:11px;
    font-weight:800;
  }
  body.v21-quality #mapa .atlas-zoom-presets button {
    min-height:40px;
    padding:8px 11px!important;
  }
  body.v21-quality #mapa .atlas-map-buttons {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.v21-quality #mapa .atlas-map-buttons button {
    width:100%;
    min-width:0;
    min-height:44px!important;
    padding:9px 6px!important;
    font-size:11px!important;
    white-space:normal;
    line-height:1.3;
    border-radius:10px;
  }
  body.v21-quality #mapa .atlas-map-shell {
    border-radius:12px!important;
  }
  /* Accesibilidad y calma visual para móvil */
  body.v21-quality :is(#mobileMenuBtn,#themeToggle,#publishHeaderBtn,#accountBtn,#atlasQuickFilters button):focus-visible {
    outline:2px solid var(--accent)!important;
    outline-offset:2px;
  }
}

@media (max-width:355px){
  body.v21-quality .nav-in{
    grid-template-columns:minmax(0,1fr) 42px 64px!important;
    column-gap:6px!important;
    padding-inline:9px!important;
  }
  body.v21-quality .nav-in #mobileMenuBtn{
    width:42px!important;
    min-width:42px!important;
  }
  body.v21-quality .nav-in #themeToggle{
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
  }
  body.v21-quality .nav-in .brand-mark {
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
  body.v21-quality .nav-in .brand-name {font-size:10px!important}
  body.v21-quality .v18-top-ticker>strong {max-width:78px;font-size:8px!important}
  body.v21-quality .v18-top-ticker .ticker-controls button:first-child {display:none}
  body.v21-quality .portal-layout{column-gap:7px!important;padding-inline:9px!important}
  body.v21-quality .portal-layout>:is(#publicidad,#sfteV222AdBand){padding:7px!important}
  body.v21-quality .portal-layout .sponsor-aside h2{font-size:11px!important}
  body.v21-quality .portal-layout .sponsor-aside .ad-slot strong{font-size:14px!important}
}
@media(prefers-reduced-motion:reduce){
  body.v21-quality .nav-in #mobileMenuBtn,
  body.v21-quality .nav-in #publishHeaderBtn {
    transition:none!important;
  }
}