/* Day trips with Carolina — tours.caroljonsson.com
   Una sola hoja. Paleta de piedra caliza, terracota y palmera; el negro del
   panel de salidas es el único fondo oscuro. Todo el movimiento se apaga con
   prefers-reduced-motion. */

@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/caveat.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --paper: #f3eadb;
  --paper-2: #ebdfca;
  --paper-3: #dccbad;
  --card: #fbf6ec;
  --ink: #1b2433;
  --ink-2: #4a5161;
  --terra: #b5452a;
  --terra-ink: #a03b22;
  --palm: #24453a;
  --sun: #e8a33d;
  --sea: #c9d6d3;
  --line: rgba(27, 36, 51, .16);
  --board: #15171b;
  --flap: #25282e;
  --flap-ink: #f3e7cd;
  --amber: #f4b942;
  --green: #8fd0a0;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 82rem;
  --head-h: 4.25rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.6 var(--f-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
/* El recorte horizontal va en main y no en body: en móvil el overflow de body
   se propaga al viewport y el navegador ensancha la página igualmente. */
main { overflow-x: clip; }
/* Papel: un grano fijo muy leve sobre toda la página. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: var(--grain); opacity: .06; mix-blend-mode: multiply;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--terra); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
em { font-style: italic; }
button { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- Tipografía compartida ---------- */
.kicker {
  display: flex; align-items: center; gap: .78rem;
  font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.kicker-n { color: var(--terra-ink); }
.kicker-n::after { content: ""; display: inline-block; width: 2.2rem; height: 1px; background: currentColor; margin-left: .78rem; vertical-align: middle; }
.sec-head { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec-head h2 {
  margin-top: 1.1rem;
  font: 360 clamp(2.5rem, 1.4rem + 4.6vw, 5.6rem)/.98 var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  letter-spacing: -.025em; max-width: 14ch; text-wrap: balance;
}
.sec-head h2 em, .hero-title em { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--terra); }
.lede { margin-top: 1.4rem; max-width: 34rem; color: var(--ink-2); font-size: 1.12em; text-wrap: pretty; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .7rem 1.35rem; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bg);
  font: 600 .98rem/1.1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { --bg: var(--terra); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .i { transition: transform .35s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn--ghost { --fg: var(--ink); background: transparent; }
.btn--ghost:hover { --bg: var(--ink); background: var(--ink); color: var(--paper); }
.btn--small { min-height: 2.5rem; padding: .45rem 1rem; font-size: .9rem; }
.btn--block { width: 100%; justify-content: flex-start; }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: .15rem; }
.link-arrow:hover { color: var(--terra-ink); }

/* ---------- Cabecera ---------- */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--gutter);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.masthead.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.mark { width: 2.1rem; height: 2.1rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.mark-sun { fill: var(--terra); stroke: none; }
.brand-name { font: 500 1.08rem/1 var(--f-display); font-variation-settings: "opsz" 24; letter-spacing: -.01em; }
.brand-sub { font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-left: .6rem; border-left: 1px solid var(--line); }
.nav { display: flex; gap: 1.6rem; }
.nav a { font-size: .95rem; text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1.5px; background: var(--terra); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a.is-here::after { transform: scaleX(1); transform-origin: left; }
.masthead-end { display: flex; align-items: center; gap: 1rem; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: .2rem; }
.lang a { font: 500 .78rem/1 var(--f-mono); letter-spacing: .08em; text-decoration: none; padding: .45rem .6rem; border-radius: 999px; color: var(--ink-2); }
.lang a[aria-current] { background: var(--ink); color: var(--paper); }
.lang a:not([aria-current]):hover { color: var(--ink); background: var(--paper-2); }
@media (max-width: 1060px) { .nav { display: none; } }
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .masthead .btn--small { display: none; }
  .masthead { gap: .78rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: calc(var(--head-h) + clamp(2rem, 5vw, 4rem)) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.eyebrow { font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hero-title {
  margin: 1.4rem 0 0;
  font: 330 clamp(3.6rem, 1.2rem + 8.4vw, 9.6rem)/.86 var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -.04em;
}
.h1-line { display: block; }
.h1-line--2 { padding-left: .55em; }
.hero-lede { margin-top: 2rem; max-width: 30rem; font-size: 1.16em; color: var(--ink-2); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .78rem; margin-top: 2rem; }
.next-dep {
  margin-top: 2.25rem; display: inline-grid; grid-template-columns: auto auto; column-gap: 1.1rem; row-gap: .3rem; align-items: baseline;
  padding: .95rem 1.25rem; border-radius: 16px; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 18px 40px -26px rgba(27, 36, 51, .45);
  text-decoration: none; transition: transform .4s var(--ease);
}
.next-dep:hover { transform: translateY(-3px); }
@media (max-width: 480px) { .next-dep { grid-template-columns: 1fr; display: grid; } }
.next-dep-label { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.next-dep-what { font: 500 1.12rem/1.2 var(--f-display); font-variation-settings: "opsz" 24; }
.next-dep-count { font: 700 1.5rem/1 var(--f-hand); color: var(--terra-ink); }
.live { width: .55rem; height: .55rem; border-radius: 50%; background: #3f9a5d; box-shadow: 0 0 0 0 rgba(63, 154, 93, .5); }
@media (prefers-reduced-motion: no-preference) { .live { animation: live 2.2s infinite; } }
@keyframes live { 70% { box-shadow: 0 0 0 .55rem rgba(63, 154, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 154, 93, 0); } }

/* El arco: ventana de puerta mediterránea con el vídeo dentro. */
.arch { position: relative; margin: 0; justify-self: center; width: min(100%, 31rem); perspective: 1200px; }
.arch-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 10px 10px; overflow: hidden;
  background: var(--paper-3) url(../video/hero-poster.webp) center / cover;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s var(--ease);
  box-shadow: 0 50px 80px -50px rgba(27, 36, 51, .55);
}
.arch-video { width: 100%; height: 100%; object-fit: cover; }
.grain { position: absolute; inset: -50%; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .grain { animation: grain 1s steps(6) infinite; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 5%); } 40% { transform: translate(6%, -9%); } 60% { transform: translate(-4%, 12%); } 80% { transform: translate(10%, 3%); } }
.arch-outline { position: absolute; inset: -1.1rem -1.1rem auto; aspect-ratio: 4 / 5; height: auto; width: calc(100% + 2.2rem); border: 1px solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .35; pointer-events: none; }
.arch-sun {
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; right: -16%; top: -6%;
  background: radial-gradient(circle at 40% 40%, #f2bc5a, var(--sun) 60%, #dc8a2a); z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .js .arch-sun { animation: sunrise 2.4s .3s var(--ease) both; }
  @keyframes sunrise { from { transform: translateY(45%) scale(.8); opacity: 0; } }
}
.film-toggle {
  position: absolute; z-index: 1; right: .9rem; bottom: .9rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(251, 246, 236, .86); color: var(--ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.film-toggle .i { grid-area: 1 / 1; }
.film-toggle .i-play { fill: currentColor; stroke-width: 1.4; opacity: 0; }
.film-toggle[aria-pressed="true"] .i-play { opacity: 1; }
.film-toggle[aria-pressed="true"] .i-pause { opacity: 0; }
.arch-cap { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.arch-cap-text { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-align: right; }
.hero-note { display: flex; align-items: flex-end; gap: .2rem; font: 700 clamp(1.45rem, 1.1rem + .9vw, 2rem)/1 var(--f-hand); color: var(--terra-ink); transform: rotate(-4deg); white-space: nowrap; margin-left: -.4rem; }
.hero-note svg { width: 2.6rem; flex: none; order: -1; margin-bottom: .55rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1) rotate(-12deg); }
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; font: 500 .78rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.scroll-cue i { width: 1px; height: 2.6rem; background: linear-gradient(var(--ink) 50%, transparent 0) 0 0 / 1px 200%; }
@media (prefers-reduced-motion: no-preference) { .scroll-cue i { animation: cue 2s var(--ease-io) infinite; } }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 3.5rem; padding-bottom: 2.5rem; }
  .arch { width: min(84%, 26rem); }
}
@media (max-width: 1199px), (max-height: 819px) { .scroll-cue { display: none; } }

/* Entrada del hero, palabra a palabra. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise 1.1s var(--ease) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .js .hero-copy > :nth-child(3) { animation-delay: .22s; }
  .js .hero-copy > :nth-child(4) { animation-delay: .3s; }
  .js .hero-copy > :nth-child(5) { animation-delay: .38s; }
  .js .arch-frame { animation: archin 1.5s .1s var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(1.4rem); } }
  @keyframes archin { from { clip-path: inset(100% 0 0 0 round 999px 999px 10px 10px); } to { clip-path: inset(0 0 0 0 round 999px 999px 10px 10px); } }
}

/* ---------- Salidas: panel + mapa ---------- */
.departures { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 7rem); }
.dep-top {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.dep-top .sec-head { padding: 0; margin: 0; }
.dep-board { max-width: calc(var(--max) + 2 * var(--gutter)); margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0 var(--gutter); }
@media (max-width: 1000px) { .dep-top { grid-template-columns: 1fr; } .map { max-width: 34rem; } }

.board {
  --fs: clamp(.8rem, .5rem + .62vw, 1.08rem);
  background: var(--board); color: var(--flap-ink); border-radius: 18px; padding: clamp(1rem, 2.2vw, 1.75rem);
  box-shadow: inset 0 0 0 1px #2b2f36, 0 40px 70px -40px rgba(10, 12, 16, .7);
  font: 400 var(--fs)/1 var(--f-mono);
}
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #2c3037; }
.board-title { font: 600 .85rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.board-title span { color: #8a8f99; font-weight: 400; }
.board-clock { display: flex; align-items: center; gap: .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8f99; }
.board-clock .cell { font-size: 1rem; }
.board-head, .row-link { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; align-items: center; column-gap: 1em; }
/* Cada columna mide lo mismo en la cabecera y en las filas: N fichas. */
.cell, .board-head > span { width: calc(var(--w) * 1.18em - .14em); }
.board-head i { font-style: normal; font-size: .78rem; white-space: nowrap; }
.board-head { padding: 1rem .6rem .6rem; letter-spacing: .14em; text-transform: uppercase; color: #9aa0aa; }
.board-rows { list-style: none; margin: 0; padding: 0; }
.row + .row { border-top: 1px solid #23262c; }
.row-link { padding: .7rem .6rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background-color .25s; }
.row-link:hover, .row-link:focus-visible, .row.is-active .row-link { background: #1e2126; }
.row-link:focus-visible { outline-color: var(--amber); }
.flaps { display: inline-flex; gap: .14em; white-space: nowrap; }
.f {
  position: relative; display: inline-grid; place-items: center; width: 1.04em; height: 1.5em; border-radius: 3px;
  background: linear-gradient(#2a2d34 50%, #23262c 50%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .03);
  font-weight: 500;
}
.f::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.f.is-flip { animation: flip .07s linear; }
@keyframes flip { 50% { transform: scaleY(.15); filter: brightness(1.6); } }
.c-status .f { color: var(--flap-ink); }
.row[data-status="open"] .c-status .f, .row[data-status="today"] .c-status .f { color: var(--green); }
.row[data-status="done"] .c-status .f, .row[data-status="closed"] .c-status .f { color: #9aa0aa; }
.row[data-status="planning"] .c-status .f { color: var(--amber); }
.row[data-status="done"] .c-dest .f, .row[data-status="done"] .c-date .f { color: #9aa0aa; }
.board-clock .f { color: var(--amber); }

@media (max-width: 760px) {
  .board { --fs: clamp(.78rem, 3.1vw, 1rem); }
  .board-head { display: none; }
  .board-title-alt { display: none; }
  .row-link { justify-content: start; }
  .row-link { grid-template-columns: auto auto auto; grid-template-areas: "dest dest dest" "date time price" "status status status"; row-gap: .45em; justify-items: start; }
  .row-link .c-dest { grid-area: dest; }
  .row-link .c-date { grid-area: date; }
  .row-link .c-time { grid-area: time; }
  .row-link .c-price { grid-area: price; }
  .row-link .c-status { grid-area: status; }
}

/* Mapa */
.map { margin: 0; }
.map svg { width: 100%; height: auto; border-radius: 18px; overflow: hidden; background: var(--sea); }
.sea { fill: #cfdcd8; }
.sea-hatch { stroke: rgba(27, 36, 51, .06); stroke-width: 1; }
.land { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.island { fill: var(--paper-2); stroke: var(--ink); stroke-width: .9; }
.sea-label { font: italic 400 15px var(--f-display); fill: rgba(27, 36, 51, .45); letter-spacing: .08em; }
.route { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: .012 .012; opacity: .3; transition: opacity .3s, stroke .3s, stroke-width .3s; stroke-linecap: round; }
.route--valencia { stroke-dasharray: .03 .03; }
.map[data-active] .route[data-trip] { opacity: .14; }
.map[data-active="elche"] .route--elche, .map[data-active="rojales"] .route--rojales, .map[data-active="valencia"] .route--valencia {
  opacity: 1; stroke: var(--terra); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .route { animation: none !important; stroke-dashoffset: 0 !important; } }
.pin text { font: 500 12px var(--f-body); fill: var(--ink); paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; stroke-linejoin: round; }
.pin--town circle { fill: var(--ink); }
.pin--town text { font-size: 10.5px; fill: var(--ink-2); }
.pin--tour circle { fill: var(--card); stroke: var(--terra); stroke-width: 2.4; transition: r .3s; }
.pin--tour text { font: 600 14px var(--f-display); }
.map[data-active="elche"] .pin--tour[data-trip="elche"] circle, .map[data-active="rojales"] .pin--tour[data-trip="rojales"] circle { fill: var(--terra); }
.pin--home circle { fill: var(--terra); stroke: var(--card); stroke-width: 2.5; }
.pin--home text { font: 700 15px var(--f-display); }
.valencia-arrow path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.valencia-arrow text { font: italic 500 13px var(--f-display); fill: var(--ink); }
.map[data-active="valencia"] .valencia-arrow path { stroke: var(--terra); }
.map-note { font: 700 15px var(--f-hand); fill: var(--terra-ink); opacity: 0; transition: opacity .3s; }
.map[data-active="rojales"] .map-note { opacity: 1; }
.map figcaption { margin-top: .8rem; font-size: .88rem; color: var(--ink-2); }

/* ---------- Capítulos de excursión ---------- */
.tour {
  --p: 0;
  position: relative; padding: clamp(5rem, 10vw, 9rem) 0;
  /* El papel se va calentando del sol de la mañana al de la tarde. */
  background: color-mix(in oklab, #f6eedf calc((1 - var(--p)) * 100%), #f1dfc6);
}
.tour--rojales { background: color-mix(in oklab, #efe6d6 calc((1 - var(--p)) * 100%), #ecd8c0); }
.tour-head {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "kick kick" "title feature" "tag feature" "intro feature"; column-gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.tour-head .kicker { grid-area: kick; }
.tour-title { grid-area: title; margin-top: 1rem; }
.tour-word {
  display: inline-block; font: 600 clamp(6rem, 1rem + 21vw, 15.5rem)/.8 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  letter-spacing: -.055em; color: var(--ink); padding: .04em .06em .08em 0;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tour-word {
    color: transparent; -webkit-background-clip: text; background-clip: text;
    background-size: cover; background-position: 50% var(--py, 50%);
    filter: saturate(1.1) contrast(1.15) brightness(.82);
    -webkit-text-stroke: 1px rgba(27, 36, 51, .22);
  }
}
.tour-tagline { grid-area: tag; margin-top: 1.4rem; font: italic 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem)/1.15 var(--f-display); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; color: var(--terra-ink); }
.tour-intro { grid-area: intro; margin-top: 1.2rem; max-width: 38rem; color: var(--ink-2); font-size: 1.08em; text-wrap: pretty; }
.tour-feature { grid-area: feature; margin: 0; align-self: stretch; display: flex; align-items: flex-end; }
.tour-feature img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 8px 8px; box-shadow: 0 40px 60px -40px rgba(27, 36, 51, .6); }
.tour--elche .tour-feature img { object-position: 50% 30%; background: #241a1c; }
/* Tableta: la imagen al lado del texto, no debajo con un hueco a la izquierda. */
@media (max-width: 900px) {
  .tour-head { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); grid-template-areas: "kick kick" "title title" "tag feature" "intro feature"; column-gap: 2rem; align-items: start; }
  .tour-feature { margin-top: 1.6rem; align-self: start; }
}
@media (max-width: 600px) {
  .tour-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "tag" "feature" "intro"; }
  .tour-feature { margin: 2rem 0 0 auto; max-width: min(19rem, 78%); }
}

.tour-body {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: clamp(3.5rem, 7vw, 6rem) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
@media (max-width: 960px) { .tour-body { grid-template-columns: minmax(0, 1fr); } .ticket { order: -1; max-width: 34rem; } }

/* La ruta del día: un raíl con el sol que avanza de la salida a la vuelta. */
.day { position: relative; padding-left: clamp(3.2rem, 7vw, 5rem); }
.day-label { font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2rem; }
.rail { position: absolute; left: clamp(1rem, 2.6vw, 1.9rem); top: .9rem; bottom: 1.4rem; width: 2px; }
.rail-track { position: absolute; inset: 0; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 12px); opacity: .25; }
.rail-fill { position: absolute; inset: 0; background: var(--terra); transform-origin: top; transform: scaleY(var(--p, 0)); }
.rail-sun {
  position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f6c868, var(--sun) 65%, #d7832a);
  box-shadow: 0 0 0 .4rem rgba(232, 163, 61, .18), 0 0 1.6rem .4rem rgba(232, 163, 61, .45);
}
.rail-cap { display: flex; align-items: baseline; gap: .6rem; font-size: .9rem; color: var(--ink-2); }
.rail-cap b { font: 600 .82rem/1 var(--f-mono); color: var(--ink); background: var(--card); border-radius: 999px; padding: .35rem .6rem; box-shadow: 0 0 0 1px var(--line); }
.rail-cap--start { margin-bottom: 2.5rem; }
.rail-cap--end { margin-top: 1rem; }
.stops { list-style: none; margin: 0; padding: 0; }
.stop { position: relative; padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.stop::before {
  content: ""; position: absolute; left: calc(-1 * clamp(3.2rem, 7vw, 5rem) + clamp(1rem, 2.6vw, 1.9rem) + 1px); top: .45rem;
  width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); transition: background-color .4s, border-color .4s, transform .4s var(--ease);
}
.stop.is-passed::before { background: var(--terra); border-color: var(--terra); transform: scale(1.15); }
.stop-n { font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-ink); }
.stop-title { margin-top: .8rem; font: 450 clamp(1.8rem, 1.2rem + 2vw, 2.9rem)/1.02 var(--f-display); font-variation-settings: "opsz" 96, "SOFT" 50; letter-spacing: -.02em; }
.stop-sub { display: block; margin-top: .3rem; font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.7rem)/1 var(--f-hand); color: var(--terra-ink); letter-spacing: 0; }
.stop-text { margin-top: 1rem; max-width: 36rem; text-wrap: pretty; }
.stop-photos { position: relative; margin-top: 2rem; display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; }
.ph { margin: 0; }
.ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 50px -35px rgba(27, 36, 51, .65); }
.stop-photos--2 .ph--1 { margin: 4.5rem 0 0 -2.5rem; position: relative; z-index: 1; }
.stop-photos--2 .ph--1 img { border: .5rem solid var(--card); border-radius: 4px; rotate: 2.2deg; }
.stop-photos--1 { grid-template-columns: minmax(0, 27.5rem); }
.stop-photos--1 .ph img { aspect-ratio: auto; }
.stop-photos--1 .ph img { border: .55rem solid var(--card); rotate: -1.2deg; }
@media (max-width: 560px) { .stop-photos--2 .ph--1 { margin: 3rem 0 0 -1.5rem; } }

/* Billete */
.ticket {
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(27, 36, 51, .12)) drop-shadow(0 28px 34px rgba(27, 36, 51, .16));
  font-size: .95rem;
}
/* Muescas de verdad (transparentes) donde se corta el billete: máscara en
   cada mitad, y la sombra con drop-shadow para que siga la forma. */
/* (Después de la regla base, o la pisa.) Fijo al hacer scroll solo si cabe entero en la pantalla. */
@media (min-width: 961px) and (min-height: 860px) { .ticket { position: sticky; top: calc(var(--head-h) + 1.5rem); } }
.ticket-main, .ticket-stub { background: var(--card); --n: .8rem; }
.ticket-main {
  border-radius: 18px 18px 0 0;
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 100% no-repeat;
}
.ticket-stub {
  border-radius: 0 0 18px 18px;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + .5px)) 100% 0 / 51% 100% no-repeat;
}
.ticket-main { position: relative; padding: 1.6rem 1.6rem 1.4rem; }
.ticket-kind { font: 600 .78rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink); }
.ticket-fields { margin: 1.2rem 0 0; display: grid; gap: .9rem; }
.ticket-main { container-type: inline-size; }
.ticket-fields div { display: grid; grid-template-columns: max-content 1fr; gap: .9rem; align-items: baseline; }
.ticket-fields { grid-template-columns: max-content 1fr; }
.ticket-fields div { grid-column: 1 / -1; grid-template-columns: subgrid; }
@container (max-width: 20rem) { .ticket-fields { grid-template-columns: 1fr; } .ticket-fields div { grid-template-columns: 1fr; gap: .15rem; } }
.ticket-fields dt { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ticket-fields dd { margin: 0; line-height: 1.4; }
.ticket-fields b { font-weight: 700; }
.price { font: 500 2.2rem/1 var(--f-display) !important; font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.ticket-stub { position: relative; padding: 1.4rem 1.6rem 1.6rem; }
.ticket-stub::before { content: ""; position: absolute; top: 0; left: 1.2rem; right: 1.2rem; border-top: 2px dashed var(--paper-3); }
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.ticket-count { font: 700 1.9rem/1 var(--f-hand); color: var(--terra-ink); }
.ticket-how-title { margin-top: 1.1rem; font: 600 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ticket-how { margin-top: .55rem; font-size: .92rem; line-height: 1.55; }
.ticket-actions { display: grid; gap: .55rem; margin-top: 1.2rem; }
.ticket-actions .btn { min-height: 2.9rem; font-size: .93rem; }
.when-done { display: none; }
.when-done p { margin: .8rem 0 1.2rem; font-size: .95rem; }
.ticket-stamp {
  display: none; flex: none; margin: -.2rem -.2rem 0 0; padding: .45rem .7rem; text-align: center; line-height: 1.25 !important; border: 2.5px solid var(--terra); border-radius: 6px;
  font: 700 .82rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra); transform: rotate(-11deg); opacity: .85; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3.5px var(--terra);
}
[data-status="done"] .ticket-stamp { display: block; }
[data-status="done"] .when-open { display: none; }
[data-status="done"] .when-done { display: block; }
[data-status="done"] .ticket-fields { opacity: .62; }
[data-status="closed"] .ticket-actions .btn:first-child { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-status="done"] .ticket.in .ticket-stamp { animation: stamp .5s .2s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes stamp { from { transform: rotate(-11deg) scale(2.2); opacity: 0; } }
}

/* ---------- Próximamente ---------- */
.coming {
  padding: clamp(5rem, 10vw, 9rem) 0;
  background:
    linear-gradient(rgba(27, 36, 51, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(27, 36, 51, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper);
}
.coming-grid { max-width: calc(var(--max) + 2 * var(--gutter)); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .coming-grid { grid-template-columns: 1fr; } }
.sketch {
  position: relative; padding: clamp(1.75rem, 3.5vw, 2.75rem); border-radius: 4px;
  background: rgba(251, 246, 236, .9); box-shadow: 0 1px 0 rgba(27, 36, 51, .06), 0 24px 40px -32px rgba(27, 36, 51, .45);
  rotate: -.6deg;
}
.sketch + .sketch { rotate: .8deg; }
.sketch::after { content: ""; position: absolute; inset: .7rem; border: 1.5px dashed rgba(27, 36, 51, .28); border-radius: 2px; pointer-events: none; }
/* Cinta de carrocero sujetando el boceto. */
.sketch::before {
  content: ""; position: absolute; top: -.78rem; left: 50%; width: 6.5rem; height: 1.6rem; translate: -50% 0; rotate: -4deg; z-index: 1;
  background: rgba(232, 196, 120, .55); box-shadow: 0 1px 2px rgba(27, 36, 51, .1);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0);
}
.sketch + .sketch::before { rotate: 5deg; left: 40%; }
.sketch-art { width: 100%; height: clamp(9rem, 16vw, 13rem); margin: 0 auto; stroke: #4e535d; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sketch-art .faint { stroke-width: 1; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .js .sketch .sketch-art :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .sketch.in .sketch-art :is(path, circle) { animation: draw 1.8s var(--ease-io) forwards; }
  .js .sketch.in .sketch-art :is(path, circle):nth-child(2n) { animation-delay: .2s; }
  .js .sketch.in .sketch-art :is(path, circle):nth-child(3n) { animation-delay: .4s; }
}
.sketch-when { margin-top: 1.4rem; display: inline-block; font: 700 1.7rem/1 var(--f-hand); color: var(--terra-ink); transform: rotate(-3deg); }
.sketch-title { margin-top: .6rem; font: 400 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -.025em; }
.sketch-line { margin-top: .6rem; color: var(--ink-2); }
.sketch-tbc { margin-top: 1.2rem; display: inline-block; font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border: 1px dashed rgba(27, 36, 51, .4); padding: .45rem .78rem; border-radius: 4px; }
.btn--pencil { display: flex; width: fit-content; margin-top: 1.6rem; --bg: transparent; --fg: var(--ink); border-color: var(--ink); border-style: dashed; }
.btn--pencil:hover { --bg: var(--ink); --fg: var(--paper); border-style: solid; }

/* ---------- Anfitriona ---------- */
.host {
  position: relative; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: auto minmax(0, 40rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; justify-content: center;
}
.host-photo { margin: 0; }
.host-photo img { width: clamp(9rem, 16vw, 12.5rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 .5rem var(--card), 0 0 0 calc(.5rem + 1px) var(--line), 0 30px 50px -30px rgba(27, 36, 51, .6); }
.host-name { margin: .9rem 0 .8rem; font: 400 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -.02em; }
.host-langs { list-style: none; display: flex; gap: .4rem; margin: 1.2rem 0; padding: 0; }
.host-langs li { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; padding: .45rem .55rem; border-radius: 999px; border: 1px solid var(--line); }
.host-sign { position: absolute; right: var(--gutter); bottom: 0; font: 700 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--f-hand); color: var(--terra); opacity: .2; transform: rotate(-6deg); pointer-events: none; }
@media (max-width: 700px) { .host { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Postal ---------- */
.post { padding: clamp(4rem, 8vw, 7rem) 0 clamp(6rem, 10vw, 9rem); }
.postcard {
  position: relative; max-width: 68rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--card); border-radius: 10px;
  box-shadow: 0 1px 0 rgba(27, 36, 51, .08), 0 60px 90px -60px rgba(27, 36, 51, .55);
}
.post .postcard { margin-left: max(var(--gutter), calc((100% - var(--max)) / 2)); margin-right: var(--gutter); }
.pc-side { padding: clamp(1.5rem, 3.5vw, 3rem); }
.pc-left { border-right: 1.5px solid var(--paper-3); }
.stamps { border: 0; margin: 0; padding: 0; min-width: 0; }
.stamps legend { padding: 0; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-display); font-variation-settings: "opsz" 72, "SOFT" 60; }
.stamps legend span { display: block; margin-top: .4rem; font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.stamp-grid { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.stamp { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stamp input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stamp-face {
  --perf: var(--card);
  position: relative; display: grid; gap: .25rem; padding: .7rem .7rem .8rem; background: #fff;
  box-shadow: 0 1px 2px rgba(27, 36, 51, .18); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, filter .3s;
  filter: saturate(.35); rotate: var(--tilt, 0deg);
}
.stamp:nth-child(1) .stamp-face { --tilt: -1.5deg; }
.stamp:nth-child(2) .stamp-face { --tilt: 1.2deg; }
.stamp:nth-child(3) .stamp-face { --tilt: .8deg; }
.stamp:nth-child(4) .stamp-face { --tilt: -1deg; }
/* Dentado: semicírculos del color de la postal sobre el borde. */
.stamp-face::before {
  content: ""; position: absolute; inset: -4px; pointer-events: none;
  background:
    radial-gradient(circle, var(--perf) 3.4px, transparent 4px) 0 0 / 12px 8px repeat-x,
    radial-gradient(circle, var(--perf) 3.4px, transparent 4px) 0 100% / 12px 8px repeat-x,
    radial-gradient(circle, var(--perf) 3.4px, transparent 4px) 0 0 / 8px 12px repeat-y,
    radial-gradient(circle, var(--perf) 3.4px, transparent 4px) 100% 0 / 8px 12px repeat-y;
}
.stamp-img img, .stamp-art svg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stamp-art { display: grid; place-items: center; background: #f6efe2; aspect-ratio: 4 / 3; overflow: hidden; }
.stamp-art .sketch-art { width: 92%; stroke: #4e535d; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stamp-art .faint { opacity: .5; }
.stamp-name { margin-top: .35rem; font: 500 1.15rem/1 var(--f-display); font-variation-settings: "opsz" 36; }
.stamp-when { font: 500 .78rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.stamp-mark {
  position: absolute; right: -.9rem; top: -.9rem; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  border: 2px solid var(--terra); opacity: 0; transform: scale(1.8) rotate(-30deg); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
  background:
    radial-gradient(circle, transparent 58%, var(--terra) 59% 62%, transparent 63%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5452a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 46% no-repeat;
  mix-blend-mode: multiply;
}
.stamp:hover .stamp-face { transform: translateY(-3px); filter: saturate(.7); }
.stamp input:checked + .stamp-face { filter: none; transform: translateY(-5px) rotate(calc(var(--tilt) * -1.6)); box-shadow: 0 16px 26px -16px rgba(27, 36, 51, .6), 0 0 0 2px var(--terra); }
.stamp input:checked + .stamp-face .stamp-mark { opacity: .9; transform: none; }
.stamp input:focus-visible + .stamp-face { outline: 2px solid var(--terra); outline-offset: 6px; }
.stamp.is-flash .stamp-face { animation: flash .9s var(--ease); }
@keyframes flash { 30% { transform: translateY(-10px) scale(1.04); } }

.pc-right { position: relative; display: flex; flex-direction: column; }
.pc-postmark {
  align-self: flex-end; width: 6.6rem; height: 6.6rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: .8rem;
  border: 1.5px solid rgba(27, 36, 51, .4); color: rgba(27, 36, 51, .55); rotate: 10deg;
  font: 500 .62rem/1 var(--f-mono); letter-spacing: .14em; text-align: center;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(27, 36, 51, .22) 9px 10.5px) -5.2rem 50% / 5rem 60% no-repeat;
}
.pc-to { font: 700 1.55rem/1.25 var(--f-hand); color: var(--ink); border-bottom: 1.5px solid var(--paper-3); padding-bottom: .9rem; }
.pc-to span { font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); vertical-align: middle; margin-right: .3rem; }
.pc-field { margin-top: 1.5rem; font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pc-input {
  margin-top: .5rem; width: 100%; padding: .55rem 0 .5rem; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent;
  font: 700 1.7rem/1.2 var(--f-hand); color: var(--ink); outline: none; transition: border-color .25s;
}
.pc-input::placeholder { color: rgba(27, 36, 51, .35); }
.pc-input:focus { border-bottom-color: var(--terra); box-shadow: 0 1.5px 0 var(--terra); }
.pc-input[aria-invalid="true"] { border-bottom-color: var(--terra); }
.pc-consent { margin-top: .9rem; padding-block: .5rem; min-height: 2.75rem; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.pc-consent input { width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; accent-color: var(--terra); cursor: pointer; }
.pc-privacy { margin: .4rem 0 0 2rem; font-size: .88rem; }
.field-error { min-height: 0; color: var(--terra-ink); font-size: .88rem; font-weight: 600; }
.field-error:not(:empty) { margin-top: .5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn--post { margin-top: 1.6rem; align-self: flex-start; --bg: var(--terra); min-height: 3.3rem; padding-inline: 1.7rem; }
.btn--post:hover { --bg: var(--ink); }
.btn--post[disabled] { opacity: .7; cursor: progress; }
.form-status { margin-top: .9rem; font-size: .92rem; color: var(--terra-ink); font-weight: 600; }
.form-fallback { margin-top: .5rem; font-size: .92rem; font-weight: 600; }
.pc-done {
  position: absolute; inset: 0; z-index: 2; border-radius: 10px; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 2.5rem;
}
.pc-done[hidden] { display: none; }
.pc-done h3 { font: 400 clamp(2.6rem, 2rem + 3vw, 4.6rem)/1 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-style: italic; color: var(--terra); }
.pc-done p { max-width: 30rem; }
.pc-done-mark {
  width: 8.5rem; height: 8.5rem; border-radius: 50%; display: grid; place-items: center; rotate: -14deg;
  border: 3px double var(--terra); color: var(--terra); font: 700 .78rem/1 var(--f-mono); letter-spacing: .16em; mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
  .pc-done:not([hidden]) .pc-done-mark { animation: thump .6s cubic-bezier(.3, 1.6, .5, 1) both; }
  .pc-done:not([hidden]) h3 { animation: rise .8s .25s var(--ease) both; }
  @keyframes thump { from { transform: scale(2.4); opacity: 0; } }
}
@media (max-width: 860px) {
  .postcard { grid-template-columns: 1fr; }
  .pc-left { border-right: 0; border-bottom: 1.5px solid var(--paper-3); }
  .pc-postmark { position: absolute; right: 1.2rem; top: 1.2rem; width: 5rem; height: 5rem; margin: 0; }
  .pc-to { padding-right: 5.5rem; }
}
@media (max-width: 420px) { .stamp-grid { gap: .8rem; } .stamp-face { padding: .5rem .5rem .6rem; } .stamp-name { font-size: 1rem; } }

/* ---------- Pie ---------- */
.foot { position: relative; background: var(--ink); color: #e9e1d2; padding: clamp(4rem, 8vw, 6rem) var(--gutter) 2rem; overflow: hidden; }
.foot a { color: inherit; }
.foot-sign { padding-bottom: .3em; font: 700 clamp(3.4rem, 1.5rem + 9vw, 10rem)/.9 var(--f-hand); color: var(--sun); transform: rotate(-3deg); max-width: var(--max); margin: 0 auto; }
.foot-cols { max-width: var(--max); margin: 3rem auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.foot-cols > div { max-width: 36rem; display: grid; gap: .6rem; font-size: .95rem; color: #c9c1b3; }
.foot-line { font: 500 1.15rem/1.3 var(--f-display); color: #f3eadb; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-content: flex-start; font-size: .95rem; }
.foot-nav a { text-decoration: none; border-bottom: 1px solid rgba(233, 225, 210, .3); padding-bottom: .1rem; }
.foot-nav a:hover { border-color: var(--sun); color: #fff; }
.foot-small { max-width: var(--max); margin: 3rem auto 0; font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; color: #8f8a80; }

/* ---------- Privacidad ---------- */
.privacy { width: min(40rem, calc(100% - 2rem)); max-height: min(85vh, 50rem); padding: 0; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6); }
.privacy::backdrop { background: rgba(27, 36, 51, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.privacy-inner { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: .9rem; font-size: .95rem; }
.privacy h2 { font: 400 1.9rem/1.1 var(--f-display); font-variation-settings: "opsz" 72; margin-bottom: .4rem; }
.privacy form { margin-top: .8rem; }
/* Sin JavaScript no hay showModal: el texto se ve en línea, al final. */
.no-js .privacy { display: block; position: static; width: auto; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
.no-js .privacy form { display: none; }

/* ---------- Revelado al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .ph[data-reveal] { transform: translateY(3rem) rotate(1deg); clip-path: inset(12% 0 0 0); transition: opacity 1s var(--ease), transform 1.2s var(--ease), clip-path 1.2s var(--ease); }
  .js .ph[data-reveal].in { transform: none; clip-path: inset(0 0 0 0); }
  .js .stop-photos .ph--1[data-reveal] { transition-delay: .12s; }
}

/* ---------- 404 ---------- */
.page-404 { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.nf { max-width: 34rem; display: grid; gap: 1rem; justify-items: start; }
.nf .mark { width: 3.4rem; height: 3.4rem; }
.nf h1 { font: 400 clamp(3rem, 2rem + 5vw, 6rem)/.95 var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 60; letter-spacing: -.03em; }
.nf h1 em { color: var(--terra); }
.nf-links { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print {
  .masthead, .arch, .scroll-cue, .board, .map, .post, .foot-sign, body::before { display: none !important; }
  .tour { background: none; }
  .ticket { position: static; box-shadow: none; border: 1px solid #999; }
}

.nowrap { white-space: nowrap; }

/* ---------- Ruta del día plegable (las excursiones ya hechas) ---------- */
.day-wrap > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .5rem 1.5rem; margin-bottom: 2rem; padding-left: clamp(3.2rem, 7vw, 5rem); }
.day-wrap > summary::-webkit-details-marker { display: none; }
.day-wrap .day-label { margin: 0; display: block; }
.day-wrap:not(details) > .day-label { padding-left: clamp(3.2rem, 7vw, 5rem); }
.day-toggle { display: none; font: 600 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--terra-ink); border-bottom: 1.5px solid currentColor; padding-bottom: .2rem; }
.day-toggle::after { content: " ↓"; content: " ↓" / ""; }
.day-wrap[open] .day-toggle::after { content: " ↑"; content: " ↑" / ""; }
.day-thumbs { display: none; }
.day-wrap:not([open]) .day-thumbs { display: flex; flex-basis: 100%; gap: 1rem; margin-top: 1.6rem; }
.day-thumbs img { width: min(31%, 13rem); aspect-ratio: 4 / 3; object-fit: cover; border: .4rem solid var(--card); box-shadow: 0 16px 26px -18px rgba(27, 36, 51, .6); rotate: -2deg; transition: rotate .4s var(--ease), transform .4s var(--ease); }
.day-thumbs img:nth-child(2) { rotate: 1.5deg; transform: translateY(.6rem); }
.day-thumbs img:nth-child(3) { rotate: -1deg; }
.day-wrap > summary:hover .day-thumbs img { rotate: 0deg; transform: translateY(-4px); }
.day-wrap[open] .when-closed, .day-wrap:not([open]) .when-opened { display: none; }
[data-status="done"] .day-toggle { display: inline-block; }
[data-status="done"] .day-wrap > summary { cursor: pointer; }
.tour:not([data-status="done"]) .day-wrap > summary { pointer-events: none; }
.day-wrap .day { padding-top: 0; }

/* ---------- Barra rápida en móvil ---------- */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    position: fixed; z-index: 60; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .5rem .5rem 1rem;
    background: var(--ink); color: var(--paper); border-radius: 999px; box-shadow: 0 18px 40px -16px rgba(10, 12, 16, .6);
    transform: translateY(calc(100% + 1.5rem)); transition: transform .5s var(--ease);
  }
  .dock.is-on { transform: none; }
  .dock-next { display: grid; gap: .15rem; text-decoration: none; min-width: 0; }
  .dock-label { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #b9b2a5; }
  .dock-what { font: 500 1rem/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock .btn { --bg: var(--terra); flex: none; }
}
.next-dep.is-planning .live { background: var(--sun); animation: none; }

/* Sin JavaScript: sin botón propio (el navegador pone sus controles), el arco
   recortado igual y la cabecera opaca, que no se transparente el contenido. */
.no-js .film-toggle { display: none; }
.no-js .masthead { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.arch-frame { clip-path: inset(0 round 999px 999px 10px 10px); }
@media (max-width: 340px) {
  .dock-label { display: none; }
  .day-wrap:not([open]) .day-thumbs { gap: .5rem; }
  .day-thumbs img { width: 30%; border-width: .25rem; }
}

/* ---------- Móvil: objetivos táctiles de 44 px y la barra en pantallas mínimas ---------- */
@media (max-width: 760px), (pointer: coarse) {
  .lang a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; justify-content: center; }
  .brand { min-height: 2.75rem; }
  .foot-nav { gap: 0 1.25rem; }
  .foot-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(233, 225, 210, .35); text-underline-offset: .25em; }
  .link-arrow { min-height: 2.75rem; }
  .dock-next { min-height: 2.75rem; align-content: center; }
}
@media (max-width: 360px) {
  .dock { gap: .5rem; padding-left: .85rem; }
  .dock-what { font-size: .9rem; }
  .dock .btn { font-size: .82rem; padding-inline: .8rem; }
}

/* ---------- Orden en móvil y tableta ---------- */
@media (max-width: 900px) {
  /* Hero: el vídeo justo después del título, no tras todo el texto. */
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero-title { order: 2; }
  .arch { order: 3; margin: 2.75rem auto 0; width: min(76%, 24rem); }
  .hero-lede { order: 4; margin-top: 2.25rem; }
  .hero-actions { order: 5; }
  .next-dep { order: 6; align-self: flex-start; }
  .hero-actions .btn { padding-inline: 1.15rem; }
  .host-sign { display: none; }
}
@media (max-width: 1000px) {
  /* Salidas: cabecera, panel y luego el mapa (el panel es lo que se lee). */
  .departures { display: flex; flex-direction: column; }
  .dep-top { display: contents; }
  .dep-top .sec-head { order: 1; padding: 0 var(--gutter); width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
  .dep-board { order: 2; width: 100%; }
  .map { order: 3; width: 100%; max-width: calc(34rem + 2 * var(--gutter)); padding: 0 var(--gutter); margin: 2.5rem 0 0; }
}
.day-wrap:not([open]) > summary { padding-left: 0; }
.day-wrap:not(details) > .day-label { margin-bottom: 1.4rem; }
@media (max-width: 900px) {
  /* Pie del arco: la nota a mano y el rótulo, cada uno en su línea si no caben. */
  .arch-cap { flex-wrap: wrap; row-gap: .4rem; }
  .arch-cap-text { flex: 1 1 10rem; }
}
/* Móvil en horizontal: el arco tiene que caber en el alto de la pantalla. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .arch { width: min(76%, 24rem, 58vh); }
}
.brand-name { white-space: nowrap; }
@media (max-width: 360px) { .brand-name { font-size: .98rem; } .mark { width: 1.85rem; height: 1.85rem; } }