/* Pautado · web pública.
   Paleta y tipografías del sistema de la casa (arena, tierra y arcilla):
   los mismos tokens que la hoja de venta en PDF, para que la marca sea una sola. */

@font-face{font-family:'Gambetta';font-style:normal;font-weight:300;font-display:swap;src:url(tipos/Gambetta-300.woff2) format('woff2')}
@font-face{font-family:'Gambetta';font-style:normal;font-weight:500;font-display:swap;src:url(tipos/Gambetta-500.woff2) format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:400;font-display:swap;src:url(tipos/Switzer-400.woff2) format('woff2')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:500;font-display:swap;src:url(tipos/Switzer-500.woff2) format('woff2')}

:root{
  --papel:#F7F2E9;
  --papel-hondo:#EFE7D8;
  --papel-borde:#E4D9C6;
  --tinta:#2A231D;
  --tinta-media:#5C5148;
  --tinta-tenue:#8A7C6E;
  --arcilla:#A2492A;
  --filete:#D9CCB7;
  --filete-fuerte:#B8A58A;
  --serif:'Gambetta',Georgia,'Times New Roman',serif;
  --sans:'Switzer',-apple-system,'Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  padding:0 1.5rem;
}

main,header,footer{max-width:38rem;margin:0 auto}

/* marca */
.marca{display:flex;align-items:center;gap:.85rem;padding:2.75rem 0 0}
.glifo{width:26px;height:26px;flex:none;fill:var(--filete-fuerte)}
.glifo__acento{fill:var(--arcilla)}
.marca__nombre{margin:0;font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:.01em;line-height:1.1}
.marca__descriptor{margin:.15rem 0 0;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-tenue)}

/* portada */
.portada{padding:3.25rem 0 0}
h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,6.5vw,2.9rem);line-height:1.16;
  letter-spacing:-.01em;margin:0;
  text-wrap:balance;
}
.entradilla{
  font-family:var(--serif);font-size:clamp(1.1rem,3.4vw,1.32rem);
  line-height:1.45;color:var(--tinta-media);margin:1.1rem 0 0;max-width:32rem;
}

section{padding:2.6rem 0 0}
h2{
  font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--arcilla);font-weight:500;margin:0 0 .9rem;
}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.prosa{padding-top:2.2rem}
.prosa p{color:var(--tinta-media)}

/* fichas */
.fichas{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.fichas li{border-top:1px solid var(--filete);padding-top:1rem}
.fichas b{display:block;font-weight:500;margin-bottom:.2rem}
.fichas span{display:block;color:var(--tinta-media);font-size:.96rem}

/* paneles */
.panel{
  background:var(--papel-hondo);border:1px solid var(--papel-borde);
  border-radius:3px;padding:1.6rem 1.5rem;margin-top:2.6rem;
}
.panel--sobrio{background:transparent;border-color:var(--filete)}
.panel p{color:var(--tinta-media)}
.acceso{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem;margin-top:1.1rem}
.acceso span{font-size:.95rem;color:var(--tinta-media)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--papel);border:1px solid var(--papel-borde);
  border-radius:2px;padding:.1rem .38rem;
}
.apunte{font-size:.9rem;color:var(--tinta-tenue);margin-top:.9rem}

.precio{font-family:var(--serif);font-size:1.3rem;color:var(--tinta)}
.precio b{font-weight:500}

.firma p{color:var(--tinta-media)}
.contacto{margin-top:1rem;font-size:1.05rem}

/* enlaces */
a{color:var(--arcilla)}
.enlace-fuerte{
  font-weight:500;text-decoration:none;
  border-bottom:2px solid var(--filete-fuerte);padding-bottom:1px;
}
.enlace-fuerte:hover{border-bottom-color:var(--arcilla)}

footer{
  margin-top:3.5rem;padding:1.4rem 0 3rem;
  border-top:1px solid var(--filete);
  font-size:.86rem;color:var(--tinta-tenue);
}
footer a{color:var(--tinta-tenue)}

@media (min-width:44rem){
  body{font-size:18px}
  .fichas{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
}