/* OddSphere — oddsphere.pro — sitio editorial sobre la historia salinera de Zipaquirá */

:root{
  --sal: #E7E2D8;
  --estola: #2B2420;
  --azul-catedral: #6E8FA3;
  --ocre: #A4713C;
  --texto: #2B2420;
  --fondo: #E7E2D8;
  --borde: rgba(43,36,32,0.18);
}

[hidden]{ display:none !important; }

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--fondo);
  color:var(--texto);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.65;
}

h1,h2,h3{
  font-family: Futura, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight:700;
  color:var(--estola);
  letter-spacing:0.01em;
}

h1{ font-size:2rem; margin:1.2rem 0 1rem; }
h2{ font-size:1.4rem; margin-top:2rem; border-left:4px solid var(--ocre); padding-left:.6rem; }
h3{ font-size:1.1rem; color:var(--azul-catedral); }

a{ color:#3f5a68; text-decoration:underline; }
a:hover{ color:var(--ocre); }

main{
  max-width:860px;
  margin:0 auto;
  padding:1.5rem 1.2rem 3rem;
}

/* Cabecera */
.cabecera{
  background:var(--estola);
  color:var(--sal);
  border-bottom:4px solid var(--ocre);
}
.cabecera-interior{
  max-width:1000px;
  margin:0 auto;
  padding:.8rem 1.2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem;
  justify-content:space-between;
}
.marca{
  font-family: Futura, "Trebuchet MS", Verdana, Arial, sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--sal) !important;
  text-decoration:none;
  letter-spacing:.03em;
}
.nav-principal ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.1rem;
  margin:0;
  padding:0;
}
.nav-principal a{
  color:var(--sal) !important;
  text-decoration:none;
  font-size:.92rem;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.nav-principal a:hover,
.nav-principal a.activo{
  border-bottom-color:var(--azul-catedral);
  color:#fff !important;
}

/* Pie */
.pie{
  background:#DCD6C8;
  border-top:4px solid var(--azul-catedral);
  text-align:center;
  padding:1.2rem 1rem 2rem;
  font-size:.85rem;
  color:#4a4138;
}
.pie-legal a{ margin:0 .3rem; }

/* Age gate */
#edad-popup{
  position:fixed;
  inset:0;
  background:rgba(23,19,16,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:1rem;
}
.edad-caja{
  background:var(--sal);
  color:var(--estola);
  border-radius:10px;
  border-top:6px solid var(--ocre);
  max-width:420px;
  width:100%;
  padding:1.6rem 1.4rem;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.edad-caja h2{ margin-top:0; }
.edad-botones{
  display:flex;
  gap:.7rem;
  justify-content:center;
  margin-top:1.3rem;
  flex-wrap:wrap;
}
.edad-botones button{
  font-family:inherit;
  font-size:1rem;
  padding:.6rem 1.1rem;
  border-radius:6px;
  border:none;
  cursor:pointer;
}
#edad-si{ background:var(--azul-catedral); color:#fff; }
#edad-no{ background:#8a8275; color:#fff; }
#edad-si:hover{ background:#5c7c90; }
#edad-no:hover{ background:#6f685d; }

/* Ciclos widget */
.ciclos-botones{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:1.4rem 0;
}
.ciclos-botones button{
  font-family: Futura, "Trebuchet MS", Verdana, Arial, sans-serif;
  background:var(--estola);
  color:var(--sal);
  border:2px solid var(--ocre);
  border-radius:6px;
  padding:.5rem 1rem;
  cursor:pointer;
  font-size:.95rem;
}
.ciclos-botones button:hover{ background:var(--ocre); }
.ciclos-botones button[aria-pressed="true"]{
  background:var(--azul-catedral);
  border-color:var(--azul-catedral);
}
.ciclo-tarjeta{
  background:#fff;
  border:1px solid var(--borde);
  border-left:6px solid var(--azul-catedral);
  border-radius:8px;
  padding:1.2rem 1.3rem;
  margin-top:1rem;
}
.ciclo-tarjeta dt{ font-weight:700; color:var(--ocre); margin-top:.6rem; }
.ciclo-tarjeta dd{ margin:.1rem 0 .3rem; }

/* Imagenes placeholder */
.img-marcador{
  width:100%;
  border-radius:8px;
  border:1px solid var(--borde);
  display:block;
  margin:1rem 0;
}

.galeria-cuadricula{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.galeria-cuadricula figure{ margin:0; }
.galeria-cuadricula figcaption{ font-size:.85rem; color:#4a4138; margin-top:.3rem; }

.caja-nota{
  background:#f3efe4;
  border:1px solid var(--borde);
  border-left:6px solid var(--ocre);
  padding:1rem 1.2rem;
  border-radius:6px;
  margin:1.3rem 0;
}

table.datos{ width:100%; border-collapse:collapse; margin:1rem 0; }
table.datos th, table.datos td{ border:1px solid var(--borde); padding:.5rem .6rem; text-align:left; }
table.datos th{ background:var(--estola); color:var(--sal); }

@media (max-width:600px){
  .cabecera-interior{ flex-direction:column; align-items:flex-start; }
}