/* ═══════════════════════════════════════════════════════════════════════════
   Diseño de artículo — estructura y medidas tomadas de skraafoto.com,
   adaptadas a la paleta y tipografía de Santal33.mx.
   CSS plano: el main.css es un build de Tailwind sin pipeline que regenerar.
   ═══════════════════════════════════════════════════════════════════════════ */

.s33-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.s33-header { max-width: 780px; margin: 0 auto; padding: 32px 0 0; }
.s33-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: Manrope, system-ui, sans-serif; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .1em; color: #babab0; margin-bottom: 24px; }
.s33-crumbs a { color: #babab0; text-decoration: none; }
.s33-crumbs a:hover { color: #5f5e5e; }
.s33-header h1 { font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.2; font-weight: 700;
  letter-spacing: -.02em; color: #5f5e5e; margin: 0 0 16px; }
.s33-excerpt { font-family: Manrope, system-ui, sans-serif; font-size: 1.125rem;
  line-height: 1.7; color: #716155; margin: 0 0 24px; }
.s33-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: Manrope, system-ui, sans-serif; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .1em; color: #babab0;
  padding-bottom: 24px; border-bottom: 1px solid rgba(186,186,176,.3); }
.s33-tag { background: #f6f4ec; color: #716155; padding: 4px 10px; }

/* ── Imagen destacada: contenida, 16/9, nunca full-bleed ──────────────────── */
.s33-featured { max-width: 960px; margin: 32px auto 0; overflow: hidden;
  aspect-ratio: 16 / 9; background: #f6f4ec; }
.s33-featured img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s33-caption { max-width: 780px; margin: 8px auto 0;
  font-family: Manrope, system-ui, sans-serif; font-size: .6875rem;
  color: #babab0; text-align: right; }

/* ── Layout a dos columnas ────────────────────────────────────────────────── */
.s33-layout { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.s33-layout > .s33-body { min-width: 0; }

/* ── Cuerpo del artículo ──────────────────────────────────────────────────── */
.s33-body { max-width: 780px; margin: 0 auto; padding: 48px 0 64px;
  font-family: Manrope, system-ui, sans-serif; }
.s33-body h2 { font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -.02em;
  color: #5f5e5e; margin: 48px 0 16px; padding-top: 24px;
  border-top: 1px solid rgba(186,186,176,.3); }
.s33-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.s33-body h3 { font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 700;
  color: #5f5e5e; margin: 32px 0 12px; }
.s33-body p { font-size: 1.0625rem; line-height: 1.8; color: #716155; margin: 0 0 20px; }
.s33-body ul, .s33-body ol { margin: 0 0 24px 24px; color: #716155;
  font-size: 1.0625rem; line-height: 1.8; }
.s33-body li { margin-bottom: 8px; }
.s33-body strong { color: #5f5e5e; font-weight: 600; }
.s33-body a { color: #5f5e5e; text-decoration: none;
  border-bottom: 1px solid rgba(95,94,94,.3); transition: border-color .2s; }
.s33-body a:hover { border-bottom-color: #5f5e5e; }
.s33-body img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
.s33-body figure { margin: 32px 0; }
.s33-body figcaption { font-size: .6875rem; color: #babab0; text-align: right;
  margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }
.s33-body blockquote { border-left: 3px solid rgba(186,186,176,.5);
  padding-left: 20px; margin: 32px 0; font-family: "Noto Serif", Georgia, serif;
  font-style: italic; color: #716155; }

/* ── Tablas ───────────────────────────────────────────────────────────────── */
.s33-body table { width: 100%; border-collapse: collapse; margin: 24px 0 32px;
  font-size: .9375rem; }
.s33-body th, .s33-body td { padding: 12px 16px; text-align: left;
  border-bottom: 1px solid rgba(186,186,176,.3); }
.s33-body th { font-family: Manrope, system-ui, sans-serif; font-size: .75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #716155; background: #f6f4ec; }
.s33-body td { color: #716155; }
.s33-body tr:last-child td { border-bottom: none; }

/* ── Caja destacada ───────────────────────────────────────────────────────── */
.s33-info { background: #f6f4ec; border: 1px solid rgba(186,186,176,.3);
  border-left: 4px solid #5f5e5e; padding: 20px 24px; margin: 32px 0; }
.s33-info h4 { font-family: Manrope, system-ui, sans-serif; font-size: .8125rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #5f5e5e; margin: 0 0 8px; }
.s33-info p { margin-bottom: 0; font-size: .9375rem; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.s33-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column;
  gap: 40px; padding-top: 48px; }
.s33-side-title { font-family: Manrope, system-ui, sans-serif; font-size: .8125rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #716155;
  margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(186,186,176,.3); }
.s33-side-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid rgba(186,186,176,.2); text-decoration: none; }
.s33-side-item:last-child { border-bottom: none; }
.s33-side-thumb { width: 72px; height: 54px; object-fit: cover; flex: none; background: #f6f4ec; }
.s33-side-num { font-family: Manrope, system-ui, sans-serif; font-size: 1.125rem;
  font-weight: 700; color: #babab0; flex: none; width: 22px; line-height: 1.3; }
.s33-side-text { font-family: Manrope, system-ui, sans-serif; font-size: .8125rem;
  line-height: 1.45; color: #716155; }
.s33-side-item:hover .s33-side-text { color: #5f5e5e; }

/* ── Compartir ────────────────────────────────────────────────────────────── */
.s33-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(186,186,176,.3);
  font-family: Manrope, system-ui, sans-serif; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .1em; color: #babab0; }
.s33-share a { color: #716155; text-decoration: none;
  border: 1px solid rgba(186,186,176,.4); padding: 6px 14px; transition: all .2s; }
.s33-share a:hover { border-color: #5f5e5e; color: #5f5e5e; }

/* ── Relacionados ─────────────────────────────────────────────────────────── */
.s33-related { border-top: 1px solid rgba(186,186,176,.3); background: #f6f4ec; padding: 64px 0; }
.s33-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.s33-card { text-decoration: none; display: block; }
.s33-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  margin-bottom: 12px; background: #fffcf7; }
.s33-card h3 { font-family: "Noto Serif", Georgia, serif; font-size: 1.0625rem;
  line-height: 1.35; font-weight: 700; color: #5f5e5e; margin: 0 0 6px; }
.s33-card time { font-family: Manrope, system-ui, sans-serif; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .1em; color: #babab0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .s33-layout { grid-template-columns: 1fr 280px; gap: 32px; }
  .s33-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .s33-layout { grid-template-columns: 1fr; gap: 0; }
  .s33-sidebar { position: static; padding-top: 32px; margin-top: 32px;
    border-top: 2px solid rgba(186,186,176,.3); }
  .s33-body { padding: 32px 0 48px; }
  .s33-header h1 { font-size: 1.5rem; }
  .s33-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .s33-body th, .s33-body td { padding: 10px 12px; font-size: .875rem; }
  .s33-related-grid { grid-template-columns: 1fr; }
}