/* ecorralrol.dev — estilo compartido */
:root{
  --negro:#14110d;
  --negro-2:#1d1812;
  --vela:#d9a441;
  --vela-tenue:#8a6a35;
  --papel:#e8dfcd;
  --papel-tenue:#9c917c;
  --borde:#3a3226;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--negro)}
body{
  font-family:'Spectral',serif;
  font-weight:300;
  color:var(--papel);
  background:
    radial-gradient(ellipse 130% 50% at 50% -5%, #2a2014 0%, transparent 60%),
    var(--negro);
  min-height:100vh;
  padding:3rem 1.25rem 5rem;
  line-height:1.55;
}
.contenedor{max-width:760px;margin:0 auto}

/* Navegación de migas */
nav.migas{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--papel-tenue);margin-bottom:2.5rem;
}
nav.migas a{color:var(--vela);text-decoration:none}
nav.migas a:hover{text-decoration:underline}
nav.migas span{color:var(--borde);margin:0 .5rem}

/* Cabeceras */
header.portada{text-align:center;margin-bottom:3rem}
.emblema{
  font-size:1.8rem;color:var(--vela);opacity:.7;
  display:block;margin-bottom:.6rem;
}
h1{
  font-family:'IM Fell English',serif;
  font-weight:400;
  font-size:clamp(2.4rem,9vw,4rem);
  letter-spacing:.1em;
  color:var(--papel);
}
.subtitulo{
  font-family:'IM Fell English',serif;
  font-style:italic;
  color:var(--vela);
  font-size:1.1rem;
  margin-top:.3rem;
}
.lema{
  color:var(--papel-tenue);font-style:italic;
  font-size:.9rem;margin-top:.9rem;
}

/* Rejilla de tarjetas */
.tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem;
}
a.tarjeta, div.tarjeta{
  display:block;
  border:1px solid var(--borde);
  background:linear-gradient(180deg,var(--negro-2),var(--negro));
  padding:1.5rem 1.4rem 1.4rem;
  border-radius:2px;
  text-decoration:none;
  color:var(--papel);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
a.tarjeta:hover{
  border-color:var(--vela-tenue);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 24px rgba(217,164,65,.07);
}
.tarjeta .icono{display:block;margin-bottom:.7rem;color:var(--vela)}
.tarjeta .icono svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.emblema svg{width:42px;height:42px;stroke:var(--vela);fill:none;stroke-width:1.5;stroke-linejoin:round;opacity:.8}
.tarjeta h3{
  font-family:'IM Fell English',serif;
  font-weight:400;font-size:1.25rem;letter-spacing:.04em;
}
.tarjeta p{font-size:.88rem;color:var(--papel-tenue);margin-top:.35rem}
div.tarjeta{opacity:.45;cursor:default}
.proximamente{
  display:inline-block;margin-top:.7rem;
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vela-tenue);
  border:1px solid var(--borde);
  padding:.2rem .6rem;border-radius:2px;
}

/* Divisor */
.divisor{
  text-align:center;color:var(--borde);
  font-size:.85rem;letter-spacing:.6em;text-indent:.6em;
  margin:2.5rem 0;user-select:none;
}

footer{
  text-align:center;margin-top:4rem;
  font-family:'IM Fell English',serif;font-style:italic;
  color:var(--borde);font-size:.95rem;
}
footer a{color:var(--vela-tenue);text-decoration:none}

@media (max-width:560px){
  body{padding:2rem 1rem 4rem}
}