/* ============================================================
   Guía de viaje — hoja de estilos
   Estilo "claro y limpio": fondo casi blanco, mucho aire,
   un solo acento (teal). Títulos en serif editorial, cuerpo en sans.
   ============================================================ */
:root{
  color-scheme: light;   /* estética museo siempre en claro, ignora el modo del sistema */
  /* paredes de galería: blanco hueso, tinta carbón, un acento contenido */
  --bg:#f4f2ec; --surface:#fbfaf6; --fg:#1c1c1a; --muted:#75726b;
  --line:#e3e0d7; --line-strong:#cfccc1;
  --accent:#33655f; --accent-2:#244a45; --accent-fg:#fbfaf6; --accent-soft:#e8eeec;
  --ink-soft:#3c3b37;
  /* paleta de cartelas: cada modo/sección tiene su color, como las salas de un museo */
  --c-gps:#2f857c;    /* verde-teal — ¿dónde estoy? */
  --c-photo:#c75c43;  /* terracota — ¿qué es esto? */
  --c-place:#3f6cae;  /* azul — escríbelo */
  --c-gold:#c2922e;   /* dorado de acento ocasional */
  --warn-bg:#f6efdd; --warn-fg:#7a5b1f; --warn-line:#e6d6ad;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  /* museo con cuerpo: elevación suave para que las piezas "floten" sobre la pared */
  --shadow-sm:0 1px 2px rgba(28,28,24,.05), 0 8px 20px -14px rgba(28,28,24,.35);
  --shadow-md:0 2px 6px rgba(28,28,24,.07), 0 20px 42px -22px rgba(28,28,24,.5);
  --radius:13px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:var(--sans); margin:0; color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* pared con luz: teñido teal muy tenue en las esquinas + grano fino para que no sea plano */
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 8% -4%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 50%),
    radial-gradient(circle at 102% 2%, color-mix(in srgb,var(--accent) 6%,transparent), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-attachment:fixed;
}
::selection{ background:color-mix(in srgb,var(--accent) 26%,transparent); }

.loadbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; overflow:hidden; opacity:0; transition:opacity .25s; pointer-events:none; }
body.loading .loadbar{ opacity:1; }
.loadbar::before{ content:""; position:absolute; top:0; bottom:0; width:38%; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:slide 1.1s ease-in-out infinite; }
@keyframes slide{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } }
@keyframes fade{ from{ opacity:0; } }

.wrap{
  max-width:560px; margin:0 auto; min-height:100%;
  padding:calc(env(safe-area-inset-top) + 1.4rem) 1.3rem calc(env(safe-area-inset-bottom) + 2rem);
  display:flex; flex-direction:column;
}

/* ============================================================
   LANDING (overlay en la misma página) — portada CLARA y vibrante,
   con personalidad propia, distinta de la app. Modo desktop (2 col)
   y modo móvil (apilado).
   ============================================================ */
.landing{ display:none; }
body.landing-on{ overflow:hidden; }
body.landing-on .wrap{ display:none; }
body.landing-on .landing{ display:block; }
.landing{
  position:fixed; inset:0; z-index:90; overflow-y:auto; overflow-x:hidden;
  --l-coral:#e2674a; --l-gold:#d7a32f; --l-teal:#2f857c; --l-blue:#3f6cae;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--l-gold) 16%,transparent), transparent 55%),
    radial-gradient(110% 70% at 0% 100%, color-mix(in srgb,var(--l-teal) 14%,transparent), transparent 52%),
    linear-gradient(180deg,#fdfbf5,#f4f2ec);
}
/* orbes de color flotando al fondo, muy suaves */
.land-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.land-orbs span{ position:absolute; border-radius:50%; filter:blur(48px); opacity:.5; animation:float 14s ease-in-out infinite; }
.land-orbs span:nth-child(1){ width:340px; height:340px; top:-90px; right:-60px; background:var(--l-gold); animation-delay:0s; }
.land-orbs span:nth-child(2){ width:300px; height:300px; bottom:-80px; left:-70px; background:var(--l-teal); animation-delay:-5s; }
.land-orbs span:nth-child(3){ width:240px; height:240px; top:38%; left:55%; background:var(--l-coral); opacity:.32; animation-delay:-9s; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-18px,22px) scale(1.08); } }

.land-nav{
  position:relative; z-index:2; max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 1.1rem) clamp(1.2rem,4vw,2.4rem) 0;
  animation:rise .5s ease backwards;
}
.land-logo{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{ width:40px; height:40px; flex:none; border-radius:12px; box-shadow:0 8px 20px -10px var(--l-teal); }
.land-logo b{ font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; color:var(--fg); }
.land-pill{
  font-family:var(--sans); font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#7a4d12; background:linear-gradient(150deg, color-mix(in srgb,var(--l-gold) 32%,#fff), color-mix(in srgb,var(--l-gold) 16%,#fff));
  border:1px solid color-mix(in srgb,var(--l-gold) 45%,transparent); padding:.4rem .8rem; border-radius:999px;
  box-shadow:0 6px 16px -10px var(--l-gold);
}

.land-inner{
  position:relative; z-index:2; max-width:1120px; margin:0 auto;
  padding:clamp(2rem,6vw,4rem) clamp(1.2rem,4vw,2.4rem) 0;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.land-copy{ min-width:0; }
.land-eyebrow{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-weight:700;
  font-size:.82rem; letter-spacing:.02em; color:var(--l-coral);
  background:color-mix(in srgb,var(--l-coral) 12%,#fff); border:1px solid color-mix(in srgb,var(--l-coral) 26%,transparent);
  padding:.4rem .85rem; border-radius:999px; margin-bottom:1.2rem; animation:rise .5s ease .04s backwards; }
.land-eyebrow i{ font-style:normal; }
.land-title{
  font-family:var(--serif); font-size:clamp(2.4rem,5.2vw,3.9rem); line-height:1.04; font-weight:600;
  letter-spacing:-.025em; margin:0 0 1.1rem; color:var(--fg); animation:rise .55s ease .08s backwards;
}
.land-title em{
  font-style:normal; display:inline; position:relative; white-space:nowrap;
  background:linear-gradient(100deg,var(--l-coral),var(--l-gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.land-intro{
  font-family:var(--sans); font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.6; color:var(--ink-soft);
  margin:0 0 1.8rem; max-width:52ch; animation:rise .55s ease .14s backwards;
}
.land-actions{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-bottom:1.6rem;
  animation:rise .55s ease .2s backwards; }
.land-cta{
  display:inline-flex; align-items:center; gap:.55rem; padding:1.05rem 1.7rem; cursor:pointer;
  background:linear-gradient(100deg,var(--l-coral),var(--l-gold)); color:#fff; border:none; border-radius:14px;
  font:inherit; font-family:var(--sans); font-weight:700; font-size:1.08rem; letter-spacing:.005em;
  box-shadow:0 14px 32px -12px var(--l-coral); transition:transform .14s ease, box-shadow .2s ease, filter .15s ease;
}
.land-cta i{ font-style:normal; transition:transform .18s ease; }
.land-cta:hover{ transform:translateY(-2px); filter:saturate(1.1); box-shadow:0 20px 42px -14px var(--l-coral); }
.land-cta:hover i{ transform:translateX(4px); }
.land-cta:active{ transform:scale(.985); }
.land-note{ font-family:var(--sans); font-size:.86rem; color:var(--muted); font-weight:600; }

.auth-sheet{ display:grid; gap:.8rem; }
.auth-sheet label{ display:grid; gap:.35rem; font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.auth-sheet input{ width:100%; min-height:44px; border:1px solid var(--line-strong); border-radius:4px; padding:.65rem .7rem; font:inherit; color:var(--fg); background:#fff; }
.auth-sheet input:focus{ outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px; }
.auth-error{ min-height:1.2em; margin:0; color:#9c2f20; font-size:.84rem; line-height:1.4; }
.auth-switch{ justify-self:start; border:0; padding:.3rem 0; background:transparent; color:var(--accent-2); text-decoration:underline; cursor:pointer; font:inherit; }
.auth-danger{ justify-self:start; border:0; padding:.3rem 0; background:transparent; color:#9c2f20; text-decoration:underline; cursor:pointer; font:inherit; }

.land-tags{ display:flex; flex-wrap:wrap; gap:.45rem; animation:rise .55s ease .26s backwards; }
.land-tags span{ font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--ink-soft);
  background:color-mix(in srgb,var(--accent) 7%,#fff); border:1px solid var(--line); padding:.34rem .7rem; border-radius:999px; }

/* ---- columna visual: ilustración propia + tarjeta de prueba ---- */
.land-visual{ position:relative; }
.hero-art{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 34px 54px -30px rgba(28,28,24,.55));
  animation:floatart 9s ease-in-out infinite, rise .6s ease .15s backwards; }
@keyframes floatart{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.ex-card{ position:absolute; width:min(310px,80%); padding:1.05rem 1.15rem;
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md);
  animation:floatcard 7s ease-in-out infinite, rise .6s ease backwards; }
.ex-card b{ display:block; font-family:var(--serif); font-size:1.2rem; font-weight:600; margin:.5rem 0 .3rem; color:var(--fg); }
.ex-card p{ font-family:var(--serif); font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin:0; font-style:italic; }
.ex-tag{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.72rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; }
.ex-float{ left:-5%; bottom:7%; width:min(270px,74%); z-index:4; animation-delay:-3s,.5s; }
.ex-float .ex-tag{ color:var(--l-coral); background:color-mix(in srgb,var(--l-coral) 13%,#fff); }
@keyframes floatcard{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-12px) rotate(1deg); } }

/* ---- franja de capacidades ---- */
.land-feats{
  position:relative; z-index:2; max-width:1120px; margin:clamp(2.5rem,6vw,4.5rem) auto 0;
  padding:0 clamp(1.2rem,4vw,2.4rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.land-feat{ background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.2rem; box-shadow:var(--shadow-sm); animation:rise .5s ease backwards;
  transition:transform .15s ease, box-shadow .2s ease; }
.land-feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.land-feats .land-feat:nth-child(1){ animation-delay:.3s; }
.land-feats .land-feat:nth-child(2){ animation-delay:.36s; }
.land-feats .land-feat:nth-child(3){ animation-delay:.42s; }
.land-feat .ico{ width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; margin-bottom:.8rem; }
.land-feat.f-gps .ico{ color:#fff; background:linear-gradient(150deg,var(--l-teal),color-mix(in srgb,var(--l-teal) 60%,#000)); box-shadow:0 8px 18px -10px var(--l-teal); }
.land-feat.f-photo .ico{ color:#fff; background:linear-gradient(150deg,var(--l-coral),color-mix(in srgb,var(--l-coral) 60%,#000)); box-shadow:0 8px 18px -10px var(--l-coral); }
.land-feat.f-place .ico{ color:#fff; background:linear-gradient(150deg,var(--l-blue),color-mix(in srgb,var(--l-blue) 60%,#000)); box-shadow:0 8px 18px -10px var(--l-blue); }
.land-feat .ico svg{ width:23px; height:23px; }
.land-feat b{ font-family:var(--serif); font-size:1.18rem; font-weight:600; display:block; line-height:1.2; color:var(--fg); }
.land-feat small{ font-family:var(--sans); font-size:.88rem; color:var(--muted); line-height:1.5; display:block; margin-top:.3rem; }

.land-how{ position:relative; z-index:2; font-family:var(--sans); font-size:1rem; color:var(--ink-soft);
  font-weight:600; text-align:center; margin:clamp(2rem,5vw,3.2rem) auto 0; line-height:1.5; }
.land-foot{ position:relative; z-index:2; font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:center;
  margin:.9rem auto calc(env(safe-area-inset-bottom) + 2rem); }

/* ---- MODO MÓVIL: una sola columna, visual reordenada ---- */
@media (max-width:860px){
  .land-inner{ grid-template-columns:1fr; gap:2.2rem; }
  .land-title{ font-size:clamp(2.2rem,9vw,3rem); }
  .land-visual{ order:2; margin-top:.5rem; max-width:480px; margin-left:auto; margin-right:auto; }
  .ex-float{ left:0; bottom:4%; width:min(260px,80%); }
  .land-feats{ grid-template-columns:1fr; gap:.7rem; }
  .land-feat{ display:grid; grid-template-columns:auto 1fr; gap:.3rem .95rem; align-items:center; padding:1rem 1.1rem; }
  .land-feat .ico{ grid-row:1/3; margin-bottom:0; }
  .land-feat b{ align-self:end; } .land-feat small{ align-self:start; }
}
@media (max-width:480px){
  .land-actions{ gap:.7rem; } .land-cta{ width:100%; justify-content:center; }
  .land-note{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion: reduce){ .land-orbs span, .ex-card{ animation:none !important; } }

/* ---- franja de pasiones (para quién) ---- */
.land-passion{ position:relative; z-index:2; max-width:1120px; margin:clamp(2.4rem,5vw,3.6rem) auto 0;
  padding:0 clamp(1.2rem,4vw,2.4rem); text-align:center; }
.passion-lead{ font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--ink-soft); margin:0 0 1.1rem; }
.passion-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.passion{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-weight:700; font-size:.92rem;
  color:var(--fg); background:rgba(255,255,255,.7); border:1px solid var(--line); padding:.5rem .9rem; border-radius:999px;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, border-color .18s ease; }
.passion i{ font-style:normal; font-size:1.05rem; }
.passion:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--l-coral) 40%,var(--line)); }

/* ---- secciones de marketing (scroll largo, estilo Civitatis) ---- */
.land-block{ position:relative; z-index:2; max-width:1120px; margin:0 auto;
  padding:clamp(2.6rem,6vw,4.6rem) clamp(1.2rem,4vw,2.4rem) 0; }
.land-block.alt::before{ content:""; position:absolute; inset:clamp(1.6rem,4vw,3rem) 0 0; z-index:-1;
  background:linear-gradient(180deg, color-mix(in srgb,var(--l-teal) 6%,transparent), transparent);
  border-top:1px solid color-mix(in srgb,var(--l-teal) 14%,transparent); }
.land-kicker{ display:block; font-family:var(--sans); font-weight:800; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--l-coral); margin-bottom:.55rem; }
.land-h2{ font-family:var(--serif); font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; color:var(--fg); margin:0 0 .5rem; }
.land-sub{ font-family:var(--sans); font-size:clamp(1rem,1.5vw,1.12rem); color:var(--ink-soft); line-height:1.55;
  margin:0 0 1.8rem; max-width:56ch; }

/* pasos */
.land-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; }
.step{ position:relative; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.3rem 1.3rem; box-shadow:var(--shadow-sm); }
.step-n{ position:absolute; top:-16px; left:1.3rem; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sans); font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(150deg,var(--l-coral),var(--l-gold)); box-shadow:0 8px 18px -8px var(--l-coral); }
.step b{ display:block; font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--fg); margin:.2rem 0 .35rem; }
.step small{ font-family:var(--sans); font-size:.9rem; color:var(--muted); line-height:1.5; }

/* bondades */
.land-perks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; }
.perk{ background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.2rem;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .2s ease; }
.perk:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.pico{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px; font-size:1.45rem;
  background:linear-gradient(150deg, color-mix(in srgb,var(--l-gold) 18%,#fff), color-mix(in srgb,var(--l-coral) 12%,#fff));
  border:1px solid var(--line); margin-bottom:.75rem; }
.perk b{ display:block; font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--fg); }
.perk small{ display:block; font-family:var(--sans); font-size:.88rem; color:var(--muted); line-height:1.5; margin-top:.3rem; }

/* demos (audio + diario) lado a lado */
.land-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center; margin-bottom:2.6rem; }
.land-split:last-child{ margin-bottom:0; }
.land-split.reverse .split-text{ order:2; }
.demo{ background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:18px; padding:1.3rem 1.4rem;
  box-shadow:var(--shadow-md); }
.demo-tag{ display:inline-flex; align-items:center; gap:.35rem; font-family:var(--sans); font-size:.74rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--l-coral);
  background:color-mix(in srgb,var(--l-coral) 12%,#fff); padding:.3rem .65rem; border-radius:999px; }
.audio-demo p{ font-family:var(--serif); font-style:italic; font-size:1.05rem; line-height:1.55; color:var(--ink-soft); margin:.9rem 0 1.1rem; }
.demo-player{ display:flex; align-items:center; gap:.8rem; padding-top:1rem; border-top:1px solid var(--line); }
.dp-play{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.9rem;
  background:linear-gradient(150deg,var(--l-coral),var(--l-gold)); box-shadow:0 8px 18px -8px var(--l-coral); }
.dp-bar{ flex:1; height:4px; border-radius:99px; background:var(--line); position:relative; }
.dp-bar i{ position:absolute; inset:0 auto 0 0; width:42%; border-radius:99px; background:linear-gradient(90deg,var(--l-coral),var(--l-gold)); }
.dp-time{ font-family:var(--sans); font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.diary-itin{ margin-top:1.1rem; position:relative; padding-left:1.6rem; }
.diary-itin::before{ content:""; position:absolute; left:11px; top:.6rem; bottom:.6rem; width:2px; background:color-mix(in srgb,var(--l-teal) 35%,var(--line)); }
.ditem{ position:relative; margin-bottom:1.1rem; }
.ditem:last-child{ margin-bottom:0; }
.dn{ position:absolute; left:-1.6rem; top:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sans); font-weight:800; font-size:.72rem; color:#fff;
  background:linear-gradient(150deg,var(--l-teal),var(--accent-2)); box-shadow:0 0 0 4px #fff; }
.ditem b{ display:block; font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--fg); }
.ditem small{ display:block; font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.1rem; }

/* galería de obras / lugares */
.land-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.6rem; }
.gcard{ display:flex; flex-direction:column; background:rgba(255,255,255,.78); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease; }
.gcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.gemoji{ display:grid; place-items:center; font-size:2.6rem; padding:1.6rem 0;
  background:linear-gradient(150deg, color-mix(in srgb,var(--l-gold) 16%,#fff), color-mix(in srgb,var(--l-teal) 10%,#fff)); }
.gcard.art1 .gemoji,.gcard.loc1 .gemoji{ background:linear-gradient(150deg, color-mix(in srgb,var(--l-coral) 16%,#fff), color-mix(in srgb,var(--l-gold) 12%,#fff)); }
.gcard.art2 .gemoji,.gcard.loc2 .gemoji{ background:linear-gradient(150deg, color-mix(in srgb,var(--l-blue) 16%,#fff), color-mix(in srgb,var(--l-teal) 10%,#fff)); }
.gcard.art3 .gemoji,.gcard.loc3 .gemoji{ background:linear-gradient(150deg, color-mix(in srgb,var(--l-teal) 18%,#fff), color-mix(in srgb,var(--l-blue) 10%,#fff)); }
.gcard.art4 .gemoji,.gcard.loc4 .gemoji{ background:linear-gradient(150deg, color-mix(in srgb,var(--l-gold) 20%,#fff), color-mix(in srgb,var(--l-coral) 10%,#fff)); }
.gbody{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.gbody b{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--fg); line-height:1.15; }
.gbody small{ font-family:var(--sans); font-size:.74rem; font-weight:600; color:var(--l-teal); letter-spacing:.02em; margin:.2rem 0 .6rem; }
.gbody p{ font-family:var(--serif); font-style:italic; font-size:.92rem; line-height:1.5; color:var(--ink-soft); margin:0; }

/* franja de skyline (silueta de monumentos) */
.land-skyline{ position:relative; z-index:1; display:block; width:100%; height:clamp(64px,9vw,108px);
  object-fit:cover; object-position:bottom; margin-top:clamp(2.5rem,6vw,4rem); opacity:.92; }

/* CTA final */
.land-final{ position:relative; z-index:2; max-width:760px; margin:clamp(1rem,2vw,1.4rem) auto 0; text-align:center;
  padding:clamp(2.4rem,5vw,3.4rem) clamp(1.4rem,4vw,2.4rem);
  background:linear-gradient(160deg, color-mix(in srgb,var(--l-coral) 12%,#fff), color-mix(in srgb,var(--l-gold) 10%,#fff));
  border:1px solid color-mix(in srgb,var(--l-gold) 30%,transparent); border-radius:24px; box-shadow:var(--shadow-md);
  margin-left:clamp(1.2rem,4vw,2.4rem); margin-right:clamp(1.2rem,4vw,2.4rem); }
.land-final-h{ font-family:var(--serif); font-size:clamp(1.9rem,4.4vw,2.8rem); font-weight:600; letter-spacing:-.02em;
  color:var(--fg); margin:0 0 .6rem; }
.land-final-p{ font-family:var(--sans); font-size:clamp(1rem,1.6vw,1.15rem); color:var(--ink-soft); line-height:1.55;
  margin:0 auto 1.6rem; max-width:46ch; }
.land-final .land-cta{ margin:0 auto .8rem; }
.land-final .land-note{ display:block; }

/* responsive marketing */
@media (max-width:860px){
  .land-steps{ grid-template-columns:1fr; gap:1.4rem; }
  .land-perks{ grid-template-columns:1fr 1fr; }
  .land-split{ grid-template-columns:1fr; gap:1.4rem; }
  .land-split.reverse .split-text{ order:0; }
  .land-gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .land-perks{ grid-template-columns:1fr; }
  .land-gallery{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ .perk,.gcard,.land-feat{ transition:none !important; } }

/* ============================================================
   APP — header
   ============================================================ */
header{ display:flex; align-items:center; gap:.75rem; margin:.2rem 0 1.4rem; animation:rise .5s ease backwards; }
.logo{ width:46px; height:46px; flex:none; border-radius:13px; display:block;
       box-shadow:0 8px 20px -10px var(--accent); }
.brand{ display:flex; flex-direction:column; line-height:1.12; flex:1; min-width:0; }
.brand b{ font-family:var(--serif); font-size:1.4rem; font-weight:600; letter-spacing:-0.01em; }
.brand span{ font-family:var(--sans); font-size:.78rem; color:var(--muted); margin-top:2px; }
.info-btn{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font-family:var(--serif); font-size:1.05rem; font-style:italic;
  cursor:pointer; transition:.15s; }
.info-btn:hover{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }

/* ---------- controles ---------- */
.controls{ display:flex; flex-wrap:wrap; gap:.55rem; align-items:stretch; margin-bottom:1.1rem; }
.seg{ display:flex; flex:1; padding:3px; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:13px; }
.seg button{ flex:1; background:none; border:none; font:inherit; font-family:var(--sans); font-size:.84rem; font-weight:600;
             color:var(--muted); padding:.52rem .2rem; border-radius:10px; cursor:pointer; transition:.15s; }
.seg button.on{ background:var(--accent); color:var(--accent-fg); }
.audio-pill{ display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.52rem .95rem; white-space:nowrap;
             background:var(--surface); border:1px solid var(--line);
             border-radius:13px; font-family:var(--sans); font-size:.84rem; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; }
.lang-sel{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:.52rem .7rem;
           font-family:var(--sans); font-size:.84rem; font-weight:600; color:var(--muted); cursor:pointer; }
@media (max-width:420px){ .controls .seg{ flex-basis:100%; } .audio-pill{ flex:1; } .lang-sel{ flex-basis:100%; } }
.audio-pill input{ position:absolute; opacity:0; pointer-events:none; }
.audio-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); transition:.15s; }
.audio-pill:has(input:checked){ color:var(--fg); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); }
.audio-pill:has(input:checked) .dot{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

#warn{ background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-line);
       border-radius:9px; padding:.7rem .85rem; font-size:.8rem; line-height:1.45; margin-bottom:1rem; display:none; }

/* ---------- barra de visita / histórico ---------- */
.visit-bar{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:-.4rem 0 1.4rem; }
.visit-btn{ flex:1; min-width:0; padding:.62rem .8rem; border-radius:12px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
            background:var(--accent); color:var(--accent-fg); font:inherit; font-family:var(--sans); font-weight:600;
            font-size:.86rem; line-height:1; white-space:nowrap; cursor:pointer; transition:.14s; }
.visit-btn.ghost{ background:var(--surface); color:var(--accent); }
.visit-btn.active{ background:var(--surface); color:var(--accent); border-style:dashed; }
.visit-btn:active{ transform:scale(.97); }
#visitInfo{ flex-basis:100%; font-family:var(--sans); font-size:.76rem; color:var(--muted); text-align:center; }
#visitInfo:empty{ display:none; }

/* ---------- modos como TARJETAS ---------- */
.index{ display:flex; flex-direction:column; gap:.7rem; }
.mode{ display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; cursor:pointer;
       background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:1rem 1.05rem;
       color:var(--fg); font:inherit; box-shadow:var(--shadow-sm);
       transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease; animation:rise .5s ease backwards; }
.index .mode:nth-child(1){ animation-delay:.05s; } .index .mode:nth-child(2){ animation-delay:.11s; } .index .mode:nth-child(3){ animation-delay:.17s; }
.mode:hover{ transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.mode:active{ transform:scale(.992); }
.mode .ico{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
            background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 18%,var(--surface)), var(--accent-soft));
            color:var(--accent-2); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent); }
/* color por modo (museo: cada sala su color) */
.mode[data-mode="photo"] .ico{ background:linear-gradient(150deg, color-mix(in srgb,var(--c-photo) 20%,var(--surface)), color-mix(in srgb,var(--c-photo) 9%,var(--surface)));
            color:var(--c-photo); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-photo) 18%,transparent); }
.mode[data-mode="place"] .ico{ background:linear-gradient(150deg, color-mix(in srgb,var(--c-place) 20%,var(--surface)), color-mix(in srgb,var(--c-place) 9%,var(--surface)));
            color:var(--c-place); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-place) 18%,transparent); }
.mode[data-mode="photo"]:hover{ border-color:color-mix(in srgb,var(--c-photo) 40%,var(--line)); }
.mode[data-mode="place"]:hover{ border-color:color-mix(in srgb,var(--c-place) 40%,var(--line)); }
.mode[data-mode="photo"]:hover .go{ color:var(--c-photo); }
.mode[data-mode="place"]:hover .go{ color:var(--c-place); }
.mode .ico svg{ width:24px; height:24px; }
.mode .entry{ display:flex; flex-direction:column; gap:.18rem; flex:1; min-width:0; }
.mode .entry b{ font-family:var(--serif); font-size:1.2rem; font-weight:600; letter-spacing:-0.005em; line-height:1.12; }
.mode .entry small{ font-family:var(--sans); font-size:.83rem; color:var(--muted); line-height:1.35; }
.mode .go{ margin-left:auto; flex:none; color:var(--muted); font-size:1.15rem; transition:transform .18s ease; }
.mode:hover .go{ transform:translateX(3px); color:var(--accent); }
.mode:disabled{ opacity:.45; cursor:wait; }
.mode.m1{ background:linear-gradient(150deg, var(--accent), var(--accent-2)); border-color:transparent; color:var(--accent-fg);
          box-shadow:0 12px 30px -16px var(--accent); }
.mode.m1:hover{ box-shadow:0 18px 40px -18px var(--accent); }
.mode.m1 .ico{ background:rgba(255,255,255,.18); color:var(--accent-fg); box-shadow:none; }
.mode.m1 .entry small{ color:color-mix(in srgb,var(--accent-fg) 78%,transparent); }
.mode.m1 .go{ color:color-mix(in srgb,var(--accent-fg) 82%,transparent); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }

/* ---------- estado / foto / resultado ---------- */
#status{ font-family:var(--sans); font-size:.82rem; color:var(--muted); min-height:1.1rem; margin:1.1rem 0 .1rem; }
#thumb{ max-width:170px; width:100%; border-radius:10px; display:none; margin:1rem 0 0; box-shadow:var(--shadow-sm); }
#result{ font-family:var(--serif); font-size:1.14rem; line-height:1.66; white-space:pre-wrap;
         margin-top:1.2rem; padding-top:1.15rem; border-top:1px solid var(--line); }
#result:empty{ display:none; }
#result::before{ content:"La guía"; display:inline-block; font-family:var(--sans); font-size:.68rem; font-weight:800;
                 letter-spacing:.16em; text-transform:uppercase; color:var(--accent-fg); margin-bottom:.9rem;
                 padding:.28rem .6rem; border-radius:999px;
                 background:linear-gradient(100deg,var(--c-photo),var(--c-gold)); }
/* Imagen de la obra/sujeto (Wikipedia): miniatura clicable que abre el visor ampliado. */
#artwork{ margin:1.3rem 0 0; }
#artwork img{ display:block; max-width:100%; max-height:300px; border-radius:12px;
              box-shadow:var(--shadow-sm); cursor:zoom-in; }
#artworkCaption{ font-family:var(--sans); font-size:.78rem; color:var(--muted); margin-top:.4rem; }
.itin-img{ display:block; max-width:200px; width:100%; border-radius:10px; margin:.7rem 0;
           box-shadow:var(--shadow-sm); cursor:zoom-in; }
/* Visor a pantalla completa */
#lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.88);
           display:flex; align-items:center; justify-content:center; padding:1.5rem; }
#lightbox[hidden]{ display:none; }
#lightbox img{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
#lightboxClose{ position:absolute; top:.8rem; right:1rem; background:none; border:none; color:#fff;
                font-size:2.4rem; line-height:1; cursor:pointer; padding:.2rem .6rem; }
input[type=file]{ display:none; }

.more-btn{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.15rem; padding:.7rem 1.15rem;
           background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:12px;
           color:var(--accent); font:inherit; font-family:var(--sans); font-weight:600; font-size:.92rem; cursor:pointer; transition:.14s; }
.more-btn::before{ content:"+"; font-size:1.15rem; line-height:1; margin-top:-1px; }
.more-btn:hover{ background:var(--accent-soft); }
.more-btn[hidden]{ display:none; }
.cancel-btn{ display:inline-block; margin-top:.55rem; padding:.4rem .85rem; background:none; border:1px solid var(--line);
             border-radius:9px; color:var(--muted); font:inherit; font-family:var(--sans); font-size:.8rem; font-weight:600; cursor:pointer; }
.cancel-btn[hidden]{ display:none; }

.replay-btn{ display:inline-flex; align-items:center; gap:.35rem; margin:.2rem 0 .9rem; padding:.4rem .8rem;
             background:var(--surface); border:1px solid var(--line); border-radius:9px; color:var(--accent);
             font:inherit; font-family:var(--sans); font-weight:600; font-size:.82rem; cursor:pointer; }

/* acciones por parada: botones pequeñitos (escuchar / ＋ ampliar) en una fila */
.itin-acts{ display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 .9rem; }
.stop-btn{ display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .7rem;
           background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--accent);
           font:inherit; font-family:var(--sans); font-weight:600; font-size:.78rem; cursor:pointer; line-height:1; }
.stop-btn:hover{ background:var(--accent-soft); }
.stop-btn.more{ color:var(--accent); }
.stop-btn:disabled{ opacity:.5; cursor:default; }

/* histórico como ITINERARIO: línea vertical con un punto por parada */
.itin{ position:relative; margin:.4rem 0 0; padding-left:1.7rem; }
.itin::before{ content:""; position:absolute; left:6px; top:.5rem; bottom:.5rem; width:2px;
               background:color-mix(in srgb,var(--accent) 30%,var(--line)); }
.itin-stop{ position:relative; margin:0 0 1.6rem; }
.itin-stop:last-child{ margin-bottom:.4rem; }
.itin-stop::before{ content:""; position:absolute; left:-1.7rem; top:.28rem; width:14px; height:14px;
                    border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--surface), 0 0 0 5px color-mix(in srgb,var(--accent) 30%,var(--line)); }
.itin-num{ position:absolute; left:-1.7rem; top:.28rem; width:14px; height:14px; font-family:var(--sans);
           font-size:.58rem; font-weight:700; color:var(--accent-fg); display:grid; place-items:center; z-index:1; }
.itin-q{ font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--fg); margin:0 0 .15rem; }
/* Icono de tipo (SVG inline) junto al título del hito y en el selector. Hereda el color del texto. */
.itin-icon{ display:inline-flex; align-items:center; color:var(--accent); margin-right:.4rem; vertical-align:-.12em; }
.itin-icon svg, .pick-icon svg{ width:1em; height:1em; display:block; }
.pick-icon{ display:inline-flex; align-items:center; color:var(--accent); margin-right:.4rem; vertical-align:-.12em; }
.itin-meta{ font-family:var(--sans); font-size:.75rem; color:var(--muted); opacity:.85; margin:0 0 .5rem; }
.itin-a{ font-family:var(--serif); font-size:1.02rem; line-height:1.6; color:var(--fg); white-space:pre-wrap; margin:0 0 .55rem; }

.itin-a,
#result{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* ---------- reproductor propio ---------- */
#audiobar{ display:flex; align-items:center; gap:.85rem; margin-top:1.15rem; padding:.8rem 0;
           border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#audiobar[hidden]{ display:none; }
#player{ display:none; }
#playBtn{ flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
          background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; transition:transform .12s ease; }
#playBtn:active{ transform:scale(.92); }
#playBtn svg{ width:18px; height:18px; }
#playBtn .i-pause{ display:none; }
#audiobar.playing .i-play{ display:none; }
#audiobar.playing .i-pause{ display:block; }
/* Spinner de "preparando audio": anillo con un arco que gira. Se muestra mientras se genera/buffera. */
#playBtn .i-load{ display:none; width:18px; height:18px; border-radius:50%;
                  border:2px solid transparent; border-top-color:currentColor; animation:audioSpin .7s linear infinite; }
#audiobar.loading .i-play, #audiobar.loading .i-pause{ display:none; }
#audiobar.loading .i-load{ display:block; }
#audiobar.loading #playBtn{ pointer-events:none; }
@keyframes audioSpin{ to{ transform:rotate(360deg); } }
#seek{ flex:1; height:3px; background:var(--line); cursor:pointer; position:relative; overflow:hidden; }
#seek::after{ content:""; position:absolute; inset:-9px 0; }
#seekFill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent); }
/* Barrido indeterminado en la barra mientras se prepara el audio. */
#audiobar.loading #seekFill{ width:35%; background:linear-gradient(90deg, transparent, var(--accent), transparent);
                             animation:audioSweep 1.1s ease-in-out infinite; }
@keyframes audioSweep{ 0%{ transform:translateX(-130%); } 100%{ transform:translateX(330%); } }
#time{ flex:none; font-family:var(--sans); font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }

footer{ margin-top:auto; padding-top:1.8rem; font-family:var(--sans); font-size:.66rem;
        letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- modal (hoja inferior) ---------- */
.modal{ position:fixed; inset:0; background:rgba(10,12,12,.5); backdrop-filter:blur(3px);
        display:flex; align-items:flex-end; justify-content:center; z-index:100; animation:fade .2s ease;
        /* overflow-y por si la hoja, con el teclado abierto o pantallas bajas, supera el alto visible */
        overflow-y:auto; }
.modal[hidden]{ display:none; }
/* max-height en dvh (dynamic viewport): en móvil las barras del navegador hacían que 'vh' calculara
   la hoja MÁS alta que el espacio visible real, cortando el botón Cancelar del fondo sin poder
   scrollear. dvh sigue la altura REAL; 100vh es el fallback para navegadores sin dvh. */
.sheet{ background:var(--surface); width:100%; max-width:560px; border-radius:16px 16px 0 0;
        padding:.4rem 1.3rem calc(env(safe-area-inset-bottom) + 1.2rem);
        max-height:85vh; max-height:85dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        box-shadow:0 -14px 44px -16px rgba(0,0,0,.4); animation:rise .26s cubic-bezier(.2,.8,.2,1); }
.sheet::before{ content:""; display:block; width:36px; height:4px; border-radius:99px; background:var(--line); margin:.6rem auto 1rem;
        position:sticky; top:0; }
/* X de cierre arriba a la derecha de la hoja (sticky para seguir visible al hacer scroll). */
.sheet-x{ position:sticky; float:right; top:.2rem; margin:-.2rem -.4rem 0 0; z-index:2;
          background:none; border:none; color:var(--muted); font-size:1.9rem; line-height:1;
          cursor:pointer; padding:.1rem .5rem; border-radius:8px; }
.sheet-x:hover{ color:var(--fg); background:var(--line); }
.sheet h2{ font-family:var(--serif); font-size:1.4rem; font-weight:600; margin:.1rem 2rem .9rem 0; letter-spacing:-0.01em; }
.sheet p{ font-family:var(--sans); color:var(--ink-soft); line-height:1.55; margin:.2rem 0 1rem; }
.pick-opt{ display:flex; flex-direction:column; gap:.18rem; width:100%; text-align:left; cursor:pointer;
           background:none; border:none; border-bottom:1px solid var(--line); color:var(--fg); font:inherit; padding:.9rem .1rem; transition:.14s; }
.pick-opt:hover{ padding-left:.5rem; color:var(--accent); }
.pick-opt b{ font-family:var(--serif); font-size:1.12rem; font-weight:600; }
.pick-opt small{ font-family:var(--sans); color:var(--muted); font-size:.82rem; }
.pickCancel{ width:100%; padding:.9rem; margin-top:.9rem; border:1px solid var(--line); border-radius:9px;
             background:none; color:var(--muted); font:inherit; font-family:var(--sans); font-weight:600; cursor:pointer; }
/* Línea de fuentes bajo cada respuesta: discreta pero visible (señal de confianza "no inventa"). */
.src-line{ font-family:var(--sans); font-size:.76rem; color:var(--muted); margin:.7rem 0 .2rem;
           padding-top:.5rem; border-top:1px dashed var(--line); letter-spacing:.01em; }
.src-line a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.src-line a:hover{ color:var(--fg); }
.source-report{ margin-left:.55rem; padding:0; border:0; background:transparent; color:var(--muted); font:inherit; font-size:inherit; text-decoration:underline; cursor:pointer; }
.source-report:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Navegación por teclado visible en todos los controles interactivos. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ scroll-behavior:auto !important; transition-duration:.01ms !important; }
}
.welcome-sub{ font-family:var(--sans); color:var(--muted); font-size:.9rem; margin:.2rem 0 1rem; }
.welcome-langs{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.welcome-langs button{ padding:.7rem .5rem; border:1px solid var(--line); border-radius:10px; background:var(--surface);
             font:inherit; font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--fg); cursor:pointer; transition:.15s; }
.welcome-langs button:hover{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   Look expo museo inspirado en White Cube:
   pared blanca, cartelas discretas, grilla sobria y mucho aire.
   ============================================================ */
:root{
  --bg:#fff;
  --surface:#fff;
  --fg:#111;
  --muted:#6d6d6d;
  --line:#dedede;
  --line-strong:#a8a8a8;
  --accent:#111;
  --accent-2:#333;
  --accent-fg:#fff;
  --accent-soft:#f5f5f5;
  --ink-soft:#333;
  --c-gps:#111;
  --c-photo:#111;
  --c-place:#111;
  --c-gold:#111;
  --warn-bg:#faf8f0;
  --warn-fg:#5c4a20;
  --warn-line:#e4dcc4;
  --shadow-sm:none;
  --shadow-md:none;
  --radius:2px;
}

body{
  background:#fff;
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), #f3f3f3 calc(100% - 1px)),
    linear-gradient(#fff,#fff);
  background-size:min(92vw, 1120px) 100%, 100% 100%;
  background-position:center top;
  background-attachment:fixed;
}

.wrap{
  max-width:720px;
  padding-top:calc(env(safe-area-inset-top) + 2rem);
}

.land-orbs,
.gemoji,
.pico,
.passion i,
.ex-tag,
.demo-tag{
  display:none !important;
}

.brand-mark,
.logo{
  display:block;
  border-radius:0;
  box-shadow:none;
  filter:grayscale(1) contrast(1.1);
}

.landing{
  background:#fff;
}

.land-nav{
  max-width:1180px;
  padding-top:calc(env(safe-area-inset-top) + 1.35rem);
  border-bottom:1px solid var(--line);
  padding-bottom:1.2rem;
}

.land-logo b,
.brand b{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:0;
}

.land-pill,
.land-eyebrow,
.land-kicker{
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:0;
  padding:0;
  box-shadow:none;
  letter-spacing:.12em;
  font-weight:600;
}

.land-inner{
  max-width:1180px;
  min-height:calc(100svh - 86px);
  align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(280px, 390px);
  gap:clamp(2.5rem,7vw,7rem);
  padding-top:clamp(3rem,8vw,6.5rem);
}

.land-title{
  font-family:var(--sans);
  font-size:clamp(2rem,3.2vw,3.1rem);
  line-height:1.12;
  font-weight:400;
  letter-spacing:0;
  max-width:18ch;
}

.land-title em{
  color:var(--fg);
  background:none;
  white-space:normal;
}

.land-intro,
.land-sub,
.land-final-p{
  max-width:58ch;
  color:var(--ink-soft);
  line-height:1.72;
}

.land-cta,
.visit-btn,
#playBtn,
.seg button.on{
  background:#111;
  border:1px solid #111;
  color:#fff;
  border-radius:0;
  box-shadow:none;
}

.land-cta{
  padding:.9rem 1.25rem;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.land-cta:hover{
  transform:none;
  filter:none;
  box-shadow:none;
  background:#fff;
  color:#111;
}

.land-tags span,
.passion,
.land-feat,
.step,
.perk,
.demo,
.gcard,
.mode,
.seg,
.audio-pill,
.lang-sel,
.visit-btn.ghost,
.more-btn,
.cancel-btn,
.replay-btn,
.stop-btn,
.sheet,
.welcome-langs button,
#thumb,
#artwork img,
.itin-img{
  border-radius:0;
  box-shadow:none;
  background:#fff;
}

.land-tags span,
.passion,
.land-feat,
.step,
.perk,
.demo,
.gcard,
.mode,
.seg,
.audio-pill,
.lang-sel,
.visit-btn.ghost,
.more-btn,
.cancel-btn,
.replay-btn,
.stop-btn,
.welcome-langs button{
  border-color:var(--line);
}

.land-visual{
  min-height:420px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, #fff 0%, #fff 72%, #fafafa 72%, #fafafa 100%);
  display:grid;
  place-items:center;
  padding:clamp(1.2rem,3vw,2rem);
}

.land-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(78%,320px);
  aspect-ratio:1/1.14;
  transform:translate(-50%,-50%);
  border:1px solid #d6d6d6;
  background:#fff;
  box-shadow:0 20px 45px rgba(0,0,0,.06);
}

.hero-art{
  position:relative;
  z-index:1;
  display:block;
  width:min(82%,340px);
  height:auto;
  padding:1.1rem;
  background:#fff;
  border:1px solid #d8d8d8;
  filter:none;
  animation:none;
}

.ex-card{
  position:absolute;
  left:auto;
  right:1.2rem;
  bottom:1.2rem;
  width:70%;
  border-radius:0;
  background:#fff;
  border:1px solid var(--line);
  padding:.9rem 1rem;
  box-shadow:none;
}

.land-passion{
  margin-top:clamp(3.2rem,7vw,5rem);
  margin-bottom:clamp(2.2rem,5vw,3.6rem);
  padding-top:0;
  clear:both;
}

.passion-lead{
  display:inline-block;
  background:#fff;
  padding:0 .9rem;
  position:relative;
  z-index:1;
}

.passion-row{
  position:relative;
  padding-top:1.05rem;
}

.passion-row::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--line);
}

.passion{
  position:relative;
  z-index:1;
  background:#fff;
}

.diary-itin{
  padding-left:2.65rem;
}

.diary-itin::before{
  left:13px;
}

.ditem{
  min-height:2.35rem;
}

.dn{
  left:-2.65rem;
  width:28px;
  height:28px;
  top:.05rem;
}

.ditem b,
.ditem small{
  padding-left:.1rem;
}

.land-passion + .land-block{
  border-top:0;
  padding-top:clamp(1.8rem,4vw,3rem);
}

.ex-card b,
.gbody b,
.step b,
.perk b,
.land-feat b,
.ditem b,
.mode .entry b,
.itin-q{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:0;
}

.ex-card p,
.gbody p,
.audio-demo p,
#result,
.itin-a{
  font-family:var(--sans);
  font-style:normal;
}

.land-block{
  max-width:1180px;
  border-top:1px solid var(--line);
  margin-top:0;
}

.land-block.alt::before{
  display:none;
}

.land-h2,
.land-final-h,
.sheet h2{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:0;
}

.land-feats,
.land-steps,
.land-perks,
.land-gallery{
  gap:0;
  border:1px solid var(--line);
  margin-bottom:clamp(1.8rem,4vw,3rem);
}

.land-feat,
.step,
.perk,
.gcard{
  border:0;
  padding:1.25rem;
}

.land-feat:not(:last-child),
.step:not(:last-child),
.perk:not(:nth-child(3n)),
.gcard:not(:nth-child(4n)){
  border-right:1px solid var(--line);
}

.perk:nth-child(n+4){
  border-top:1px solid var(--line);
}

.land-feat,
.step,
.perk{
  min-height:158px;
}

.land-feat .ico{
  margin-bottom:1rem;
}

.land-feat small,
.step small,
.perk small{
  display:block;
  margin-top:.45rem;
}

.land-feats + *,
.land-steps + *,
.land-perks + *,
.land-gallery + *{
  margin-top:clamp(1.2rem,3vw,2rem);
}

.land-feat:hover,
.perk:hover,
.gcard:hover,
.mode:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--line-strong);
}

.land-feat .ico,
.mode .ico{
  border-radius:0;
  background:#fff !important;
  color:#111 !important;
  box-shadow:none !important;
  border:1px solid var(--line);
}

.step-n,
.dn,
.itin-stop::before{
  background:#111;
  box-shadow:0 0 0 5px #fff;
}

.gbody small{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.gcard::before{
  content:"";
  display:block;
  height:clamp(120px,15vw,170px);
  border-bottom:1px solid var(--line);
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
}

.gcard.art1::before{
  background-image:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Mona_Lisa.jpg/960px-Mona_Lisa.jpg");
}

.gcard.art2::before{
  background-image:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Guernica_-_Pablo_Picasso_-_1937_-_Museo_Nacional_Centro_de_Arte_Reina_Sof%C3%ADa_a_Madrid%2C_2024.jpg/960px-Guernica_-_Pablo_Picasso_-_1937_-_Museo_Nacional_Centro_de_Arte_Reina_Sof%C3%ADa_a_Madrid%2C_2024.jpg");
  filter:grayscale(1);
}

.gcard.art3::before{
  background-image:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/960px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg");
}

.gcard.art4::before{
  background-image:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg/960px-Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg");
}

.gcard.loc1::before,
.gcard.loc2::before,
.gcard.loc3::before,
.gcard.loc4::before{
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
}

.gcard.loc1::before{
  background-image:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Sagrada_Familia_01.jpg/960px-Sagrada_Familia_01.jpg");
}

.gcard.loc2::before{
  background-image:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Colosseum_in_Rome-April_2007-1-_copie_2B.jpg/960px-Colosseum_in_Rome-April_2007-1-_copie_2B.jpg");
}

.gcard.loc3::before{
  background-image:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Machu_Picchu%2C_Peru.jpg/960px-Machu_Picchu%2C_Peru.jpg");
}

.gcard.loc4::before{
  background-image:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.03)),
    url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Taj_Mahal%2C_Agra%2C_India_edit3.jpg/960px-Taj_Mahal%2C_Agra%2C_India_edit3.jpg");
}

.land-perks{
  margin-bottom:clamp(1.8rem,4vw,3rem);
}

.land-perks + *{
  margin-top:clamp(1.2rem,3vw,2rem);
}

.land-skyline{
  display:block;
  filter:grayscale(1) contrast(.9);
  opacity:.16;
  height:clamp(48px,7vw,76px);
  margin-top:clamp(2rem,5vw,3rem);
}

.land-final{
  max-width:1180px;
  border-radius:0;
  border-width:1px 0;
  background:#fff;
  box-shadow:none;
  margin:clamp(2rem,5vw,4rem) auto 0;
}

header{
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
}

.brand span{
  letter-spacing:.08em;
  text-transform:uppercase;
}

.info-btn,
#playBtn{
  border-radius:50%;
}

.mode{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) 2rem;
  align-items:center;
  gap:1rem;
  padding:1rem .95rem;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  min-height:82px;
}

.index{
  gap:.55rem;
}

.mode::before{
  content:attr(data-step);
  align-self:start;
  padding-top:.1rem;
  font-size:.68rem;
  line-height:1;
  letter-spacing:.08em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.mode.m1,
.mode[data-mode="photo"],
.mode[data-mode="place"]{
  background:#fff;
  color:var(--fg);
  border-color:var(--line);
  box-shadow:none;
}

.mode .ico{
  display:none;
}

.mode .ico svg{
  width:21px;
  height:21px;
}

.mode .entry{
  gap:.3rem;
}

.mode .entry b{
  font-size:1rem;
  line-height:1.15;
  font-weight:500;
}

.mode .entry small{
  max-width:40ch;
  font-size:.81rem;
  line-height:1.42;
}

.mode .go{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  justify-self:end;
  margin-left:0;
  border:1px solid var(--line);
  border-radius:50%;
  color:#777;
  font-size:.95rem;
  line-height:1;
  transition:transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}

.mode:hover{
  transform:none;
  box-shadow:none;
  border-color:#111;
}

.mode:hover .go{
  transform:translateX(2px);
  border-color:#111;
  background:#111;
  color:#fff;
}

#visitInfo{
  text-align:left;
  padding:.1rem 0 .2rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#result{
  border-top:1px solid #111;
  font-size:1.02rem;
}

#result::before{
  content:"Cartela";
  color:var(--muted);
  background:transparent;
  border-radius:0;
  padding:0;
}

.modal{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(8px);
}

.sheet{
  border:1px solid var(--line);
  border-bottom:0;
}

@media (max-width:860px){
  .land-inner{
    min-height:auto;
    grid-template-columns:1fr;
  }
  .land-title{
    max-width:11ch;
  }
  .land-visual{
    min-height:340px;
    width:100%;
  }
  .land-feat:not(:last-child),
  .step:not(:last-child),
  .perk:not(:last-child),
  .gcard:not(:last-child){
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .perk:nth-child(n+4){
    border-top:0;
  }
  .land-gallery .gcard:nth-child(odd),
  .land-perks .perk:nth-child(odd){
    border-right:1px solid var(--line);
  }
}

@media (max-width:480px){
  .wrap{
    padding-left:1rem;
    padding-right:1rem;
  }
  .land-nav{
    align-items:flex-start;
    gap:1rem;
  }
  .land-title{
    font-size:clamp(2rem,11vw,3rem);
  }
  .land-feats,
  .land-steps,
  .land-perks,
  .land-gallery{
    border-left:1px solid var(--line);
  }
  .land-gallery .gcard:nth-child(odd),
  .land-perks .perk:nth-child(odd){
    border-right:0;
  }
}