/* ==========================================================================
   Perú en Ruta — Mapa interactivo
   Paleta cálida inspirada en los textiles andinos, el adobe y el atardecer.
   ========================================================================== */

:root{
  /* Base cálida tipo adobe / papel de estraza */
  --bg:#f6ead6;
  --bg-2:#f0dcc0;
  --bg-panel:#fbf3e6;
  --panel-2:#fff9ef;

  /* Tinta */
  --ink:#3a271a;
  --muted:#8a6f57;
  --line: rgba(58,39,26,0.14);
  --line-strong: rgba(58,39,26,0.26);

  /* Acentos cálidos */
  --clay:#c1502e;      /* terracota */
  --clay-deep:#8f3418;
  --gold:#e0a12a;      /* ocre / oro */
  --gold-deep:#b97d13;
  --sun:#e86f2c;       /* naranja atardecer */
  --teal:#2f8f7f;      /* verde jade (contraste frío puntual) */
  --plum:#7a3b52;      /* guinda andino */

  --mono: 'IBM Plex Mono', monospace;
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;

  --shadow: 0 22px 50px rgba(90,45,20,0.22);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(224,161,42,0.18), transparent 42%),
    radial-gradient(circle at 92% 8%, rgba(232,111,44,0.16), transparent 40%),
    radial-gradient(circle at 50% 120%, rgba(193,80,46,0.14), transparent 55%),
    var(--bg);
}

/* Franja textil superior */
.stripe{
  height:8px;
  width:100%;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0 16px,
    var(--clay) 16px 32px,
    var(--plum) 32px 42px,
    var(--teal) 42px 58px,
    var(--sun) 58px 74px
  );
}

header{
  padding:34px 5vw 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.header-text{ flex:1 1 420px; }

/* Logo de la marca en el encabezado */
.site-logo{
  flex:0 0 auto;
  align-self:center;
  height:118px;
  width:auto;
  display:block;
}

/* Botón de sorteo */
.btn-sorteo{
  flex:0 0 auto;
  align-self:center;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff4e6;
  background:linear-gradient(120deg, var(--clay), var(--sun));
  border:1px solid var(--clay-deep);
  padding:12px 22px;
  border-radius:26px;
  box-shadow:0 8px 20px rgba(143,52,24,0.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-sorteo:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(143,52,24,0.36);
  filter:saturate(1.1);
}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--gold);
  display:inline-block;
}
h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px,5vw,54px);
  margin:0 0 10px;
  line-height:1.02;
  color:var(--ink);
}
h1 em{ color:var(--clay); font-style:italic; }
header p.lede{
  max-width:660px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.55;
  margin:0;
}

/* Layout principal */
main{
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap:0;
  align-items:stretch;
  min-height:660px;
}
@media (max-width: 900px){
  main{grid-template-columns:1fr;}
}

#map-wrap{
  position:relative;
  padding:22px 3vw 40px;
  border-right:1px solid var(--line);
}
@media (max-width:900px){
  #map-wrap{
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:14px 3vw 18px;
  }
  /* Mapa compacto y centrado para que la info quede más cerca */
  svg#map{
    height:56vh;
    width:auto;
    max-width:100%;
    margin:0 auto;
  }
  .compass{ display:none; }
  #panel{ padding:20px 4vw 34px; }
  .pass{ max-width:520px; }
  /* En táctil mostramos el nombre de cada región (no hay hover) */
  text.plabel{ opacity:1; font-size:7.5px; }
}

.map-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
#map-wrap .hint{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  letter-spacing:0.06em;
}
#region-count{
  font-family:var(--mono);
  font-size:11px;
  color:var(--clay-deep);
  background:rgba(193,80,46,0.10);
  border:1px solid var(--line);
  padding:3px 9px;
  border-radius:20px;
}

svg#map{ width:100%; height:auto; display:block; overflow:visible; }
path.province{
  fill:#e7c99a;
  stroke:#a97b45;
  stroke-width:0.6;
  cursor:pointer;
  transition: fill .18s ease, filter .18s ease;
}
path.province:hover{ fill:var(--sun); }
path.province.active{
  fill:var(--clay);
  stroke:var(--clay-deep);
  stroke-width:1;
  filter:drop-shadow(0 3px 6px rgba(143,52,24,0.4));
}

text.plabel{
  font-family:var(--mono);
  font-size:6.5px;
  font-weight:500;
  fill:var(--ink);
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  paint-order:stroke;
  stroke:var(--bg);
  stroke-width:1.6px;
}
path.province:hover + text.plabel,
text.plabel.active{ opacity:1; }

/* Brújula decorativa */
.compass{
  position:absolute;
  bottom:24px; left:3vw;
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.15em;
  opacity:0.7;
}

/* ---------- Panel: ficha de viaje / boarding pass ---------- */
#panel{
  padding:30px 3vw;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-2));
}

.pass{
  width:100%;
  max-width:440px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  border-radius:6px;
  position:relative;
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: pop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{
  from{opacity:0; transform:translateY(14px) rotate(-1deg);}
  to{opacity:1; transform:translateY(0) rotate(-0.5deg);}
}

.pass-top{
  padding:22px 24px 16px;
  background:linear-gradient(120deg, var(--pass-c1, var(--clay)), var(--pass-c2, var(--sun)));
  color:var(--pass-fg, #fff4e6);
  transition:background .45s ease, color .45s ease;
}
.pass-code{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--pass-fg, #fff4e6);
  opacity:0.85;
}
.pass-code span{ opacity:0.65; }
.pass-name{
  font-family:var(--serif);
  font-weight:700;
  font-size:32px;
  line-height:1.02;
  margin:8px 0 3px;
  color:var(--pass-fg, #fff);
}
.pass-capital{
  font-family:var(--mono);
  font-size:12px;
  color:var(--pass-fg, #fff4e6);
  opacity:0.92;
}

.perf{
  position:relative;
  height:0;
  border-top:2px dashed var(--line-strong);
}
.perf::before, .perf::after{
  content:"";
  position:absolute;
  top:-11px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
}
.perf::before{ left:-11px; }
.perf::after{ right:-11px; }

.pass-body{ padding:20px 24px 8px; }
.pass-desc{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 16px;
}

.section-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--clay-deep);
  margin:0 0 10px;
  display:flex;align-items:center;gap:8px;
}
.section-title::after{
  content:"";flex:1;height:1px;background:var(--line);
}

/* Lista de actividades */
.acts{ list-style:none; margin:0 0 18px; padding:0; }
.acts li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:7px 0;
  font-size:14px;
  line-height:1.4;
  border-bottom:1px dotted var(--line);
}
.acts li:last-child{ border-bottom:none; }
.acts .ico{
  font-size:16px;
  line-height:1.3;
  flex:0 0 auto;
  filter:saturate(1.1);
}

/* Imperdible */
.must{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:linear-gradient(120deg, rgba(224,161,42,0.16), rgba(232,111,44,0.10));
  border:1px solid rgba(224,161,42,0.4);
  border-radius:6px;
  padding:12px 14px;
  margin:0 0 18px;
}
.must .star{ font-size:18px; }
.must .must-txt{ font-size:13.5px; line-height:1.5; }
.must .must-txt b{ color:var(--clay-deep); }

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:#fff;
  background:var(--teal);
  padding:4px 10px;
  border-radius:20px;
}
.tag.alt{ background:var(--clay); }
.tag.alt2{ background:var(--gold-deep); }
.tag.alt3{ background:var(--plum); }

.meta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  padding:16px 24px 20px;
  border-top:2px dashed var(--line-strong);
  margin-top:12px;
}
.meta-row div b{
  display:block;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  margin-top:3px;
}

.barcode{
  height:28px;
  margin:0 24px 22px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 11px);
  opacity:0.65;
}

/* Imagen del destino representativo (PNG sin fondo) */
.dest{ margin-top:20px; text-align:center; }
.dest .dest-img{
  display:block;
  margin:6px auto 8px;
  max-width:100%;
  max-height:180px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 10px 14px rgba(90,45,20,0.28));
}
.dest .dest-cap{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.03em;
}

/* Estado vacío */
.empty-state{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
  max-width:340px;
  line-height:1.65;
  padding-top:60px;
  text-align:center;
}
.empty-state .big{
  font-family:var(--serif);
  font-size:24px;
  color:var(--ink);
  display:block;
  margin-bottom:12px;
}
.empty-state .pin{ font-size:34px; display:block; margin-bottom:14px; }
.empty-state .brand-mark{
  display:block;
  width:280px;
  max-width:95%;
  height:auto;
  margin:26px auto 0;
  opacity:0.9;
}

footer{
  padding:18px 5vw 30px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  border-top:1px solid var(--line);
}
footer a{ color:var(--clay-deep); text-decoration:none; }
footer a:hover{ text-decoration:underline; }