/* =========================================================
   Camino & Asia 2026 — hoja de estilos compartida
   Mobile-first. Paleta: terracota + verde camino + azul asia.
   ========================================================= */

:root{
  --terracota: #c1552c;
  --terracota-dark: #9c4020;
  --verde-camino: #4a7c59;
  --azul-asia: #2b6777;
  --arena: #f6efe6;
  --tinta: #2b2420;
  --tinta-suave: #6b5f56;
  --blanco: #ffffff;
  --borde: #e6dccb;
  --ok: #3f7d4f;
  --pendiente: #b8862b;
  --sombra: 0 6px 18px rgba(43,36,32,.10);
  --radio: 14px;
  --max: 960px;
  font-size: 16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--arena);
  color: var(--tinta);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  margin: 0 0 .5em 0;
  color: var(--tinta);
}
h1{font-size: 1.9rem;}
h2{font-size: 1.5rem; margin-top: 1.6em;}
h3{font-size: 1.15rem;}
p{margin: 0 0 1em 0;}
a{color: var(--terracota-dark); text-decoration: none;}
a:hover{text-decoration: underline;}
ul{padding-left: 1.2em;}
li{margin-bottom: .35em;}
img{max-width:100%; display:block; border-radius: var(--radio);}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------- Header / nav ---------- */
header.site{
  background: linear-gradient(120deg, var(--terracota), var(--azul-asia));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--sombra);
}
.nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 18px;
}
.brand{
  font-family: Georgia, serif;
  font-weight:bold;
  font-size: 1.15rem;
  color:#fff;
  display:flex;
  gap:.4em;
  align-items:center;
}
.brand small{display:block; font-family: inherit; font-weight:normal; font-size:.65rem; opacity:.85;}
.menu-toggle{
  background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;
  display:block;
  line-height: 1;
}
nav.links{
  position:absolute;
  top:100%; left:0; right:0;
  background: var(--terracota-dark);
  display:none;
  flex-direction:column;
  padding: 6px 0 12px;
}
nav.links.open{display:flex;}
nav.links a{
  color:#fff;
  padding: 12px 22px;
  display:block;
  border-top: 1px solid rgba(255,255,255,.12);
}
nav.links a:hover{background: rgba(255,255,255,.08); text-decoration:none;}

@media(min-width: 760px){
  .menu-toggle{display:none;}
  nav.links{
    position:static;
    display:flex !important;
    flex-direction:row;
    background:none;
    padding:0;
  }
  nav.links a{border-top:none; padding: 6px 12px; font-size:.95rem;}
}

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, var(--terracota), var(--azul-asia) 120%);
  color:#fff;
  padding: 40px 0 34px;
}
.hero h1{color:#fff; margin-bottom:.25em;}
.hero p.lead{font-size:1.05rem; max-width: 46em; opacity:.95;}
.hero .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.badge{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .82rem;
}

/* ---------- Cards / timeline ---------- */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 20px 0;
}
@media(min-width:640px){
  .grid.cols-2{grid-template-columns: 1fr 1fr;}
  .grid.cols-3{grid-template-columns: repeat(3,1fr);}
}
.card{
  background:#fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: var(--sombra);
}
.card h3{margin-top:0;}
.card .tag{
  display:inline-block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  background: var(--arena);
  border: 1px solid var(--borde);
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}
.card.etapa{border-left: 6px solid var(--terracota);}
.card.etapa.asia{border-left-color: var(--azul-asia);}
.card.etapa.camino{border-left-color: var(--verde-camino);}

a.card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
a.card-link:hover .card{box-shadow: 0 10px 24px rgba(43,36,32,.18); transform: translateY(-2px);}
.card{transition: box-shadow .15s ease, transform .15s ease;}

/* ---------- Timeline (home) ---------- */
.timeline{
  position:relative;
  margin: 24px 0;
  padding-left: 28px;
  border-left: 3px solid var(--borde);
}
.timeline .step{
  position:relative;
  margin-bottom: 22px;
}
.timeline .step::before{
  content: attr(data-icon);
  position:absolute;
  left: -42px;
  top: 0;
  width: 34px;height:34px;
  background:#fff;
  border:2px solid var(--terracota);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}

/* ---------- Status pill ---------- */
.estado{font-size:.82rem; font-weight:bold; padding:2px 9px; border-radius:999px; display:inline-block;}
.estado.ok{background:#e6f2e8; color: var(--ok);}
.estado.pendiente{background:#fbf0dc; color: var(--pendiente);}

/* ---------- Widgets: currency / weather ---------- */
.widget{
  background:#fff;
  border:1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
  margin: 14px 0;
}
.widget h4{margin:0 0 10px 0; font-family:inherit; font-size:1rem;}
.widget .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.widget input, .widget select{
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  font-size: .95rem;
  background:#fff;
}
.widget .result{
  font-size:1.3rem;
  font-weight:bold;
  color: var(--terracota-dark);
  margin-top:8px;
}
.widget .muted{font-size:.8rem; color:var(--tinta-suave);}
.btn{
  background: var(--terracota);
  color:#fff;
  border:none;
  padding: 10px 16px;
  border-radius: 999px;
  font-size:.95rem;
  cursor:pointer;
}
.btn:hover{background: var(--terracota-dark);}
.btn.secundario{background: var(--azul-asia);}
.btn.secundario:hover{background:#204e5a;}
.btn:disabled{opacity:.6; cursor:default;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; margin: 10px 0 20px;}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); font-size:.92rem;}
th{color:var(--tinta-suave); font-weight:600;}

/* ---------- Elevation bars (Camino) ---------- */
.perfil{display:flex; align-items:flex-end; gap:4px; height:70px; margin: 10px 0;}
.perfil .barra{
  flex:1;
  background: linear-gradient(to top, var(--verde-camino), #86b391);
  border-radius: 4px 4px 0 0;
  position:relative;
}
.perfil .bajada{background: linear-gradient(to top, #c9c1b3, #e6dccb);}

/* ---------- Footer ---------- */
footer.site{
  background: var(--tinta);
  color: #cfc7bc;
  padding: 26px 0 40px;
  margin-top: 40px;
  font-size: .85rem;
}
footer.site a{color:#f0d9c8;}

/* ---------- Gallery: carrusel ---------- */
.carrusel-wrap{
  position: relative;
  margin: 0 -18px;
  padding: 0 18px;
}
.carrusel{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.carrusel figure{
  flex: 0 0 72%;
  scroll-snap-align: start;
  margin: 0;
  background:#fff;
  border-radius: 10px;
  overflow:hidden;
  border:1px solid var(--borde);
  cursor: zoom-in;
}
@media(min-width:640px){ .carrusel figure{ flex-basis: 32%; } }
@media(min-width:900px){ .carrusel figure{ flex-basis: 23%; } }
.carrusel figure .miniatura-caja{
  position: relative;
  aspect-ratio: 4/3;
  background:#f0e8db;
  overflow:hidden;
}
.carrusel figure img, .carrusel figure video{
  width:100%; height:100%; display:block; object-fit: cover;
}
.carrusel figure .miniatura-caja .icono-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none;
}
.carrusel figcaption{padding:6px 8px; font-size:.75rem; color:var(--tinta-suave);}
.carrusel-flecha{
  position:absolute; top:45%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:1px solid var(--borde); box-shadow: var(--sombra);
  font-size:1.2rem; line-height:1; cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; color: var(--tinta);
}
.carrusel-flecha.izq{ left:0; }
.carrusel-flecha.der{ right:0; }
@media(max-width:640px){ .carrusel-flecha{ display:none; } }

/* ---------- Gallery: lightbox (ampliar foto) ---------- */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,16,12,.92);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.lightbox.abierto{ display: flex; }
.lightbox-contenido{
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  display:flex; flex-direction:column; align-items:center;
}
.lightbox-contenido img, .lightbox-contenido video{
  max-width: 100%; max-height: 72vh;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  background:#000;
}
.lightbox-caption{
  color:#f3ece0; font-size:.85rem; text-align:center; margin-top:10px; max-width: 90vw;
}
.lightbox-cerrar{
  position:absolute; top:16px; right:18px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none;
  font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-cerrar:hover{ background:rgba(255,255,255,.22); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none;
  font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.22); }
.lightbox-nav.izq{ left:12px; }
.lightbox-nav.der{ right:12px; }
@media(max-width:640px){
  .lightbox-nav{ width:38px; height:38px; font-size:1.3rem; }
  .lightbox-cerrar{ width:36px; height:36px; font-size:1.2rem; top:8px; right:8px; }
}

.login-box{
  max-width: 380px;
  margin: 60px auto;
}

.hint{
  background:#fff7ea;
  border:1px dashed #e2c48a;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .88rem;
  color:#6b5324;
  margin: 14px 0;
}

.grid-etapas-nav{
  display:flex; flex-wrap:wrap; gap:8px; margin: 14px 0 24px;
}
.grid-etapas-nav a{
  background:#fff; border:1px solid var(--borde); border-radius:999px;
  padding:7px 14px; font-size:.85rem; color:var(--tinta);
}
.grid-etapas-nav a.activo{background:var(--terracota); color:#fff; border-color:var(--terracota);}