/* ========================================
   ARTÍCULOS DE BLOG — estilos específicos
   ======================================== */

/* HERO ARTÍCULO */
.articulo-hero {
  position:relative; height:560px; overflow:hidden;
  margin:0 16px 0; border-radius:0 0 18px 18px;
}
.articulo-hero-img { width:100%; height:100%; overflow:hidden; }
.articulo-hero-img img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.articulo-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(26,30,46,0.85) 0%,rgba(26,30,46,0.1) 60%);
}
.articulo-hero-content {
  position:absolute; bottom:50px; left:0; right:0;
  max-width:760px; margin:0 auto; padding:0 40px;
}
.articulo-tag {
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:#c4a4a4; margin-bottom:14px; display:block;
}
.articulo-hero-content h1 {
  font-family:'Gabarito', sans-serif; font-size:40px; font-weight:800;
  color:#fff; line-height:1.2; margin-bottom:14px;
}
.articulo-meta { font-size:12px; color:rgba(255,255,255,0.45); letter-spacing:.5px; }

/* CONTENIDO */
.articulo-wrap { max-width:760px; margin:0 auto; padding:60px 40px 80px; }
.articulo-intro {
  font-size:16px; font-weight:400; line-height:1.8; color:#3a3a3a;
  margin-bottom:36px; border-left:3px solid #c4a4a4; padding-left:20px;
}
.articulo-body h2 {
  font-family:'Gabarito', sans-serif; font-size:28px; font-weight:800;
  color:#1a1e2e; margin:40px 0 16px;
}
.articulo-body p { font-size:14px; font-weight:300; line-height:1.9; color:#444; margin-bottom:18px; }
.articulo-body strong { color:#1a1e2e; font-weight:600; }

/* PERFIL CARD */
.perfil-card { background:#1a1e2e; border-radius:14px; padding:32px; margin:32px 0; }
.perfil-card h3 {
  font-family:'Gabarito', sans-serif; font-size:18px; font-weight:800;
  color:#c4a4a4; margin-bottom:20px;
}
.perfil-item { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.perfil-label {
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.4); flex-shrink:0; width:80px; padding-top:2px;
}
.perfil-val { font-size:13px; font-weight:300; color:rgba(255,255,255,0.8); line-height:1.6; }

/* PALETA */
.paleta-wrap { background:#e8e5dc; border-radius:14px; padding:28px; margin:32px 0; text-align:center; }
.paleta-wrap img { width:100%; border-radius:8px; }

/* GRIDS DE FOTOS */
.fotos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
.fotos-grid img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; }

.fotos-grid-3 { display:flex; justify-content:center; gap:8px; margin:16px 0; }
.fotos-grid-3 img { width:calc(25% - 6px); aspect-ratio:3/4; object-fit:cover; border-radius:8px; }

.fotos-grid-2 { display:flex; justify-content:center; gap:8px; margin:16px 0; }
.fotos-grid-2 img { width:calc(25% - 6px); aspect-ratio:3/4; object-fit:cover; border-radius:8px; }

.fotos-grid-1 { display:flex; justify-content:center; gap:8px; margin:16px 0; }
.fotos-grid-1 img { width:calc(25% - 6px); aspect-ratio:3/4; object-fit:cover; border-radius:8px; }

/* CTA */
.cta-articulo {
  background:#1a1e2e; border-radius:14px;
  padding:36px; margin:40px 0; text-align:center;
}
.cta-articulo p { font-size:15px; font-weight:400; color:#fff; line-height:1.7; margin-bottom:20px; }
.cta-articulo strong { color:#c4a4a4; }
.btn-cta {
  display:inline-block; padding:14px 32px;
  background:#c4a4a4; color:#fff;
  font-family:'Rubik', sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; border-radius:4px; transition:background .3s; margin:6px;
}
.btn-cta:hover { background:#b09090; }
.btn-cta.outline { background:transparent; border:1px solid rgba(255,255,255,0.4); color:#fff; }
.btn-cta.outline:hover { background:rgba(255,255,255,0.1); }

/* AUTOR */
.autor-card {
  display:flex; align-items:center; gap:20px;
  border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;
  padding:28px 0; margin:48px 0;
}
.autor-avatar {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg,#c4a4a4,#a08080);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; font-weight:700; overflow:hidden;
}
.autor-avatar img { width:100%; height:100%; object-fit:cover; }
.autor-info span { display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#aaa; margin-bottom:4px; }
.autor-info strong { font-size:15px; font-weight:500; color:#1a1e2e; }

/* RELACIONADOS */
.relacionados { background:#1a1e2e; padding:70px 60px; }
.relacionados h2 {
  font-family:'Gabarito', sans-serif; font-size:13px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:#fff;
  margin-bottom:36px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.rel-card { text-decoration:none; display:block; transition:transform .3s; }
.rel-card:hover { transform:translateY(-4px); }
.rel-card-img { height:200px; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.rel-card-img img { width:100%; height:100%; object-fit:cover; }
.rel-tag { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#c4a4a4; margin-bottom:8px; display:block; }
.rel-title { font-family:'Gabarito', sans-serif; font-size:16px; font-weight:700; color:#fff; line-height:1.3; }

/* RESPONSIVE */
@media(max-width:900px) {
  .articulo-hero { margin:0 8px; height:380px; }
  .articulo-hero-content h1 { font-size:28px; }
  .articulo-wrap { padding:40px 24px 60px; }
  .fotos-grid { grid-template-columns:repeat(2,1fr); }
  .fotos-grid-3 img,
  .fotos-grid-2 img,
  .fotos-grid-1 img { width:calc(50% - 4px); }
  .rel-grid { grid-template-columns:1fr; }
  .relacionados { padding:50px 24px; }
}