/* ============================================================
   INTUS Design System — The Crowd History © 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* === TOKENS === */
:root {
  --night:        #120E08;
  --gold:         #C9A96E;
  --gold-light:   #D4B880;
  --parchment:    #E8D5B0;
  --leather:      #2A1E10;
  --sienna:       #3D2E18;
  --ochre:        #7A6A50;
  --crimson:      #8B1A1A;
  --blue-arc:     #1A3A5C;
  --blue-arc-lt:  #4A7FAB;

  --bg:           var(--night);
  --text:         var(--parchment);
  --muted:        var(--ochre);
  --surface:      var(--leather);
  --surface-hi:   var(--sienna);
  --border:       rgba(201,169,110,.18);
  --border-hi:    rgba(201,169,110,.4);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'DM Sans', Arial, sans-serif;
  --font-mono:    'DM Mono', monospace;

  --radius:       3px;
  --radius-lg:    6px;
  --page-pad:     clamp(20px, 5vw, 96px);
  --max-w:        1440px;
  --transition:   200ms ease;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* la curva que jugar.html ya repetía a mano en todas partes */
}

/* Navegación entre páginas con morphing automático (Chrome 126+/Safari 18.2+,
   sin JS ni SPA — degrada a navegación normal e instantánea donde no hay
   soporte). Solo pinta cuando el navegador y el destino lo soportan. */
@view-transition {
  navigation: auto;
}

/* Cuando la web está instalada como PWA (display-mode: standalone) no hay
   barra de navegador — el nav/footer compartidos necesitan su propio hueco
   para las áreas seguras del dispositivo (notch, barra de gestos). */
@media (display-mode: standalone) {
  .nav-inner { padding-top: calc(18px + env(safe-area-inset-top)); }
  #intus-footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* El nav es sticky en toda la web (~79px en móvil, algo más en escritorio) —
   sin esto, cualquier salto a un ancla (#id o scrollIntoView) deja el
   destino tapado bajo el header (feedback usuario 2026-08-20). */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--night);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .025;
  pointer-events: none;
  z-index: 9999;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ochre);
}



/* === TYPOGRAPHY === */
h1, .h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 38px);
  line-height: 1.2;
}
h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
}
p { line-height: 1.75; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }
img { display: block; max-width: 100%; }

.label-mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.body-lg { font-size: 18px; line-height: 1.75; }
.body-md { font-size: 16px; line-height: 1.7; }
.serif-italic { font-family: var(--font-display); font-style: italic; }

/* === LAYOUT === */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-xs { padding: 40px 0; }

/* === GRID === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(-1px) scale(.99); }
.btn-primary { background: var(--gold); color: var(--night); }
.btn-primary:hover { background: var(--gold-light); color: var(--night); }
.btn-secondary { background: transparent; color: var(--gold); border: .5px solid var(--gold); }
.btn-secondary:hover { background: rgba(201,169,110,.08); color: var(--gold); }
.btn-ghost { background: transparent; color: var(--parchment); border: .5px solid var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 9px 20px; font-size: 12px; }
.btn-lg { padding: 16px 40px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* === FORMS === */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  background: var(--leather);
  border: .5px solid rgba(201,169,110,.3);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 15px;
  transition: border-color var(--transition);
  outline: none;
}
.form-control::placeholder { color: var(--ochre); }
.form-control:focus { border-color: var(--gold); }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7' fill='none' stroke='%23C9A96E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-check-input {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px;
  background: var(--leather); border: .5px solid var(--gold); border-radius: 2px;
  appearance: none; cursor: pointer; transition: all var(--transition);
}
.form-check-input:checked {
  background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23120E08' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.form-check-label { font-size: 13px; color: var(--ochre); line-height: 1.5; }
.form-check-label a { color: var(--gold); text-decoration: underline; }
.form-error { font-size: 12px; color: #E88; margin-top: 4px; display: none; }
.form-group.has-error .form-control { border-color: var(--crimson); }
.form-group.has-error .form-error { display: block; }

/* === ALERTS === */
.alert {
  padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-error { background: rgba(139,26,26,.15); border: .5px solid var(--crimson); color: #f5a0a0; }
.alert-success { background: rgba(201,169,110,.1); border: .5px solid var(--gold); color: var(--parchment); }
.alert-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* === BADGES === */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
}
.badge-available { background: var(--night); border: .5px solid var(--gold); color: var(--gold); }
.badge-soon { background: var(--night); border: .5px solid var(--crimson); color: var(--crimson); }
.badge-video { background: rgba(26,58,92,.2); border: .5px solid var(--blue-arc-lt); color: var(--blue-arc-lt); }

/* === DECORATORS === */
.triple-sep {
  height: 11px; display: flex; flex-direction: column; justify-content: space-between;
}
.triple-sep span:nth-child(1) { border-top: 1px solid rgba(201,169,110,.2); }
.triple-sep span:nth-child(2) { border-top: 1px dashed rgba(201,169,110,.2); }
.triple-sep span:nth-child(3) { border-top: 1px solid rgba(201,169,110,.2); }

.gold-line { width: 48px; height: 1px; background: var(--gold); }
.dot-gold { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

/* === NAVIGATION === */
#intus-nav {
  position: sticky; top: 0; z-index: 1000000;
  background: rgba(18,14,8,.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--page-pad); max-width: var(--max-w); margin: 0 auto;
}
.nav-logo {
  height: 50px;
  width: auto;
  display: block;
  cursor: pointer;
}
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(201,169,110,.65); padding-bottom: 2px;
  border-bottom: 1px solid transparent; transition: all var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-user-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); background: none; border: none; cursor: pointer; transition: opacity var(--transition);
}
.nav-user-btn:hover { opacity: .8; }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--gold); }

/* Mobile nav */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--night); flex-direction: column;
  padding: 24px var(--page-pad) 48px;
}
.mobile-nav.open { display: flex; min-height: 100dvh; min-width: 100vw; }
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.mobile-nav-close { background: none; border: none; cursor: pointer; color: var(--gold); }
.mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: 28px; }
.mobile-nav-links a {
  font-family: var(--font-display); font-style: italic; font-size: 32px; color: var(--parchment);
  transition: color var(--transition);
}
.mobile-nav-links a:hover { color: var(--gold); }
.mobile-nav-footer { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 14px 16px; }
  .nav-logo { font-size: 22px; }
}

/* === FOOTER === */
#intus-footer {
  background: var(--night); border-top: 1px solid var(--border);
  padding: 72px var(--page-pad) 32px;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--border); margin-bottom: 28px;
}
.footer-brand .logo { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 36px; color: var(--gold); margin-bottom: 12px; }
.footer-brand p { font-size: 13px; color: var(--ochre); line-height: 1.6; max-width: 220px; margin-bottom: 24px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: .5px solid var(--border); border-radius: var(--radius); color: var(--ochre); font-size: 16px;
  transition: all var(--transition);
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 13px; color: var(--ochre); transition: color var(--transition); }
.footer-col ul a:hover { color: var(--parchment); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: rgba(201,169,110,.35); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(201,169,110,.35); transition: color var(--transition); }
.footer-legal a:hover { color: var(--gold); }

@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* === HERO (home) === */
.hero {
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0A0804 0%, #1A1008 40%, #120E08 100%);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 60% 50%, rgba(201,169,110,.06) 0%, transparent 70%);
}
.hero-content { position: relative; z-index: 2; padding: 120px var(--page-pad) 80px; max-width: var(--max-w); margin: 0 auto; width: 100%; }
.hero-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.hero h1 { color: var(--gold); max-width: 780px; margin-bottom: 28px; }
.hero p { color: var(--ochre); max-width: 580px; font-size: 18px; line-height: 1.75; margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* === PAGE HERO === */
/* Antes era un bloque de texto plano sin ninguna textura — comparado con
   el hero de portada (mosaico de fotos) y el de ruta (imagen a sangre),
   las páginas secundarias (rutas/contacto/blog) se sentían planas. Misma
   trama de rejilla que ya usa el hero de portada, más una marca de
   archivo fantasma reutilizando el propio vocabulario de la marca
   (números entre corchetes, mono) en vez de añadir imágenes nuevas. */
.page-hero { position: relative; padding: 80px 0 56px; border-bottom: 1px solid var(--border); overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; opacity: .035; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 48px, var(--gold) 48px, var(--gold) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, var(--gold) 48px, var(--gold) 49px);
}
.page-hero::after {
  content: ""; position: absolute; right: var(--page-pad); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-style: italic; font-size: clamp(80px, 12vw, 180px);
  color: rgba(201,169,110,.05); line-height: 1; pointer-events: none; white-space: nowrap;
}
.page-hero-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.page-hero h1 { color: var(--gold); margin-bottom: 20px; position: relative; }
.page-hero p { color: var(--ochre); max-width: 580px; font-size: 17px; line-height: 1.7; position: relative; }

/* === CARDS === */
.card {
  background: var(--sienna); border: .5px solid rgba(42,32,21,1);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.5);
  transition: border-color 300ms, box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.card:hover { border-color: var(--border-hi); transform: translateY(-4px); box-shadow: 0 14px 32px -12px rgba(0,0,0,.6); }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: sepia(.3) contrast(1.1) brightness(.8); transition: transform 600ms; }
.card:hover .card-img { transform: scale(1.04); }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-epoch { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.card-title { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--parchment); margin-bottom: 10px; line-height: 1.3; }
.card-excerpt { font-size: 13px; color: var(--ochre); line-height: 1.6; flex: 1; margin-bottom: 16px; }
.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: .5px solid var(--border); padding-top: 14px;
  font-family: var(--font-mono); font-size: 10px; color: rgba(201,169,110,.45);
}
.card-cta { font-size: 13px; color: var(--ochre); transition: color var(--transition); margin-top: 10px; }
.card:hover .card-cta { color: var(--gold); }

/* === MAP PAGE === */
.map-layout { display: flex; height: calc(100vh - 65px); overflow: hidden; }
.map-pane { flex: 1; position: relative; }
.map-panel {
  width: 380px; flex-shrink: 0; overflow-y: auto;
  background: var(--night); border-left: 1px solid var(--border);
}
@media (max-width: 900px) {
  .map-layout { flex-direction: column-reverse; height: auto; }
  .map-layout .map-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 50vh; }
  .map-layout .map-pane { height: 50vh; }
}
.map-filter-bar {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 1001;
  background: rgba(18,14,8,.9); backdrop-filter: blur(12px);
  border: .5px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; gap: 0; overflow: hidden;
}
.map-filter-btn {
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(201,169,110,.55); border-right: .5px solid var(--border);
  display: flex; align-items: center; gap: 6px; transition: all var(--transition); white-space: nowrap;
}
.map-filter-btn:last-child { border-right: none; }
.map-filter-btn:hover, .map-filter-btn.active { background: rgba(201,169,110,.08); color: var(--gold); }
.map-legend {
  position: absolute; bottom: 16px; left: 16px; z-index: 900;
  background: rgba(18,14,8,.9); backdrop-filter: blur(10px);
  border: .5px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.map-legend-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); }
.pin-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pin-available { background: var(--gold); }
.pin-soon { background: var(--crimson); }
.pin-video { background: var(--blue-arc-lt); }
.panel-header { padding: 20px; border-bottom: 1px solid var(--border); }
.panel-empty { padding: 40px 20px; text-align: center; }
.panel-empty p { color: var(--ochre); font-size: 14px; }
.panel-body { padding: 20px; }
.panel-epoch { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; }
.panel-title { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--parchment); margin-bottom: 12px; line-height: 1.25; }
.panel-meta { display: flex; gap: 16px; margin: 14px 0; flex-wrap: wrap; }
.panel-meta-item { font-family: var(--font-mono); font-size: 10px; color: var(--ochre); display: flex; align-items: center; gap: 5px; }
.panel-excerpt { font-size: 14px; color: var(--ochre); line-height: 1.65; margin-bottom: 20px; }
.panel-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); filter: sepia(.3) brightness(.8); margin-bottom: 16px; }
.panel-divider { height: 1px; background: var(--border); margin: 16px 0; }
.panel-related h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.panel-related-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--border); cursor: pointer; transition: opacity var(--transition); }
.panel-related-item:hover { opacity: .75; }
.panel-related-item:last-child { border-bottom: none; }
.panel-related-img { width: 56px; height: 40px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; filter: sepia(.3) brightness(.8); }
.panel-related-info .title { font-size: 13px; color: var(--parchment); line-height: 1.3; }
.panel-related-info .epoch { font-family: var(--font-mono); font-size: 9px; color: var(--gold); }

/* Leaflet overrides */
.leaflet-container { background: #0D0B07 !important; }
.leaflet-tile-pane { filter: brightness(.9) contrast(1.05); }
.leaflet-control-zoom a { background: var(--leather) !important; color: var(--gold) !important; border-color: var(--border) !important; }
.leaflet-control-zoom a:hover { background: var(--sienna) !important; }
.leaflet-popup-content-wrapper { background: var(--leather) !important; border: .5px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--parchment) !important; box-shadow: 0 8px 32px rgba(0,0,0,.6) !important; }
.leaflet-popup-tip { background: var(--leather) !important; }
.leaflet-popup-content { font-family: var(--font-ui); font-size: 13px; }

/* Custom map markers */
.custom-pin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--night); box-shadow: 0 0 0 1px rgba(201,169,110,.4), 0 4px 12px rgba(0,0,0,.5);
  cursor: pointer; transition: transform .15s;
}
.custom-pin:hover { transform: scale(1.3); }
.custom-pin.available { background: var(--gold); }
.custom-pin.soon { background: var(--crimson); box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.5); }
.custom-pin.video { background: var(--blue-arc); box-shadow: 0 0 0 2px var(--blue-arc-lt), 0 4px 12px rgba(0,0,0,.5); }
.custom-pin.active { transform: scale(1.5); z-index: 1000; }

/* === PRICING CARDS === (movido desde muralla-islamica.html — genérico,
   route-checkout.js lo genera por plantilla en cualquier página de ruta) */
.pricing-grid {
  display: grid;
  /* auto-fit + justify-content:center en vez de repeat(3,1fr): con
     route_standard/premium pausados hoy solo hay 1 tarjeta — un grid de 3
     columnas fijas la dejaría pegada a la izquierda con hueco vacío
     alrededor. Así se centra sola con 1, 2 o 3 tarjetas, sin JS ni clase
     condicional — al reactivar los niveles pausados no hace falta tocar
     este CSS. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
  justify-content: center;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; max-width: 400px; } }

.pricing-card {
  background: linear-gradient(160deg, var(--leather), var(--sienna));
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 26px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}
.pricing-card:hover { border-color: var(--border-hi); transform: translateY(-4px); box-shadow: 0 14px 32px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.pricing-card-featured {
  border-color: var(--gold);
  box-shadow: 0 10px 28px -8px rgba(201,169,110,.35), 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.pricing-card-featured:hover { box-shadow: 0 16px 36px -8px rgba(201,169,110,.4), 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1); }
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--night);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 10px;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 4px 12px -2px rgba(201,169,110,.5);
}
.pricing-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: 6px;
}
.pricing-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--parchment);
  margin-bottom: 16px;
  line-height: 1.15;
}
.pricing-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
}
.pricing-price-note {
  font-size: 11px;
  color: var(--ochre);
  margin-bottom: 24px;
}
/* Información precontractual (art. 97 TRLGDCU) — validez y desistimiento,
   visible ANTES de pagar, no solo en la política de reembolsos. */
.pricing-legal-note {
  font-size: 10.5px; line-height: 1.5; color: var(--ochre);
  text-align: center; margin-top: 10px;
}
.pricing-legal-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: .5px solid var(--border);
  padding-top: 20px;
}
.pricing-features li {
  font-size: 13px;
  color: var(--ochre);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pricing-features li::before {
  content: '✓';
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  flex-shrink: 0;
}
/* "Para cuántas personas" — añadido 2026-08-24, reforzado visualmente
   2026-08-25 (antes se apoyaba solo en un borde arriba/abajo, quedaba
   demasiado plano). Sigue siendo UN acceso (un enlace compartible sin
   límite de dispositivos simultáneos, ver shareRoute() en
   account-purchases.js), la cantidad solo escala el precio y queda
   guardada para mostrarla luego en "Mis rutas". */
.pricing-qty {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 16px; background: rgba(0,0,0,.15);
  border: .5px solid var(--border); border-radius: var(--radius);
}
.pricing-qty-label { font-size: 13px; color: var(--parchment); font-family: var(--font-ui); }
.pricing-qty-control {
  display: flex; align-items: stretch;
  border: .5px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.pricing-qty-btn {
  width: 34px; height: 34px; border: none; background: transparent; color: var(--gold);
  font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color var(--transition);
}
.pricing-qty-btn:hover:not(:disabled) { background: rgba(201,169,110,.12); }
.pricing-qty-btn:disabled { opacity: .3; cursor: default; }
.pricing-qty-value {
  font-family: var(--font-mono); font-size: 14px; color: var(--parchment); min-width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-left: .5px solid var(--border); border-right: .5px solid var(--border);
}
.pricing-qty-total { font-family: var(--font-mono); font-size: 12px; color: var(--gold); white-space: nowrap; width: 100%; text-align: right; }

/* Experience picker for route_standard/route_premium (added 2026-08-21 —
   replaces the old fixed, always-empty venue placeholder). */
.pricing-experience-picker { margin-bottom: 20px; }
.pricing-experience-picker .form-label { display: block; margin-bottom: 8px; }
.exp-choice-empty { font-size: 12px; color: var(--ochre); }

.exp-choice-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.exp-choice-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.exp-choice {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: .5px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.exp-choice:hover { border-color: var(--border-hi); }
.exp-choice-radio:checked + .exp-choice-thumb { box-shadow: 0 0 0 2px var(--gold); }
.exp-choice-radio:checked ~ .exp-choice-body .exp-choice-name { color: var(--gold); }
.exp-choice:has(.exp-choice-radio:checked) { border-color: var(--gold); background: rgba(201,169,110,.06); }
.exp-choice-radio:focus-visible ~ .exp-choice-body { outline: 2px solid var(--gold); outline-offset: 2px; }
.exp-choice-thumb {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--sienna) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--ochre);
  transition: box-shadow var(--transition);
}
.exp-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.exp-choice-name { font-size: 13px; font-weight: 600; color: var(--parchment); transition: color var(--transition); }
.exp-choice-desc { font-size: 11px; color: var(--ochre); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.exp-choice-price { font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
.exp-choice-price-original { color: var(--ochre); text-decoration: line-through; margin-right: 6px; }
.exp-choice-price-current { color: var(--gold); font-weight: 600; }
.pricing-access-msg {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  border: .5px solid rgba(201,169,110,.3);
  padding: 10px 24px;
  border-radius: var(--radius);
  display: inline-block;
  margin-top: 20px;
}

/* Franja de confianza — reafirma la decisión de compra justo antes de las
   tarjetas de precio (pago seguro, flexibilidad, sin apps). Reutilizable
   en cualquier página de compra, no solo la de una ruta. */
.trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-bottom: 36px; }
.trust-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--ochre); }
.trust-item svg { color: var(--gold); flex-shrink: 0; }

/* === BLOG === */
.blog-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.blog-hero-img { aspect-ratio: 4/3; overflow: hidden; }
.blog-hero-img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) contrast(1.1) brightness(.8); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-btn {
  padding: 6px 14px; background: transparent; border: .5px solid var(--border);
  border-radius: var(--radius); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ochre); cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,169,110,.06); }

/* === ARTICLE === */
.article-hero { position: relative; height: 56vh; min-height: 400px; overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.4) brightness(.7); }
.article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--night) 0%, rgba(18,14,8,.3) 70%, transparent 100%); }
.article-body { max-width: 720px; margin: 0 auto; padding: 0 var(--page-pad); }
.article-body h2 { margin: 40px 0 16px; }
.article-body h3 { margin: 32px 0 12px; }
.article-body p { margin-bottom: 20px; color: var(--ochre); }
.article-body p:first-of-type { font-size: 18px; color: var(--parchment); line-height: 1.75; }
.article-body blockquote {
  margin: 32px 0; padding: 20px 24px; border-left: 2px solid var(--gold);
  background: var(--leather); border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body blockquote p { color: var(--parchment); font-family: var(--font-display); font-style: italic; font-size: 18px; margin: 0; }

/* === BOOKING === */
.booking-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; } }
.booking-summary { background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 90px; }
.booking-summary img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); filter: sepia(.3) brightness(.8); margin-bottom: 20px; }
.booking-steps { display: flex; gap: 0; margin-bottom: 32px; }
.booking-step {
  flex: 1; padding: 10px; text-align: center; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre);
  border-bottom: 2px solid var(--border); transition: all var(--transition);
}
.booking-step.active { color: var(--gold); border-bottom-color: var(--gold); }
.booking-step.done { color: rgba(201,169,110,.5); border-bottom-color: rgba(201,169,110,.3); }

/* Calendar picker */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 13px; color: var(--parchment); cursor: pointer;
  transition: all var(--transition); border: .5px solid transparent;
}
.cal-day:hover { background: rgba(201,169,110,.08); border-color: var(--border); }
.cal-day.today { color: var(--gold); font-weight: 600; }
.cal-day.selected { background: var(--gold); color: var(--night); font-weight: 600; }
.cal-day.disabled { color: rgba(201,169,110,.2); cursor: not-allowed; pointer-events: none; }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-nav { background: none; border: .5px solid var(--border); color: var(--gold); cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); transition: all var(--transition); }
.cal-nav:hover { border-color: var(--gold); background: rgba(201,169,110,.08); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.cal-weekday { text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); }

/* Time picker */
.time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.time-slot {
  padding: 10px; text-align: center; border: .5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; color: var(--parchment); cursor: pointer; transition: all var(--transition);
}
.time-slot:hover { border-color: var(--gold); color: var(--gold); }
.time-slot.selected { background: rgba(201,169,110,.12); border-color: var(--gold); color: var(--gold); }
.time-slot.full { color: rgba(201,169,110,.2); cursor: not-allowed; text-decoration: line-through; }

/* Quantity stepper */
.qty-stepper { display: flex; align-items: center; gap: 16px; }
.qty-btn {
  width: 36px; height: 36px; border: .5px solid var(--border); border-radius: var(--radius);
  background: none; color: var(--gold); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.qty-btn:hover { border-color: var(--gold); background: rgba(201,169,110,.08); }
.qty-value { font-family: var(--font-mono); font-size: 18px; color: var(--parchment); min-width: 24px; text-align: center; }

/* === ACCOUNT SHELL === (movido desde cuenta.html — genérico para
   cualquier página con el mismo patrón de barra lateral + panel) */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .account-layout { grid-template-columns: 1fr; } }

.account-sidebar {
  background: var(--sienna); border: .5px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; top: 88px;
  box-shadow: 0 4px 16px -6px rgba(0,0,0,.4);
}
.account-avatar { background: linear-gradient(135deg, var(--leather), var(--sienna)); padding: 32px 24px; text-align: center; border-bottom: .5px solid var(--border); }
.account-avatar-circle {
  width: 64px; height: 64px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--night);
}
.account-name { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--parchment); margin-bottom: 4px; }
.account-email { font-family: var(--font-mono); font-size: 10px; color: var(--ochre); letter-spacing: .04em; }
.account-nav { list-style: none; padding: 8px 0; }
.account-nav li a, .account-nav li button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 20px 11px 18px; font-family: var(--font-ui); font-size: 13px; color: var(--ochre);
  background: none; border: none; border-left: 2px solid transparent; cursor: pointer; text-align: left;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.account-nav li a:hover, .account-nav li button:hover { color: var(--parchment); background: rgba(201,169,110,.06); }
.account-nav li a.active { color: var(--gold); background: rgba(201,169,110,.08); border-left-color: var(--gold); }
.account-nav li.nav-sep { height: .5px; background: var(--border); margin: 8px 0; }

.account-panel { background: var(--sienna); border: .5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 16px -6px rgba(0,0,0,.4); }
.account-panel-header { padding: 24px 28px; border-bottom: .5px solid var(--border); }
.account-panel-title { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--parchment); margin-bottom: 4px; }
.account-panel-sub { font-family: var(--font-mono); font-size: 10px; color: var(--ochre); letter-spacing: .08em; text-transform: uppercase; }
.account-panel-body { padding: 28px; }

/* === ROUTE / BOOKING CARDS + STATUS BADGES === (movido desde cuenta.html —
   account-purchases.js genera estas clases por plantilla) */
.booking-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: .5px solid var(--border); }
.booking-item:last-child { border-bottom: none; }
.booking-date { width: 52px; flex-shrink: 0; text-align: center; background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius); padding: 8px 4px; }
.booking-date-day { font-family: var(--font-display); font-size: 24px; color: var(--gold); line-height: 1; }
.booking-date-mon { font-family: var(--font-mono); font-size: 9px; color: var(--ochre); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.booking-info { flex: 1; }
.booking-title { font-size: 15px; color: var(--parchment); margin-bottom: 4px; }
.booking-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ochre); letter-spacing: .04em; }
.booking-badge {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 20px; border: .5px solid; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.badge-confirmed { color: #5A9A6E; border-color: #5A9A6E; background: rgba(90,154,110,.08); }
.badge-pending   { color: var(--gold); border-color: var(--gold); background: rgba(201,169,110,.08); }
.badge-active    { color: #5A9A6E; border-color: #5A9A6E; background: rgba(90,154,110,.08); }
.badge-expired   { color: #7A6A50; border-color: #7A6A50; background: rgba(122,106,80,.08); }
.badge-cancelled { color: #8B4444; border-color: #8B4444; background: rgba(139,68,68,.08); }

.empty-state { text-align: center; padding: 48px 24px; }
.empty-state-icon { width: 48px; height: 48px; margin: 0 auto 16px; opacity: .3; }
.empty-state-title { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--parchment); margin-bottom: 8px; }
.empty-state-text { font-size: 14px; color: var(--ochre); line-height: 1.6; max-width: 320px; margin: 0 auto 24px; }

.route-card {
  background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 12px;
  transition: border-color var(--transition);
}
.route-card:hover { border-color: var(--border-hi); }
.route-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.route-card-title { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--parchment); }
.route-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ochre); letter-spacing: .04em; margin-bottom: 14px; }

/* === ACTIVATION WIZARD === (movido desde cuenta.html) */
.wizard-wrap { max-width: 460px; }
.wizard-back {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ochre); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 24px; letter-spacing: .04em;
}
.wizard-back:hover { color: var(--parchment); }
.wizard-section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.venue-notice {
  background: rgba(201,169,110,.06); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: .5px solid rgba(201,169,110,.4); border-radius: var(--radius); padding: 20px; margin-bottom: 24px;
}
.date-step { transition: opacity 300ms var(--ease-premium), filter 300ms var(--ease-premium); }
.date-step.locked { opacity: .45; filter: blur(2px); pointer-events: none; }

/* === AUTH PAGES === */
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--night);
  background-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(201,169,110,.04) 0%, transparent 70%);
}
.auth-card {
  background: var(--leather); border: .5px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 48px);
  width: 100%; max-width: 420px;
}
.auth-logo { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 40px; color: var(--gold); text-align: center; display: block; margin-bottom: 6px; }
.auth-subtitle { text-align: center; font-size: 13px; color: var(--ochre); margin-bottom: 36px; line-height: 1.5; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: .5px; background: var(--border); }
.auth-divider span { font-family: var(--font-mono); font-size: 9px; color: var(--ochre); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }
.auth-footer { text-align: center; margin-top: 22px; font-size: 13px; color: var(--ochre); }
.auth-footer a { color: var(--gold); }
.btn-oauth {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 11px 16px;
  background: rgba(255,255,255,.04); border: .5px solid var(--border);
  border-radius: var(--radius); color: var(--parchment);
  font-family: var(--font-ui); font-size: 14px; cursor: pointer;
  transition: background 200ms, border-color 200ms;
}
.btn-oauth:hover { background: rgba(255,255,255,.09); border-color: var(--border-hi); }
.btn-oauth:disabled { opacity: .5; cursor: not-allowed; }
.password-toggle { position: relative; }
.password-toggle .form-control { padding-right: 44px; }
.password-toggle-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ochre); cursor: pointer; font-size: 18px;
  transition: color var(--transition);
}
.password-toggle-btn:hover { color: var(--gold); }

/* === NEWSLETTER MODULE === */
.newsletter-module {
  background: var(--leather); border-left: 2px solid var(--gold);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0;
}
.newsletter-module h3 { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--parchment); margin-bottom: 6px; }
.newsletter-module p { font-size: 13px; color: var(--ochre); margin-bottom: 16px; line-height: 1.55; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-input {
  flex: 1; min-width: 200px; background: #1E1610; border: .5px solid #4A3A25;
  border-radius: var(--radius); padding: 10px 14px; color: var(--gold); font-family: var(--font-ui); font-size: 14px; outline: none; transition: border-color var(--transition);
}
.newsletter-input::placeholder { color: var(--ochre); }
.newsletter-input:focus { border-color: var(--gold); }

/* === AUTH MODAL === */
#auth-modal {
  display: none; position: fixed; inset: 0; z-index: 1500;
  background: rgba(18,14,8,.88); backdrop-filter: blur(5px);
  align-items: center; justify-content: center;
}
#auth-modal.open { display: flex; }
.auth-modal-card {
  background: var(--leather); border: .5px solid var(--border-hi);
  border-radius: var(--radius-lg); padding: 40px 36px;
  max-width: 380px; width: 90%; text-align: center;
}
.auth-modal-card .modal-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block;
}
.auth-modal-card h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--parchment); margin-bottom: 12px;
}
.auth-modal-card p {
  font-size: 13px; color: var(--ochre); line-height: 1.65; margin-bottom: 28px;
}
.auth-modal-card .modal-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-modal-dismiss {
  background: none; border: none; color: var(--ochre); cursor: pointer;
  font-size: 13px; margin-top: 8px; padding: 6px;
}
.auth-modal-dismiss:hover { color: var(--parchment); }

/* === COOKIE BANNER === */
#cookie-banner {
  position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 460px;
  background: var(--leather); border: .5px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px; z-index: 900; display: none;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
#cookie-banner.show { display: block; }
#cookie-banner h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
#cookie-banner p { font-size: 13px; color: var(--ochre); margin-bottom: 16px; line-height: 1.5; }
#cookie-banner p a { color: var(--gold); }
#cookie-banner .btn-row { display: flex; gap: 8px; }

#install-banner {
  position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 380px;
  background: var(--leather); border: .5px solid var(--gold);
  border-radius: var(--radius-lg); padding: 20px 22px; z-index: 900; display: none;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
#install-banner.show { display: block; }
#install-banner h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
#install-banner p { font-size: 13px; color: var(--ochre); margin-bottom: 16px; line-height: 1.5; }
#install-banner .btn-row { display: flex; gap: 8px; }
#install-banner strong { color: var(--parchment); }
#install-banner .install-steps { list-style: none; counter-reset: step; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#install-banner .install-steps li { counter-increment: step; font-size: 13px; color: var(--ochre); line-height: 1.5; padding-left: 26px; position: relative; }
#install-banner .install-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  border-radius: 50%; border: .5px solid var(--gold); color: var(--gold);
  font-family: var(--font-mono); font-size: 10px; display: flex; align-items: center; justify-content: center;
}
#install-banner .install-icon { display: inline-flex; vertical-align: -3px; color: var(--gold); }
#install-banner .install-link {
  display: block; margin: 10px 0 0; background: none; border: none; padding: 0;
  font-size: 11px; color: var(--ochre); opacity: .65; cursor: pointer; text-decoration: underline;
}
#install-banner .install-link:hover { opacity: 1; }

/* === TOUR / ONBOARDING === */
#tour-overlay {
  position: fixed; inset: 0; z-index: 2000000; display: none; pointer-events: none;
}
#tour-overlay.show { display: block; }
.tour-mask {
  position: absolute; background: rgba(15,11,7,.74); pointer-events: auto;
  transition: all 300ms var(--ease-premium);
}
.tour-mask-ring {
  position: absolute; border: 2px solid var(--gold); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(201,169,110,.15); pointer-events: none;
  transition: all 300ms var(--ease-premium);
}
#tour-bubble {
  position: fixed; z-index: 2000001; width: min(320px, calc(100vw - 32px));
  background: var(--leather); border: .5px solid var(--gold);
  border-radius: var(--radius-lg); padding: 18px 20px; display: none;
  box-shadow: 0 20px 56px rgba(0,0,0,.7);
  transition: top 300ms var(--ease-premium), left 300ms var(--ease-premium);
}
#tour-bubble.show { display: block; }
#tour-bubble h4 { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--parchment); margin-bottom: 6px; }
#tour-bubble p { font-size: 13px; color: var(--ochre); line-height: 1.6; margin-bottom: 16px; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 12px; }
.tour-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-hi); }
.tour-dot.active { background: var(--gold); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-skip { background: none; border: none; color: var(--ochre); font-size: 12px; cursor: pointer; padding: 8px 0; }
.tour-skip:hover { color: var(--parchment); }
.tour-nav { display: flex; gap: 8px; }

/* Esquina inferior DERECHA, a propósito: el banner de cookies y el de
   instalación PWA anclan ambos a la izquierda (left+right+max-width sin
   centrar = quedan pegados a la izquierda) y pueden estar visibles a la vez
   que este botón en una primera visita — la derecha es la única esquina
   libre en todas las páginas (el contenedor de toasts vive arriba). */
#tour-help-btn {
  position: fixed; bottom: 20px; right: 20px; z-index: 950;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--leather); border: .5px solid var(--border-hi); color: var(--gold);
  font-family: var(--font-mono); font-size: 15px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: transform var(--transition);
}
#tour-help-btn:hover { transform: translateY(-2px); border-color: var(--gold); }

/* === TOASTS === */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px; color: var(--parchment); max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: all;
  animation: toast-in .25s ease; display: flex; align-items: center; gap: 10px;
}
.toast.success { border-color: var(--gold); }
.toast.error { border-color: var(--crimson); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* === LEGAL PAGES === */
.legal-content { max-width: 780px; }
.legal-content h2 { margin: 40px 0 14px; }
.legal-content h3 { margin: 28px 0 10px; color: var(--parchment); }
.legal-content p { color: var(--ochre); margin-bottom: 16px; }
.legal-content ul { color: var(--ochre); padding-left: 20px; margin-bottom: 16px; }
.legal-content ul li { margin-bottom: 6px; }
.legal-content a { color: var(--gold); }
.legal-date { font-family: var(--font-mono); font-size: 10px; color: rgba(201,169,110,.4); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 32px; display: block; }

/* === LOADING === */
.spinner { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay { position: fixed; inset: 0; background: rgba(18,14,8,.8); z-index: 999; display: flex; align-items: center; justify-content: center; }

/* === STAT / METRIC === */
.stat-card { background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; }
.stat-number { font-family: var(--font-display); font-style: italic; font-size: 48px; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); }

/* === TESTIMONIALS === */
.testimonial { background: var(--sienna); border: .5px solid var(--border); border-radius: var(--radius-lg); padding: 28px; border-left: 2px solid var(--gold); }
.testimonial blockquote { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--parchment); line-height: 1.6; margin-bottom: 16px; }
.testimonial-author { display: flex; align-items: center; gap: 8px; }
.testimonial-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.testimonial-role { font-family: var(--font-mono); font-size: 9px; color: rgba(201,169,110,.4); }
.stars { display: flex; gap: 2px; margin-bottom: 12px; }
.stars span { color: var(--gold); font-size: 14px; }

/* === STEPS (how it works) === */
.step-card { text-align: center; padding: 32px 20px; }
.step-number {
  width: 64px; height: 64px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px;
  transform: rotate(45deg); background: var(--night);
}
.step-number span { transform: rotate(-45deg); font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold); font-weight: 700; }
.step-number.active { background: var(--gold); }
.step-number.active span { color: var(--night); }
.step-title { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--parchment); margin-bottom: 10px; }
.step-desc { font-size: 14px; color: var(--ochre); line-height: 1.6; }

/* === SECTION LABEL LINE === */
.section-header { margin-bottom: 48px; }
.section-header .label-mono { display: block; margin-bottom: 10px; }
.section-header .title { font-family: var(--font-display); font-style: italic; color: var(--gold); }
.section-header .subtitle { font-size: 16px; color: var(--ochre); margin-top: 10px; max-width: 520px; line-height: 1.6; }

/* === UTILITIES === */
.text-gold { color: var(--gold); }
.text-parchment { color: var(--parchment); }
.text-muted { color: var(--ochre); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 48px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 24px; }
.mb-lg { margin-bottom: 48px; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.bg-leather { background: var(--leather); }
.bg-sienna { background: var(--sienna); }
.bg-alt { background: var(--leather); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }

/* === AUTH PAGE LAYOUT === */
.auth-page { background: var(--night); }
.auth-main {
  min-height: calc(100vh - 65px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background-image: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(201,169,110,.05) 0%, transparent 70%);
}
.auth-card {
  background: var(--leather);
  border: .5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
  width: 100%;
  max-width: 420px;
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand .logo-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
.auth-brand .logo-link { text-decoration: none; }
.auth-subtitle { font-size: 13px; color: var(--ochre); line-height: 1.5; }
.auth-switch { text-align: center; font-size: 13px; color: var(--ochre); margin-top: 4px; }
.auth-link { color: var(--gold); text-decoration: none; transition: color var(--transition); }
.auth-link:hover { color: var(--gold-light); }
.auth-legal {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(122,106,80,.4);
  letter-spacing: .04em;
  margin-top: 20px;
  max-width: 380px;
  line-height: 1.5;
}
.auth-legal a { color: rgba(201,169,110,.4); }
.auth-legal a:hover { color: var(--gold); }

/* === PASSWORD INPUT === */
.input-password-wrap { position: relative; }
.input-password-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ochre);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
}
.pw-toggle:hover { color: var(--gold); }

/* === CHECKBOX === */
.checkbox-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  color: var(--ochre);
  line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* === LEGAL BODY === */
.legal-body {
  max-width: 760px;
}
.legal-body h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--parchment);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: .5px solid var(--border);
}
.legal-body h3 {
  font-size: 15px;
  color: var(--parchment);
  margin: 24px 0 10px;
}
.legal-body p { color: var(--ochre); font-size: 14px; line-height: 1.75; margin-bottom: 16px; }
.legal-body ul, .legal-body ol { color: var(--ochre); font-size: 14px; padding-left: 22px; margin-bottom: 16px; }
.legal-body li { margin-bottom: 6px; line-height: 1.65; }
.legal-body strong { color: var(--parchment); }
.legal-body a { color: var(--gold); }
.legal-body table { border-radius: var(--radius); overflow: hidden; }
.legal-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: .5px solid var(--border);
}
.legal-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: .06em;
  transition: color var(--transition);
}
.legal-nav a:hover { color: var(--gold-light); }

/* ============================================================
   INTUS Design System v2 — taste-skill extensions
   ============================================================ */

:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --green-disc:  #4CAF50;
  --green-disc-lt: #7FD082;
}

/* === ENTRY ANIMATIONS === */
@keyframes shimmer-move {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,.35); }
  50%       { box-shadow: 0 0 0 8px rgba(201,169,110,.0); }
}

/* Antes .animate-in era una animación que arrancaba al cargar la página,
   así que cualquier sección fuera de la primera pantalla ya había
   terminado de "aparecer" mucho antes de que alguien llegara a verla —
   scroll abajo y todo estaba ya ahí, quieto (motivo raíz de que la web
   se sintiera estática, feedback 2026-08-20). Ahora es una transición
   que dispara la clase .in-view, añadida por IntersectionObserver en
   intus.js cuando el elemento entra en pantalla. */
.animate-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-spring), transform 0.65s var(--ease-spring);
}
.animate-in.in-view { opacity: 1; transform: none; }
.delay-1.in-view { transition-delay:  80ms; }
.delay-2.in-view { transition-delay: 160ms; }
.delay-3.in-view { transition-delay: 240ms; }
.delay-4.in-view { transition-delay: 320ms; }
.delay-5.in-view { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .animate-in { opacity: 1; transform: none; transition: none; }
}

/* === HERO SPLIT LAYOUT === */
.hero-split .hero-content {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 100dvh;
  padding: 0;
  align-items: stretch;
  width: 100%;
  max-width: var(--max-w);
}
.hero-split .hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--page-pad) 80px;
  position: relative;
  z-index: 2;
}
.hero-split .hero-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.hero-split .hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--night) 0%, rgba(18,14,8,.25) 45%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-split .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.5) brightness(.4) contrast(1.15);
  transition: transform 800ms var(--ease-spring);
}
.hero-split .hero-visual img:hover { transform: scale(1.04); }

@media (max-width: 860px) {
  .hero-split .hero-content { grid-template-columns: 1fr; }
  .hero-split .hero-visual { display: none; }
  .hero-split .hero-left { min-height: 100dvh; padding: 100px 20px 64px; }
}

/* === VALUE CARDS ASYMMETRIC === */
.value-grid-asym {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  min-height: 460px;
}
.value-card-primary { grid-row: span 2; }
/* Base de la tarjeta — faltaba en todo el sitio (bug heredado): solo
   existían el modificador -primary y el selector :hover .value-icon-wrap,
   nunca el propio .value-card. Se renderizaba sin borde, fondo ni
   padding, solo el contenido suelto dentro de la rejilla. */
.value-card {
  background: var(--leather);
  border: .5px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition);
}
.value-card:hover { border-color: rgba(201,169,110,.4); }
.value-icon-wrap {
  width: 48px; height: 48px;
  border: .5px solid rgba(201,169,110,.22);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); flex-shrink: 0;
  transition: border-color var(--transition);
}
.value-card:hover .value-icon-wrap { border-color: rgba(201,169,110,.5); }

@media (max-width: 768px) {
  .value-grid-asym { grid-template-columns: 1fr; grid-template-rows: auto; min-height: unset; }
  .value-card-primary { grid-row: span 1; }
}

/* === FEATURED ROUTES ASYMMETRIC === */
.routes-asym {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.routes-asym > *:first-child { grid-row: span 2; }
.routes-asym > *:first-child img { height: 100%; min-height: 500px; }
.routes-asym > *:not(:first-child) img { height: 228px; }

@media (max-width: 900px) {
  .routes-asym { grid-template-columns: 1fr 1fr; }
  .routes-asym > *:first-child { grid-row: span 1; }
  .routes-asym > *:first-child img { min-height: unset; height: 320px; }
  .routes-asym > *:not(:first-child) img { height: 220px; }
}
@media (max-width: 600px) { .routes-asym { grid-template-columns: 1fr; } }

/* === ROUTE META === */
.route-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.route-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ochre);
}
.route-meta-item svg { color: var(--gold); flex-shrink: 0; }


/* === SKELETON LOADER === */
.skeleton {
  background: linear-gradient(90deg, var(--leather) 25%, var(--sienna) 37%, var(--leather) 63%);
  background-size: 400% 100%;
  animation: shimmer-move 1.4s ease infinite;
  border-radius: var(--radius);
}

/* === ESTABLISHMENT PINS (map) === */
.custom-pin.est-pin {
  border-radius: 3px;
  transform: rotate(45deg) !important;
  width: 12px; height: 12px;
  transition: transform .15s;
}
.custom-pin.est-pin:hover { transform: rotate(45deg) scale(1.4) !important; }
.custom-pin.est-pin.active { transform: rotate(45deg) scale(1.6) !important; z-index: 1000; }
.custom-pin.restaurant-est { background: #C4722A; }
.custom-pin.bar-est         { background: #8B5A2B; }
.custom-pin.museo-est       { background: #3A6DB5; }
.custom-pin.tienda-est      { background: #3A8B5E; }
.custom-pin.cafe-est        { background: #8B7355; }
.custom-pin.has-discount    { box-shadow: 0 0 0 2px var(--green-disc), 0 4px 12px rgba(0,0,0,.5); }

/* Legend dots for establishment categories */
.pin-restaurant { background: #C4722A; border-radius: 2px; transform: rotate(45deg); }
.pin-bar        { background: #8B5A2B; border-radius: 2px; transform: rotate(45deg); }
.pin-museo      { background: #3A6DB5; border-radius: 2px; transform: rotate(45deg); }
.pin-tienda     { background: #3A8B5E; border-radius: 2px; transform: rotate(45deg); }
.pin-cafe       { background: #8B7355; border-radius: 2px; transform: rotate(45deg); }

/* === BADGE DISCOUNT === */
.badge-discount {
  background: rgba(76,175,80,.12); border: .5px solid var(--green-disc); color: var(--green-disc-lt);
}

/* === ESTABLISHMENT PANEL === */
.est-category-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ochre); margin-bottom: 10px;
}
.est-discount-box {
  background: rgba(76,175,80,.07); border: .5px solid rgba(76,175,80,.35);
  border-radius: var(--radius); padding: 14px 16px; margin: 14px 0;
}
.est-discount-amount {
  font-family: var(--font-display); font-style: italic; font-size: 24px;
  color: var(--green-disc-lt); display: block; margin-bottom: 5px;
}
.est-discount-desc { font-size: 12px; color: rgba(127,208,130,.65); line-height: 1.45; }
.est-hours {
  font-family: var(--font-mono); font-size: 10px; color: var(--ochre);
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
}

/* === MAP ESTABLISHMENTS TOGGLE === */
.map-est-toggle {
  padding: 10px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(201,169,110,.55); border-right: .5px solid var(--border);
  display: flex; align-items: center; gap: 6px; transition: all var(--transition); white-space: nowrap;
}
.map-est-toggle.active { background: rgba(76,175,80,.08); color: var(--green-disc-lt); }
.map-est-toggle:last-child { border-right: none; }

/* === ROUTE MODE OVERLAY === */
.route-mode-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: rgba(12,9,5,.98); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease-spring);
}
.route-mode-bar.active { transform: translateY(0); }
.route-mode-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 14px var(--page-pad);
}
.route-progress { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-bottom: 14px; }
.route-progress-fill { height: 100%; background: var(--gold); border-radius: 1px; transition: width 0.6s var(--ease-spring); }
.route-current-stop { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; }
.route-stop-num {
  width: 44px; height: 44px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(45deg); flex-shrink: 0; transition: background 0.3s;
}
.route-stop-num span { transform: rotate(-45deg); font-family: var(--font-mono); font-size: 13px; color: var(--gold); }
.route-stop-num.reached { background: var(--gold); }
.route-stop-num.reached span { color: var(--night); }
.route-stop-info h4 { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--parchment); margin-bottom: 3px; }
.route-dist-msg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ochre); }
.route-dist-msg.near { color: var(--green-disc-lt); }

/* === STOP LOCK STATES (route mode) === */
.stop-item { position: relative; transition: opacity 0.4s ease; }
.stop-item.mode-locked .stop-body > p,
.stop-item.mode-locked .stop-img { filter: blur(5px); user-select: none; pointer-events: none; }
.stop-item.mode-approaching .stop-number { animation: pulse-ring 1.5s ease-in-out infinite; }
.stop-item.mode-unlocked .stop-lock-pill { display: none; }
.stop-lock-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(201,169,110,.4); margin-top: 8px;
}

/* === ESTABLISHMENT STOPS (route detail) === */
.est-stop-row {
  display: flex; gap: 12px; padding: 12px 14px;
  background: var(--leather); border: .5px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px;
  transition: border-color var(--transition);
}
.est-stop-row:hover { border-color: var(--border-hi); }
.est-dot {
  width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg);
  flex-shrink: 0; margin-top: 5px;
}
.est-stop-name { font-size: 14px; color: var(--parchment); font-weight: 500; margin-bottom: 3px; }
.est-stop-desc { font-size: 12px; color: var(--ochre); line-height: 1.5; }
.est-disc-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  background: rgba(76,175,80,.1); border: .5px solid rgba(76,175,80,.4); color: var(--green-disc-lt);
  padding: 2px 8px; border-radius: 2px; margin-top: 5px;
}

/* === ROUTE LEAFLET MAP === */
.route-map-wrap { background: var(--leather); border: .5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 20px; }
.route-map-head { padding: 13px 16px; border-bottom: .5px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.route-map-head span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
#route-leaflet-map { height: 260px; }

/* === FILTER BAR MOBILE SCROLL === (compartido: rutas.html) */
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }
}

/* ============================================================
   INTUS v2.2 — Global form alias, logo Club, responsive polish
   ============================================================ */

/* === FORM-INPUT ALIAS ===
   Many pages use .form-input; CSS originally only styled .form-control.
   This aliases them so both work identically. */
.form-input {
  width: 100%;
  background: var(--leather);
  border: .5px solid rgba(201,169,110,.3);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 15px;
  transition: border-color var(--transition);
  outline: none;
  display: block;
}
.form-input::placeholder { color: var(--ochre); }
.form-input:focus { border-color: var(--gold); }
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7' fill='none' stroke='%23C9A96E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
textarea.form-input { resize: vertical; min-height: 110px; }
.input-password-wrap .form-input { padding-right: 44px; }

/* === LOGO CLUB BADGE === */
.nav-logo-sub {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  color: rgba(201,169,110,.45);
  vertical-align: super;
  margin-left: 4px;
  transition: color var(--transition);
}
.nav-logo:hover .nav-logo-sub { color: rgba(201,169,110,.75); }
.footer-logo-sub {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 400;
  color: rgba(201,169,110,.35);
  vertical-align: super;
  margin-left: 4px;
}
.auth-logo-sub {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 400;
  color: rgba(201,169,110,.45);
  vertical-align: super;
  margin-left: 5px;
}

/* === AUTH PAGE RESPONSIVE === */
@media (max-width: 480px) {
  .auth-main { padding: 24px 16px; }
  .auth-card { padding: 28px 22px; }
}

/* === CONTACT FORM RESPONSIVE === */
.contact-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .contact-name-row { grid-template-columns: 1fr; } }

/* === BOOKING PAGE RESPONSIVE === */
@media (max-width: 640px) {
  .step-indicator { gap: 0; }
  .step-label { display: none; }
  .route-option { flex-direction: column; align-items: flex-start; }
  .route-option-img { width: 100%; height: 120px; }
}

/* === GENERAL RESPONSIVE POLISH === */
@media (max-width: 480px) {
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .page-hero { padding: 56px 0 40px; }
  .btn-lg { padding: 13px 24px; font-size: 14px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .stats-band { grid-template-columns: 1fr 1fr !important; }
  .triple-sep { display: none; }
}

/* === QUIENES SOMOS RESPONSIVE === */
@media (max-width: 480px) {
  .manifesto-cell { padding: 24px 20px; }
  .pull-quote { font-size: 20px; padding-left: 18px; }
}

/* === NEWSLETTER MODULE RESPONSIVE === */
@media (max-width: 560px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; justify-content: center; }
  .newsletter-input { min-width: unset; }
}