/*
 * Parche x Bogotá — design of the site, replacing the Elementor templates.
 * One stylesheet, no framework. Mobile first; breakpoints at 720 and 1024px.
 */
/* Brand typefaces shared with the store (apps/web). */
@font-face { font-family: 'Sharp Grotesk'; src: url('/assets/fonts/SharpGroteskBold15.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sharp Grotesk'; src: url('/assets/fonts/SharpGroteskBook15.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TeXGyreHeros'; src: url('/assets/fonts/TeXGyreHeros-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

/* Day (white) theme. Night (black) is html[data-theme="dark"], at the end. */
:root {
  --red: #d7261c;
  --red-dark: #b81d14;
  --amber: #ffb32c;
  --ink: #140c0a;
  --ink-2: #3a302b;
  --muted: #5e534d;
  --line: #e6dccf;
  --paper: #ffffff;
  --white: #fff;
  --surface: #f5f2ee;
  --text: #2a211d;
  --black: #140c0a;      /* always dark: text on amber/green/white chips */
  --block: #140c0a;      /* dark blocks: top bar, footer, overlays */
  --on-dark: #fbf6ee;    /* text over photos and dark blocks */
  --hover: #fdf0e8;
  --hover-strong: #fde6d8;
  --display: 'Sharp Grotesk', 'Arial Narrow', sans-serif;
  --sans: 'Sharp Grotesk', system-ui, sans-serif;
  --serif: 'TeXGyreHeros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'TeXGyreHeros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --radius: 10px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--body);
  padding-bottom: 72px; /* room for the mobile bottom nav */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1.04; margin: 0; letter-spacing: -.005em; }
.kicker { display: inline-block; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
a.kicker:hover { color: var(--red-dark); text-decoration: underline; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); }
.meta-author { font-weight: 600; color: var(--ink); }
.cover { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; background: var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 700 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer; white-space: nowrap;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #000; color: var(--amber); }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- header ---------- */
.topbar { background: #141210; color: #FBF6EE; font-size: 13px; }
.topbar-social { display: flex; gap: 20px; }
.topbar-social a:hover { color: var(--amber); }

.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo { display: block; height: 30px; width: auto; }
.logo-link { flex: none; }
.main-nav { display: none; order: 3; width: 100%; flex-direction: column; padding-bottom: 12px; }
.main-nav a { padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; }
.main-nav a[aria-current] { color: var(--red); }
.nav-open .main-nav { display: flex; }
.search { display: none; order: 4; width: 100%; gap: 8px; padding-bottom: 12px; }
.search-open .search { display: flex; }
.search input {
  flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: 0 18px;
  font: 16px var(--sans); background: var(--white); color: var(--ink);
}
.search button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: grid; place-items: center; }
.header-cta { margin-left: auto; min-height: 38px; padding: 0 16px; font-size: 13px; }

/* ---------- bottom nav (phones) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--block); color: var(--on-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; }
.bottom-nav a:hover, .bottom-nav a:first-child { color: var(--amber); }

/* ---------- blocks ---------- */
main { padding-top: 24px; }
.block { margin-top: 48px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.section-head .display { font-size: 26px; }
.section-head a { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.section-head a:hover { color: var(--red); }
.grid { display: grid; gap: 28px; }

.card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--line); }
.card-media img { border-radius: 0; transition: transform .5s ease; }
.card-media .chip { position: absolute; left: 12px; top: 12px; }
.card:hover .card-media img { transform: scale(1.05); }
.card:hover .card-title { color: var(--red); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-title { font: 700 18px/1.25 var(--sans); margin: 0; transition: color .2s; }
.card-excerpt { margin: 0; color: var(--ink-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row-media { height: 72px; }
.row-title { font-size: 16px; line-height: 1.3; margin: 4px 0 0; }

/* lead (home hero) */
.lead { display: grid; gap: 32px; }
.lead-story { display: flex; flex-direction: column; gap: 14px; }
.lead-img { aspect-ratio: 16 / 9; }
.lead-title { font-size: clamp(34px, 6vw, 60px); }
.lead-excerpt { margin: 0; font: 18px/1.5 var(--serif); color: var(--ink-2); max-width: 720px; }
.coupon-box { margin-top: 48px; background: var(--amber); border-radius: 14px; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.coupon-box > div { display: flex; flex-direction: column; gap: 6px; }
.coupon-box .kicker { color: var(--ink); }
.coupon-box .display { font-size: clamp(22px, 3vw, 32px); }

/* store banners */
.promo { position: relative; margin-top: 48px; border-radius: 14px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; color: var(--on-dark); background: var(--block); }
.promo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo .rot-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,12,10,.92) 0%, rgba(20,12,10,.35) 70%, rgba(20,12,10,.1) 100%); }
.promo-body { position: relative; z-index: 1; padding: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 600px; }
.promo-body .display { font-size: clamp(30px, 5vw, 52px); color: var(--on-dark); }
.promo-body p { margin: 0; font-size: 17px; }
.promo-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.badge { align-self: flex-start; background: var(--amber); color: var(--black); font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; }

.plans { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.plan > img { aspect-ratio: 4 / 3; border-radius: 0; }
.plan-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-body h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.plan-price { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.plan-price strong { color: var(--ink); font-size: 16px; }
.plan .btn { margin-top: auto; }

.inline-promo { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); margin: 8px 0; font-family: var(--sans); }
.inline-promo .rot-slide > img { aspect-ratio: 16 / 9; border-radius: 0; }
.inline-promo .rot-slide > div { padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.inline-promo p { margin: 0 !important; font-family: var(--sans) !important; }
.inline-promo-title { font-weight: 700; font-size: 20px !important; line-height: 1.25 !important; color: var(--ink); }
.inline-promo-price { font-size: 14px !important; color: var(--muted) !important; }

.side-promo { position: relative; border-radius: 12px; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; color: var(--on-dark); background: var(--block); }
.side-promo .rot-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,12,10,.92) 0%, rgba(20,12,10,0) 65%); }
.side-promo-body { position: relative; z-index: 1; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.side-promo-body p { margin: 0; }
.side-promo-body .display { font-size: 30px; }

/* newsletter */
.newsletter { margin-top: 56px; background: var(--red); color: #fff; border-radius: 14px; padding: 28px 22px; display: grid; gap: 24px; }
.newsletter .display { font-size: clamp(28px, 4vw, 44px); color: #fff; }
.newsletter p { margin: 8px 0 0; font-size: 16px; }
.nl-form label { font-size: 13px; font-weight: 600; }
.nl-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.nl-row input { flex: 1 1 220px; min-height: 48px; border: 0; border-radius: 999px; padding: 0 20px; font: 16px var(--sans); }
.nl-row .btn { min-height: 48px; }
.nl-status { min-height: 1.5em; font-weight: 600; }

/* section and listing pages */
.page-head { padding: 8px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.page-head .display { font-size: clamp(40px, 7vw, 72px); color: var(--red); }
.page-head p { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 640px; }
.page-head .display span { color: var(--ink); }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.feature { margin-top: 28px; display: grid; gap: 24px; align-items: center; }
.feature > a { aspect-ratio: 16 / 9; display: block; }
.feature > div { display: flex; flex-direction: column; gap: 12px; }
.feature .display { font-size: clamp(30px, 4vw, 44px); }
.pagination { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.empty { margin: 32px 0; font-size: 18px; color: var(--muted); }

/* article */
.article-head { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.article-title { font-size: clamp(36px, 6.5vw, 64px); }
.article-dek { margin: 0; font: 20px/1.5 var(--serif); color: var(--ink-2); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 0; border-block: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--amber); display: grid; place-items: center; font-weight: 700; flex: none; }
.byline-text { display: flex; flex-direction: column; flex: 1; min-width: 180px; font-size: 13px; color: var(--muted); }
.byline-text a { font-size: 15px; font-weight: 700; color: var(--ink); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.article-figure { margin: 28px 0 0; }
.article-figure img { aspect-ratio: 21 / 9; border-radius: var(--radius); }
.article-layout { display: grid; gap: 48px; margin-top: 36px; align-items: start; }
.article-side { display: flex; flex-direction: column; gap: 28px; }
.side-link { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; line-height: 1.3; }

/* WordPress post bodies */
.prose { max-width: 720px; font: 19px/1.7 var(--serif); color: var(--text); overflow-wrap: anywhere; }
.prose > * { margin: 0 0 22px; }
.prose h2, .prose h3, .prose h4 { font-family: var(--sans); font-weight: 700; line-height: 1.25; color: var(--ink); margin-top: 36px; }
.prose h2 { font-size: 26px; }
.prose h3, .prose h4 { font-size: 22px; }
.prose p:empty { display: none; }
.prose a:not(.btn) { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.prose .wp-block-gallery > figcaption { grid-column: 1 / -1; }
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }
.prose img { border-radius: 8px; height: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-element-caption { font: 13px/1.4 var(--sans); color: var(--muted); margin-top: 8px; }
.prose blockquote { border-left: 4px solid var(--red); margin-left: 0; padding-left: 20px; font-style: italic; }
.prose iframe, .prose video { max-width: 100%; }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.prose ul, .prose ol { padding-left: 1.3em; }

/* 404 */
.not-found { padding: 48px 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 640px; }
.not-found .display { font-size: clamp(40px, 8vw, 80px); color: var(--red); }
.not-found p { margin: 0; font-size: 18px; color: var(--ink-2); }
.search-big { display: flex; width: 100%; padding: 0; }

/* footer */
.site-footer { margin-top: 72px; background: var(--block); color: #cfc4ba; }
.footer-grid { display: grid; gap: 32px; padding-block: 48px 24px; }
.footer-grid .logo { height: 36px; }
.footer-grid p { margin: 12px 0 0; max-width: 360px; line-height: 1.5; }
.footer-grid nav { display: flex; flex-direction: column; gap: 10px; }
.footer-grid nav a:hover { color: var(--amber); }
.footer-title { margin: 0 0 4px !important; color: var(--amber); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.footer-bottom { border-top: 1px solid var(--ink-2); padding-block: 20px 28px; font-size: 13px; }

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .promo-body { padding: 40px; }
  .promo .rot-slide::after { background: linear-gradient(90deg, rgba(20,12,10,.88) 0%, rgba(20,12,10,.55) 45%, rgba(20,12,10,0) 80%); }
  .inline-promo .rot-slide { grid-template-columns: 220px 1fr; }
  .inline-promo .rot-slide > img { aspect-ratio: auto; height: 100%; }
  .feature { grid-template-columns: 3fr 2fr; }
  .newsletter { grid-template-columns: 1fr 1fr; align-items: center; padding: 44px; }
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .header-row { flex-wrap: nowrap; gap: 32px; min-height: 76px; }
  .logo { height: 40px; }
  .main-nav { display: flex; order: 0; width: auto; flex-direction: row; gap: 24px; padding: 0; flex: 1; }
  .main-nav a { border: 0; padding: 0; font-size: 15px; white-space: nowrap; }
  .search { display: flex; order: 0; width: auto; padding: 0; }
  .search input { width: 160px; transition: width .2s; }
  .search input:focus { width: 240px; }
}

/* Narrow desktops: the search field collapses to its button. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-row { gap: 24px; }
  .main-nav { gap: 18px; }
  .search input { display: none; }
}

@media (min-width: 1024px) {
  .header-cta { margin-left: 0; min-height: 44px; padding: 0 22px; font-size: 14px; }
  main { padding-top: 40px; }
  .block { margin-top: 72px; }
  .section-head .display { font-size: 34px; }
  .lead { grid-template-columns: 2fr 1fr; gap: 48px; }
  .promo { margin-top: 72px; min-height: 380px; }
  .newsletter { margin-top: 72px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
  .article-side { align-self: stretch; }
  .article-side .side-sticky { position: sticky; top: 96px; }
  .prose { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- section colors ---------- */
.chip { display: inline-block; align-self: flex-start; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; color: #fff; background: var(--red); }
.chip-cultura { background: #d7261c; }
.chip-musica { background: #6b2bd9; }
.chip-gastronomia { background: #f2a007; color: var(--black); }
.chip-escapese { background: #0f7b5f; }
.chip-contribuidores { background: #1d4ed8; }
.chip-plan { background: var(--amber); color: var(--black); }
.accent-cultura { color: #d7261c !important; }
.accent-musica { color: #6b2bd9 !important; }
.accent-gastronomia { color: #b86e00 !important; }
.accent-escapese { color: #0f7b5f !important; }
.accent-contribuidores { color: #1d4ed8 !important; }

/* ---------- photo cards with the title on the image ---------- */
.ov { position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 14px; background: var(--block); color: var(--on-dark); min-height: 320px; isolation: isolate; }
.ov-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.ov:hover .ov-img { transform: scale(1.05); }
.ov-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,8,6,.94) 0%, rgba(14,8,6,.5) 45%, rgba(14,8,6,0) 78%); }
.ov-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ov-title { font-size: 26px; color: var(--on-dark); }
.ov-title a { transition: color .2s; }
.ov:hover .ov-title a { color: var(--amber); }
.ov .meta, .ov .meta-author { color: #e4d9cc; }
.ov-excerpt { margin: 0; font: 17px/1.5 var(--serif); color: #ede3d6; max-width: 680px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ov-hero { min-height: 460px; }
.ov-hero .ov-title { font-size: clamp(34px, 5.5vw, 64px); max-width: 860px; }
.ov-hero .ov-body { padding: 24px; }
.ov-wide { min-height: 240px; }
.ov-tall { aspect-ratio: 4 / 5; min-height: 0; }
.ov-plan { outline: 3px solid var(--amber); outline-offset: -3px; }
.ov-plan .meta strong { color: var(--amber); }

.mosaic { display: grid; gap: 16px; }
.mosaic-side { display: grid; gap: 16px; }
.stories { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.feature-ov { margin-top: 24px; }
.feature-ov .ov-hero { min-height: 520px; }

/* plans: price tag on the photo */
.plan-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.plan-media img { border-radius: 0; transition: transform .5s ease; }
.plan:hover .plan-media img { transform: scale(1.05); }
.plan-tag { position: absolute; right: 12px; bottom: 12px; background: var(--block); color: var(--amber); font-weight: 700; font-size: 15px; padding: 7px 11px; border-radius: 6px; }

/* instagram */
.ig-block { margin-top: 56px; background: var(--block); color: var(--on-dark); border-radius: 16px; padding: 24px; }
.ig-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.ig-id { display: flex; align-items: center; gap: 14px; }
.ig-id .display { font-size: clamp(24px, 3vw, 34px); color: var(--on-dark); }
.ig-id p { margin: 4px 0 0; color: #cfc4ba; font-size: 14px; }
.ig-id strong { color: var(--amber); }
.ig-logo { width: 52px; height: 52px; border-radius: 15px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(45deg, #ffb32c, #d7261c 55%, #6b2bd9); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--amber); color: var(--ink); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ig-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ig-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(215,38,28,.85); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .25s; }
.ig-tile:hover .ig-over, .ig-tile:focus-visible .ig-over { opacity: 1; }
.ig-tile:hover img { transform: scale(1.06); }

/* article: photo behind the title, full width */
.article-hero { position: relative; isolation: isolate; max-width: none; flex-direction: row; gap: 0; margin-inline: calc(50% - 50vw); margin-top: -24px; min-height: 560px; display: flex; align-items: flex-end; background: var(--block); color: var(--on-dark); }
.article-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; border-radius: 0; }
.article-hero .ov-shade { background: linear-gradient(0deg, rgba(14,8,6,.95) 0%, rgba(14,8,6,.6) 45%, rgba(14,8,6,.15) 85%); }
.article-head-inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px var(--gutter); display: flex; flex-direction: column; gap: 14px; }
.article-head:not(.article-hero) .article-head-inner { padding: 0; max-width: 860px; margin: 0; }
.article-hero .article-title { color: var(--on-dark); max-width: 980px; }
.article-hero .article-dek { color: #ede3d6; max-width: 820px; }
.article-hero .crumbs, .article-hero .byline-text { color: #cfc4ba; }
.article-hero .crumbs a:hover { color: var(--amber); }
.article-hero .byline { border-color: rgba(251,246,238,.2); }
.article-hero .byline-text a { color: var(--on-dark); }
.article-hero .btn-line { color: var(--on-dark); border-color: rgba(251,246,238,.4); }
.article-hero .btn-line:hover { border-color: var(--on-dark); color: var(--on-dark); }

@media (min-width: 720px) {
  .mosaic { grid-template-columns: 2fr 1fr; }
  .ov-hero { min-height: 560px; }
  .ov-hero .ov-body { padding: 40px; }
  .ig-block { padding: 40px; }
  .ig-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .stories-4 { grid-template-columns: repeat(4, 1fr); }
  .stories-3 { grid-template-columns: repeat(3, 1fr); }
  .stories-2 { grid-template-columns: repeat(2, 1fr); }
  .stories-2 .ov-tall, .stories-1 .ov-tall { aspect-ratio: 16 / 10; }
  .coupon-box { padding: 28px 40px; }
}
@media (min-width: 1024px) {
  .mosaic { height: 620px; }
  .mosaic > .ov-hero { min-height: 0; }
  .mosaic-side .ov { min-height: 0; }
  .mosaic-side .ov-title { font-size: 28px; }
  .article-hero { min-height: 640px; margin-top: -40px; }
  .article-head-inner { padding-block: 56px; }
}

/* Rows with one or two stories: wide photos instead of tall ones. */
.stories-1 { grid-template-columns: 1fr; }
.stories-1 .ov-tall { aspect-ratio: auto; min-height: 340px; }
.stories-1 .ov-title { font-size: clamp(28px, 4vw, 44px); max-width: 760px; }
.ov-tall .ov-title { font-size: 24px; }
@media (min-width: 720px) {
  .stories-1 .ov-tall { min-height: 420px; }
  .stories-2 .ov-title { font-size: 32px; }
}

/* Sections with one new story, side by side. */
.singles { gap: 24px; }
.singles .section-head .display { font-size: 24px; }
.singles .ov-tall { aspect-ratio: 4 / 5; }
@media (min-width: 720px) {
  .singles-2 { grid-template-columns: repeat(2, 1fr); }
  .singles-3, .singles-4, .singles-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Párchese la Feria ---------- */
:root { --feria-bg: #211039; --feria-green: #8fe36a; --feria-yellow: #f4c94a; --feria-red: #e8402a; --feria-purple: #7a3ce0; }
.nav-feria { color: var(--red); }
@media (min-width: 1024px) {
  .nav-feria { background: var(--feria-bg); color: var(--feria-yellow) !important; padding: 8px 14px !important; border-radius: 999px; }
  .nav-feria:hover { background: var(--feria-purple); }
}

.feria-banner {
  margin-top: 48px; display: grid; overflow: hidden; border-radius: 18px;
  background: radial-gradient(120% 140% at 100% 0%, #3b1a66 0%, var(--feria-bg) 55%, #12081f 100%);
  color: #f2ede4; border: 2px solid var(--feria-green); box-shadow: 0 0 0 6px rgba(143,227,106,.12);
}
.feria-art { display: block; overflow: hidden; }
.feria-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s ease; }
.feria-banner:hover .feria-art img { transform: scale(1.04); }
.feria-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.feria-eyebrow { align-self: flex-start; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--feria-bg); background: var(--feria-green); padding: 7px 10px; border-radius: 4px; }
.feria-title { margin: 0; font: 700 clamp(30px, 4.4vw, 52px)/1 'Silkscreen', var(--display); color: var(--feria-yellow); text-shadow: 3px 3px 0 var(--feria-red); text-transform: uppercase; }
.feria-edition { margin: 0; align-self: flex-start; font-weight: 700; font-size: 15px; color: #fff; background: var(--feria-purple); padding: 6px 12px; border-radius: 999px; }
.feria-tagline { margin: 0; font: 17px/1.5 var(--serif); color: #e9e0f5; max-width: 560px; }
.feria-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feria-tags li { font-size: 13px; font-weight: 600; border: 1px solid rgba(222,190,255,.4); padding: 6px 10px; border-radius: 999px; }
.feria-when { margin: 0; font-size: 15px; color: #d9cfe8; line-height: 1.5; }
.feria-when strong { color: #fff; }
.feria-count { display: flex; gap: 10px; }
.feria-count span { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(143,227,106,.35); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #cfc4dd; }
.feria-count b { font: 700 26px/1.1 'Silkscreen', var(--display); color: var(--feria-green); }
.feria-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.feria-btn { background: var(--feria-green); color: var(--ink); }
.feria-btn:hover { background: #b0f394; color: var(--ink); }
.feria-btn-line { border-color: rgba(242,237,228,.5); color: #f2ede4; }
.feria-btn-line:hover { border-color: #fff; color: #fff; }
@media (min-width: 900px) {
  .feria-banner { grid-template-columns: 1.1fr 1fr; min-height: 460px; }
  .feria-body { padding: 40px; justify-content: center; }
}

/* "Descubre tu lado más HOT": a thermometer that heats up level by level. */
.hot-pop {
  --heat: 6%; --fluid: #f4c94a; --glow: rgba(244,201,74,.0);
  position: fixed; z-index: 60; right: 16px; bottom: 80px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
}
.hot-pop > * { pointer-events: auto; }
.hot-panel {
  position: relative; width: min(350px, calc(100vw - 32px)); max-height: calc(100vh - 170px); overflow-y: auto;
  padding: 20px 18px 14px; border-radius: 20px; color: #fff; transform-origin: 100% 100%;
  background: radial-gradient(130% 90% at 20% 100%, var(--glow) 0%, transparent 60%), linear-gradient(160deg, #3b1366 0%, #211039 55%, #14081f 100%);
  box-shadow: 0 24px 60px rgba(20,4,30,.6), 0 0 0 2px rgba(244,201,74,.45);
  display: flex; flex-direction: column; gap: 10px;
  transform: translateY(12px) scale(.94); opacity: 0;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.1), opacity .2s, background .6s;
}
.hot-pop[data-state="open"] .hot-panel { transform: none; opacity: 1; }
.hot-pop[hidden], .hot-panel[hidden] { display: none; }

/* the tab: small, quiet, out of the way */
.hot-tab { display: flex; align-items: center; gap: 6px; transform: translateY(14px); opacity: 0; transition: transform .4s ease, opacity .4s ease; }
.hot-pop.is-in .hot-tab { transform: none; opacity: 1; }
.hot-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(244,201,74,.45); background: rgba(33,16,57,.94); color: #fff; font: 600 14px var(--sans);
  box-shadow: 0 6px 18px rgba(20,4,30,.3); backdrop-filter: blur(4px); transition: transform .15s, border-color .2s;
}
.hot-pill:hover { transform: translateY(-1px); border-color: var(--feria-yellow); }
.hot-pill b { color: var(--feria-yellow); text-transform: uppercase; letter-spacing: .04em; }
.hot-pop[data-state="open"] .hot-pill { border-color: var(--fluid); }
.pill-thermo { position: relative; width: 12px; height: 26px; border: 2px solid rgba(255,255,255,.8); border-radius: 8px; overflow: hidden; flex: none; }
.pill-thermo i { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(0deg, #ff2d1a, var(--feria-yellow)); animation: pill-rise 3.2s ease-in-out infinite; }
@keyframes pill-rise { 50% { height: 85%; } }
.hot-pill-x { width: 30px; height: 30px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(33,16,57,.75); color: #e9def5; font-size: 18px; line-height: 1; }
.hot-pill-x:hover { background: rgba(33,16,57,.95); color: #fff; }
.hot-pop[data-level="1"] { --heat: 14%; --fluid: #f4c94a; --glow: rgba(244,201,74,.18); }
.hot-pop[data-level="2"] { --heat: 39%; --fluid: #ff9a2e; --glow: rgba(255,154,46,.25); }
.hot-pop[data-level="3"] { --heat: 65%; --fluid: #ff5a2a; --glow: rgba(255,90,42,.32); }
.hot-pop[data-level="4"] { --heat: 100%; --fluid: #ff2d1a; --glow: rgba(255,45,26,.45); }
.hot-pop[data-level="4"] .hot-panel { box-shadow: 0 24px 60px rgba(20,4,30,.6), 0 0 0 2px #ff5a2a, 0 0 40px rgba(255,60,30,.35); }

.hot-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.hot-close:hover { background: rgba(255,255,255,.18); }
.hot-kicker { margin: 0; padding-right: 36px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--feria-green); }
.hot-title { margin: 0; font: 400 34px/1 var(--display); text-transform: uppercase; }
.hot-title span { color: var(--fluid); transition: color .5s; text-shadow: 0 0 18px var(--glow); }
.hot-desc { margin: 0; font-size: 15px; color: #e9def5; }

.hot-main { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; margin-top: 4px; }

/* the thermometer */
.thermo { position: relative; width: 64px; height: 250px; }
.thermo-tube {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 24px; height: 206px;
  border-radius: 14px 14px 0 0; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.75); border-bottom: 0; overflow: visible;
}
.thermo-fill {
  position: absolute; left: 3px; right: 3px; bottom: -6px; height: var(--heat); border-radius: 8px 8px 0 0;
  background: linear-gradient(0deg, var(--fluid) 0%, color-mix(in srgb, var(--fluid) 70%, #fff) 100%);
  box-shadow: 0 0 14px var(--glow); transition: height .7s cubic-bezier(.3,1.3,.5,1), background .5s;
}
.thermo-ticks { position: absolute; inset: 0; pointer-events: none; }
.thermo-ticks i { position: absolute; right: -11px; width: 8px; height: 2px; background: rgba(255,255,255,.7); }
.thermo-ticks i:nth-child(1) { bottom: 14%; } .thermo-ticks i:nth-child(2) { bottom: 39%; }
.thermo-ticks i:nth-child(3) { bottom: 65%; } .thermo-ticks i:nth-child(4) { bottom: 90%; }
.thermo-bulb {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.75); background: rgba(255,255,255,.1); display: grid; place-items: center;
}
.thermo-bulb span { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fluid) 55%, #fff), var(--fluid) 60%); box-shadow: 0 0 18px var(--glow); transition: background .5s; }
/* a slow pulse so the mercury looks alive */
.hot-pop[data-state="open"] .thermo-bulb span { animation: thermo-pulse 2.4s ease-in-out infinite; }
@keyframes thermo-pulse { 50% { transform: scale(1.06); } }

/* fire at the top of the mercury: only at the red level */
.thermo-fire { position: absolute; left: 50%; top: -30px; width: 34px; height: 34px; transform: translateX(-50%); opacity: 0; transition: opacity .4s .35s; pointer-events: none; }
.thermo-fire i { position: absolute; bottom: 0; left: 50%; width: 18px; height: 26px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 85%, #fff6c2 0%, #ffd23f 30%, #ff7a1a 60%, rgba(255,45,26,0) 75%);
  transform-origin: 50% 100%; filter: blur(.4px); animation: flicker 1.1s ease-in-out infinite alternate; }
.thermo-fire i:nth-child(2) { width: 12px; height: 20px; margin-left: -14px; animation-duration: .9s; animation-delay: -.3s; opacity: .85; }
.thermo-fire i:nth-child(3) { width: 12px; height: 18px; margin-left: 2px; animation-duration: 1.3s; animation-delay: -.6s; opacity: .8; }
@keyframes flicker {
  0% { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  40% { transform: scaleY(1.15) scaleX(.92) rotate(2deg); }
  70% { transform: scaleY(.92) scaleX(1.05) rotate(-1deg); }
  100% { transform: scaleY(1.1) scaleX(.95) rotate(3deg); }
}
.thermo-sparks { position: absolute; left: 50%; top: -18px; width: 40px; height: 1px; transform: translateX(-50%); opacity: 0; transition: opacity .4s .5s; pointer-events: none; }
.thermo-sparks i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 6px #ff7a1a; animation: spark 1.8s ease-out infinite; }
.thermo-sparks i:nth-child(1) { left: 10%; animation-delay: 0s; } .thermo-sparks i:nth-child(2) { left: 35%; animation-delay: .5s; }
.thermo-sparks i:nth-child(3) { left: 60%; animation-delay: .9s; } .thermo-sparks i:nth-child(4) { left: 82%; animation-delay: 1.3s; }
.thermo-sparks i:nth-child(5) { left: 48%; animation-delay: 1.6s; }
@keyframes spark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(6px, -42px); opacity: 0; } }
.hot-pop[data-level="4"] .thermo-fire, .hot-pop[data-level="4"] .thermo-sparks { opacity: 1; }
.hot-pop[data-level="4"] .thermo-tube { animation: tube-glow 1.6s ease-in-out infinite; }
@keyframes tube-glow { 50% { box-shadow: 0 0 18px rgba(255,80,30,.55); } }

/* levels, hottest at the top, lined up with the tube */
.hot-levels { display: flex; flex-direction: column; justify-content: space-between; height: 206px; }
.hot-levels button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; text-align: left;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font: 600 15px var(--sans); cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.hot-levels button:hover { transform: translateX(3px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.lvl-temp { font: 700 13px 'Silkscreen', var(--sans); color: var(--feria-yellow); min-width: 36px; }
.hot-levels button[aria-checked="true"] { background: var(--fluid); border-color: var(--fluid); color: var(--ink); box-shadow: 0 0 16px var(--glow); }
.hot-levels button[aria-checked="true"] .lvl-temp { color: var(--ink); }

.hot-line { margin: 2px 0 0; min-height: 2.8em; font-size: 14px; line-height: 1.4; color: #fff; }
.hot-go { width: 100%; min-height: 50px; font-size: 16px; background: var(--feria-green); color: var(--ink); transition: background .3s, transform .15s, box-shadow .3s; }
.hot-go:hover { color: var(--ink); transform: translateY(-1px); }
.hot-pop[data-level="0"] .hot-go { background: rgba(255,255,255,.14); color: #fff; }
.hot-pop:not([data-level="0"]) .hot-go { background: var(--fluid); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 8px 24px var(--glow); }
.hot-pop[data-level="1"] .hot-go { color: var(--ink); text-shadow: none; }
.hot-pop[data-level="4"] .hot-go { animation: go-pulse 1.4s ease-in-out infinite; }
@keyframes go-pulse { 50% { box-shadow: 0 8px 30px rgba(255,60,30,.65); } }
.hot-later { align-self: center; border: 0; background: none; color: #d9cfe8; font: 600 13px var(--sans); text-decoration: underline; cursor: pointer; min-height: 32px; }
@media (min-width: 1024px) { .hot-pop { right: 24px; bottom: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .hot-panel, .hot-tab, .thermo-fill { transition: none; }
  .pill-thermo i { animation: none; height: 60%; }
  .thermo-bulb span, .thermo-fire i, .thermo-sparks i, .thermo-tube, .hot-go { animation: none !important; }
}

/* Header with the fair link: tighter spacing, search collapses earlier. */
@media (min-width: 1024px) {
  .header-row { gap: 24px; }
  .main-nav { gap: 18px; align-items: center; }
  .main-nav a { font-size: 14px; }
  .search input { width: 140px; }
}
@media (min-width: 1024px) and (max-width: 1379px) {
  .search input { display: none; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .header-cta { display: none; }
  .main-nav { gap: 14px; }
}
.thermo-fire { width: 44px; height: 44px; top: -38px; }
.thermo-fire i { width: 22px; height: 34px; margin-left: -11px; }
.thermo-fire i:nth-child(2) { width: 15px; height: 25px; margin-left: -18px; }
.thermo-fire i:nth-child(3) { width: 15px; height: 23px; margin-left: 3px; }
/* Short phones: the pop-up scrolls inside instead of leaving the screen. */
@media (max-height: 700px) and (max-width: 1023px) {
  .thermo { height: 200px; } .thermo-tube, .hot-levels { height: 160px; }
  .hot-levels button { min-height: 36px; }
}

/* WhatsApp button and the HOT tab share the bottom-right corner:
   the tab sits above the button. On phones both clear the bottom nav. */
.wa-float { bottom: 80px; }
.hot-pop { bottom: 144px; }
@media (min-width: 1024px) {
  .wa-float { bottom: 24px; right: 24px; }
  .hot-pop { bottom: 92px; }
}

/* ---------- rotating store banners (3 plans, every 2 s) ---------- */
.rotator { display: grid; align-items: stretch; }
.rotator .rot-slide { grid-area: 1 / 1; position: relative; display: flex; align-items: flex-end; min-width: 0;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.rotator .rot-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.rotator .rot-slide .promo-bg { transform: scale(1.06); transition: transform 2.6s ease-out; }
.rotator .rot-slide.is-active .promo-bg { transform: scale(1); }
.inline-promo .rot-slide { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.rot-dots { grid-area: 1 / 1; align-self: start; justify-self: end; z-index: 2; display: flex; gap: 2px; padding: 8px; }
.rot-dot { width: 26px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.rot-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: width .3s, background .3s; }
.rot-dot[aria-current="true"]::before { width: 22px; background: var(--amber); }
.inline-promo .rot-dot::before { background: rgba(20,12,10,.25); box-shadow: none; }
.inline-promo .rot-dot[aria-current="true"]::before { background: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .rotator .rot-slide, .rotator .rot-slide.is-active, .rotator .rot-slide .promo-bg { transition: none; transform: none; }
}

/* Fair link in the menu: the official logo on a dark capsule (its yellow
   letters need a dark background to be read). */
.nav-feria { display: inline-flex !important; align-items: center; align-self: flex-start; background: var(--feria-bg); border-radius: 999px; padding: 10px 16px !important; margin: 8px 0; border: 0 !important; transition: background .2s, transform .2s; }
.nav-feria img { display: block; height: 18px; width: auto; }
.nav-feria:hover { background: var(--feria-purple); transform: translateY(-1px); }
@media (min-width: 1024px) {
  .nav-feria { padding: 8px 14px !important; margin: 0; }
  .nav-feria img { height: 20px; }
}

/* ---------- main story + list of five (home and sections) ---------- */
.lead2 { display: grid; gap: 20px; }
.lead2 > .ov-hero { min-height: 440px; }
.lead-list { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; }
.lead-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 12px; }
.lead-list-head .display { font-size: 24px; }
.lead-list-head a { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lead-list-head a:hover { color: var(--red); }
.lrow { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
.lrow-media { height: 78px; border-radius: 8px; overflow: hidden; background: var(--line); }
.lrow-media img { border-radius: 0; transition: transform .5s ease; }
.lrow:hover .lrow-media img { transform: scale(1.06); }
.lrow-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lrow-body .kicker { font-size: 11px; }
.lrow-title { margin: 0; font: 700 15px/1.3 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.lrow:hover .lrow-title { color: var(--red); }
.lrow .meta { font-size: 12px; }
.feature-ov .lead2 { margin-top: 0; }

@media (min-width: 1024px) {
  /* Both columns share one height; with five articles the rows split it evenly. */
  .lead2 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; }
  .lead2 > .ov-hero { min-height: 560px; }
  .lead2-full { height: 640px; align-items: stretch; }
  .lead2-full > .ov-hero { min-height: 0; height: 100%; }
  .lead2-full .lead-list { height: 100%; overflow: hidden; }
  .lead-list-5 .lrow { flex: 1 1 0; min-height: 0; padding: 8px 0; }
  .lead-list-5 .lrow-media { height: 100%; max-height: 92px; }
}

/* A single section with one story spans the whole row: a wide strip, not a
   tall card (a 4:5 card at full width would be ~1,500 px high). */
@media (min-width: 720px) {
  .singles-1 .ov-tall { aspect-ratio: auto; min-height: 420px; max-height: 480px; }
  .singles-1 .ov-title { font-size: clamp(28px, 3.6vw, 44px); max-width: 760px; }
  .singles-2 .ov-tall { aspect-ratio: 4 / 3; }
}

/* ---------- Tour de Fantasmas por La Candelaria ---------- */
:root { --tour-ink: #1c1030; --tour-purple: #622d91; --tour-lime: #c7dd38; --tour-cream: #f4eede; --tour-orange: #f5722b; }
.nav-tour { display: inline-flex !important; align-items: center; align-self: flex-start; padding: 4px 0 !important; margin: 4px 0; border: 0 !important; transition: transform .2s; }
.nav-tour img { display: block; height: 30px; width: auto; }
.nav-tour:hover { transform: translateY(-1px) rotate(-2deg); }
@media (min-width: 1024px) { .nav-tour { padding: 0 !important; margin: 0; } .nav-tour img { height: 34px; } }

.tour-banner {
  margin-top: 48px; display: grid; overflow: hidden; border-radius: 18px; color: var(--tour-cream);
  background: radial-gradient(120% 120% at 0% 100%, #3a1a5c 0%, var(--tour-ink) 60%, #0e0818 100%);
  border: 2px solid var(--tour-purple);
}
.tour-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.tour-logo { width: min(100%, 420px); height: auto; }
.tour-tagline { margin: 0; font: 18px/1.5 var(--serif); color: #ece4f5; max-width: 560px; }
.tour-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tour-tags li { font-size: 13px; font-weight: 600; border: 1px solid rgba(199,221,56,.5); color: var(--tour-lime); padding: 6px 10px; border-radius: 999px; }
.tour-when { margin: 0; font-size: 15px; line-height: 1.5; color: #d8cee6; }
.tour-when strong { color: var(--tour-cream); }
.tour-plans { display: flex; flex-wrap: wrap; gap: 10px; }
.tour-plans div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(244,238,222,.15); min-width: 150px; }
.tour-plans span { font-size: 12px; color: #d8cee6; }
.tour-plans b { font: 400 26px/1 var(--display); color: var(--tour-cream); }
.tour-deposit { margin: 0; font-size: 13px; color: var(--tour-lime); font-weight: 600; }
.tour-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.tour-btn { background: var(--tour-lime); color: var(--tour-ink); }
.tour-btn:hover { background: #d8ec55; color: var(--tour-ink); }
.tour-btn-line { border-color: rgba(244,238,222,.5); color: var(--tour-cream); }
.tour-btn-line:hover { border-color: var(--tour-cream); color: #fff; }
.tour-art { display: block; overflow: hidden; max-height: 360px; }
.tour-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; transition: transform .8s ease; }
.tour-banner:hover .tour-art img { transform: scale(1.04); }
@media (min-width: 900px) {
  .tour-banner { grid-template-columns: 1.25fr 1fr; min-height: 520px; }
  .tour-body { padding: 44px; justify-content: center; }
  .tour-art { max-height: none; }
}
/* The portrait illustration fills its column without setting the height. */
.tour-art { position: relative; min-height: 300px; max-height: none; }
.tour-art img { position: absolute; inset: 0; }

/* ---------- first block: lower, so the page shows more than one block ----
   About 500 px on desktop: with the header it leaves the next block in view. */
.lead2 > .ov-hero { min-height: 360px; }
.lead2 .ov-hero .ov-title { font-size: clamp(30px, 4.2vw, 50px); }
.lead2 .ov-hero .ov-excerpt { -webkit-line-clamp: 2; font-size: 16px; }
.lrow-title { font-size: 16px; line-height: 1.3; color: var(--ink); }
.lrow .meta { display: none; }
@media (min-width: 1024px) {
  .lead2 > .ov-hero { min-height: 460px; }
  .lead2-full { height: 500px; }
  .lead2-full .lead-list-head { padding: 12px 0 10px; }
  .lead2-full .lead-list-head .display { font-size: 22px; }
  .lead-list-5 .lrow { padding: 6px 0; gap: 12px; grid-template-columns: 92px 1fr; }
  .lead-list-5 .lrow-media { max-height: 66px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .lead2-full { height: 440px; }
}

/* ---------- rows of four: same card size whatever the count ---------- */
.row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.row-4 .card-title { font-size: 15px; }
@media (min-width: 720px) {
  .row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .row-4 .card-title { font-size: 17px; }
}

/* ---------- editorial articles: FAQ, links, closing, photo credit ---------- */
.prose .pxb-faq { margin-top: 36px; padding: 22px 24px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.prose .pxb-faq h2 { margin-top: 0; }
.prose .pxb-faq h3 { font-size: 18px; margin: 18px 0 4px; }
.prose .pxb-faq p { margin: 0; font-size: 17px; }
.prose .pxb-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .pxb-links a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 600 14px var(--sans); text-decoration: none; color: var(--ink); }
.prose .pxb-links a:hover { border-color: var(--red); color: var(--red); }
.prose .pxb-closing { font-family: var(--sans); font-size: 20px; color: var(--red); }
.prose .pxb-photo-credit { font: 13px var(--sans); color: var(--muted); }
.prose .pxb-photo-credit a { color: var(--muted); }

/* ---------- fair and ghost tour, inside articles ---------- */
.article-ctas { margin-top: 48px; }
.article-ctas > .display { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.cta-grid { display: grid; gap: 20px; }
.cta-card { display: grid; grid-template-columns: 1fr; border-radius: 16px; overflow: hidden; color: #fff; }
.cta-feria { background: #211039; border: 2px solid #8fe36a; }
.cta-tour { background: #1c1030; border: 2px solid #622d91; }
.cta-art { display: block; height: 180px; overflow: hidden; }
.cta-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cta-tour .cta-art img { object-position: center 70%; }
.cta-card:hover .cta-art img { transform: scale(1.05); }
.cta-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.cta-kicker { align-self: flex-start; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #211039; background: #8fe36a; padding: 6px 9px; border-radius: 4px; }
.cta-body h3 { margin: 0; font: 700 22px/1.2 'Silkscreen', var(--display); color: #f4c94a; text-shadow: 2px 2px 0 #e8402a; }
.cta-logo { width: min(100%, 280px); height: auto; }
.cta-body p { margin: 0; color: #e6dcf2; font-size: 15px; line-height: 1.5; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cta-btn-feria { background: #8fe36a; color: #120a1f; }
.cta-btn-feria:hover { background: #b0f394; color: #120a1f; }
.cta-btn-tour { background: #c7dd38; color: #1c1030; }
.cta-btn-tour:hover { background: #d8ec55; color: #1c1030; }
.cta-btn-line { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.cta-btn-line:hover { border-color: #fff; color: #fff; }
@media (min-width: 720px) {
  .cta-grid { grid-template-columns: 1fr 1fr; }
}


/* ---------- compact banners and boxes (none taller than it needs) ---------- */
/* fair and ghost tour banners on the home page */
.feria-banner .feria-body, .tour-banner .tour-body { gap: 9px; }
.feria-title { font-size: clamp(24px, 2.8vw, 36px); }
.feria-tagline, .tour-tagline { font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feria-tags li, .tour-tags li { font-size: 12px; padding: 4px 9px; }
.feria-when, .tour-when { font-size: 14px; }
.feria-count span { min-width: 58px; padding: 5px 8px; }
.feria-count b { font-size: 20px; }
.tour-logo { width: min(100%, 300px); }
.tour-plans div { padding: 8px 12px; min-width: 130px; }
.tour-plans b { font-size: 22px; }
.feria-art { max-height: 260px; }
@media (min-width: 900px) {
  .feria-banner { grid-template-columns: 1fr 1.25fr; min-height: 0; }
  .feria-banner .feria-body, .tour-banner .tour-body { padding: 26px 32px; }
  .feria-art { max-height: none; }
  .tour-banner { grid-template-columns: 1.4fr 1fr; min-height: 0; }
}

/* store banners */
.promo { min-height: 260px; }
.promo-body .display { font-size: clamp(26px, 3.6vw, 42px); }
@media (min-width: 1024px) { .promo { min-height: 320px; } }
.side-promo { min-height: 400px; }

/* article header photo */
.article-hero { min-height: 380px; }
@media (min-width: 1024px) { .article-hero { min-height: 460px; } }
.article-hero .article-title { font-size: clamp(30px, 4.6vw, 54px); }

/* fair and ghost tour cards inside articles: horizontal, short */
.cta-art { height: 150px; }
@media (min-width: 720px) {
  .cta-card { grid-template-columns: 170px 1fr; }
  .cta-art { height: 100%; min-height: 200px; }
  .cta-body { padding: 16px 18px; gap: 8px; }
  .cta-body h3 { font-size: 18px; }
  .cta-logo { width: min(100%, 220px); }
  .cta-body p { font-size: 14px; }
}
@media (min-width: 900px) {
  /* the description already says it: the tag rows only add height */
  .feria-tags, .tour-tags { display: none; }
  .tour-deposit { margin-top: -4px; }
}

/* ---------- editorial articles: supporting photos, citations, sources ---------- */
.prose .pxb-figure { margin: 30px 0; }
.prose .pxb-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.prose .pxb-figure figcaption a { color: inherit; }
.prose .pxb-figure.is-natural img { width: auto; max-width: 100%; height: auto; max-height: 78vh; aspect-ratio: auto; margin: 0 auto; object-fit: contain; }
.prose .pxb-factsheet { margin: 24px 0; padding: 14px 18px; border-left: 4px solid var(--accent, #E8402A); border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); }
.prose .pxb-factsheet ul { margin: 0; padding-left: 18px; }
.prose .pxb-cite { font: 600 11px var(--sans); line-height: 0; margin-left: 1px; }
.prose .pxb-cite a { text-decoration: none; color: var(--red); }
.prose .pxb-sources { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.prose .pxb-sources h2 { margin-top: 0; font-size: 20px; }
.prose .pxb-sources ol { font: 14px/1.5 var(--sans); color: var(--muted); padding-left: 1.4em; }
.prose .pxb-sources li { margin-bottom: 6px; scroll-margin-top: 110px; }
.prose .pxb-sources li:target { color: var(--black); background: #fff3d6; border-radius: 4px; }
.prose .pxb-sources a { color: inherit; overflow-wrap: anywhere; }

/* in-article plan banner: compact (it stacked a full-size photo, ~1075px tall) */
.prose .inline-promo .rot-slide > img { width: 100%; height: 180px; aspect-ratio: auto; object-fit: cover; }
.prose .inline-promo .rot-slide > div { padding: 14px 18px; gap: 6px; }
@media (min-width: 640px) {
  .prose .inline-promo .rot-slide { grid-template-columns: 220px 1fr; }
  .prose .inline-promo .rot-slide > img { height: 100%; min-height: 170px; max-height: 200px; }
}

/* phones: shorter article hero, CTA cards and in-article banner */
@media (max-width: 719px) {
  .cta-art { height: 110px; }
  .cta-body { gap: 8px; }
  .cta-body h3 { font-size: 20px; line-height: 1.2; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cta-actions .btn { flex: 1 1 140px; padding: 10px 12px; font-size: 14px; }
  .article-hero .article-dek { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }
  .prose .inline-promo .rot-slide > img { height: 140px; }
}

/* ---------- site search: header trigger + panel (assets/search.js) ---------- */
.search-trigger { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--muted); font: 500 14px var(--sans); text-decoration: none; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, color .2s; }
.search-trigger:hover, .search-trigger:focus-visible { border-color: var(--red); color: var(--ink); box-shadow: 0 0 0 4px rgba(215, 38, 28, .12); }
.search-trigger svg { flex: none; color: var(--red); }
.st-kbd { font: 600 11px var(--sans); padding: 3px 6px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 1365px) { .st-kbd { display: none; } }
@media (max-width: 1199px) { .search-trigger { width: 44px; padding: 0; justify-content: center; } .st-label { display: none; } }

html.sx-open { overflow: hidden; }
.sx { position: fixed; inset: 0; z-index: 2147482000; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.sx[hidden] { display: none; }
.sx-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .18s ease; }
.sx-box { position: relative; width: min(680px, 100%); max-height: 80vh; display: flex; flex-direction: column; border-radius: 20px; background: var(--white);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .18s ease, transform .18s ease; }
.sx.is-open .sx-backdrop { opacity: 1; }
.sx.is-open .sx-box { opacity: 1; transform: none; }
.sx-form { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sx-form > svg { flex: none; width: 22px; height: 22px; color: var(--red); }
.sx-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 19px var(--sans); color: var(--ink); }
.sx-form input::-webkit-search-cancel-button { display: none; }
.sx-clear, .sx-esc { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 8px; cursor: pointer; font: 600 12px var(--sans); }
.sx-clear { width: 28px; height: 28px; font-size: 18px; line-height: 1; border-radius: 999px; }
.sx-esc { padding: 5px 8px; }
.sx.is-loading .sx-form > svg { animation: sx-pulse .8s ease-in-out infinite alternate; }
@keyframes sx-pulse { to { opacity: .3; } }
.sx-body { overflow-y: auto; padding: 8px 18px 16px; overscroll-behavior: contain; }
.sx-label { margin: 14px 0 8px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 600 14px var(--sans); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.sx-chip:hover { border-color: var(--red); color: var(--red); background: var(--white); }
.sx-chip-recent::before { content: "↺ "; color: var(--muted); }
.sx-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.sx-quick a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 600 15px var(--sans); }
.sx-quick a:hover { background: var(--paper); color: var(--red); }
.sx-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.sx-dot-feria { background: #e2342a; }
.sx-dot-tour { background: #7b4dff; }
.sx-group + .sx-group { margin-top: 4px; }
.sx-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sx-item:hover, .sx-item[aria-selected="true"] { background: var(--hover); }
.sx-media { width: 56px; height: 42px; flex: none; border-radius: 8px; overflow: hidden; background: var(--paper); display: grid; place-items: center; }
.sx-media img { width: 100%; height: 100%; object-fit: cover; }
.sx-ico::before { font-size: 20px; }
.sx-ico-page::before { content: "🧭"; }
.sx-ico-article::before { content: "📰"; }
.sx-ico-plan::before { content: "🎟️"; }
.sx-text { display: flex; flex-direction: column; min-width: 0; font-family: var(--sans); }
.sx-text b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sx-text small { font-size: 12px; color: var(--muted); }
.sx-text mark { background: #ffe1a6; color: var(--black); border-radius: 3px; padding: 0 1px; }
.sx-plan .sx-text small { color: var(--red); font-weight: 700; }
.sx-go { margin-left: auto; color: var(--muted); opacity: 0; transition: opacity .15s, transform .15s; }
.sx-item:hover .sx-go, .sx-item[aria-selected="true"] .sx-go { opacity: 1; transform: translateX(2px); color: var(--red); }
.sx-all { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--block); color: #fff; text-decoration: none; font: 500 14px var(--sans); }
.sx-all:hover { background: var(--red); color: #fff; }
.sx-all span { margin-left: auto; }
.sx-empty { padding: 18px 4px 4px; font-family: var(--sans); }
.sx-empty p { margin: 0 0 4px; }
.sx-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--paper); font: 12px var(--sans); color: var(--muted); }
.sx-foot kbd { font: 600 11px var(--sans); padding: 2px 6px; margin-right: 3px; border-radius: 5px; border: 1px solid var(--line); background: var(--white); }
@media (max-width: 719px) {
  .sx { padding: 0; }
  .sx-box { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .sx-foot { display: none; }
  .sx-form input { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .sx-box, .sx-backdrop { transition: none; } }
.search-trigger { flex: none; }
@media (min-width: 1200px) { .search-trigger { padding-right: 16px; } }
.main-nav .nav-feria img, .main-nav .nav-tour img { flex: none; }
.sx-item[aria-selected="true"] { background: var(--hover-strong); box-shadow: inset 3px 0 0 var(--red); }


/* =====================================================================
   Store typography (Sharp Grotesk + TeXGyreHeros) and day/night themes.
   Day = white (default), night = black: html[data-theme="dark"], set in
   <head> by the hour (6:00-18:00 day) or by the reader's toggle.
   ===================================================================== */
.main-nav, .bottom-nav, .crumbs, .meta, .kicker, .topbar { font-family: var(--sans); }
/* titles over photos and article titles read better in sentence case */
.ov-title, .article-title { text-transform: none; letter-spacing: -.01em; line-height: 1.05; }
.section-head .display { font-size: 22px; }
@media (min-width: 1024px) { .section-head .display { font-size: 28px; } }
.lead-list-head .display { font-size: 20px; }
.page-head .display { font-size: clamp(36px, 6vw, 60px); }
.ov-title { font-size: 22px; }
.ov-hero .ov-title, .lead2 .ov-hero .ov-title { font-size: clamp(28px, 3.6vw, 44px); }
.article-hero .article-title { font-size: clamp(28px, 4vw, 48px); }
.promo-body .display { font-size: clamp(24px, 3vw, 36px); }
.newsletter .display { font-size: clamp(24px, 3.2vw, 36px); }
.card-title, .lrow-title { letter-spacing: -.005em; }

/* Logo: red by day, white by night */
.logo-night { display: none !important; }
html[data-theme="dark"] .logo-day { display: none !important; }
html[data-theme="dark"] .logo-night { display: block !important; }

/* Theme toggle in the header */
.theme-toggle { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--red); color: var(--red); }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ---------- night ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0b;
  --white: #1c1c1c;
  --surface: #151515;
  --ink: #ffffff;
  --ink-2: #e2dcd6;
  --text: #e9e4de;
  --muted: #b5afa9;
  --line: #2c2c2c;
  --block: #1c1c1c;
  --hover: #2a1a17;
  --hover-strong: #3a201b;
}
html[data-theme="dark"] .site-footer { background: #000; }
html[data-theme="dark"] .accent-cultura { color: #ff6a5e !important; }
html[data-theme="dark"] .accent-musica { color: #b49bff !important; }
html[data-theme="dark"] .accent-gastronomia { color: #ffb32c !important; }
html[data-theme="dark"] .accent-escapese { color: #4cd4a4 !important; }
html[data-theme="dark"] .accent-contribuidores { color: #7fa8ff !important; }
html[data-theme="dark"] .card:hover .card-title, html[data-theme="dark"] .lrow:hover .lrow-title { color: #ff6a5e; }
html[data-theme="dark"] .prose a:not(.btn) { color: #ff6a5e; }
html[data-theme="dark"] .bottom-nav { background: #000; border-top: 1px solid var(--line); }

/* ---------- Feria and Tour de Fantasmas: kept exactly as they were ----------
   They keep the previous fonts and light colors in both themes. */
.feria-banner, .tour-banner, .cta-card, .hot-pop, .hot-pill {
  --display: Anton, 'Arial Narrow', sans-serif;
  --sans: Archivo, system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --body: Archivo, system-ui, sans-serif;
  --ink: #140c0a; --ink-2: #3a302b; --muted: #5e534d; --line: #e6dccf; --paper: #fbf6ee; --white: #fff;
  --text: #2a211d; --block: #140c0a; --on-dark: #fbf6ee;
  font-family: Archivo, system-ui, sans-serif;
}
.feria-banner .display, .tour-banner .display, .cta-card .display { font-weight: 400; letter-spacing: .005em; }
/* Amber and red blocks keep dark/white text in both themes */
.coupon-box, .coupon-box .kicker { color: var(--black); }
.coupon-box .btn-ink { background: var(--black); color: #fff; }
.nl-row input { background: #fff; color: var(--black); }
/* Phones: one header row (logo, search, day/night). "Planes" lives in the bottom nav. */
@media (max-width: 719px) {
  .header-row { flex-wrap: nowrap; gap: 8px; }
  .header-row .search-trigger, .header-row .theme-toggle { width: 40px; height: 40px; }
  .header-row .search-trigger { margin-left: auto; }
}
@media (max-width: 479px) { .header-cta { display: none; } }

/* ---------- Vitrina (home): compact version of the store's accordion ---------- */
.vitrina-mini { margin-top: 48px; }
.vitrina-mini-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vitrina-mini-kicker { margin: 0 0 4px; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.vitrina-mini-head .display { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1; text-transform: uppercase; }
.vitrina-mini-all { font: 700 14px var(--sans); color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); }
.vitrina-mini-all:hover { border-color: var(--ink); }
.vitrina-mini-row { display: flex; flex-direction: column; gap: 8px; }
.vm-pan { position: relative; overflow: hidden; border-radius: 18px; background: #000; color: #fff; height: 64px; transition: height .45s ease, flex-grow .6s cubic-bezier(.2,.8,.2,1); }
.vm-pan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.vm-pan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.25)); pointer-events: none; }
.vm-pan.is-open { height: 330px; }
.vm-pan.is-open::after { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55) 45%, rgba(0,0,0,.94)); }
.vm-pan.is-open > img { transform: scale(1.05); }
.vm-strip { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; color: #fff; cursor: pointer; text-align: left; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vm-pan.is-open .vm-strip { display: none; }
.vm-date { order: 2; display: inline-flex; gap: 4px; align-items: baseline; background: #fff; color: #141210; border-radius: 999px; padding: 6px 10px; font: 700 13px/1 var(--sans); }
.vm-date small { font-weight: 400; text-transform: uppercase; font-size: 10px; }
.vm-vt { font: 700 17px/1.1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-in { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: none; flex-direction: column; gap: 10px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.vm-pan.is-open .vm-in { display: flex; animation: vm-rise .5s .1s both; }
.vm-tag { align-self: flex-start; background: var(--red); color: #fff; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 5px; text-shadow: none; }
.vm-in h3 { margin: 0; font: 700 clamp(22px, 2.6vw, 30px)/1.02 var(--display); text-transform: uppercase; max-width: 18ch; color: #fff; }
.vm-dates { display: flex; gap: 6px; flex-wrap: wrap; }
.vm-day { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 46px; padding: 0 8px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.45); background: transparent; color: #fff; font: 700 13px/1.1 var(--sans); cursor: pointer; text-shadow: none; }
.vm-day small { font-weight: 400; font-size: 10px; text-transform: uppercase; opacity: .8; }
.vm-day.on { background: #fff; color: #141210; border-color: #fff; }
.vm-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vm-go { background: var(--amber); color: #141210; text-shadow: none; position: relative; overflow: hidden; }
.vm-go:hover { background: #ffc35a; color: #141210; }
.vm-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: vm-shine 3.2s ease-in-out infinite; }
.vm-price { font: 700 20px/1 var(--sans); color: var(--amber); }
.vm-price small { display: block; font: 400 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: #fff; opacity: .8; margin-bottom: 3px; }
@media (min-width: 900px) {
  .vitrina-mini-row { flex-direction: row; height: 330px; gap: 10px; }
  .vm-pan, .vm-pan.is-open { height: auto; flex: 1 1 0; min-width: 0; }
  .vm-pan.is-open { flex-grow: 4.2; }
  .vm-pan:not(.is-open):hover > img { transform: scale(1.08); }
  .vm-pan::after { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.8)); }
  .vm-strip { flex-direction: column; justify-content: space-between; align-items: center; padding: 14px 0 18px; }
  .vm-date { order: 0; flex-direction: column; align-items: center; gap: 2px; border-radius: 10px; padding: 6px 8px; font-size: 16px; }
  .vm-vt { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 230px; font-size: 18px; }
  .vm-in { left: 24px; right: 24px; bottom: 20px; }
}
@keyframes vm-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vm-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .vm-pan, .vm-pan > img, .vm-in, .vm-go::after { animation: none !important; transition: none !important; } }

/* Newsletter: a light card, so it never reads as the same red block as "Síganos". */
.newsletter { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.newsletter .display { color: var(--ink); }
.newsletter p { color: var(--muted); }
.nl-form label { color: var(--ink); }
.nl-row input { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); }
.newsletter .btn-ink { background: var(--red); color: #fff; }
.newsletter .btn-ink:hover { background: #b51e15; color: #fff; }

/* ---------- "Bogotá hoy": live strip + "Ver todo" panel (layout.js, theme.js) ---------- */
.bh { position: relative; z-index: 30; }
.bh-row { display: flex; align-items: center; gap: 12px; height: 40px; }
.bh-tag { display: flex; align-items: center; gap: 8px; flex: none; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #FFB32C; }
.bh-tag i { width: 8px; height: 8px; border-radius: 999px; background: #2BD576; animation: bh-live 1.8s infinite; }
.bh-sep { width: 1px; height: 20px; background: rgba(255,255,255,.18); flex: none; }
.bh-slot { position: relative; flex: 1; min-width: 0; height: 40px; overflow: hidden; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bh-track { display: block; transition: transform .8s cubic-bezier(.65,0,.35,1); }
.bh-item { display: flex; align-items: center; gap: 10px; height: 40px; white-space: nowrap; overflow: hidden; }
.bh-ico { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,179,44,.16); color: #FFB32C; }
.bh-ico svg { width: 15px; height: 15px; }
.bh-lab { display: none; flex: none; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(251,246,238,.6); }
.bh-item b { font: 700 13px/1.2 var(--sans); color: #fff; overflow: hidden; text-overflow: ellipsis; }
.bh-rest { display: none; color: rgba(251,246,238,.75); overflow: hidden; text-overflow: ellipsis; }
.bh-src { display: none; flex: none; margin-left: auto; padding-left: 12px; font-size: 11px; color: rgba(251,246,238,.45); }
.bh-dots { display: none; gap: 6px; flex: none; }
.bh-dots button { position: relative; width: 22px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
.bh-dots button i { position: absolute; left: 0; right: 0; top: 5px; height: 3px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.bh-dots button i::after { content: ""; position: absolute; inset: 0; background: #FFB32C; transform: scaleX(0); transform-origin: left; }
.bh-dots button.on i::after { animation: bh-prog var(--bh-step, 5s) linear forwards; }
.bh.paused .bh-dots button.on i::after { animation-play-state: paused; }
.bh-more { display: none; flex: none; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: none; color: #FBF6EE; font: 700 12px/1 var(--sans); cursor: pointer; }
.bh-more svg { width: 14px; height: 14px; transition: transform .25s; }
.bh-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.bh-more:hover, .bh-slot:focus-visible, .bh-more:focus-visible { border-color: #FFB32C; outline: none; }
.topbar-social { display: none; gap: 16px; flex: none; font-size: 12px; color: rgba(251,246,238,.75); }
.topbar-social a { color: inherit; text-decoration: none; }
.topbar-social a:hover { color: #FFB32C; }
.bh-desk { display: none; }
/* panel */
.bh-panel { position: absolute; left: 0; right: 0; top: 100%; background: #141210; color: #FBF6EE; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); animation: bh-open .3s ease-out; }
.bh-panel[hidden] { display: none; }
.bh-grid { display: grid; gap: 10px; padding: 12px 16px 18px; max-width: 1280px; margin: 0 auto; }
.bh-card { border-radius: 14px; background: rgba(255,255,255,.06); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.bh-card-lab { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #FFB32C; }
.bh-card-lab svg { width: 15px; height: 15px; }
.bh-card b { font: 700 20px/1.15 var(--sans); color: #fff; }
.bh-card-dato b { font-size: 16px; line-height: 1.3; }
.bh-card > span:not(.bh-card-lab):not(.bh-plates) { font: 400 13px/1.45 var(--body, var(--sans)); color: rgba(251,246,238,.78); }
.bh-card small { margin-top: auto; padding-top: 4px; font: 400 11px/1.3 var(--sans); color: rgba(251,246,238,.45); }
.bh-plates { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.bh-plates i { font-style: normal; width: 26px; height: 30px; border-radius: 5px; display: grid; place-items: center; font: 700 15px/1 var(--sans); background: rgba(255,255,255,.08); color: rgba(255,255,255,.35); }
.bh-plates i.on { background: #FFD200; color: #141210; border: 2px solid #141210; box-shadow: 0 0 0 1px #FFD200; }
@media (min-width: 720px) {
  .bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bh-row { height: 44px; gap: 16px; }
  .bh-slot, .bh-item { height: 44px; }
  .bh-lab, .bh-rest, .bh-src, .bh-desk { display: block; }
  .bh-dots, .bh-more, .topbar-social { display: flex; }
  .bh-item b { font-size: 14px; flex: none; max-width: 46%; }
  .bh-panel { left: auto; right: max(16px, calc((100vw - 1280px) / 2 + 16px)); width: 600px; border-radius: 0 0 18px 18px; }
  .bh-grid { padding: 16px; }
}
@keyframes bh-live { 0% { box-shadow: 0 0 0 0 rgba(43,213,118,.7); } 70% { box-shadow: 0 0 0 8px rgba(43,213,118,0); } 100% { box-shadow: 0 0 0 0 rgba(43,213,118,0); } }
@keyframes bh-prog { to { transform: scaleX(1); } }
@keyframes bh-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-track, .bh-tag i, .bh-panel { transition: none; animation: none; } }

/* "Bogotá Now": subtle pill once the top bar scrolls away (theme.js) */
.bh-pill { position: fixed; left: max(16px, calc((100vw - 1280px) / 2 + 16px)); top: var(--bh-pill-top, 84px); z-index: 31; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border: 1px solid rgba(255,179,44,.45); border-radius: 999px; background: rgba(20,18,16,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FBF6EE; font: 700 12px/1 var(--sans); letter-spacing: .04em; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transform: translateY(-10px) scale(.96); transform-origin: left center; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .2s; }
.bh-pill.is-on { opacity: 1; pointer-events: auto; transform: none; }
.bh-pill:hover, .bh-pill:focus-visible { border-color: #FFB32C; outline: none; }
.bh-pill i { width: 7px; height: 7px; border-radius: 999px; background: #2BD576; animation: bh-live 1.8s infinite; }
.bh-pill span { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.2); font-weight: 400; color: rgba(251,246,238,.8); }
.bh-pill svg { width: 14px; height: 14px; transition: transform .25s; }
.bh-pill[aria-expanded="true"] svg { transform: rotate(180deg); }
/* the panel opened from the pill floats under it */
.bh.is-floating .bh-panel { position: fixed; top: var(--bh-float-top, 130px); left: max(12px, calc((100vw - 1280px) / 2 + 16px)); right: auto; width: min(600px, calc(100vw - 24px)); transform: none; border-radius: 18px; max-height: calc(100vh - var(--bh-float-top, 130px) - 16px); overflow-y: auto; }
.bh.is-floating .bh-panel { animation: bh-float-open .3s ease-out; }
@keyframes bh-float-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bh-pill { transition: opacity .2s; transform: none; } }

/* Phones: the floating HOT tab shows only its thermometer, so it does not
   cover the page (same as the store's "Cotiza" pill). */
@media (max-width: 639px) {
  .hot-pill { padding: 6px; gap: 0; min-width: 44px; justify-content: center; }
  .hot-pill-text { display: none; }
}

/* ---------- phone menu: bottom bar + drawer (src/theme/layout.js) ----------
   Same structure as the store's (apps/web components/SiteMenu.jsx). */
.bottom-nav { grid-template-columns: repeat(5, 1fr); }
.bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 11px/1 var(--sans); color: inherit; background: none; border: 0; cursor: pointer; }
.bottom-nav a:first-child { color: inherit; }
.bottom-nav a:hover, .bottom-nav button:hover, .bottom-nav [aria-current="page"], .bottom-nav [aria-expanded="true"] { color: var(--amber); }
@media (min-width: 1024px) { .mx { display: none !important; } }
html.mx-open { overflow: hidden; }
.mx { position: fixed; inset: 0; z-index: 2147481000; }
.mx[hidden] { display: none; }
.mx-backdrop { position: absolute; inset: 0; background: rgba(20,12,10,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
.mx-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); transform: translateY(100%); transition: transform .22s ease; }
.mx.is-open .mx-backdrop { opacity: 1; }
.mx.is-open .mx-panel { transform: none; }
.mx-head { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 -20px; padding: 14px 20px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.mx-head > a { margin-right: auto; }
.mx-head .logo { height: 26px; }
.mx-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.mx-group { display: flex; flex-direction: column; padding: 14px 0 6px; }
.mx-group + .mx-group { border-top: 1px solid var(--line); }
.mx-title { margin: 0 0 4px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mx-link { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 700 19px/1.1 var(--sans); color: inherit; }
.mx-link:hover { color: var(--red); }
.mx-link[aria-current="page"] { color: var(--red); }
.mx-link[aria-current="page"]::after { content: '•'; margin-left: auto; color: var(--red); }
.mx-sub { min-height: 40px; padding-left: 22px; font-size: 16px; font-weight: 600; }
.mx-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: currentColor; color: var(--red); }
.mx-dot.accent-conciertos { color: #FF3D8B; }
.mx-dot.accent-cine, .mx-dot.accent-tour { color: #7c3aed; }
.mx-dot.accent-parchese { color: var(--red); }
.mx-dot.accent-feria { color: #6cd34f; }
.mx-tienda .mx-dot { color: var(--amber); }
.mx-tienda { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.mx-tienda .mx-title { grid-column: 1 / -1; }
.mx-tienda .mx-link { font-size: 15px; min-height: 44px; }
html[data-theme="dark"] .mx-panel, html[data-theme="dark"] .mx-head { background: #141210; color: #fbf6ee; }
@media (prefers-reduced-motion: reduce) { .mx-panel, .mx-backdrop { transition: none; } }

/* ---------- Feria and Tour de Fantasmas banners on phones ----------
   A compact horizontal card: the artwork as a narrow column on the left and
   only what decides the visit on the right (name, date, place, countdown or
   prices, and the two buttons). */
@media (max-width: 719px) {
  .feria-banner, .tour-banner { margin-top: 32px; grid-template-columns: 108px minmax(0, 1fr); min-height: 0; border-radius: 16px; box-shadow: none; }
  .feria-art, .tour-art { order: -1; position: relative; max-height: none; min-height: 0; height: 100%; }
  .feria-art img, .tour-art img { position: absolute; inset: 0; height: 100%; }
  .tour-art img { object-position: center 40%; }

  .feria-banner .feria-body, .tour-banner .tour-body { padding: 12px 12px 14px; gap: 6px; }
  .feria-eyebrow, .feria-tagline, .feria-tags, .tour-tagline, .tour-tags, .tour-deposit { display: none; }
  .feria-title { font-size: 19px; text-shadow: 2px 2px 0 var(--feria-red); }
  .feria-edition { font-size: 11px; padding: 3px 8px; }
  .feria-when, .tour-when { font-size: 12px; line-height: 1.35; }
  .feria-count { gap: 5px; }
  .feria-count span { min-width: 0; flex: 1; padding: 3px 4px; font-size: 9px; border-radius: 8px; }
  .feria-count b { font-size: 15px; }
  .tour-logo { width: min(100%, 170px); }
  .tour-plans { gap: 6px; }
  .tour-plans div { min-width: 0; flex: 1; padding: 5px 8px; border-radius: 9px; }
  .tour-plans span { font-size: 10px; }
  .tour-plans b { font-size: 16px; }
  .feria-cta, .tour-cta { gap: 6px; margin-top: 2px; }
  .feria-cta .btn, .tour-cta .btn { flex: 1; min-height: 36px; padding: 0 8px; font-size: 12px; }
}

/* "Bogotá Now" chip in the sticky header, next to the search (layout.js
   bhChip): always visible, it opens the Bogotá hoy panel under the header. */
.bh-pill { display: none !important; }
.bh-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .03em; cursor: pointer; transition: border-color .2s; }
.bh-chip:hover, .bh-chip:focus-visible, .bh-chip[aria-expanded="true"] { border-color: var(--amber); outline: none; }
.bh-chip i { width: 7px; height: 7px; border-radius: 999px; background: #2BD576; animation: bh-live 1.8s infinite; }
.bh-chip span { padding-left: 7px; border-left: 1px solid var(--line); font-weight: 400; color: var(--muted); white-space: nowrap; }
.bh-chip svg { width: 14px; height: 14px; transition: transform .25s; }
.bh-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-row .bh-chip { margin-left: auto; }
.header-row .bh-chip ~ .search-trigger { margin-left: 0; }
@media (max-width: 1279px) {
  .bh-chip { height: 40px; padding: 0 10px; gap: 6px; }
  .bh-chip b { display: none; }
  .bh-chip span { padding-left: 0; border-left: 0; color: var(--ink); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { .bh-chip i { animation: none; } }
/* Desktop: the menu needs the whole header row, so "Bogotá Now" hangs as a
   small tab under the header's bottom edge, on the right. */
@media (min-width: 1024px) {
  .header-row .bh-chip { position: absolute; top: 100%; right: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))); margin: 0; height: 30px; padding: 0 12px 0 10px; gap: 7px; border-top: 0; border-radius: 0 0 12px 12px; background: var(--paper); box-shadow: 0 8px 18px -12px rgba(0,0,0,.35); }
  .header-row .bh-chip b { display: inline; }
  .header-row .bh-chip span { padding-left: 7px; border-left: 1px solid var(--line); font-weight: 400; color: var(--muted); }
  .header-row .bh-chip ~ .search-trigger { margin-left: 0; }
}
@media (min-width: 1024px) {
  .bh.is-floating .bh-panel { left: auto; right: max(var(--gutter), calc((100vw - 1280px) / 2 + var(--gutter))); }
}

/* ---------- footer layout: one row on desktop, compact on phones ---------- */
.footer-grid nav a { font-size: 15px; line-height: 1.3; }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; align-items: start; padding-block: 56px 32px; }
  .footer-grid p { max-width: 300px; font-size: 15px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; }
  .footer-grid > div:first-child p { margin: 0; }
}
@media (max-width: 719px) {
  .site-footer { margin-top: 48px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block: 32px 16px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid .logo { height: 28px; }
  .footer-grid p { margin-top: 8px; font-size: 14px; }
  .footer-grid nav { gap: 8px; }
  .footer-grid nav a { font-size: 14px; }
  .footer-title { font-size: 11px; }
  .footer-bottom { padding-block: 14px 20px; font-size: 12px; }
}

/* Article byline: just the author and the year, subtle */
.byline-text.byline-min { display: block; margin: 0; font: 400 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--muted); }
.article-hero .byline-text.byline-min { color: rgba(251,246,238,.75); }

/* ---------- Bogotá Now panel: compact (desktop and phones) ----------
   2×2 cards with less padding, smaller figures, two-line details, mini
   plates and the fact as a thin strip below. */
.bh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.bh-card { padding: 10px 12px; gap: 4px; border-radius: 12px; }
.bh-card-lab { gap: 6px; font-size: 10px; letter-spacing: .12em; }
.bh-card-lab svg { width: 13px; height: 13px; }
.bh-card b { font-size: 15px; line-height: 1.2; }
.bh-card > span:not(.bh-card-lab):not(.bh-plates) { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bh-card small { padding-top: 2px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-plates { gap: 3px; margin: 1px 0; }
.bh-plates i { width: 18px; height: 20px; border-radius: 4px; font-size: 11px; border-width: 1px; }
.bh-plates i.on { border-width: 1px; }
.bh-card-dato { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.bh-card-dato b { font-size: 13px; line-height: 1.35; font-weight: 700; flex: 1 1 260px; }
.bh-card-dato small { flex-basis: 100%; margin: 0; padding: 0; }
@media (min-width: 900px) {
  .bh-panel { width: 460px; }
  .bh.is-floating .bh-panel { width: min(460px, calc(100vw - 24px)); }
  .bh-grid { padding: 10px; }
}
@media (max-width: 899px) {
  .bh.is-floating .bh-panel { border-radius: 16px; }
  .bh-card b { font-size: 14px; }
}
/* clima | TRM side by side; pico y placa and the fact full width (plates in one row) */
.bh-card-clima { order: 1; }
.bh-card-trm { order: 2; }
.bh-card-pyp { order: 3; grid-column: 1 / -1; }
.bh-card-dato { order: 4; }