/* santivive — sistema visual
   petróleo + ocre sobre papel frío. Tipografía: Archivo / Newsreader / JetBrains Mono */

:root{
  --papel:#F7F8F6;
  --sup:#FFFFFF;
  --sup-2:#EDEFEB;
  --tinta:#14171A;
  --tinta-media:#55605E;
  --tinta-tenue:#8B9693;
  --linea:#DCE0DA;
  --linea-fuerte:#BFC6BE;
  --petroleo:#175C55;
  --petroleo-claro:#4E938B;
  --ocre:#B9702A;
  --ok:#2F7A55;
  --campo:#FFFFFF;
  --campo-linea:#CBD2CA;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#101312; --sup:#171B1A; --sup-2:#1F2422;
    --tinta:#EDF0EC; --tinta-media:#A3ADA9; --tinta-tenue:#6E7A76;
    --linea:#2A302E; --linea-fuerte:#3D4644;
    --petroleo:#6FBFB4; --petroleo-claro:#2E6B63;
    --ocre:#DB9755; --ok:#6BBD8E;
    --campo:#1C2120; --campo-linea:#3A4340;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papel:#101312; --sup:#171B1A; --sup-2:#1F2422;
  --tinta:#EDF0EC; --tinta-media:#A3ADA9; --tinta-tenue:#6E7A76;
  --linea:#2A302E; --linea-fuerte:#3D4644;
  --petroleo:#6FBFB4; --petroleo-claro:#2E6B63;
  --ocre:#DB9755; --ok:#6BBD8E;
  --campo:#1C2120; --campo-linea:#3A4340;
  color-scheme:dark;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:"Newsreader",Georgia,serif;font-size:17.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:740px;margin:0 auto;padding:0 24px 80px;}
h1,h2,h3{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;margin:0;text-wrap:balance;}
h1{font-size:clamp(33px,5.6vw,54px);font-weight:800;line-height:1.02;letter-spacing:-.025em;}
h2{font-size:23px;font-weight:700;letter-spacing:-.014em;line-height:1.15;}
h3{font-size:18px;font-weight:700;letter-spacing:-.008em;}
p{margin:0;}
a{color:var(--petroleo);text-underline-offset:3px;}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.etiqueta{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--petroleo);
}

/* botones */
.bt{
  display:inline-block;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:transparent;color:var(--tinta-media);border:1px solid var(--linea-fuerte);
  padding:11px 17px;border-radius:2px;transition:background .15s,color .15s,border-color .15s;
}
.bt:hover{background:var(--sup-2);color:var(--tinta);}
.bt.solido{background:var(--petroleo);border-color:var(--petroleo);color:var(--papel);}
.bt.solido:hover{background:var(--petroleo-claro);border-color:var(--petroleo-claro);color:var(--papel);}
.bt.ocre{background:var(--ocre);border-color:var(--ocre);color:var(--papel);}
.bt.ocre:hover{filter:brightness(1.08);}
.bt[disabled]{opacity:.5;cursor:not-allowed;}

/* campos */
textarea,input[type="text"],input[type="email"]{
  width:100%;font-family:"Newsreader",Georgia,serif;font-size:16px;line-height:1.5;
  color:var(--tinta);background:var(--campo);border:1px solid var(--campo-linea);
  border-radius:3px;padding:10px 12px;transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:70px;resize:vertical;}
textarea:focus,input:focus{
  outline:none;border-color:var(--petroleo);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--petroleo) 15%,transparent);
}
textarea::placeholder,input::placeholder{color:var(--tinta-tenue);opacity:.8;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px;}
.chip{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.03em;
  padding:8px 14px;border:1px solid var(--campo-linea);border-radius:99px;
  background:var(--campo);color:var(--tinta-media);cursor:pointer;transition:all .15s;
}
.chip:hover{border-color:var(--petroleo-claro);color:var(--tinta);}
.chip[aria-pressed="true"]{background:var(--petroleo);border-color:var(--petroleo);color:var(--papel);}

footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--linea);
  font-size:14px;color:var(--tinta-tenue);line-height:1.55;}

:focus-visible{outline:2px solid var(--petroleo);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}