/* Blog de Pantsell. Mismos colores y letras que el sitio (pantsell/public/styles.css). */
:root {
  --noir: #12030a;
  --wine: #2b0611;
  --red: #c1121f;
  --red-deep: #8f0a1a;
  --rose: #ff6b7f;
  --gold: #d8b46a;
  --gold-light: #f6e3ab;
  --white: #ffffff;
  --soft: rgba(255, 255, 255, 0.74);
  --veil: rgba(255, 255, 255, 0.06);
  --veil-line: rgba(255, 255, 255, 0.14);
  --radius: 16px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='white' stroke-width='0.9'%3E%3Ccircle cx='28' cy='28' r='10'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3Cpath d='M0 28h18M38 28h18M28 0v18M28 38v18'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='56' cy='0' r='8'/%3E%3Ccircle cx='0' cy='56' r='8'/%3E%3Ccircle cx='56' cy='56' r='8'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--white);
  font: 17px/1.7 var(--sans);
  background:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(193, 18, 31, 0.45), transparent 70%),
    radial-gradient(circle at 105% 85%, rgba(143, 10, 26, 0.35), transparent 45%),
    var(--noir);
  background-attachment: fixed;
  min-height: 100vh;
}

a { color: var(--rose); }
a:hover { color: var(--gold-light); }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 32px); margin-inline: auto; }

/* Encabezado */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--veil-line);
}
.brand { font: 700 26px/1 var(--serif); color: var(--white); text-decoration: none; letter-spacing: 0.5px; }
.brand span { color: var(--gold); font-style: italic; font-weight: 600; font-size: 0.7em; margin-left: 6px; }
.top nav { display: flex; gap: 18px; font-size: 15px; }
.top nav a { color: var(--soft); text-decoration: none; }
.top nav a:hover { color: var(--white); }
.age { font-size: 12px; border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 2px 10px; }

/* Portada del blog */
.hero { padding: 64px 0 40px; text-align: center; }
.hero h1 { font: 700 clamp(36px, 6vw, 60px)/1.1 var(--serif); margin: 0 0 14px; }
.hero h1 em { color: var(--gold); font-weight: 600; }
.hero p { color: var(--soft); max-width: 600px; margin: 0 auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding-bottom: 64px; }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--veil); border: 1px solid var(--veil-line); border-radius: var(--radius); overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold); color: inherit; }
.card .body { padding: 20px 22px 24px; }
.card h2 { font: 700 22px/1.25 var(--serif); margin: 8px 0; }
.card p { color: var(--soft); font-size: 15px; margin: 0; }

.tag { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); }

/* Portada de cada artículo, dibujada con CSS: encaje sobre vino. */
.cover {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 24px;
  background:
    var(--lace) center / 56px repeat,
    radial-gradient(circle at 30% 20%, rgba(193, 18, 31, 0.7), transparent 60%),
    linear-gradient(135deg, var(--wine), var(--noir));
  background-blend-mode: soft-light, normal, normal;
}
.cover::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(216, 180, 106, 0.45); border-radius: 10px; pointer-events: none; }
.cover b { font: italic 600 clamp(22px, 4vw, 34px)/1.15 var(--serif); color: var(--gold-light); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.cover.rose { background-color: var(--red-deep); }

/* Artículo */
.post-head { padding: 48px 0 24px; }
.post-head h1 { font: 700 clamp(32px, 5vw, 48px)/1.15 var(--serif); margin: 10px 0 14px; }
.meta { color: var(--soft); font-size: 14px; }
.post .cover { border-radius: var(--radius); margin: 8px 0 32px; }
.post h2 { font: 700 28px/1.25 var(--serif); margin: 44px 0 12px; color: var(--white); }
.post h3 { font: 600 20px/1.3 var(--sans); margin: 28px 0 8px; color: var(--gold-light); }
.post p, .post li { color: rgba(255, 255, 255, 0.86); }
.post ul, .post ol { padding-left: 22px; }
.post li { margin: 6px 0; }
.post strong { color: var(--white); }
.lead { font-size: 20px; color: var(--white) !important; }

.box {
  background: var(--veil); border: 1px solid var(--veil-line); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 18px 22px; margin: 28px 0;
}
.box p { margin: 0; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--veil-line); vertical-align: top; }
th { color: var(--gold); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.steps { counter-reset: step; list-style: none; padding: 0 !important; }
.steps li { counter-increment: step; position: relative; padding-left: 52px; margin: 18px 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 700 16px var(--serif); color: var(--noir); background: var(--gold);
}

.cta {
  text-align: center; margin: 48px 0; padding: 36px 24px; border-radius: var(--radius);
  background: radial-gradient(circle at 50% 0, rgba(193, 18, 31, 0.55), transparent 70%), var(--wine);
  border: 1px solid rgba(216, 180, 106, 0.4);
}
.cta h2 { margin-top: 0; }
.button {
  display: inline-block; margin-top: 10px; padding: 14px 28px; border-radius: 999px; text-decoration: none;
  font-weight: 600; color: var(--white); background: linear-gradient(135deg, var(--red), var(--red-deep));
  box-shadow: 0 10px 30px rgba(211, 22, 43, 0.45);
}
.button:hover { color: var(--white); filter: brightness(1.1); }

details { border-bottom: 1px solid var(--veil-line); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--white); }
details p { margin: 10px 0 0; }

.foot { border-top: 1px solid var(--veil-line); padding: 28px 0 40px; color: var(--soft); font-size: 14px; text-align: center; }
.foot a { color: var(--soft); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .top nav { display: none; }
  .hero { padding: 40px 0 28px; }
}