@font-face{font-family:"Fraunces";
  src:url(/assets/fuentes/fraunces-latin-full-normal.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";
  src:url(/assets/fuentes/caveat-latin-500-normal.woff2) format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:"Caveat";
  src:url(/assets/fuentes/caveat-latin-600-normal.woff2) format("woff2");
  font-weight:600;font-display:swap}

/* joteaballay.com — «Un archivo vivo»
   Editorial cálido: papel y tinta de día, noche tibia en las bandas.
   Tipografía: Fraunces (serif óptica) para todo lo que habla,
   Caveat para las notas manuscritas — que son versos de los escritos. */

:root{
  --papel:#f5efe3;
  --papel-hondo:#ebe2cf;
  --tinta:#241c12;
  --tinta-suave:#5c5142;
  --tinta-tenue:#8d8172;
  --linea:#dcd1ba;
  --brasa:#a84b24;            /* enlaces y acciones: el naranja quemado de tus atardeceres */
  --manuscrita:#8f4a1f;

  --noche:#171107;            /* bandas oscuras: negro tibio, no negro de pantalla */
  --noche-honda:#100b04;
  --crema:#f3e9d7;            /* texto sobre la noche */
  --crema-tenue:#bdac93;
  --manuscrita-noche:#e5a86e;

  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,ui-serif,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mano:"Caveat","Bradley Hand",cursive;
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#1a140b; --papel-hondo:#241c10; --tinta:#efe6d4; --tinta-suave:#c0b29b;
    --tinta-tenue:#8d8070; --linea:#352b1c; --brasa:#e08a55; --manuscrita:#e5a86e;
    --noche:#100b04; --noche-honda:#0a0702; --crema:#f3e9d7; --crema-tenue:#bdac93;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--serif);font-weight:390;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brasa)}
::selection{background:var(--brasa);color:var(--papel)}
:focus-visible{outline:2px solid var(--brasa);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);font-weight:470;letter-spacing:-.015em;
  line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}

.envoltura{max-width:72rem;margin-inline:auto;
  padding-inline:max(20px,env(safe-area-inset-left,0px)) }
@media (min-width:48rem){.envoltura{padding-inline:clamp(24px,4vw,56px)}}

/* ---------- rótulos y notas manuscritas ---------- */
.rotulo{font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-tenue)}
.oscuro .rotulo{color:var(--crema-tenue)}

.mano{font-family:var(--mano);font-weight:500;font-size:1.5rem;line-height:1.15;
  color:var(--manuscrita);rotate:-3deg;display:inline-block;text-decoration:none;
  max-width:13em}
.mano:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.oscuro .mano{color:var(--manuscrita-noche)}

/* la firma de todas las citas: de dónde viene el verso */
.de{font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;
  color:var(--tinta-tenue);text-decoration:none}
.de:hover{color:var(--brasa)}
.oscuro .de{color:var(--crema-tenue)}
.oscuro .de:hover{color:var(--crema)}

/* ---------- barra ---------- */
.barra{position:absolute;inset-inline:0;top:0;z-index:10;padding-block:1.1rem}
.barra .envoltura{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.marca-grupo{display:flex;flex-direction:column;gap:.15rem}
.marca{font-family:var(--mano);font-weight:600;font-size:1.9rem;line-height:1;
  color:var(--crema);text-decoration:none;letter-spacing:.01em}
.lema{font-family:var(--sans);font-size:.625rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--crema-tenue);white-space:nowrap}
.menu{margin-left:auto;display:flex;gap:.9rem 1.3rem;flex-wrap:wrap;
  justify-content:flex-end;row-gap:.5rem}
.menu a{font-family:var(--sans);font-size:.8125rem;letter-spacing:.03em;
  color:var(--crema);text-decoration:none;opacity:.88}
@media (max-width:40rem){
  .menu{margin-left:0;justify-content:flex-start}
  .menu a{font-size:.78rem}
}
.menu a:hover,.menu a[aria-current]{opacity:1;text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}

/* barra sobre fondo claro (páginas interiores) */
.barra--tinta{position:static;background:var(--papel);border-bottom:1px solid var(--linea)}
.barra--tinta .marca{color:var(--tinta)}
.barra--tinta .lema{color:var(--tinta-tenue)}
.barra--tinta .menu a{color:var(--tinta)}

/* ---------- portada: héroe ---------- */
.heroe{position:relative;min-height:92svh;display:flex;align-items:flex-end;
  background:var(--noche);color:var(--crema);overflow:hidden}
.heroe-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%}
.heroe::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,9,3,.88) 0%,rgba(14,9,3,.35) 45%,rgba(14,9,3,.28) 100%)}
.heroe .envoltura{position:relative;z-index:2;width:100%;
  padding-block:0 clamp(2.5rem,7vh,5rem);
  display:grid;gap:1.25rem;grid-template-columns:minmax(0,46rem) 1fr}
.heroe h1{font-size:clamp(2.6rem,7.2vw,5.3rem);font-weight:430;color:#fdf8ee;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.heroe .bajada{font-size:clamp(1rem,1.6vw,1.1875rem);line-height:1.6;max-width:36em;
  color:var(--crema);margin-top:1.1rem}
.heroe .acciones{margin-top:.75rem}
.heroe-nota{align-self:end;justify-self:end;text-align:right;display:none}
@media (min-width:54rem){.heroe-nota{display:block}}
.heroe-nota .mano{font-size:1.65rem;rotate:-5deg;color:var(--manuscrita-noche)}

.boton{display:inline-block;font-family:var(--sans);font-size:.9375rem;font-weight:500;
  letter-spacing:.02em;color:var(--papel);background:var(--brasa);text-decoration:none;
  padding:.7rem 1.6rem;border-radius:2rem;border:0;cursor:pointer}
.boton:hover{filter:brightness(1.1)}
.heroe .boton{background:#f3e9d7;color:#241c12}

/* ---------- secciones ---------- */
.seccion{padding-block:clamp(3.5rem,9vh,6.5rem)}
.seccion--honda{background:var(--papel-hondo)}
.cabeza-seccion{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem}
.cabeza-seccion h2,.seccion h2{font-size:clamp(1.9rem,4vw,3rem)}
.cabeza-seccion p{color:var(--tinta-suave);max-width:38em}

/* dedicatoria: la bajada de Jote, completa y en grande */
.dedicatoria{max-width:46rem}
.dedicatoria p.grande{font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.5;
  font-weight:400;letter-spacing:-.005em}
.dedicatoria .firma{margin-top:1.5rem}

/* ---------- las creaciones ---------- */
.frentes{display:grid;gap:2.5rem 1.75rem;grid-template-columns:1fr}
@media (min-width:38rem){.frentes{grid-template-columns:1fr 1fr}}
@media (min-width:66rem){.frentes{grid-template-columns:repeat(4,1fr)}}
.frente{display:flex;flex-direction:column;gap:.7rem;position:relative}
.frente .retrato{aspect-ratio:4/3;overflow:hidden;border-radius:.3rem;
  background:var(--papel-hondo)}
.frente .retrato img{width:100%;height:100%;object-fit:cover;
  transition:scale .6s ease}
.frente:hover .retrato img{scale:1.04}
.frente .numero{font-family:var(--sans);font-size:.6875rem;letter-spacing:.18em;
  color:var(--tinta-tenue);margin-top:.4rem}
.frente h3{font-size:1.55rem;font-weight:470}
.frente h3 a{color:inherit;text-decoration:none}
.frente h3 a::after{content:"";position:absolute;inset:0}
.frente:hover h3 a{color:var(--brasa)}
.frente p{font-size:.9375rem;color:var(--tinta-suave);line-height:1.55}
.frente .pie{font-family:var(--sans);font-size:.75rem;letter-spacing:.04em;
  color:var(--tinta-tenue)}
.frente .mano{position:relative;z-index:2;margin-top:.35rem;font-size:1.35rem}

/* ---------- banda de cita ---------- */
.oscuro{background:var(--noche);color:var(--crema)}
.banda-cita{position:relative;overflow:hidden}
.banda-cita .envoltura{position:relative;z-index:2;
  padding-block:clamp(4rem,12vh,7.5rem);max-width:72rem;
  display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:54rem){.banda-cita .envoltura{grid-template-columns:7fr 4fr;align-items:end}}
.banda-cita .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.75;filter:saturate(.7)}
.banda-cita::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,11,4,.9) 25%,rgba(16,11,4,.3) 100%)}
.banda-cita blockquote{margin:0;font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:430;
  line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
.banda-cita blockquote em{font-style:italic;font-weight:380}
.banda-cita .segunda{display:block;margin-top:1.2rem;
  font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:380;color:var(--crema-tenue)}
.banda-cita .de{position:relative;z-index:2}

/* ---------- franja de fotos ---------- */
.franja{padding-block:clamp(3rem,8vh,5rem);background:var(--papel-hondo);overflow:hidden}
.franja-cinta{display:flex;gap:1rem;align-items:center;
  overflow-x:auto;padding:1.5rem clamp(20px,4vw,56px) 2.2rem;
  scroll-snap-type:x proximity;scrollbar-width:none}
.franja-cinta::-webkit-scrollbar{display:none}
.recuerdo{position:relative;flex:0 0 auto;scroll-snap-align:center}
.recuerdo img{height:15rem;width:auto;border-radius:.25rem}
.recuerdo--polaroid{rotate:2.5deg;background:#fcf9f2;padding:.55rem .55rem 2.4rem;
  box-shadow:0 10px 28px rgba(30,20,8,.22);border-radius:2px}
.recuerdo--polaroid img{border-radius:0;height:13.5rem}
.recuerdo .mano{position:absolute;left:.6rem;bottom:-1.3rem;font-size:1.4rem;z-index:2}
.recuerdo--polaroid .mano{left:.7rem;bottom:.2rem}
.franja .remate{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap}

/* ---------- podcast ---------- */
.columna{max-width:46rem}
.lista{list-style:none;margin:2.25rem 0 0;padding:0}
.lista li{padding-block:1.6rem;border-top:1px solid var(--linea)}
.lista h3{font-size:1.35rem;margin-bottom:.3rem}
.fecha{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-tenue);display:block;margin-bottom:.45rem}
.resumen{font-size:.9375rem;color:var(--tinta-suave);margin-bottom:.8rem}
.audio{width:100%;max-width:34rem;display:block;margin-top:.6rem}

/* ---------- sobre mí ---------- */
.retrato-doble{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:start}
@media (min-width:54rem){.retrato-doble{grid-template-columns:5fr 7fr;gap:4rem}}
.retrato-doble .marco-foto{border-radius:.3rem;overflow:hidden}
@media (min-width:54rem){.retrato-doble .marco-foto{position:sticky;top:2.5rem}}
.retrato-doble .marco-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.retrato-doble h2{margin-bottom:1.1rem}
.retrato-doble .cuerpo{font-size:1.0625rem;line-height:1.7;color:var(--tinta-suave)}

.tambien{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.tambien p{font-size:.9375rem;color:var(--tinta-suave);margin-bottom:1rem}
.tambien ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.tambien li{font-size:.9375rem;color:var(--tinta-suave);line-height:1.55}
.tambien b,.tambien strong{color:var(--tinta);font-weight:520}

/* ---------- escríbeme ---------- */
.contacto .columna{max-width:42rem}
.contacto h2{margin-bottom:1rem}
.contacto p{color:var(--tinta-suave)}
.dato{display:inline-block;margin:.4rem 1.6rem 0 0;font-size:1.05rem}

/* ---------- cierre ---------- */
.cierre{position:relative;overflow:hidden}
.cierre .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cierre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,7,2,.9) 0%,rgba(10,7,2,.55) 100%)}
.cierre .envoltura{position:relative;z-index:2;padding-block:clamp(4.5rem,14vh,8rem);
  display:grid;gap:1.1rem;grid-template-columns:minmax(0,40rem) 1fr}
.cierre h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.cierre .cuerpo{color:var(--crema-tenue);max-width:34em}
.cierre .acciones{margin-top:1rem}
.cierre-nota{align-self:end;justify-self:end;display:none;text-align:right}
@media (min-width:54rem){.cierre-nota{display:block}}

/* ---------- pie de página ---------- */
footer.pie{background:var(--noche-honda);color:var(--crema-tenue);
  font-family:var(--sans);font-size:.8125rem}
footer.pie .envoltura{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.6rem}
footer.pie a{color:var(--crema-tenue)}
footer.pie a:hover{color:var(--crema)}

/* ================= páginas interiores ================= */
main.envoltura{padding-block:clamp(2.5rem,6vh,4.5rem) 4rem}

.cabecera-seccion{padding-block:clamp(2rem,5vh,3.5rem) 2.5rem;max-width:46rem}
.cabecera-seccion h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:440;margin-bottom:.8rem}
.cabecera-seccion p{color:var(--tinta-suave);font-size:1.0625rem}

/* escritos: retícula */
.reticula-escritos{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-bottom:5rem}
@media (min-width:38rem){.reticula-escritos{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.reticula-escritos{grid-template-columns:repeat(3,1fr)}}
.mosaico{background:var(--papel-hondo);border-radius:.3rem;overflow:hidden;position:relative}
.mosaico a{display:flex;flex-direction:column;gap:.55rem;height:100%;
  padding:1.4rem 1.4rem 1.6rem;color:inherit;text-decoration:none}
.mosaico--ancho{grid-column:1/-1}
@media (min-width:62rem){.mosaico--ancho{grid-column:span 2}}
.mosaico--foto a{padding:0}
.mosaico--foto img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mosaico--foto .anio,.mosaico--foto h2,.mosaico--foto .verso{padding-inline:1.4rem}
.mosaico--foto .anio{margin-top:1rem}
.mosaico--foto .verso{padding-bottom:1.6rem}
.mosaico .anio{font-family:var(--sans);font-size:.6875rem;letter-spacing:.18em;
  color:var(--tinta-tenue)}
.mosaico h2{font-size:1.45rem;font-weight:470;line-height:1.15}
.mosaico--ancho h2{font-size:1.9rem}
.mosaico:hover h2{color:var(--brasa)}
.mosaico .verso{font-size:.9375rem;color:var(--tinta-suave);line-height:1.5;
  display:flex;flex-direction:column;gap:.1rem}
.vacio{color:var(--tinta-tenue);font-style:italic}

/* escrito: la página de un texto */
.articulo{padding-block:clamp(2rem,6vh,4rem) 3rem}
.articulo header{margin-bottom:2.2rem;max-width:44rem}
.articulo h1{font-size:clamp(2.3rem,5.4vw,3.8rem);font-weight:440;margin-block:.6rem 1rem}
.entradilla{font-size:1.15rem;color:var(--tinta-suave);line-height:1.55}
.foto-escrito{margin-top:1.6rem;border-radius:.3rem}
.prosa{max-width:40rem;font-size:1.125rem;line-height:1.75}
.prosa p{margin-block:1.1rem}
.prosa h2,.prosa h3,.prosa h4{margin-top:2rem;margin-bottom:.6rem}
.prosa blockquote{margin:1.4rem 0;padding-left:1.2rem;border-left:2px solid var(--brasa);
  color:var(--tinta-suave)}
.prosa hr{border:0;border-top:1px solid var(--linea);margin-block:2rem}
.prosa pre{background:var(--papel-hondo);padding:1rem;border-radius:.3rem;overflow-x:auto}
.prosa code{font-size:.9em}
.prosa img{border-radius:.3rem}
.volver{margin-top:3rem;font-family:var(--sans);font-size:.875rem}
.volver a{text-decoration:none}
.volver a:hover{text-decoration:underline}

/* fotografías: mosaico + visor */
.mosaico-fotos{columns:2;column-gap:.6rem;margin-bottom:5rem}
@media (min-width:38rem){.mosaico-fotos{columns:3}}
@media (min-width:62rem){.mosaico-fotos{columns:4;column-gap:.8rem}}
.celda{display:block;width:100%;padding:0;border:0;background:var(--papel-hondo);
  margin:0 0 .6rem;border-radius:.3rem;overflow:hidden;cursor:zoom-in;break-inside:avoid}
@media (min-width:62rem){.celda{margin-bottom:.8rem}}
.celda img{width:100%;height:auto;transition:opacity .25s ease}
.celda:hover img{opacity:.86}
.visor{position:fixed;inset:0;z-index:50;background:rgba(10,7,2,.95);
  display:grid;place-items:center;padding:1.5rem;cursor:zoom-out}
.visor[hidden]{display:none}
.visor img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.25rem;cursor:default}
.visor-cerrar{position:absolute;top:calc(.75rem + env(safe-area-inset-top,0px));right:1rem;
  width:2.75rem;height:2.75rem;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.75rem;line-height:1}
.visor-cerrar:hover{background:rgba(255,255,255,.24)}

/* canciones */
.canciones li{padding-block:2rem}
.canciones h3{font-size:1.6rem}
.letra{margin-top:1.2rem;max-width:38rem;color:var(--tinta-suave);line-height:1.7}