/* MuseoDelAzar — style.v1.css */
:root{
  --indigo:#1E4A5C;
  --indigo-dark:#123240;
  --foam:#DCEEF0;
  --ochre:#D8A762;
  --ochre-dark:#b9873f;
  --ink:#16323c;
  --paper:#F7FBFC;
  --white:#ffffff;
  --radius:14px;
  --maxw:1080px;
}

[hidden]{display:none!important}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family:"Segoe UI Light","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  letter-spacing:0.04em;
  color:var(--indigo-dark);
  line-height:1.25;
}
h1{font-size:2.1rem}
h2{font-size:1.5rem;margin-top:2.2rem}
h3{font-size:1.15rem}

a{color:var(--indigo);text-decoration:underline}
a:hover{color:var(--ochre-dark)}

img,svg{max-width:100%}

/* ---------- Age gate ---------- */
#agegate{
  position:fixed;inset:0;z-index:999;
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem;
}
.agegate-box{
  background:var(--white);
  color:var(--ink);
  border-radius:var(--radius);
  max-width:460px;
  width:100%;
  padding:2rem 1.8rem;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.agegate-box h2{margin-top:0}
.agegate-logo{margin:0 auto 1rem;display:block}
.agegate-actions{
  display:flex;gap:.8rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap;
}
.agegate-actions button{
  font:inherit;font-size:1rem;padding:.7rem 1.4rem;border-radius:999px;
  border:2px solid var(--indigo);cursor:pointer;
}
#agegate-yes{background:var(--indigo);color:var(--white)}
#agegate-yes:hover{background:var(--indigo-dark)}
#agegate-no{background:var(--white);color:var(--indigo)}
#agegate-no:hover{background:var(--foam)}
.agegate-fineprint{font-size:.78rem;color:#555;margin-top:1rem}

/* ---------- Layout ---------- */
.site-header{
  background:var(--indigo);
  color:var(--white);
}
.site-header .wrap{
  max-width:var(--maxw);margin:0 auto;padding:1rem 1.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.25rem;font-weight:600;color:var(--white);text-decoration:none;letter-spacing:.03em;
}
.brand:hover{color:var(--foam)}
.brand svg{flex-shrink:0}

nav.mainnav ul{
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0;font-size:.92rem;
}
nav.mainnav a{color:var(--foam);text-decoration:none}
nav.mainnav a:hover{text-decoration:underline;color:var(--white)}

main{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.2rem 3rem}

.hero{
  background:linear-gradient(180deg,var(--foam) 0%,var(--paper) 100%);
  padding:2rem 1.2rem;
  border-radius:var(--radius);
  margin-bottom:2rem;
}
.hero .wrap{max-width:var(--maxw);margin:0 auto}
.lead{font-size:1.08rem;color:var(--ink)}

.teasers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin:2rem 0;
}
.teaser{
  background:var(--white);border:1px solid var(--foam);border-radius:var(--radius);
  padding:1.1rem;
}
.teaser h3{margin-top:.4rem}

.site-footer{
  background:var(--indigo-dark);color:var(--foam);padding:2rem 1.2rem;margin-top:2rem;
}
.site-footer .wrap{max-width:var(--maxw);margin:0 auto}
.site-footer a{color:var(--foam)}
.site-footer ul{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.footer-note{font-size:.8rem;opacity:.85;margin-top:1.2rem}

.breadcrumb{font-size:.85rem;margin-bottom:1rem;color:#4a5f66}

.callout{
  background:var(--foam);border-left:4px solid var(--ochre);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.2rem;margin:1.4rem 0;
}

table{width:100%;border-collapse:collapse;margin:1rem 0}
table th,table td{border:1px solid var(--foam);padding:.5rem .7rem;text-align:left}
table th{background:var(--foam)}

details{
  background:var(--white);border:1px solid var(--foam);border-radius:var(--radius);
  padding:.8rem 1rem;margin:.6rem 0;
}
details summary{cursor:pointer;font-weight:600;color:var(--indigo-dark)}

/* ---------- Tide chart "Marea del Tiempo" ---------- */
.tide-chart{
  background:var(--white);
  border:1px solid var(--foam);
  border-radius:var(--radius);
  padding:1.2rem;
  margin:1.4rem 0;
}
.tide-chart svg{width:100%;height:auto;display:block}
.tide-path{fill:none;stroke:var(--indigo);stroke-width:3}
.tide-baseline{stroke:var(--foam);stroke-width:1}
.tide-marker circle{fill:var(--ochre);stroke:var(--indigo);stroke-width:2}
.tide-chart input[type="range"]{
  width:100%;margin-top:.6rem;accent-color:var(--ochre-dark);
}
.tide-range-row{display:flex;justify-content:space-between;font-size:.8rem;color:#3f5962;margin-top:.2rem}
#tide-range-label{font-weight:600;color:var(--indigo-dark)}
.tide-card{
  margin-top:1rem;padding:1rem;border-radius:var(--radius);background:var(--foam);
}
.tide-card h3{margin:0 0 .4rem}
.tide-axis-note{font-size:.75rem;color:#4a5f66;margin-top:.4rem}

@media (max-width:640px){
  .tide-chart svg{height:150px}
  .site-header .wrap{flex-direction:column;align-items:flex-start}
}