/* Revista Gato — estilos compartidos
   Marca: naranja #E8862D · café #5C3317 · crema #FBF0DC */
:root{
  --naranja:#E8862D;
  --naranja-osc:#C96A1B;
  --cafe:#5C3317;
  --cafe-suave:#8A5A33;
  --crema:#FBF0DC;
  --crema-clara:#FFF9EF;
  --blanco:#FFFFFF;
  --sombra:0 4px 18px rgba(92,51,23,.14);
  --radio:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--crema);
  color:var(--cafe);
  line-height:1.6;
  font-size:17px;
}
h1,h2,h3,.serif{
  font-family:Georgia,"Times New Roman",Times,serif;
  line-height:1.25;
  color:var(--cafe);
}
img{max-width:100%;display:block}
a{color:var(--naranja-osc)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Encabezado ---------- */
header.site{
  background:var(--crema-clara);
  border-bottom:3px solid var(--naranja);
  position:sticky;top:0;z-index:50;
}
header.site .wrap{
  display:flex;align-items:center;gap:14px;
  padding-top:10px;padding-bottom:10px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--naranja)}
.brand .name{font-family:Georgia,serif;font-size:1.45rem;font-weight:bold;color:var(--cafe)}
.brand .tag{display:block;font-family:inherit;font-size:.78rem;color:var(--cafe-suave);letter-spacing:.02em}
nav.main{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav.main a{
  text-decoration:none;color:var(--cafe);font-weight:600;
  padding:8px 14px;border-radius:999px;
}
nav.main a:hover{background:var(--crema)}
nav.main a.activo{background:var(--naranja);color:#fff}

/* ---------- Héroe ---------- */
.hero{
  text-align:center;
  padding:52px 0 36px;
  background:linear-gradient(180deg,var(--crema-clara),var(--crema));
}
.hero img.logo{width:190px;height:190px;margin:0 auto 14px;border-radius:50%;object-fit:cover;border:5px solid var(--naranja);box-shadow:var(--sombra)}
.hero h1{font-size:2.7rem;margin-bottom:8px}
.hero .promesa{max-width:640px;margin:0 auto 20px;font-size:1.13rem;color:var(--cafe-suave)}
.btn{
  display:inline-block;background:var(--naranja);color:#fff;text-decoration:none;
  font-weight:700;padding:12px 26px;border-radius:999px;box-shadow:var(--sombra);
  margin:4px;
}
.btn:hover{background:var(--naranja-osc)}
.btn.cafe{background:var(--cafe)}
.btn.suave{background:var(--crema-clara);color:var(--cafe);border:2px solid var(--naranja)}

/* ---------- Secciones y tarjetas ---------- */
section.bloque{padding:38px 0 8px}
section.bloque h2{font-size:1.9rem;text-align:center;margin-bottom:6px}
section.bloque .intro{max-width:680px;margin:0 auto 26px;text-align:center;color:var(--cafe-suave)}
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--blanco);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.card img.foto{width:100%;height:210px;object-fit:cover}
.card .cuerpo{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:1.22rem}
.chip{
  display:inline-block;align-self:flex-start;background:var(--crema);color:var(--naranja-osc);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1px solid var(--naranja);
}
.chip.lleno{background:var(--naranja);color:#fff;border-color:var(--naranja)}
.card p{color:#6d4a2f;font-size:.97rem}
.card .temas{font-size:.88rem;color:var(--cafe-suave)}
.card .num{
  font-family:Georgia,serif;font-size:2rem;color:var(--naranja);font-weight:bold;line-height:1;
}

/* Portada Gato de la Semana */
.destacada{
  background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);
  overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
}
.destacada img{width:100%;height:100%;object-fit:cover;min-height:300px}
.destacada .cuerpo{padding:30px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.destacada h2{text-align:left;font-size:2rem;margin:0}

/* Fundadores */
.fundador img.foto{height:230px}
.fundador h3{text-align:center}
.fundador p{text-align:center}

/* Videos */
.video-card video{
  width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block;
}
.grid.videos{grid-template-columns:repeat(3,1fr)}

/* Pasos */
.pasos{counter-reset:paso}
.paso{
  background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:22px 22px 18px;position:relative;
}
.paso .n{
  counter-increment:paso;
  width:42px;height:42px;border-radius:50%;background:var(--naranja);color:#fff;
  font-family:Georgia,serif;font-weight:bold;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.aviso{
  background:#FFF3D6;border:2px solid var(--naranja);border-radius:var(--radio);
  padding:18px 22px;max-width:760px;margin:0 auto;
}

/* Cifras */
.cifras{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:10px 0 24px}
.cifra{text-align:center;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:16px 26px;min-width:140px}
.cifra .grande{font-family:Georgia,serif;font-size:2.1rem;font-weight:bold;color:var(--naranja);line-height:1}
.cifra .etiqueta{font-size:.85rem;color:var(--cafe-suave)}

/* ---------- Pie ---------- */
footer.site{
  margin-top:52px;background:var(--cafe);color:var(--crema);
  padding:34px 0 28px;text-align:center;
}
footer.site .name{font-family:Georgia,serif;font-size:1.3rem;color:#fff}
footer.site a{color:var(--naranja);text-decoration:none;font-weight:600}
footer.site .redes{margin:12px 0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer.site small{color:#D9B98F}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid.c3,.grid.videos{grid-template-columns:repeat(2,1fr)}
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .destacada{grid-template-columns:1fr}
  .destacada img{min-height:220px}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid.c2,.grid.c3,.grid.c4,.grid.videos{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .hero img.logo{width:150px;height:150px}
  .brand .tag{display:none}
  nav.main{margin-left:0}
  .card img.foto{height:auto}
}