/* ¡Vivamos! city hero. Intentionally overrides the older compact header layer. */
:root{
  --header-bg:#f7f3e9;
  --header-ink:#153f3a;
  --header-accent:#d85a44;
  --header-secondary:#397f96;
  --header-muted:#4f625d;
  --header-control:#174f46;
}
html[data-city="gijon"]{
  --header-bg:#edf6f7;
  --header-ink:#173c47;
  --header-accent:#397c91;
  --header-secondary:#5d8b7d;
  --header-muted:#4f6870;
  --header-control:#255b70;
}

.app-header{
  position:relative!important;
  top:auto!important;
  isolation:isolate;
  display:block!important;
  min-height:218px!important;
  padding:1.35rem max(1rem,calc((100vw - 1120px)/2)) 1.15rem!important;
  overflow:hidden!important;
  background:var(--header-bg)!important;
  border-bottom:0!important;
  box-shadow:0 16px 42px rgba(25,61,53,.09)!important;
}
.app-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 15%,rgba(255,255,255,.9),transparent 28%),
    linear-gradient(105deg,var(--header-bg) 0 54%,rgba(255,255,255,.52) 72%,rgba(255,255,255,.08) 100%);
}
.app-header::after{display:none!important}

.brand{
  position:relative;
  z-index:4;
  display:flex!important;
  align-items:flex-start!important;
  gap:1rem!important;
  width:min(780px,72vw)!important;
  max-width:none!important;
  color:inherit;
  text-decoration:none;
}
.brand img{
  width:88px!important;
  height:88px!important;
  flex:0 0 auto;
  margin:.1rem 0 0!important;
  filter:drop-shadow(0 6px 12px rgba(20,55,48,.14));
}
.brand span{display:block!important;min-width:0;padding:0!important}
.brand strong{
  display:block;
  margin:0 0 .42rem;
  font-family:Georgia,serif!important;
  font-size:1.55rem!important;
  line-height:1!important;
  color:var(--header-accent)!important;
}
.brand small{display:none!important}
.header-kicker{
  display:block;
  margin:0 0 .25rem;
  font-size:.66rem;
  line-height:1;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:850;
  color:var(--header-muted);
}
.header-city-title{
  display:block;
  max-width:none;
  white-space:nowrap;
  font-family:Georgia,serif;
  font-size:clamp(1.6rem,3.65vw,3.25rem);
  line-height:1;
  letter-spacing:-.028em;
  font-weight:800;
  color:var(--header-ink);
}
.header-tagline{
  display:block;
  max-width:530px;
  margin-top:.52rem;
  font-size:.98rem;
  line-height:1.38;
  font-weight:520;
  color:var(--header-muted);
}

.header-bottom{
  position:relative;
  z-index:6;
  display:flex;
  align-items:center;
  width:auto;
  margin:.78rem 0 0 84px;
}
.header-actions{
  position:static!important;
  z-index:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto;
  width:auto!important;
  margin:0!important;
  gap:.45rem!important;
}
.header-search-toggle,
.install-button,.city-switch{
  min-height:42px!important;
  border-radius:12px!important;
  font-size:.84rem!important;
  font-weight:780!important;
  box-shadow:none!important;
  white-space:nowrap;
}
.header-search-toggle{
  width:42px;
  min-width:42px;
  padding:0!important;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,79,70,.2);
  background:rgba(255,255,255,.78);
  color:var(--header-ink);
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.header-search-toggle span{
  display:block;
  font-family:Arial,sans-serif;
  font-size:1.45rem;
  line-height:1;
  transform:rotate(-18deg) translateY(-1px);
}
.header-search-toggle:hover,.header-search-toggle:focus-visible,
.header-search-toggle[aria-expanded="true"]{
  border-color:var(--header-control);
  color:var(--header-control);
  background:#fff;
}
.install-button{padding:.64rem .84rem!important;background:var(--header-control)!important;border-color:var(--header-control)!important;color:#fff!important}
.city-switch{padding:.64rem .84rem!important;background:rgba(255,255,255,.78)!important;border-color:rgba(23,79,70,.2)!important;color:var(--header-ink)!important;backdrop-filter:blur(8px)}
.city-switch:hover,.city-switch:focus-visible{border-color:var(--header-control)!important;color:var(--header-control)!important}

/* Search exists only on demand: the icon is permanent, the field floats over
   the hero and therefore consumes no normal horizontal or vertical space. */
.header-search-popover{
  position:absolute;
  z-index:30;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100% - 2rem));
  padding:.5rem;
  border:1px solid color-mix(in srgb,var(--header-control) 18%,transparent);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 50px rgba(24,60,52,.2);
  backdrop-filter:blur(14px);
}
.header-search-popover[hidden]{display:none!important}
.header-search-popover .search-row{display:block!important;margin:0!important}
.header-search-popover .search-row label{display:block;width:100%}
.header-search-popover .search-row input{
  width:100%!important;
  max-width:none!important;
  min-height:46px!important;
  margin:0!important;
  padding:.72rem 1rem .72rem 3rem!important;
  border:1px solid rgba(23,79,70,.18)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:none!important;
  color:var(--header-ink)!important;
}

.header-art{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:49%;
  height:100%;
  pointer-events:none;
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.98;
  filter:saturate(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);
}
html[data-city="valparaiso"] .header-art{background-image:url("./illustrations/valparaiso-header.svg")}
html[data-city="gijon"] .header-art{background-image:url("./illustrations/gijon-header.svg")}

.city-masthead{display:none!important}
.hero{display:none!important}

@media(max-width:900px){
  .app-header{min-height:224px!important}
  .brand{width:82%!important}
  .header-city-title{font-size:clamp(1.55rem,4.7vw,2.7rem)}
  .header-art{width:54%;opacity:.72}
}

@media(max-width:700px){
  .app-header{min-height:236px!important;padding:1rem 1rem .95rem!important}
  .brand{width:100%!important;max-width:100%!important;gap:.68rem!important}
  .brand img{width:64px!important;height:64px!important}
  .brand strong{font-size:1.22rem!important;margin-bottom:.3rem}
  .header-kicker{font-size:.56rem;margin-bottom:.2rem}
  .header-city-title{
    max-width:none;
    white-space:nowrap;
    font-size:clamp(1.28rem,5.55vw,2rem);
    letter-spacing:-.035em;
  }
  .header-tagline{max-width:82%;font-size:.86rem;line-height:1.3;margin-top:.42rem}
  .header-art{
    top:auto;
    bottom:0;
    width:100%;
    height:46%;
    opacity:.3;
    background-size:cover;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 100%);
  }
  .header-bottom{margin:.68rem 0 0 64px!important}
  .header-actions{width:auto!important;gap:.38rem!important;flex-wrap:nowrap!important}
  .header-search-toggle,.install-button,.city-switch{min-height:39px!important;font-size:.78rem!important}
  .header-search-toggle{width:39px;min-width:39px}
  .install-button,.city-switch{padding:.54rem .64rem!important}
  .city-switch span[data-city-switch-label]{font-size:0}
  .city-switch span[data-city-switch-label]::after{content:"Ciudad";font-size:.78rem}
  .header-search-popover{top:55%;width:calc(100% - 1.4rem);padding:.4rem;border-radius:15px}
  .header-search-popover .search-row input{min-height:44px!important;font-size:.92rem!important}
}

@media(max-width:430px){
  .app-header{min-height:230px!important}
  .brand img{width:58px!important;height:58px!important}
  .brand{gap:.55rem!important}
  .brand strong{font-size:1.08rem!important}
  .header-city-title{font-size:clamp(1.12rem,5.25vw,1.42rem)}
  .header-tagline{max-width:92%;font-size:.82rem}
  .header-art{height:42%;opacity:.25}
  .header-bottom{margin-left:56px!important}
}

/* Installed app refinements. */
html[data-installed-app-actions="below-mosaic"] .app-header{
  min-height:196px!important;
  padding-bottom:.48rem!important;
}
html[data-installed-app-actions="below-mosaic"] .filter-workbench::before{
  height:1.35rem!important;
  margin-top:-.9rem!important;
  margin-bottom:.05rem!important;
}
html[data-installed-app-actions="below-mosaic"] .filter-grid,
html[data-installed-app-actions="below-mosaic"] .filter-group,
html[data-installed-app-actions="below-mosaic"] .filter-group + .filter-group,
html[data-installed-app-actions="below-mosaic"] fieldset.filter-group{
  border:0!important;
  border-top:0!important;
  border-bottom:0!important;
  border-left:0!important;
  border-right:0!important;
  border-inline:0!important;
  box-shadow:none!important;
  outline:0!important;
  background:transparent!important;
}
html[data-installed-app-actions="below-mosaic"] .filter-grid::before,
html[data-installed-app-actions="below-mosaic"] .filter-grid::after,
html[data-installed-app-actions="below-mosaic"] .filter-group::before,
html[data-installed-app-actions="below-mosaic"] .filter-group::after{
  content:none!important;
  display:none!important;
}
/* The grey horizontal bar between Cuándo and Dónde was the native horizontal
   scrollbar of the touch-scrollable choice row. Keep swipe scrolling, hide the bar. */
html[data-installed-app-actions="below-mosaic"] .filter-choice-row{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html[data-installed-app-actions="below-mosaic"] .filter-choice-row::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}