/* Editorial guides share the portal's olive, forest and paper palette. */
[hidden] { display: none !important; }
:root { --gold: #dcae58; }
html { scroll-padding-top: 1.5rem; }
.guide-header { gap: 1.5rem; }
.guide-header nav { font-size: .85rem; }
.breadcrumbs, .article-meta, .article-nav, .article-layout, .related-towns, .town-index, .hub-featured, .hub-method { width: min(1260px, calc(100% - 3rem)); margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; padding-block: 1.25rem; font-size: .82rem; color: #5a685d; }
.breadcrumbs a { text-underline-offset: .2rem; }
.town-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 4rem; padding: clamp(2.75rem, 6vw, 6rem) max(1.5rem, calc((100% - 1260px)/2)); color: #fff; background: radial-gradient(ellipse at 100% 100%, #294f31 0, transparent 60%), #0b271d; }
.town-hero .eyebrow { color: #c5d877; }
.town-hero h1 { margin: 0; font: 500 clamp(3.3rem, 6.5vw, 6.5rem)/1.02 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.town-hero h1 em { display: block; margin-top: .7rem; color: #c5d877; font: 500 clamp(1.7rem, 3.1vw, 3.1rem)/1.12 var(--serif); letter-spacing: -.025em; }
.hub-hero h1 em { font-size: inherit; line-height: .98; }
.town-intro { max-width: 740px; margin: 1.75rem 0; font-size: 1.08rem; line-height: 1.75; color: #e4ebdf; }
.journey-note { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding: 1.8rem 0 0 2rem; border-left: 1px solid #5e765c; }
.journey-symbol, .journey-count { color: #c5d877; font: 500 6.5rem/1 var(--serif); }
.journey-note p { font: 500 1.8rem/1.15 var(--serif); }
.journey-note > span:last-child { font-size: .85rem; color: #c4d0bc; line-height: 1.8; }
.article-meta { display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding-block: 1.5rem; font-size: .8rem; color: #5b685c; }
.article-nav { display: flex; flex-wrap: wrap; gap: .6rem; padding-block: .25rem 1.75rem; border-bottom: 1px solid #d9dfd2; }
.article-nav a { padding: .5rem .9rem; border: 1px solid #cdd8c5; border-radius: 99px; text-decoration: none; font-size: .85rem; font-weight: 600; }
.article-nav a:hover { background: #e9efde; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 4rem; padding-top: 1rem; }
.article-main { min-width: 0; }
.article-main section { padding-block: 2.5rem; border-bottom: 1px solid #d9dfd2; }
.article-main h2, .related-towns > h2, .index-heading h2, .hub-featured h2, .hub-method h2 { margin: 0 0 1.5rem; font: 500 clamp(2rem, 3.6vw, 3rem)/1.1 var(--serif); letter-spacing: -.03em; }
.article-main p, .day-plan { color: #455249; line-height: 1.8; }
.sight { display: grid; grid-template-columns: 38px 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid #e0e5d9; }
.step-number { color: #7b853d; font: 500 1.6rem var(--serif); }
.sight h3 { margin: 0; font: 500 1.65rem/1.15 var(--serif); }
.sight p { margin-block: .75rem; }
.sight a { color: #236248; font-size: .82rem; font-weight: 600; text-underline-offset: .25rem; }
.editorial-tip { padding: 1.25rem; border-left: 3px solid #8ba43a; background: #eef0e4; }
.day-plan { padding-left: 1.4rem; }
.day-plan li { padding: .5rem 0 .5rem .4rem; }
.dish-links { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0; list-style: none; }
.dish-links a { display: block; padding: .6rem .8rem; border: 1px solid #cdd9c1; border-radius: 8px; color: #194832; text-decoration: none; background: #fff; }
.dish-links small { display: block; color: #61705c; font-size: .74rem; }
.local-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.local-grid .listing-card { min-height: 220px; padding: 1.2rem; }
.local-grid h3 { margin: .7rem 0; font: 500 1.3rem/1.2 var(--serif); overflow-wrap: anywhere; }
.local-grid h3 a { text-decoration: none; }
.local-grid p { line-height: 1.6; }
.local-grid .distance { font-size: .78rem; color: #5c6638; }
.data-note { font-size: .8rem; }
.text-action { display: inline-block; padding-block: .5rem; color: #236248; font-weight: 700; }
.empty-town { padding: 1.3rem; background: #eef0e4; border-radius: 12px; }
.article-sidebar { align-self: start; position: sticky; top: 1.5rem; margin-top: 2.5rem; padding: 1.5rem; border: 1px solid #cdd6c5; border-radius: 10px; background: #f0f1e6; }
.article-sidebar h2 { font: 500 2rem/1.1 var(--serif); letter-spacing: -.025em; }
.article-sidebar p { color: #53604e; font-size: .9rem; }
.article-sidebar .eyebrow { font-size: .72rem; }
.sidebar-button { display: block; padding: .8rem 1rem; border-radius: 8px; color: #fff; background: #173c2b; font-size: .85rem; font-weight: 600; text-decoration: none; }
.sidebar-note { padding-top: 1rem; border-top: 1px solid #d2d8c7; }
#preguntas details { border-top: 1px solid #d9dfd2; padding-block: 1rem; }
#preguntas summary { min-height: 32px; cursor: pointer; font-weight: 600; }
.sources { font-size: .87rem; }
.related-towns { padding-block: 4rem; }
.town-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.town-card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border: 1px solid #d7dece; border-radius: 8px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.town-card:hover { border-color: #8ba43a; box-shadow: 0 6px 20px #173c2b0c; }
.town-card .eyebrow { margin-bottom: .8rem; font-size: .7rem; }
.town-card h3 { margin: 0; font: 500 2rem/1.1 var(--serif); letter-spacing: -.02em; }
.town-card h3 a { text-decoration: none; }
.town-card p:not(.eyebrow) { margin-block: .85rem 1.5rem; color: #61705b; font-size: .9rem; }
.town-card-link { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid #e4e8de; color: #236248; font-size: .78rem; font-weight: 700; text-decoration: none; }
.hub-featured { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; padding-block: 4rem; border-bottom: 1px solid #d7dece; }
.featured-links { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.featured-links a { display: grid; grid-template-columns: 1fr 20px; align-content: center; gap: .4rem; padding: 1.1rem; border: 1px solid #d7dece; border-radius: 8px; text-decoration: none; background: #eff0e6; }
.featured-links span { font: 500 1.6rem var(--serif); }
.featured-links small { grid-column: 1; color: #5b694f; font-size: .75rem; }
.featured-links b { grid-column: 2; grid-row: 1; color: #236248; }
.town-index { padding-block: 4rem; }
.index-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: end; margin-bottom: 1.8rem; }
.index-heading h2 { margin-bottom: 0; }
.index-heading > p { color: #65705f; }
.town-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; padding: 1.25rem; margin-bottom: 1.5rem; border: 1px solid #d7dece; border-radius: 8px; background: #eef0e5; }
.town-filters label { flex: 1 1 240px; display: grid; gap: .5rem; color: #45523d; font-size: .82rem; font-weight: 600; }
.town-filters input, .town-filters select { min-width: 0; width: 100%; min-height: 46px; padding: .75rem; border: 1px solid #bbc8ae; border-radius: 5px; background: #fff; color: #18231d; font: inherit; }
.town-filters > p { margin: 0 0 .8rem; font-size: .8rem; color: #536248; }
.hub-method { margin-bottom: 4rem; padding: 2.5rem; border-radius: 10px; color: #fff; background: #173c2b; }
.hub-method .eyebrow { color: #c5d877; }
.hub-method p { max-width: 850px; color: #e1e8d9; }
.hub-method a { display: inline-block; padding-top: 1rem; color: #c5d877; font-weight: 600; }
a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #8ba43a; outline-offset: 4px; }
@media (max-width: 1050px) { .article-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 2rem; } .town-hero { gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 220px; } }
@media (max-width: 800px) { .article-layout { display: block; } .article-sidebar { position: static; margin-bottom: 2rem; } .town-hero { grid-template-columns: minmax(0, 1fr); } .journey-note { display: none; } .town-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hub-featured { gap: 2rem; grid-template-columns: 1fr; } .index-heading { grid-template-columns: 1fr; gap: .5rem; } }
@media (max-width: 520px) { .town-grid, .local-grid, .featured-links { grid-template-columns: minmax(0, 1fr); } .town-hero h1 { font-size: 3rem; } .guide-header nav { gap: .9rem; font-size: .78rem; } .guide-brand { font-size: .93rem; } .town-card { padding: 1.25rem; } .sight { grid-template-columns: 28px 1fr; gap: .6rem; } .hub-method { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .town-card { transition: none; } }

/* Real place photography, stable contrast and independent depth layers. */
.cinematic-hero { position: relative; isolation: isolate; overflow: hidden; clip-path: inset(0); min-height: 650px; padding-inline: max(3rem, calc((100% - 1260px)/2)); perspective: 1400px; transform-style: flat; background: #102e23; }
.hero-landscape { position: absolute; inset: -7% -5% -10%; z-index: 0; pointer-events: none; transform: translate3d(calc(var(--hero-x, 0px) * -.7), calc(var(--hero-scroll, 0px) + var(--hero-y, 0px) * -.6), 0) scale(1.06); }
.hero-landscape img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,25,17,.89) 0%, rgba(5,25,17,.73) 32%, rgba(5,25,17,.3) 68%, rgba(5,25,17,.25)), linear-gradient(0deg, rgba(5,25,17,.8), transparent 60%); pointer-events: none; }
.cinematic-hero .hero-copy { position: relative; z-index: 2; align-self: center; transform: translate3d(calc(var(--hero-x, 0px) * .15), calc(var(--hero-y, 0px) * .15), 24px); }
.cinematic-hero h1 { color: #fff; text-shadow: 0 3px 24px #061a15a0; }
.cinematic-hero h1 em { color: #e0edab; }
.cinematic-hero .town-intro { max-width: 680px; color: #f0f3e9; text-shadow: 0 2px 14px #001108; }
.cinematic-hero .eyebrow { color: #e0edab; text-shadow: 0 2px 8px #001108; }
.cinematic-hero .journey-note { z-index: 2; position: relative; align-self: center; min-height: 340px; padding: 1.75rem; border: 1px solid #f3ffe03d; border-radius: 18px; background: linear-gradient(140deg, #163d2eac, #08261dbb); backdrop-filter: blur(10px); box-shadow: 0 20px 60px #001b1680, inset 0 1px 0 #ffffff26; transform: translate3d(calc(var(--hero-x, 0px) * .65), calc(var(--hero-y, 0px) * .6), 70px) rotateY(var(--hero-angle, 0deg)); }
.cinematic-hero .journey-count { font-size: 7rem; color: #e0edab; text-shadow: 0 8px 20px #001e177a; }
.cinematic-hero .journey-note p { color: #fff; }
.cinematic-hero .journey-note > span:last-child { color: #eef2e5; }
.hero-photo-credit { position: absolute; bottom: 1rem; right: max(1.5rem, calc((100% - 1260px)/2)); z-index: 3; max-width: calc(100% - 3rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .45rem .7rem; border: 1px solid #ffffff29; border-radius: 5px; color: #fff; background: #061c15bd; font-size: .72rem; text-underline-offset: .15rem; }
.town-card-cinematic { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 340px; aspect-ratio: auto; padding: 0; border: 1px solid #1b3d29; border-radius: 12px; color: white; background: #15372b; box-shadow: 0 10px 28px #0c2b1914; }
.town-card-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.town-card-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); transition: transform .65s cubic-bezier(.2,.6,.3,1); }
.town-card-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, #03160ff2 0%, #03160fda 15%, #03160f86 43%, #03160f0d 76%), linear-gradient(180deg, #03160f4d, transparent 50%); }
.town-card-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 3.5rem; height: 100%; min-height: inherit; padding: 1.35rem; }
.town-card-cinematic .eyebrow { align-self: start; max-width: calc(100% - 2.5rem); margin: 0; padding: .4rem .6rem; border: 1px solid #e4f2cd24; border-radius: 4px; color: #eef4d9; background: #0b281ee8; font-size: .66rem; line-height: 1.4; }
.town-card-cinematic h3 { color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.4rem); line-height: 1.05; text-shadow: 0 2px 12px #001a0c; }
.town-card-cinematic h3 a::after { position: absolute; inset: 0; z-index: 3; content: ''; }
.town-card-cinematic p:not(.eyebrow) { margin: .65rem 0 1rem; color: #fff; font-size: .85rem; line-height: 1.5; text-shadow: 0 2px 10px #001a0c; }
.town-card-cinematic .town-card-link { position: relative; z-index: 4; border-top-color: #d8e6ca59; color: #e6f2b9; font-size: .73rem; line-height: 1.4; }
.town-photo-info { position: absolute; z-index: 5; top: .65rem; right: .65rem; display: grid; place-items: center; width: 38px; min-height: 38px; border-radius: 50%; color: #fff; background: #041b13a8; font-size: 1.1rem; text-decoration: none; }
.town-card-cinematic:hover .town-card-photo img, .town-card-cinematic:focus-within .town-card-photo img { transform: scale(1.075); }
.town-card-cinematic:focus-within { outline: 3px solid #7d9c3a; outline-offset: 4px; }
.town-card-cinematic:hover { border-color: #526b37; }
.photo-credits-page { width: min(1260px, calc(100% - 3rem)); margin: 3rem auto 5rem; }
.photo-credits-page > h1 { font: 500 clamp(2.5rem, 5vw, 4rem)/1.1 var(--serif); letter-spacing: -.03em; }
.photo-credits-page > p { max-width: 900px; color: #53614d; }
.photo-credits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.photo-credit-entry { overflow: hidden; border: 1px solid #d4dccb; border-radius: 10px; background: white; scroll-margin-top: 1.5rem; }
.photo-credit-entry > img { width: 100%; height: 230px; object-fit: cover; }
.photo-credit-entry > div { padding: 1.5rem; font-size: .85rem; overflow-wrap: anywhere; }
.photo-credit-entry h2 { margin: 0; font: 500 1.8rem/1.1 var(--serif); }
.photo-credit-entry p { color: #56634f; }
@media (max-width: 1050px) { .cinematic-hero .journey-note { padding: 1.3rem; transform: translate3d(calc(var(--hero-x, 0px) * .5), calc(var(--hero-y, 0px) * .5), 30px); } }
@media (max-width: 800px) { .cinematic-hero { min-height: 590px; padding-inline: 1.5rem; padding-bottom: 4rem; } .cinematic-hero .hero-copy { transform: none; } .hero-scrim { background: linear-gradient(90deg, #051a12ce, #051a1290), linear-gradient(0deg, #041a13cf, transparent 70%); } .hero-photo-credit { right: 1.5rem; } }
@media (max-width: 520px) { .cinematic-hero { min-height: 610px; } .cinematic-hero .hero-copy { max-width: 100%; } .cinematic-hero h1 { font-size: 3.1rem; } .cinematic-hero .town-intro { font-size: 1rem; } .hero-landscape { inset: -2% -35% -4%; transform: none; } .hero-landscape img { object-position: 58% 50% !important; } .town-card-cinematic { min-height: 325px; aspect-ratio: auto; } .town-card-cinematic h3 { font-size: 2.1rem; } .photo-credits-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hero-landscape, .cinematic-hero .hero-copy, .cinematic-hero .journey-note { transform: none !important; } .town-card-photo img { transition: none; transform: none !important; } }

/* The real photograph stays intact; the generated aperitif is a separate alpha layer. */
[data-photo-tone="cinematic"] img { filter: saturate(.88) sepia(.12) contrast(1.055); }
.experience-hero { display: flex; align-items: center; min-height: clamp(680px, 49vw, 780px); padding-block: 4rem 5rem; }
.experience-hero .hero-copy { width: min(530px, 46%); }
.experience-hero h1 { font-size: clamp(3.5rem, 5.2vw, 5.7rem); }
.experience-hero .town-intro { max-width: 470px; font-size: 1.02rem; line-height: 1.8; }
.experience-hero .hero-landscape, .hero-foreground { inset: -3% -2% -4%; }
.experience-hero .hero-landscape { transform: translate3d(calc(var(--hero-x, 0px) * -.7), calc(var(--hero-scroll, 0px) + var(--hero-y, 0px) * -.6), 0) scale(1.02); }
.experience-hero .hero-landscape img { object-position: 60% 100% !important; filter: saturate(.88) sepia(.1) brightness(.98) contrast(1.025); }
.hero-foreground { position: absolute; z-index: 0; pointer-events: none; transform: translate3d(calc(var(--hero-x, 0px) * .3), calc(var(--hero-scroll, 0px) * .7 + var(--hero-y, 0px) * .25), 0) scale(1.02); }
.hero-foreground img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 100%; transform: none; }
.experience-hero .hero-scrim { background: linear-gradient(90deg, #071e18f5 0%, #071e18e0 25%, #071e18b3 39%, #071e183d 58%, #071e1805 78%), linear-gradient(0deg, #071e18a3, transparent 24%); }
.experience-hero .hero-destinations { margin: 1.75rem 0 0; color: #e0edab; font-size: .78rem; letter-spacing: .03em; }
.experience-hero .guide-actions { gap: .8rem; }
.experience-hero .guide-actions a { font-size: .8rem; }
.experience-credit { padding: 1.5rem; margin-top: 2rem; border: 1px solid #d4dccb; border-radius: 10px; background: #f0f1e6; scroll-margin-top: 1.5rem; }
.experience-credit h2 { margin-top: 0; font: 500 1.8rem/1.2 var(--serif); }
.experience-credit p { max-width: 880px; }
@media (min-width: 801px) and (max-width: 1100px) { .experience-hero { min-height: 690px; padding-inline: 2rem; } .experience-hero .hero-copy { width: 49%; } .experience-hero h1 { font-size: 4rem; } }
@media (max-width: 800px) {
  .experience-hero { display: block; min-height: 720px; padding: 2rem 1.5rem 260px; }
  .experience-hero .hero-copy { width: 100%; max-width: 560px; transform: none; }
  .experience-hero h1 { font-size: clamp(2.45rem, 7vw, 3.4rem); }
  .experience-hero .town-intro { max-width: 470px; margin-block: 1.4rem; line-height: 1.7; }
  .experience-hero .hero-landscape, .experience-hero .hero-foreground { inset: auto 0 0; height: 500px; transform: none; }
  .experience-hero .hero-foreground img { transform: none; }
  .experience-hero .hero-landscape img, .experience-hero .hero-foreground img { object-position: 79% 100% !important; }
  .experience-hero .hero-scrim { background: linear-gradient(180deg, #071e18f7 0%, #071e18ed 24%, #071e18b8 42%, #071e1833 62%, #071e180a 82%, #071e186b 100%); }
  .experience-hero .hero-destinations { margin-top: 1.3rem; }
  .experience-hero .hero-photo-credit { right: 1rem; bottom: .8rem; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .experience-hero .hero-landscape, .hero-foreground { transform: none !important; } }