/* ============ VIAJE A GALICIA · estilos ============ */
:root{
  --sand:#f6efe3;
  --sand-2:#efe4d2;
  --ink:#17312e;
  --ink-soft:#4a635f;
  --sea:#0d6e6e;
  --sea-deep:#0a4f56;
  --sun:#f2994a;
  --sun-2:#f6c453;
  --coral:#e2604a;
  --moss:#3f8b5c;
  --line:rgba(23,49,46,.10);
  --card:#fffdf8;
  --shadow:0 10px 30px -14px rgba(10,60,55,.45);
  --r:20px;
  /* tipografías: rótulo de camping + texto cálido.
     Para cambiarlas basta con tocar estas dos variables. */
  --font-display:"Alfa Slab One","Rockwell",Georgia,serif;
  --font-body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--sand);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:-.005em;line-height:1.12}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--sea);text-decoration:none}

/* ---------- shell tipo app ---------- */
.app{
  max-width:520px;margin:0 auto;min-height:100dvh;
  background:var(--sand);
  position:relative;
  box-shadow:0 0 80px rgba(10,60,55,.12);
  padding-bottom:calc(96px + var(--safe-b));
  /* clip en vez de hidden: hidden convierte a .app en contenedor de
     scroll y anula el position:sticky del caminito */
  overflow-x:clip;
}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:0 0 22px}
.hero__scene{display:block;width:100%;height:auto}
.hero__copy{position:absolute;left:22px;right:22px;top:26px;z-index:3}
/* título + badge de la fecha pegado a su esquina inferior derecha */
.hero__head{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.hero__eyebrow{
  display:inline-flex;gap:5px;align-items:center;
  font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
  padding:3px 8px;border-radius:999px;
  margin-bottom:5px;white-space:nowrap;
}
.hero__title{font-size:clamp(23px,6.8vw,33px);line-height:1.08;margin:0;text-shadow:0 3px 20px rgba(6,40,45,.5)}
.hero__sub{
  margin:8px 0 0;font-size:16px;font-weight:600;letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(6,40,45,.65), 0 1px 3px rgba(6,40,45,.8);
}
.hero__stats{display:flex;gap:6px;margin-top:12px;flex-wrap:nowrap}
.chip{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px);
  border-radius:999px;padding:4px 8px;font-size:10px;font-weight:500;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  text-shadow:0 1px 4px rgba(6,40,45,.5);
}

/* animaciones de la escena */
.wave{animation:wave 7s ease-in-out infinite}
.wave--2{animation-duration:9s;animation-delay:-2s}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
.van{animation:van 4.5s ease-in-out infinite}
@keyframes van{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.surfer{animation:surf 5s ease-in-out infinite}
@keyframes surf{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-4px) rotate(-4deg)}}
.gull{animation:gull 9s linear infinite}
.gull--2{animation-duration:13s;animation-delay:-4s}
@keyframes gull{from{transform:translateX(-30px)}to{transform:translateX(420px)}}
@media (prefers-reduced-motion:reduce){.wave,.van,.surfer,.gull{animation:none}}

/* ---------- secciones ---------- */
.section{padding:22px 18px 4px}
.section__title{font-size:19px;display:flex;align-items:center;gap:10px}
.section__hint{font-size:13px;color:var(--ink-soft);margin:6px 0 0}

/* ---------- CAMINITO DE PROGRESO ---------- */
.progress{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,var(--sand) 72%,rgba(246,239,227,0));
  padding:0 0 5px;
  /* la pista se desplaza sola: nada de scroll horizontal del usuario */
  overflow:hidden;
  transition:box-shadow .25s, background .25s;
}
/* cuando se queda pegado arriba se convierte en barra de cristal */
.progress.is-stuck{
  background:rgba(246,239,227,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 24px -18px rgba(10,60,55,.85);
  border-bottom:1px solid var(--line);
}
/* centinela para detectar el enganche */
.progress-sentinel{height:1px;margin:0;padding:0}
.progress::-webkit-scrollbar{display:none}
/* la pista: globos unidos por tramos de carretera */
.track{
  display:inline-flex;align-items:center;padding:26px 16px 2px;
  position:relative;will-change:transform;
}

.stop{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:4px 11px 4px 5px;
  box-shadow:0 3px 10px -6px rgba(10,60,55,.5);
  transition:background .22s,border-color .22s,box-shadow .22s;cursor:pointer;
}
.stop__n{
  width:20px;height:20px;flex:none;border-radius:50%;
  background:var(--sand-2);color:var(--ink-soft);
  display:grid;place-items:center;font-size:11px;font-weight:700;
  transition:background .22s,color .22s;
}
.stop__l{
  font-size:11px;font-weight:600;color:var(--ink-soft);
  white-space:nowrap;transition:color .22s;
}

.stop.is-done{background:#e7f1ee;border-color:rgba(13,110,110,.28)}
.stop.is-done .stop__n{background:var(--sea);color:#fff}
.stop.is-done .stop__l{color:var(--sea-deep)}

.stop.is-active{background:var(--ink);border-color:var(--ink);box-shadow:0 6px 16px -8px rgba(10,60,55,.9)}
.stop.is-active .stop__n{background:var(--sun);color:#3a1e06}
.stop.is-active .stop__l{color:#fff}

.stop.is-alert{border-color:var(--coral)}
.stop.is-alert.is-active{border-color:var(--coral)}

/* tramo de carretera entre globo y globo */
.road{
  flex:none;width:26px;height:7px;position:relative;
  background:rgba(23,49,46,.13);border-radius:99px;margin:0 -3px;transition:background .3s;
}
/* relleno continuo del asfalto: lo escala el JS según el scroll */
.road b{
  position:absolute;inset:0;background:var(--sea);border-radius:99px;
  transform-origin:left center;transform:scaleX(0);
}
.road i{
  position:absolute;left:4px;right:4px;top:50%;height:1.5px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--sand) 0 5px,transparent 5px 11px);
  opacity:.95;z-index:2;
}

/* la furgoneta circula por encima de la carretera */
/* la furgoneta no se mueve: siempre en el centro de la pantalla */
.van-wrap{
  position:absolute;left:50%;top:6px;margin-left:-20px;
  z-index:3;pointer-events:none;
}
.van-wrap svg{display:block;filter:drop-shadow(0 3px 5px rgba(10,60,55,.35))}
.van-wrap .van{animation:van 3.2s ease-in-out infinite}

/* Nada de cambiar tamaños al quedarse fijo: la barra mide siempre
   lo mismo, así el enganche no se nota. */

/* ---------- TIMELINE ---------- */
.timeline{position:relative;padding:8px 18px 10px}
.timeline::before{
  content:"";position:absolute;left:36px;top:26px;bottom:40px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--sea) 0 8px,transparent 8px 16px);
  opacity:.35;
}
.day{position:relative;padding-left:38px;margin-bottom:20px}
.day__dot{
  position:absolute;left:8px;top:22px;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:2px solid var(--sea);display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--sea);z-index:2;
}
.day.is-confirmed .day__dot{background:var(--sea);color:#fff}
.day.is-alert .day__dot{border-color:var(--coral);color:var(--coral);background:var(--card)}

.card{
  background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--line);
}
.card__media{position:relative;aspect-ratio:16/9;background:var(--sea-deep)}
.card__media svg{display:block;width:100%;height:100%}
/* velo inferior para que el título se lea siempre sobre la ilustración */
/* solo un velo suave arriba, para que los distintivos se lean */
.card__media::after{
  content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,20,24,.42),transparent);
}
.card__badges{z-index:2}
.card__badges{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px}
.badge{
  background:rgba(8,40,42,.55);backdrop-filter:blur(8px);color:#fff;
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.2);
}
.badge--ok{background:rgba(13,110,110,.85)}
.badge--warn{background:rgba(226,96,74,.9)}
.card__body{padding:14px 16px 16px}
.card__title{font-size:19px;line-height:1.2;margin:0 0 9px;color:var(--ink)}
.card__route{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
.card__route b{color:var(--ink);font-weight:600}
.card__route .arrow{opacity:.5}
.card__km{margin-left:auto;background:var(--sand-2);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600;color:var(--ink-soft)}
.card__text{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}

.alert{
  margin-top:12px;background:#fdefe9;border:1px solid #f4c7b8;color:#8c3520;
  border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.5;display:flex;gap:8px;
}
.note{
  margin-top:12px;background:#eef6f1;border:1px solid #cfe6d8;color:#2c5c44;
  border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.5;
}

.toggle{
  margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--sand-2);border-radius:12px;padding:9px;font-size:13px;font-weight:600;color:var(--ink-soft);
}
.toggle svg{transition:.25s}
.day.is-open .toggle svg{transform:rotate(180deg)}

.details{display:none;padding-top:14px}
.day.is-open .details{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.hitos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hito{display:grid;grid-template-columns:52px 22px 1fr;gap:8px;align-items:start;padding:8px 0;border-top:1px dashed var(--line)}
.hito__hora{font-size:12px;font-weight:700;color:var(--sea);padding-top:1px}
.hito__ico{font-size:14px;line-height:1.2}
.hito__txt{font-size:13.5px;line-height:1.45}
.hito.is-alert .hito__txt{color:#8c3520;font-weight:600}

.subtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 8px;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{background:var(--sand-2);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:500}

.sleep{display:flex;gap:10px;align-items:flex-start;background:var(--sand-2);border-radius:14px;padding:11px 13px}
.sleep b{display:block;font-size:13.5px}
.sleep span{font-size:12px;color:var(--ink-soft);line-height:1.45}

.mini{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:8px}
.mini b{font-size:13px}
.mini span{display:block;font-size:11.5px;color:var(--ink-soft)}

/* ---------- RESERVAS ---------- */
.res{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.res__head{display:flex;gap:12px;align-items:center;padding:14px 16px}
.res__ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:var(--sand-2);flex:none}
.res__t{flex:1;min-width:0}
.res__t b{display:block;font-size:15px;line-height:1.2}
.res__t span{font-size:12px;color:var(--ink-soft)}
.pill{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;flex:none}
.pill--ok{background:#e2f2e8;color:#2c6b46}
.pill--pendiente{background:#fdf1dc;color:#8a5b13}
.pill--alerta{background:#fdE7e1;color:#a33a22}
.res__grid{padding:0 16px 14px;display:grid;gap:6px}
.res__row{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:13px;border-top:1px dashed var(--line);padding-top:6px}
.res__row dt{color:var(--ink-soft)}
.res__row dd{margin:0;text-align:right;font-weight:600}
.res__nota{margin:0 16px 14px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);background:var(--sand-2);border-radius:12px;padding:10px 12px}

/* ---------- DORMIR ---------- */
.park{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.park__zona{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);font-weight:700}
.park__n{font-size:15px;margin:4px 0 7px;line-height:1.25}
.park__r{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 8px}
.park__c{font-size:12.5px;color:var(--ink-soft)}
.state{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:999px;margin-bottom:8px}
.state--reservable{background:#e2f2e8;color:#2c6b46}
.state--sin-reserva{background:#f0e9dc;color:#7a6644}

/* ---------- TABS ---------- */
.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  max-width:520px;margin:0 auto;
  background:rgba(255,253,248,.86);backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:8px 8px calc(8px + var(--safe-b));
}
.tab{display:grid;justify-items:center;gap:3px;padding:6px 0;border-radius:14px;color:var(--ink-soft);font-size:11px;font-weight:600;transition:.18s}
.tab.is-active{color:var(--sea);background:var(--sand-2)}
.tab__ico{font-size:19px;line-height:1}

.view{display:none}
.view.is-active{display:block;animation:fade .28s ease}

/* ---------- AVISO DE NUEVA VERSIÓN ---------- */
.update{
  position:fixed;left:12px;right:12px;bottom:calc(84px + var(--safe-b));z-index:80;
  max-width:496px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px;
  box-shadow:0 18px 40px -12px rgba(6,40,38,.6);
  transform:translateY(140%);opacity:0;transition:.35s cubic-bezier(.2,.9,.3,1);
}
.update.is-in{transform:none;opacity:1}
.update__txt{flex:1;min-width:0;line-height:1.35}
.update__txt b{display:block;font-size:13.5px}
.update__txt span{font-size:11.5px;opacity:.72;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.update__btn{background:var(--sun);color:#3a1e06;font-size:12.5px;font-weight:700;border-radius:999px;padding:8px 14px;flex:none}
.update__x{opacity:.5;font-size:13px;padding:4px;flex:none}

.foot__v{display:inline-block;margin-top:6px;font-size:10.5px;letter-spacing:.1em;opacity:.7}

.foot{text-align:center;font-size:11.5px;color:var(--ink-soft);padding:26px 20px 8px;opacity:.8}