/* The Mazatlán Brief — diseño para lectores de 60+.
   Base 19px, contraste por encima de 4.5:1, Atkinson Hyperlegible.
   Regla R6: nada de gris claro, ventanas emergentes, carruseles ni animación que distraiga. */

:root{
  --paper:#FCFBF8; --card:#FFFFFF; --card2:#F1EFE9; --card3:#E4E1D8;
  --ink:#101820; --ink2:#33414E; --ink3:#5A6774;
  --line:#D8D4CA; --line2:#B9B4A7;
  --navy:#12314F; --navy-bg:#DDE7F0;
  --amber:#8A5209; --amber-bg:#F6EBD8;
  --green:#15503A; --green-bg:#DCEAE3;
  --focus:#B4530A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D1117; --card:#151B22; --card2:#1D242C; --card3:#28313A;
    --ink:#EFF3F7; --ink2:#C2CBD4; --ink3:#9AA5AF;
    --line:#2C3540; --line2:#414C58;
    --navy:#9CC2E2; --navy-bg:#152230;
    --amber:#E7B26A; --amber-bg:#2B2215;
    --green:#7ACCA3; --green-bg:#152A20;
    --focus:#F0A65A;
  }
}
:root[data-theme="dark"]{
  --paper:#0D1117; --card:#151B22; --card2:#1D242C; --card3:#28313A;
  --ink:#EFF3F7; --ink2:#C2CBD4; --ink3:#9AA5AF;
  --line:#2C3540; --line2:#414C58;
  --navy:#9CC2E2; --navy-bg:#152230;
  --amber:#E7B26A; --amber-bg:#2B2215;
  --green:#7ACCA3; --green-bg:#152A20;
  --focus:#F0A65A;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size:19px; line-height:1.7;
}
@media (max-width:600px){ body{font-size:18px;} }
h1,h2,h3{font-family:"Bitter", Georgia, serif; line-height:1.2; margin:0; text-wrap:balance;}
p{margin:0;}
a{color:var(--navy); text-underline-offset:3px; text-decoration-thickness:2px;}
a:hover{text-decoration-thickness:3px;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:2px;}
img{max-width:100%; height:auto; display:block;}

.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:.9rem 1.2rem; z-index:99;}
.skip:focus{left:0;}

/* ---- masthead ---- */
.masthead{
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2rem); border-bottom:3px solid var(--navy); background:var(--card);
}
.brand{
  font-family:"Bitter",Georgia,serif; font-weight:700; font-size:1.35rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
}
.brand span{color:var(--navy);}
.masthead nav{display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;}
.masthead nav a{
  color:var(--ink2); text-decoration:none; font-weight:700; font-size:1rem;
  padding:.45rem .2rem; border-bottom:3px solid transparent;
}
.masthead nav a:hover{color:var(--navy); border-bottom-color:var(--navy);}

main{max-width:44rem; margin:0 auto; padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2rem) 4rem;}

/* ---- home ---- */
.home{display:flex; flex-direction:column; gap:2.8rem;}
.home-head{display:flex; flex-direction:column; gap:.7rem;}
.home-head h1{font-size:clamp(2rem,5.5vw,2.9rem); letter-spacing:-.025em;}
.tagline{font-size:1.2rem; color:var(--ink2); font-weight:700;}
.sub{font-size:1.05rem; color:var(--ink2);}
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;}
.door{
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none;
  background:var(--card); border:2px solid var(--line2); border-left:5px solid var(--navy);
  border-radius:4px; padding:1.25rem 1.3rem; color:var(--ink);
}
.door:hover{border-color:var(--navy); background:var(--navy-bg);}
.door .d-l{font-family:"Bitter",Georgia,serif; font-weight:700; font-size:1.18rem; color:var(--navy);}
.door .d-s{font-size:.95rem; color:var(--ink2); line-height:1.5;}
.door .d-n{font-size:.85rem; color:var(--ink3); font-weight:700; margin-top:.25rem;}
.recent{display:flex; flex-direction:column; gap:.9rem;}
.recent h2{font-size:1.35rem;}
ul.plain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem;}
ul.plain li a{display:block; padding:.85rem 0; border-bottom:1px solid var(--line); font-weight:700;}

/* ---- answer page ---- */
.crumb{font-size:.92rem; color:var(--ink3); margin-bottom:1.2rem;}
.crumb a{color:var(--ink3);}
.answer{display:flex; flex-direction:column; gap:2.1rem;}
.answer h1{font-size:clamp(1.75rem,4.6vw,2.5rem); letter-spacing:-.02em;}
.answer .lede p{font-size:1.24rem; line-height:1.6; color:var(--ink); font-weight:700;}
.answer .lede{margin-top:-1.3rem;}

.figure{
  background:var(--amber-bg); border:2px solid var(--amber); border-radius:4px;
  padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.25rem;
}
.fig-n{font-family:"Bitter",Georgia,serif; font-weight:700; font-size:clamp(2.4rem,7vw,3.4rem); line-height:1; color:var(--amber); letter-spacing:-.03em;}
.fig-l{font-size:1.05rem; font-weight:700; color:var(--ink);}
.fig-v{font-size:.92rem; color:var(--ink2); margin-top:.3rem;}

.detail,.steps,.who,.sources{display:flex; flex-direction:column; gap:1rem;}
.detail h2,.steps h2,.who h2,.sources h2{font-size:1.4rem;}
.detail p,.steps p,.who p{font-size:1.05rem;}
.detail ul,.detail ol,.steps ul,.steps ol,.who ul{margin:0; padding-left:1.4rem; display:flex; flex-direction:column; gap:.75rem;}
.detail li,.steps li,.who li{font-size:1.05rem; padding-left:.2rem;}
.detail h3{font-size:1.1rem; margin-top:.4rem;}
.steps{background:var(--card2); border-radius:4px; padding:1.5rem;}
.steps ol{counter-reset:s; list-style:none; padding-left:0;}
.steps ol li{counter-increment:s; padding-left:2.6rem; position:relative;}
.steps ol li::before{
  content:counter(s); position:absolute; left:0; top:.1rem;
  background:var(--navy); color:var(--paper); font-weight:700; font-size:.95rem;
  width:1.8rem; height:1.8rem; border-radius:3px; display:flex; align-items:center; justify-content:center;
}
.who{background:var(--green-bg); border:2px solid var(--green); border-radius:4px; padding:1.5rem;}
.who h2{color:var(--green);}
.sources{border-top:2px solid var(--line); padding-top:1.5rem;}
.sources ul{margin:0; padding-left:1.4rem; display:flex; flex-direction:column; gap:.6rem;}
.sources li{font-size:.98rem; color:var(--ink2);}

.next{border-top:2px solid var(--line); padding-top:1.5rem; display:flex; flex-direction:column; gap:.5rem;}
.next-l{font-size:.88rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3);}
.next-a{font-family:"Bitter",Georgia,serif; font-weight:700; font-size:1.3rem; line-height:1.3;}

/* ---- mission page ---- */
.mission-page{display:flex; flex-direction:column; gap:1.8rem;}
.mission-page h1{font-size:clamp(1.8rem,5vw,2.5rem);}
.mission-page .lede{font-size:1.12rem; color:var(--ink2);}
.qlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem;}
.qlist a{
  display:flex; flex-direction:column; gap:.3rem; text-decoration:none;
  background:var(--card); border:2px solid var(--line2); border-radius:4px; padding:1.2rem 1.25rem; color:var(--ink);
}
.qlist a:hover{border-color:var(--navy); background:var(--navy-bg);}
.qlist .q{font-family:"Bitter",Georgia,serif; font-weight:700; font-size:1.15rem; color:var(--navy); line-height:1.3;}
.qlist .a{font-size:.98rem; color:var(--ink2); line-height:1.5;}

/* ---- signup (altura de los ojos, nunca ventana emergente) ---- */
.signup{
  background:var(--navy-bg); border:2px solid var(--navy); border-radius:4px;
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.signup h2{font-size:1.32rem; color:var(--navy);}
.signup p{font-size:1.02rem; color:var(--ink2);}
.signup-form{display:flex; flex-direction:column; gap:1rem;}
.signup-form label{font-weight:700; font-size:1rem;}
.signup-form input[type=email]{
  font-family:inherit; font-size:1.1rem; padding:.85rem .95rem;
  border:2px solid var(--line2); border-radius:3px; background:var(--card); color:var(--ink); width:100%;
}
.signup-form fieldset{border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;}
.signup-form legend{font-weight:700; font-size:1rem; padding:0 0 .5rem;}
.radio{display:flex; align-items:center; gap:.5rem; font-weight:400; font-size:1rem;}
.radio input{width:1.25rem; height:1.25rem;}
.signup-form button{
  font-family:"Bitter",Georgia,serif; font-weight:700; font-size:1.1rem;
  background:var(--navy); color:var(--paper); border:none; border-radius:3px;
  padding:1rem 1.4rem; cursor:pointer; align-self:flex-start; min-height:3rem;
}
.signup-form button:hover{filter:brightness(1.15);}
.fineprint{font-size:.9rem; color:var(--ink2);}

.foot{
  border-top:2px solid var(--line); margin-top:2rem;
  padding:1.8rem clamp(1rem,4vw,2rem) 2.5rem; max-width:44rem; margin-left:auto; margin-right:auto;
  display:flex; flex-direction:column; gap:.6rem;
}
.foot p{font-size:.95rem; color:var(--ink2);}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

/* honeypot: invisible para personas, visible para robots */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden;}

/* ---- imágenes (R2: siempre con su crédito visible) ---- */
figure.hero, figure.inpage{margin:0; display:flex; flex-direction:column; gap:.5rem;}
figure.hero img, figure.inpage img{
  width:100%; height:auto; border-radius:4px; border:1px solid var(--line);
  background:var(--card2);
}
figure.hero figcaption, figure.inpage figcaption{
  font-size:.9rem; color:var(--ink2); line-height:1.45;
}
figure figcaption a{color:var(--ink2);}