*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.75;color:#333;background:#f0f2f5}
.section-05e504{max-width:860px;margin:0 auto;padding:0 20px}
.wrapper-67de5a{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.wrapper-67de5a h1{font-size:22px;font-weight:700;margin-bottom:2px}
.wrapper-67de5a p{font-size:14px;color:#666}
.wrapper-67de5a a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.wrapper-cb6626{display:flex;flex-direction:column;gap:20px}
.sidebar-6215cf{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.sidebar-6215cf:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.sidebar-6215cf h2{font-size:19px;margin-bottom:6px}
.sidebar-6215cf h2 a{color:#1a1a1a;text-decoration:none}
.sidebar-6215cf .footer-c90b34{font-size:12px;color:#999;margin-bottom:8px}
.sidebar-6215cf p{font-size:14px;color:#555;margin-bottom:12px}
.main-b13fed{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.main-b13fed:hover{background:#4752c4}
.wrapper-a35f0c{padding-bottom:60px}
.wrapper-a35f0c h1{font-size:30px;font-weight:700;margin-bottom:8px}
.wrapper-a35f0c time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.wrapper-a35f0c h2{font-size:22px;margin:32px 0 12px}
.wrapper-a35f0c h3{font-size:18px;margin:24px 0 8px}
.wrapper-a35f0c p{margin-bottom:16px}
.wrapper-a35f0c ul,.wrapper-a35f0c ol{margin:0 0 16px 24px}
.wrapper-a35f0c a{color:#5865f2}
.wrapper-a35f0c img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.section-7d1c79{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.section-7d1c79 a{color:#999;text-decoration:none}
.section-f59e81{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.inner-9b6309{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.outer-8880d1{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.outer-2491c9{text-align:center;margin:0 0 24px}
.footer-7929e0{max-width:100%;height:auto;border-radius:12px}
.layout-b8d0fc{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.layout-b8d0fc h3{font-size:16px;font-weight:700;margin-bottom:12px}
.crd-related-list{display:flex;flex-direction:column;gap:8px}
.crd-related-link{display:block;background:#fff;border-radius:8px;padding:10px 14px;color:#333;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:14px}
.crd-related-link:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.inner-d7938f{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.shell-714e6b{display:block;background:#fff;border-radius:8px;padding:10px 16px;color:#1a1a1a;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:15px}
.shell-714e6b:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Titillium+Web:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#0F172A;background:#F8FAFC}
.wrapper-67de5a{background:#1E293B;color:#fff}
.wrapper-67de5a h1{font-family:'Titillium Web',serif;color:#fff}
.wrapper-67de5a p{color:rgba(255,255,255,.75)}
.wrapper-67de5a a{color:#fff;text-decoration:none}
.card h2{font-family:'Titillium Web',serif}
.card h2 a{color:#1E293B}
.card h2 a:hover{color:#F59E0B}
.read-more{color:#F59E0B}
.article-content h1{font-family:'Titillium Web',serif}
.article-content h2{font-family:'Titillium Web',serif}
.article-content a{color:#F59E0B}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* v.b63441 — layout revision */
/*
 * rm-mec-es — custom.css  ·  "Manual de Reparaciones"
 * Persona  : Aldo Serrano, Toluca — el vecino mañoso que le agarró el modo.
 * Palette  : denim-petróleo #2C5F6E + cobre #C1652E on cool paper, walnut moment #7A5A3C.
 * Voices   : Fraunces (display serif · wordmark/hero title/article H1/manifesto)
 *            + Barlow Semi Condensed (nameplate meta · kickers/card titles/labels)
 *            + Karla (body).
 * Template : card (Lambda obfuscated → structural selectors only, no class names).
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Fraunces:ital,wght@0,500;0,600;0,700;1,400;1,500;1,600&family=Karla:wght@400;500;600;700&display=swap');

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --color-bg:               #CDD9DD;
  --color-surface:          #E4ECEE;
  --color-surface-alt:      #D8E4E7;
  --color-paper:            #E4ECEE;
  --color-text:             #23303A;
  --color-text-muted:       #566670;
  --color-heading:          #1A252D;
  --color-accent:           #C1652E;
  --color-accent-hover:     #96481F;
  --color-accent-light:     #E8B084;
  --color-accent-secondary: #2C5F6E;
  --color-moment:           #7A5A3C;
  --color-band:             #22333B;
  --color-border:           #BCCBD0;
  --color-link:             #96481F;
  --color-link-hover:       #C1652E;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-heading: 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-body:    'Karla', system-ui, sans-serif;

  --font-size-base:      18px;
  --font-size-sm:        15px;
  --font-size-h1:        2.3rem;
  --font-size-h2:        1.65rem;
  --font-size-h3:        1.25rem;
  --line-height-body:    1.7;
  --line-height-heading: 1.2;

  --border-radius:     8px;
  --spacing-section:   3rem;
  --max-width-content: 68ch;
  --max-width-layout:  880px;
}

/* ─── Base ──────────────────────────────────────────────────── */
:root body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Headings ──────────────────────────────────────────────── */
:root h1,
:root h2,
:root h3,
:root h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  line-height: var(--line-height-heading);
  letter-spacing: 0.005em;
  margin-top: 0;
  margin-bottom: 0.6em;
}
:root h1 { font-size: var(--font-size-h1); }
:root h2 { font-size: var(--font-size-h2); }
:root h3 { font-size: var(--font-size-h3); }
:root h4 { font-size: 1.1rem; }

/* ─── Paragraphs / lists ────────────────────────────────────── */
:root p  { margin-block: 0 1em; }
:root ul,
:root ol { padding-inline-start: 1.5rem; margin-block: 0 1rem; }
:root li { margin-block: 0.35rem; line-height: var(--line-height-body); }
:root ul li::marker { color: var(--color-accent-secondary); }

/* ─── Links ─────────────────────────────────────────────────── */
:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-light);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
:root a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   MASTHEAD  —  photo + denim overlay + Fraunces wordmark + monogram
   ═══════════════════════════════════════════════════════════════ */
:root body > header {
  position: relative;
  background-color: #1E293B;
  background-image:
    linear-gradient(180deg, rgba(18,26,34,.74), rgba(28,44,54,.86)),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 3px solid var(--color-accent);
  box-shadow: none;
  padding-block: 3.3rem;
  margin-bottom: 2.6rem;
}

:root body > header > div {
  max-width: 720px;
  text-align: center;
}

/* Signature monogram — hex nut + copper bolt (mecánica + corriente) */
:root body > header > div::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M22 2.6 38.5 12 38.5 32 22 41.4 5.5 32 5.5 12 Z' fill='none' stroke='%23F0E9DA' stroke-width='2'/%3E%3Cpath d='M24.5 12.5 14.5 24.5 21 24.5 19.8 31.5 29.5 19.5 22.7 19.5 Z' fill='%23C1652E' stroke='%23C1652E' stroke-width='.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root body > header h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: #F5EFE3;
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.004em;
  margin: 0 0 0.5rem;
}

:root body > header p {
  color: rgba(240,238,230,.80);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: 0 auto;
}

/* Manifesto — italic voice + walnut moment rule (moment use 1 of 2) */
:root body > header > div::after {
  content: "\00AB No soy t\00E9cnico titulado \2014 soy el vecino que le agarr\00F3 el modo. \00BB";
  display: block;
  max-width: 44ch;
  margin: 1.35rem auto 0;
  padding: 0.15rem 0 0.15rem 0.95rem;
  border-left: 3px solid var(--color-moment);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.03rem;
  line-height: 1.45;
  color: #EBC9A4;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE GRID  —  hero → picks → EL CUADERNO band → journal
   HM = homepage main (no <article>).  GRID = first div child.
   ═══════════════════════════════════════════════════════════════ */
:root body main:not(:has(> article)) > div:first-of-type {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1.6rem;
  row-gap: 1.8rem;
  align-items: start;
  max-width: var(--max-width-layout);
  margin-inline: auto;
}

/* Shared card shell (beats template .sidebar-6215cf{background:#fff}) */
:root body main:not(:has(> article)) > div:first-of-type > div {
  position: relative;
  grid-column: span 3;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  box-shadow: 0 1px 5px rgba(26,37,45,.05);
  padding: 1.55rem 2rem 1.65rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
:root body main:not(:has(> article)) > div:first-of-type > div:hover {
  box-shadow: 0 6px 22px rgba(26,37,45,.11);
  transform: translateY(-2px);
}

/* Card date → copper tracked kicker */
:root body main:not(:has(> article)) > div:first-of-type > div > p:first-of-type {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
/* Card title (Barlow nameplate) */
:root body main:not(:has(> article)) > div:first-of-type > div > h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.16;
  margin-bottom: 0.5rem;
}
:root body main:not(:has(> article)) > div:first-of-type > div > h2 > a {
  color: var(--color-heading);
  text-decoration: none;
}
:root body main:not(:has(> article)) > div:first-of-type > div > h2 > a:hover {
  color: var(--color-accent);
}
/* Card excerpt */
:root body main:not(:has(> article)) > div:first-of-type > div > p:last-of-type {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: 64ch;
  margin-bottom: 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Card CTA — replace blurple + English "Read Article" with copper pill */
:root body main:not(:has(> article)) > div:first-of-type > div > a {
  display: inline-block;
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.5rem 1.1rem;
  font-size: 0;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
:root body main:not(:has(> article)) > div:first-of-type > div > a::before {
  content: "LEER LA GU\00CDA \2192";
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
}
:root body main:not(:has(> article)) > div:first-of-type > div > a:hover {
  background: var(--color-accent);
  color: #F5EFE3;
}

/* ─── HERO (child 1) — the one loud voice ───────────────────── */
:root body main:not(:has(> article)) > div:first-of-type > div:first-child {
  grid-column: 1 / -1;
  overflow: hidden;
  border-top: 4px solid var(--color-accent);
  padding: 2.6rem 2.8rem 2.8rem;
}
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > * {
  position: relative;
  z-index: 1;
}
/* Big roman-numeral watermark */
:root body main:not(:has(> article)) > div:first-of-type > div:first-child::after {
  content: "N.\00BA 01";
  position: absolute;
  top: 0.6rem;
  right: 1.7rem;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: 1;
  color: rgba(193,101,46,0.11);
  pointer-events: none;
}
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-of-type {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-of-type::before {
  content: "\00DALTIMO EN EL TALLER \00B7 POR ALDO \00B7 6 MIN \00B7 ";
  color: var(--color-accent-secondary);
}
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 22ch;
  margin-bottom: 0.85rem;
}
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > p:last-of-type {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 56ch;
  -webkit-line-clamp: 4;
}
/* Drop cap — walnut moment (moment use 2 of 2) */
:root body main:not(:has(> article)) > div:first-of-type > div:first-child > p:last-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 0.8;
  float: left;
  margin: 0.32rem 0.55rem 0 0;
  color: var(--color-moment);
}

/* ─── EDITOR'S PICKS (children 2–4) — paired band ───────────── */
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
  grid-column: span 2;
  margin-top: 4.6rem;
  border-top: 3px solid var(--color-accent);
}
/* Full-row section label above the picks row */
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
  content: "SELECCI\00D3N DE ALDO \2014 EMPIEZA POR AQU\00CD";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1rem);
  width: calc(300% + 3.2rem);
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--color-accent-secondary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--color-accent-secondary);
}

/* ─── STRIP 1 · EL CUADERNO  (child 5) — denim section band ──── */
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(5) {
  grid-column: 1 / -1;
  margin-top: 5rem;
  margin-bottom: 1.4rem;
  border: none;
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(150deg, rgba(24,38,45,.86) 0%, rgba(28,58,68,.80) 55%, rgba(20,34,40,.92) 100%),
    url("/theme-assets/article-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 8px 26px rgba(26,37,45,.18);
  padding: 2rem 1.5rem;
}
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(5)::before {
  content: "EL CUADERNO";
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-align: center;
  color: #F0E9DA;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* M6 — section-break label only: hide the feature-card content (kicker/title/
   excerpt/CTA) so this photo band reads as a CENTERED section break, not a
   left-aligned feature card. Only the centered ::before label remains. */
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(5) > * {
  display: none;
}

/* ─── JOURNAL (children 6+) — quiet chronological grid ──────── */
:root body main:not(:has(> article)) > div:first-of-type > div:nth-child(n+6) {
  grid-column: span 3;
}

/* ═══════════════════════════════════════════════════════════════
   STRIP 2 · LEER MÁS  +  COMPACT ARCHIVE TAIL  (last div child)
   ═══════════════════════════════════════════════════════════════ */
:root body main:not(:has(> article)) > div:last-of-type {
  max-width: var(--max-width-layout);
  margin: 4.6rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  align-items: stretch;
}
/* Strip 2 (M6 pos 2) — hero-photo band spanning the full magazine index */
:root body main:not(:has(> article)) > div:last-of-type::before {
  content: "LEER M\00C1S";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(20,34,40,.82) 0%, rgba(28,58,68,.72) 55%, rgba(20,34,40,.88) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 26px rgba(26,37,45,.18);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #F0E9DA;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* M7 — boxed cream cards, same design system as the top journal cards */
:root body main:not(:has(> article)) > div:last-of-type > a {
  display: block;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(26,37,45,.05);
  padding: 1.15rem 1.25rem 1.15rem 1.55rem;
  position: relative;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-heading);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
:root body main:not(:has(> article)) > div:last-of-type > a::before {
  content: "\203A";
  position: absolute;
  left: 0.7rem;
  top: 1.12rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent);
}
:root body main:not(:has(> article)) > div:last-of-type > a:hover {
  color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(26,37,45,.11);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGE  —  AR = main with <article>.  Editorial reading.
   ═══════════════════════════════════════════════════════════════ */
:root body main:has(> article) {
  max-width: var(--max-width-layout);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
:root body main:has(> article) > h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 24ch;
  margin-bottom: 0.5rem;
}
:root body main:has(> article) > h1::before {
  content: "GU\00CDA DE REPARACI\00D3N \00B7 PASO A PASO";
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}
:root body main:has(> article) > time {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.8rem;
}
/* S6 — persona/byline anchor prepended to the date meta line */
:root body main:has(> article) > time::before {
  content: "POR ALDO SERRANO \00B7 TOLUCA \00B7 ";
  color: var(--color-accent-secondary);
}
:root body main:has(> article) > article > p {
  font-size: 1.06rem;
  line-height: 1.78;
  max-width: var(--max-width-content);
}
/* Article drop cap — copper (keeps walnut moment exclusive to home/masthead) */
:root body main:has(> article) > article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.3rem;
  line-height: 0.78;
  float: left;
  margin: 0.3rem 0.5rem 0 0;
  color: var(--color-accent);
}
:root body main:has(> article) > article > h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-heading);
  margin-top: 2rem;
}
/* Dinkus divider between sections */
:root body main:has(> article) > article > h2:not(:first-of-type)::before {
  content: "\2726 \2726 \2726";
  display: block;
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  color: var(--color-accent);
  margin: 2.2rem 0 1.4rem;
}

/* ─── Blockquote — avisos de cuidado (hanging quote, denim) ──── */
:root blockquote {
  position: relative;
  max-width: var(--max-width-content);
  margin: 1.9rem 0;
  padding: 1.1rem 1.5rem 1.1rem 1.7rem;
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-surface-alt);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  color: var(--color-text);
  font-style: italic;
  font-size: 1.05rem;
}
:root body main:has(> article) > article > blockquote::before {
  content: "\201D";
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 0.4;
  color: var(--color-accent-secondary);
  margin-bottom: 0.4rem;
}
:root blockquote p { margin-bottom: 0; }
:root blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
:root body main:has(> article) article img {
  border-radius: var(--border-radius);
  max-width: 100%;
  height: auto;
}

/* ─── Tables (comparativas dentro del artículo) ─────────────── */
:root table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; }
:root th,
:root td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); }
:root thead th { background-color: var(--color-surface-alt); font-family: var(--font-heading); }

/* ─── Footer ────────────────────────────────────────────────── */
:root body > footer {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
:root body > footer a { color: var(--color-accent-secondary); }
:root body > footer a:hover { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  —  collapse grid, un-span labels, single-col index
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root body main:not(:has(> article)) > div:first-of-type {
    grid-template-columns: 1fr;
    row-gap: 1.3rem;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div {
    grid-column: 1 / -1;
    padding: 1.4rem 1.5rem;
  }
  /* Force single column: nth-child(n) matches the (0,3,5) specificity of the
     desktop span rules (:nth-child(2)/(n+6)) so the reset actually wins here.
     Plain `> div` is (0,2,5) and loses to them even inside this media query. */
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(n) {
    grid-column: 1 / -1;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div:first-child {
    padding: 1.9rem 1.6rem 2rem;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
    margin-top: 3.4rem;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
    margin-top: 1.3rem;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
    width: 100%;
    white-space: normal;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
  }
  :root body main:not(:has(> article)) > div:first-of-type > div:nth-child(5) {
    margin-top: 3.6rem;
    padding: 1.9rem 1.6rem 2rem;
  }
  :root body main:not(:has(> article)) > div:last-of-type {
    grid-template-columns: 1fr;
    margin-top: 3.4rem;
  }
}


/* related-articles-nav-fix v1 (nav/section — no-op on this card template) */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}

/* related-articles-boxed-fix v2 — this template renders the block as
   main > div (the article page's only direct <div>) > div > a.  M1: the base
   theme paints each related link background:#fff → override to paper.  M7b:
   give the block top separation + boxed cards so titles breathe. */
:root body main:has(> article) > div {
  margin-top: 3.4rem;
  padding-top: 1.8rem;
  border-top: 2px solid var(--color-accent-secondary);
}
:root body main:has(> article) > div > h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: 1.1rem;
}
:root body main:has(> article) > div > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:root body main:has(> article) > div > div > a {
  display: block;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(26,37,45,.05);
  padding: 1rem 1.3rem;
  line-height: 1.5;
  color: var(--color-heading);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
:root body main:has(> article) > div > div > a:hover {
  color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(26,37,45,.11);
  transform: translateY(-2px);
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cup-of-Jo-personal overlay=40% grid=equal scale=balanced family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 40%) ── */
:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}