/* Hoja de estilo compartida por las páginas de artículos.
   Se enlaza desde /articulos/index.html y desde cada artículo.
   Mismos tonos y tipografías que la portada. */

:root{
  --papel:#FBF8F4;
  --papel-2:#F1EAE0;
  --tierra:#8A5F3C;
  --tierra-honda:#4B3A2F;
  --tinta:#3A312A;
  --tinta-suave:#6B5D51;
  --arena:#D8C6B2;
  --linea:#E5DACB;
  --max:1200px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{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;
}
img{max-width:100%;display:block}
a{color:var(--tierra-honda)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.18;color:var(--tierra-honda);margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,2.8vw,1.95rem);letter-spacing:-.01em}
h3{font-size:1.1rem;font-family:var(--sans);font-weight:600;letter-spacing:.01em}
p{margin:0 0 1.15em;max-width:66ch}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 clamp(1.2rem,5vw,2.5rem)}
.eyebrow{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tierra);font-weight:600;margin:0 0 1.2rem;
}

/* --- nav --- */
.nav{position:sticky;top:0;z-index:10;background:rgba(251,248,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.marca{font-family:var(--serif);font-size:1.05rem;color:var(--tierra-honda);text-decoration:none;letter-spacing:.01em}
.marca span{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tierra);white-space:nowrap}
@media(max-width:420px){.marca span{font-size:.58rem;letter-spacing:.1em}}
.nav-links{display:flex;gap:1.35rem;align-items:center;flex-wrap:nowrap}
.nav-links a{font-size:.92rem;text-decoration:none;color:var(--tinta-suave);white-space:nowrap}
.nav-links a:hover{color:var(--tierra)}
.nav-links a[aria-current]{color:var(--tierra)}
@media(max-width:1000px){.nav-links{gap:1.05rem}.nav-links a{font-size:.86rem}}
@media(max-width:860px){.nav-links a[href$="#sobre-mi"]{display:none}}
@media(max-width:700px){.nav-links a:not(.btn-mini){display:none}}
.btn-mini{
  background:var(--tierra-honda);color:var(--papel)!important;padding:.55rem 1.1rem;border-radius:999px;
  font-size:.9rem;font-weight:500;white-space:nowrap
}

/* --- migas --- */
.migas{font-size:.82rem;color:var(--tinta-suave);margin:0 0 1.6rem;letter-spacing:.02em}
.migas a{color:var(--tinta-suave);text-decoration:none;border-bottom:1px solid var(--linea)}
.migas a:hover{color:var(--tierra)}
.migas span{color:var(--arena);margin:0 .45rem}

/* --- artículo --- */
.art{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
/* columna de lectura centrada: ni pegada al borde izquierdo ni perdida en el ancho */
.art-col{max-width:70ch;margin-left:auto;margin-right:auto}
.meta{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave);
  margin:0 0 2.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--linea)
}
.meta b{font-weight:600;color:var(--tierra)}
.art-col h2{margin-top:2.6em}
.art-col h2:first-of-type{margin-top:1.8em}

/* respuesta corta destacada, lo primero que lee una persona (y una IA) */
.respuesta{
  font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.45;
  color:var(--tierra-honda);border-left:2px solid var(--arena);
  padding:.2rem 0 .2rem 1.4rem;margin:0 0 2rem;max-width:58ch
}
.respuesta p{margin:0;max-width:none;font-size:inherit;line-height:inherit}

.lead{font-size:1.18rem;color:var(--tinta-suave)}

/* listas del cuerpo */
.lista{list-style:none;padding:0;margin:1.4rem 0 1.8rem;max-width:66ch}
.lista li{position:relative;padding:.55rem 0 .55rem 1.5rem;color:var(--tinta-suave)}
.lista li::before{content:"";position:absolute;left:0;top:1.3rem;width:9px;height:1px;background:var(--arena)}
.lista li strong{color:var(--tierra-honda);font-weight:600}

/* cita de autoría ajena, en bloque sobrio */
.cita{
  background:var(--papel-2);border-radius:2px;padding:1.5rem 1.6rem;margin:2rem 0;max-width:66ch
}
.cita p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--tierra-honda);line-height:1.5;max-width:none}
.cita .firma{
  display:block;margin-top:.9rem;font-family:var(--sans);font-style:normal;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)
}

/* aviso de urgencia dentro del cuerpo */
.urgencia{
  background:var(--papel-2);border-left:2px solid var(--tierra);
  padding:1.1rem 1.3rem;margin:1.8rem 0;max-width:66ch
}
.urgencia p{margin:0;font-size:.95rem;color:var(--tinta-suave)}

/* cierre con llamada a la acción */
.cierre{
  margin-top:3.5rem;padding-top:2.2rem;border-top:1px solid var(--linea)
}
.btn{
  display:inline-block;text-decoration:none;font-weight:500;font-size:1rem;
  padding:.95rem 1.8rem;border-radius:999px;transition:transform .2s ease,background .2s ease
}
.btn-1{background:var(--tierra-honda);color:var(--papel)}
.btn-1:hover{background:var(--tierra);transform:translateY(-2px)}
.btn-2{border:1px solid var(--tierra);color:var(--tierra-honda)}
.btn-2:hover{background:var(--papel-2)}
.cta-fila{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

/* seguir leyendo */
.sigue{border-top:1px solid var(--linea);padding:clamp(2.5rem,6vw,4rem) 0}
.sigue .eyebrow,.sigue h2{max-width:70ch;margin-left:auto;margin-right:auto}
.sigue-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1.8rem auto 0;max-width:70ch}
.ficha{
  display:block;background:var(--papel-2);border-radius:2px;padding:1.5rem 1.5rem;
  text-decoration:none;color:inherit;transition:transform .2s ease
}
.ficha:hover{transform:translateY(-2px)}
.ficha h3{margin-bottom:.45rem;font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.25}
.ficha p{margin:0;font-size:.95rem;color:var(--tinta-suave);max-width:none}
.ficha .fecha{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tierra);margin-bottom:.7rem}

/* --- índice de artículos --- */
.indice{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.indice-lista{margin:3rem auto 0;max-width:70ch;border-top:1px solid var(--linea)}
.indice .cierre{border-top:none;margin-top:2.8rem}
.entrada{
  display:block;text-decoration:none;color:inherit;
  padding:2rem 0;border-bottom:1px solid var(--linea)
}
.entrada:hover h2{color:var(--tierra)}
.entrada h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:.5rem;transition:color .2s ease}
.entrada .fecha{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tierra);margin-bottom:.8rem}
.entrada p{margin:0;color:var(--tinta-suave)}
.entrada .mas{display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:600;color:var(--tierra-honda)}
.entrada .mas::after{content:" →";color:var(--tierra)}
.vacio{color:var(--tinta-suave);font-style:italic}

/* --- pie --- */
footer.pie{padding:2.5rem 0 6rem;font-size:.85rem;color:var(--tinta-suave);border-top:1px solid var(--linea)}
footer.pie .wrap>*{max-width:70ch;margin-left:auto;margin-right:auto}
footer.pie p{max-width:70ch}
.aviso{background:var(--papel-2);padding:1.2rem 1.4rem;border-left:2px solid var(--arena);margin-bottom:1.8rem}
.aviso p{margin:0;font-size:.9rem}
.legal{margin-top:1rem;font-size:.85rem}
.legal a{color:var(--tinta-suave)}
.legal a:hover{color:var(--tierra)}

/* --- botón flotante móvil --- */
.flota{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:20;text-align:center;
  background:var(--tierra-honda);color:var(--papel);text-decoration:none;
  padding:1rem;border-radius:999px;font-weight:500;box-shadow:0 6px 24px rgba(75,58,47,.28)
}
@media(min-width:701px){.flota{display:none}}

/* --- accesibilidad y movimiento --- */
a:focus-visible{outline:2px solid var(--tierra);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:hover,.ficha:hover{transform:none}
}