/* joteaballay.com — hoja de estilo única. Editable a mano. */

:root{
  --papel:#fbf9f5;
  --papel-hondo:#f3efe7;
  --tinta:#1a1714;
  --tinta-suave:#554d45;
  --tinta-tenue:#8a8078;
  --linea:#e3dcd0;
  --acento:#a8472a;
  --acento-claro:#c25f3f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ancho:40rem;
  --ancho-amplio:62rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#15120f;
    --papel-hondo:#1e1a16;
    --tinta:#ece5db;
    --tinta-suave:#b6aca0;
    --tinta-tenue:#847a70;
    --linea:#302a24;
    --acento:#e08a63;
    --acento-claro:#eda481;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acento);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acento) 35%,transparent);transition:border-color .15s,color .15s}
a:hover{color:var(--acento-claro);border-bottom-color:var(--acento-claro)}

/* ---------- estructura ---------- */

.envoltura{width:100%;max-width:var(--ancho-amplio);margin:0 auto;padding:0 1.5rem}
.columna{max-width:var(--ancho);margin:0 auto}

.barra{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
}
.barra .envoltura{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding-top:1rem;padding-bottom:1rem}
.marca{font-family:var(--serif);font-size:1.0625rem;letter-spacing:.01em;color:var(--tinta);border:0;font-weight:400}
.marca:hover{color:var(--acento)}
.menu{display:flex;gap:1.5rem;font-size:.9375rem}
.menu a{color:var(--tinta-suave);border:0}
.menu a:hover,.menu a[aria-current="page"]{color:var(--acento)}

/* ---------- portada ---------- */

.portada{padding:7rem 0 5rem}
.portada .nombre{
  font-family:var(--serif);
  font-size:clamp(2.75rem,9vw,5.25rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 1.75rem;
  font-weight:400;
}
.portada .bajada{
  font-size:clamp(1.1875rem,2.6vw,1.5rem);
  line-height:1.5;
  color:var(--tinta-suave);
  max-width:34rem;
  margin:0 0 2.5rem;
}
.portada .bajada strong{color:var(--tinta);font-weight:600}

.acciones{display:flex;flex-wrap:wrap;gap:.75rem}
.boton{
  display:inline-block;padding:.75rem 1.5rem;border-radius:2rem;
  font-size:.9375rem;font-weight:500;border:1px solid var(--acento);
  background:var(--acento);color:var(--papel);
}
.boton:hover{background:var(--acento-claro);border-color:var(--acento-claro);color:var(--papel)}
.boton--linea{background:transparent;color:var(--acento);border-color:var(--linea)}
.boton--linea:hover{background:transparent;border-color:var(--acento);color:var(--acento-claro)}

/* ---------- secciones ---------- */

.seccion{padding:4.5rem 0;border-top:1px solid var(--linea)}
.rotulo{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-tenue);margin:0 0 2rem;font-weight:600;
}
.seccion h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.75rem,4vw,2.375rem);line-height:1.15;
  letter-spacing:-.015em;margin:0 0 1.25rem;
}
.seccion p{color:var(--tinta-suave);max-width:var(--ancho)}
.seccion p strong{color:var(--tinta)}

/* ---------- frentes de trabajo ---------- */

.frentes{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:.75rem;overflow:hidden;margin-top:2.5rem}
@media (min-width:46rem){.frentes{grid-template-columns:1fr 1fr}}

.frente{background:var(--papel);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:.625rem}
.frente:hover{background:var(--papel-hondo)}
.frente h3{font-family:var(--serif);font-size:1.3125rem;font-weight:400;margin:0;letter-spacing:-.01em}
.frente h3 a{color:var(--tinta);border:0}
.frente h3 a:hover{color:var(--acento)}
.frente p{margin:0;font-size:.9375rem;color:var(--tinta-suave);line-height:1.65;max-width:none}
.frente .pie{margin-top:auto;padding-top:.75rem;font-size:.8125rem;color:var(--tinta-tenue);letter-spacing:.02em}

/* ---------- listado de escritos ---------- */

.lista{list-style:none;margin:2.5rem 0 0;padding:0}
.lista li{padding:1.5rem 0;border-top:1px solid var(--linea)}
.lista li:first-child{border-top:0;padding-top:0}
.lista h3{font-family:var(--serif);font-size:1.375rem;font-weight:400;margin:0 0 .375rem;line-height:1.25;letter-spacing:-.01em}
.lista h3 a{color:var(--tinta);border:0}
.lista h3 a:hover{color:var(--acento)}
.lista .fecha{font-size:.8125rem;color:var(--tinta-tenue);letter-spacing:.03em;text-transform:uppercase;display:block;margin-bottom:.5rem}
.lista .resumen{margin:0;font-size:.9375rem;color:var(--tinta-suave);line-height:1.65;max-width:var(--ancho)}
.vacio{color:var(--tinta-tenue);font-style:italic}

/* ---------- texto largo (posts) ---------- */

.articulo{padding:4rem 0 5rem}
.articulo header{margin-bottom:3rem}
.articulo .fecha{font-size:.8125rem;color:var(--tinta-tenue);letter-spacing:.06em;text-transform:uppercase}
.articulo h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5.5vw,3rem);line-height:1.1;
  letter-spacing:-.02em;margin:.75rem 0 0;
}
.articulo .entradilla{font-size:1.1875rem;color:var(--tinta-suave);line-height:1.6;margin:1.25rem 0 0}

.prosa{font-size:1.125rem;line-height:1.78}
.prosa > *:first-child{margin-top:0}
.prosa p{margin:0 0 1.5rem}
.prosa h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.25;margin:3rem 0 1rem;letter-spacing:-.015em}
.prosa h3{font-family:var(--serif);font-weight:400;font-size:1.375rem;margin:2.5rem 0 .75rem}
.prosa ul,.prosa ol{margin:0 0 1.5rem;padding-left:1.375rem}
.prosa li{margin:0 0 .5rem}
.prosa blockquote{
  margin:2rem 0;padding:.25rem 0 .25rem 1.5rem;
  border-left:2px solid var(--acento);
  font-family:var(--serif);font-size:1.25rem;line-height:1.55;color:var(--tinta);
}
.prosa blockquote p:last-child{margin-bottom:0}
.prosa hr{border:0;border-top:1px solid var(--linea);margin:3rem 0}
.prosa img{border-radius:.5rem;margin:2rem 0}
.prosa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;background:var(--papel-hondo);padding:.15em .4em;border-radius:.25rem}
.prosa pre{background:var(--papel-hondo);padding:1.25rem;border-radius:.5rem;overflow-x:auto;border:1px solid var(--linea);margin:0 0 1.5rem}
.prosa pre code{background:none;padding:0;font-size:.875rem;line-height:1.6}
.prosa figure{margin:2rem 0}
.prosa figcaption{font-size:.8125rem;color:var(--tinta-tenue);margin-top:.5rem}

.volver{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--linea);font-size:.9375rem}

/* ---------- contacto y pie ---------- */

.contacto .dato{display:block;font-family:var(--serif);font-size:clamp(1.25rem,3.2vw,1.75rem);margin:.5rem 0;letter-spacing:-.01em}

.pie{border-top:1px solid var(--linea);padding:2.5rem 0 3.5rem;font-size:.875rem;color:var(--tinta-tenue)}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.pie a{color:var(--tinta-tenue)}
.pie a:hover{color:var(--acento)}

/* FALTA = un dato que no tengo y que no se inventa. Cada marca es una decisión:
   se consigue el dato o se saca la frase. No debe quedar ninguna al publicar. */
.falta{display:inline;background:#fbf0e8;color:#8a3b12;padding:0 .35em;border-radius:3px;font-size:.92em}
@media (prefers-color-scheme:dark){.falta{background:#2d1d12;color:#f0a06c}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}