*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.sc-mvAfvf{max-width:640px;margin:0 auto;padding:0 20px}
.sc-JPqfpw{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.sc-JPqfpw h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-JPqfpw p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.sc-JPqfpw a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-acUngv{padding:20px 0}
.sc-acUngv h2{font-size:18px;font-weight:400;margin-bottom:4px}
.sc-acUngv h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-acUngv h2 a:hover{border-bottom-color:#2a2a2a}
.sc-acUngv .sc-Lccofl{font-size:12px;color:#aaa;margin-bottom:6px}
.sc-acUngv p{font-size:14px;color:#666}
.sc-UOAtTH{color:#888;font-size:13px;text-decoration:none}
.sc-UOAtTH:hover{color:#2a2a2a}
.sc-Nmlgdn{padding-bottom:60px}
.sc-Nmlgdn h1{font-size:28px;font-weight:400;margin-bottom:8px}
.sc-Nmlgdn .sc-Lccofl{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.sc-Nmlgdn h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.sc-Nmlgdn h3{font-size:17px;margin:28px 0 8px}
.sc-Nmlgdn p{margin-bottom:18px;font-size:16px}
.sc-Nmlgdn ul,.sc-Nmlgdn ol{margin:0 0 18px 20px}
.sc-Nmlgdn a{color:#555;border-bottom:1px solid #ccc}
.sc-Nmlgdn a:hover{color:#000;border-bottom-color:#000}
.sc-Nmlgdn img{max-width:100%;height:auto;margin:24px 0}
.sc-KXjCmC{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.sc-KXjCmC a{color:#aaa;text-decoration:none}
.sc-sLwRas{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.sc-grXTUw{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.sc-hmjKHh{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.sc-EXMQIN{margin:0 auto 32px;max-width:720px}
.sc-kQsjcT{width:100%;height:auto}
.sc-RyOFRk{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.sc-RyOFRk em{color:#aaa}
.sc-RyOFRk a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.sc-cvzSFs{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.sc-cvzSFs p{padding:3px 0;margin:0;font-size:15px}
.sc-cvzSFs a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-cvzSFs a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#26456F;--accent:#A88A50;--bg:#F2E8CC;--fg:#0F1820;--border:#C0B098;--moment:#3D5A47;--paper:#faf5ec;--paper2:#efe8d8;--r:9px;--fh:'Fraunces';--fb:'Newsreader';--fm:'Asap'}
/* === Custom === */
/* v.344dff — layout revision */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600;1,9..144,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Asap:wght@400;500;600;700&display=swap');

/* ============================================================
   Taller Fiesta — editorial signature pass
   Display: Fraunces (serif, italic wordmark/hero) · Body: Newsreader
   Meta: Asap tracked-caps · Moment: #3D5A47 (2 places only)
   ============================================================ */

:root body { font-family: var(--fb), Georgia, serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 17px; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fffdf5; }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* ---------- MASTHEAD ------------------------------------- */
:root > body > header {
  position: relative;
  background: linear-gradient(rgba(18,30,48,.72), rgba(18,30,48,.60)), url("/theme-assets/site-hero.jpg") center 42%/cover no-repeat, var(--primary);
  color: var(--bg);
  padding: 66px 24px 40px;
  margin-bottom: 0;
  border-bottom: 4px solid var(--accent);
  text-align: center;
}
:root > body > header > h1,
:root > body > header > a {
  display: block; max-width: 900px; margin: 0 auto;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 46px; line-height: 1.06; color: #fdf7e8; text-decoration: none;
  letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
:root > body > header > a { font-size: 30px; }
:root > body > header > p {
  max-width: 620px; margin: 16px auto 0; padding: 10px 0 0;
  font-family: var(--fb), Georgia, serif; font-style: italic; font-size: 16.5px;
  line-height: 1.6; color: rgba(253,247,232,.92);
  border-top: 2px solid var(--moment); display: inline-block;
}

/* ============================================================
   HOMEPAGE — 6-col editorial grid   (main:not(:has(> article)))
   card = > div:has(> h2 > a)   [p date / h2>a / p excerpt / a cta]
   ============================================================ */
:root main:not(:has(> article)) {
  max-width: 1140px; margin: 0 auto; padding: 0 32px 104px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 30px;
}

/* shared card treatment */
:root main:not(:has(> article)) > div:has(> h2 > a) {
  grid-column: span 3; order: 5;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid rgba(38,69,111,.14);
  border-radius: var(--r); box-shadow: 0 1px 4px rgba(0,0,0,.045);
  padding: 26px 32px 30px; margin: 0;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > p:first-of-type {
  order: 0; font-family: var(--fm), system-ui, sans-serif; font-size: 11.5px;
  color: var(--accent); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; line-height: 1.4; margin: 0 0 12px;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > h2 {
  order: 1; font-family: var(--fh), Cambria, serif; font-weight: 600;
  font-size: 21px; line-height: 1.24; margin: 0 0 12px; padding: 0; border: 0;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:has(> h2 > a):hover > h2 a { color: var(--accent); }
:root main:not(:has(> article)) > div:has(> h2 > a) > p:last-of-type {
  order: 2; font-family: var(--fb), Georgia, serif; font-size: 15.5px;
  line-height: 1.6; color: var(--fg); opacity: .86; margin: 0 0 18px; max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > a:last-child {
  order: 3; margin-top: auto; align-self: flex-start;
  font-family: var(--fm), system-ui, sans-serif; font-size: 0;
  color: var(--primary); text-decoration: none; letter-spacing: .04em; font-weight: 700;
  border-bottom: 1.5px solid var(--accent); padding-bottom: 2px;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > a:last-child::after {
  content: "Leer el taller  →"; font-size: 12.5px; letter-spacing: .08em;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > a:last-child:hover { color: var(--accent); }

/* --- HERO (first card) --- */
:root main:not(:has(> article)) > div:nth-of-type(1):has(> h2 > a) {
  grid-column: 1 / -1; order: 1;
  padding: 46px 52px 48px; gap: 4px;
  border: 1px solid rgba(38,69,111,.18); border-top: 5px solid var(--accent);
  background: linear-gradient(180deg, #fdf9ef 0%, var(--paper) 100%);
}
:root main:not(:has(> article)) > div:nth-of-type(1) > p:first-of-type { font-size: 12px; letter-spacing: .24em; margin-bottom: 16px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:first-of-type::before { content: "Último taller · "; color: var(--primary); }
:root main:not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 45px; font-style: italic; font-weight: 600; line-height: 1.08; max-width: 20ch; margin-bottom: 18px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > p:last-of-type {
  font-size: 20px; line-height: 1.5; opacity: .9; max-width: 60ch; -webkit-line-clamp: 4; margin-bottom: 22px;
}
:root main:not(:has(> article)) > div:nth-of-type(1) > p:last-of-type::first-letter {
  float: left; font-family: var(--fh), serif; font-style: normal; font-weight: 700;
  font-size: 66px; line-height: .82; padding: 6px 12px 0 0; color: var(--moment);
}
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child {
  border: 1.5px solid var(--primary); border-radius: 40px; padding: 9px 22px; font-size: 0;
}
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child::after { content: "Leer el taller completo  →"; font-size: 13px; }
:root main:not(:has(> article)) > div:nth-of-type(1) > a:last-child:hover { background: var(--primary); color: #fdf7e8; }
:root main:not(:has(> article)) > div:nth-of-type(1)::after {
  content: "Por Marta Garrido · diseñadora gráfica en Valencia";
  order: 4; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(38,69,111,.16);
  font-family: var(--fm), system-ui, sans-serif; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}

/* --- EDITOR'S PICKS band label (grid item via ::before) --- */
:root main:not(:has(> article))::before {
  content: "La selección — empieza por aquí"; order: 2; grid-column: 1 / -1;
  font-family: var(--fm), system-ui, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
  padding: 40px 0 12px; margin-top: 34px; border-bottom: 1px solid var(--accent);
}
/* picks (cards 2 & 3) */
:root main:not(:has(> article)) > div:nth-of-type(2):has(> h2 > a),
:root main:not(:has(> article)) > div:nth-of-type(3):has(> h2 > a) {
  order: 3; grid-column: span 3; border-top: 3px solid var(--accent);
}
:root main:not(:has(> article)) > div:nth-of-type(2) > h2,
:root main:not(:has(> article)) > div:nth-of-type(3) > h2 { font-size: 24px; }
:root main:not(:has(> article)) > div:nth-of-type(2) > p:first-of-type::before,
:root main:not(:has(> article)) > div:nth-of-type(3) > p:first-of-type::before { content: "Selección · "; color: var(--primary); }

/* --- JOURNAL LEAD (card 4) — carries Strip 1 "EL CUADERNO" --- */
:root main:not(:has(> article)) > div:nth-of-type(4):has(> h2 > a) {
  grid-column: 1 / -1; order: 4;
  background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 30px; gap: 0;
}
:root main:not(:has(> article)) > div:nth-of-type(4)::before {
  content: "El Cuaderno"; order: -1; display: flex; align-items: flex-end; justify-content: center;
  min-height: 200px; margin-bottom: 30px; border-radius: var(--r);
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/essay-photo.jpg") center 30%/cover no-repeat, var(--primary);
  color: #fdf7e8; font-family: var(--fm), system-ui, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; padding-bottom: 20px; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
:root main:not(:has(> article)) > div:nth-of-type(4) > h2 { font-size: 30px; font-style: italic; max-width: 24ch; }
:root main:not(:has(> article)) > div:nth-of-type(4) > p:last-of-type { font-size: 17px; max-width: 68ch; -webkit-line-clamp: 3; }
:root main:not(:has(> article)) > div:nth-of-type(4) > p:first-of-type::before { content: "Abre el cuaderno · "; color: var(--primary); }

/* --- JOURNAL grid (cards 5+) : 2-across --- */
:root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2 > a) { grid-column: span 3; order: 5; }
:root main:not(:has(> article)) > div:nth-of-type(n+5) > p:first-of-type::before { content: "Taller · "; color: var(--primary); }

/* safety: any non-card direct div (e.g. archive tail) spans full width, sits last */
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) { grid-column: 1 / -1; order: 7; }

/* --- STRIP 2 "LEER MÁS" (grid item via ::after) --- */
:root main:not(:has(> article))::after {
  content: "Leer más"; order: 6; grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; min-height: 210px; margin-top: 40px;
  border-radius: var(--r);
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)), url("/theme-assets/essay-photo.jpg") center 70%/cover no-repeat, var(--primary);
  color: #fdf7e8; font-family: var(--fm), system-ui, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ============================================================
   ARTICLE PAGES   (main:has(> article))
   ============================================================ */
:root main:has(> article) { max-width: 760px; margin: 0 auto; padding: 0 24px 72px; }
:root main:has(> article) > h1 {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 40px; line-height: 1.12; color: var(--primary); margin: 52px 0 10px;
}
:root main:has(> article) > span {
  display: block; font-family: var(--fm), system-ui, sans-serif; font-size: 12px;
  color: var(--accent); margin-bottom: 34px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}

:root main:has(> article) > article > p { margin: 0 0 1.35em; font-size: 18.5px; line-height: 1.78; }
:root main:has(> article) > article > p:first-of-type::first-letter {
  float: left; font-family: var(--fh), serif; font-weight: 700; font-size: 62px;
  line-height: .8; padding: 6px 12px 0 0; color: var(--primary);
}
:root main:has(> article) > article > p strong,
:root main:has(> article) > article > li strong { color: var(--primary); font-weight: 700; }

/* h2 with dinkus section divider */
:root main:has(> article) > article > h2 {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 27px; line-height: 1.2; color: var(--primary); margin: 2.4em 0 .55em; padding: 0; border: 0;
}
:root main:has(> article) > article > h2::before {
  content: "✦ ✦ ✦"; display: block; text-align: center; color: var(--accent);
  font-size: 15px; letter-spacing: .5em; font-style: normal; margin: 0 0 1.1em; opacity: .8;
}

/* in-article "Check ...:" callout boxes (label p + following ul) */
:root main:has(> article) > article > p:has(> strong):has(+ ul) {
  background: var(--paper2); margin: 1.8em 0 0; padding: 16px 24px 6px;
  border: 1px solid rgba(38,69,111,.16); border-bottom: 0; border-left: 3px solid var(--accent);
  border-radius: var(--r) var(--r) 0 0;
}
:root main:has(> article) > article > p:has(> strong):has(+ ul) strong {
  font-family: var(--fm), system-ui, sans-serif; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--primary);
}
:root main:has(> article) > article ul {
  background: var(--paper2); margin: 0 0 1.8em; padding: 8px 24px 18px 42px;
  border: 1px solid rgba(38,69,111,.16); border-top: 0; border-left: 3px solid var(--accent);
  border-radius: 0 0 var(--r) var(--r);
}
:root main:has(> article) > article ol { margin: 0 0 1.6em 24px; }
:root main:has(> article) > article li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.6; }

/* images — framed photo */
:root main:has(> article) > article > img,
:root main:has(> article) > article > figure { display: block; width: 100%; height: auto; margin: 0 0 30px; }
:root main:has(> article) > article > img,
:root main:has(> article) > article > figure > img {
  border-radius: var(--r); border: 1px solid rgba(38,69,111,.18);
  box-shadow: 0 6px 22px rgba(15,24,32,.14);
}

/* body links + affiliate CTA (RULE J: CTA path ≥ body-link path) */
:root main:has(> article) > article > p a,
:root main:has(> article) > article > li a,
:root main:has(> article) > article > ul a,
:root main:has(> article) > article > p a:visited {
  color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500;
}
:root main:has(> article) > article > p a:hover { color: var(--accent); text-decoration-color: var(--primary); }
:root main:has(> article) > article > p a[href^="/go/"],
:root main:has(> article) > article > p a[href^="/ref/"],
:root main:has(> article) > article > p a[href^="/try/"],
:root main:has(> article) > article > li a[href^="/go/"],
:root main:has(> article) > article > ul a[href^="/go/"] {
  display: inline-block; background: var(--accent); color: #fffdf5; padding: 4px 15px;
  border-radius: 40px; text-decoration: none; font-weight: 700;
  font-family: var(--fm), system-ui, sans-serif; font-size: 14px; letter-spacing: .02em;
}
:root main:has(> article) > article > p a[href^="/go/"]:hover,
:root main:has(> article) > article > p a[href^="/ref/"]:hover,
:root main:has(> article) > article > p a[href^="/try/"]:hover,
:root main:has(> article) > article > li a[href^="/go/"]:hover,
:root main:has(> article) > article > ul a[href^="/go/"]:hover { background: var(--primary); color: #fdf7e8; }

/* related-articles module (nav after article) */
:root main:has(> article) > nav {
  margin-top: 3em; padding: 24px 28px; background: var(--paper);
  border: 1px solid rgba(38,69,111,.14); border-radius: var(--r); box-shadow: 0 1px 4px rgba(0,0,0,.045);
}
:root main:has(> article) > nav p { margin: 0; }
:root main:has(> article) > nav em {
  display: block; font-family: var(--fm), system-ui, sans-serif; font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
:root main:has(> article) > nav a {
  display: block; font-family: var(--fh), serif; font-size: 17px; color: var(--primary);
  text-decoration: none; padding: 8px 0; border-bottom: 1px dotted rgba(0,0,0,.12); line-height: 1.35;
}
:root main:has(> article) > nav a:last-child { border-bottom: 0; }
:root main:has(> article) > nav a:hover { color: var(--accent); }

/* ---------- FOOTER --------------------------------------- */
:root footer {
  background: transparent; border-top: 1px solid var(--border); padding: 24px 24px 40px;
  margin-top: 56px; text-align: center; font-family: var(--fm), system-ui, sans-serif;
  font-size: 12px; color: var(--fg); opacity: .62; letter-spacing: .04em; line-height: 1.7;
}
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- RESPONSIVE ----------------------------------- */
@media (max-width: 860px) {
  :root main:not(:has(> article)) { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 20px 72px; }
  :root main:not(:has(> article)) > div:has(> h2 > a),
  :root main:not(:has(> article)) > div:nth-of-type(2):has(> h2 > a),
  :root main:not(:has(> article)) > div:nth-of-type(3):has(> h2 > a),
  :root main:not(:has(> article)) > div:nth-of-type(n+5):has(> h2 > a) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 32px; }
  :root > body > header > h1 { font-size: 34px; }
  :root main:has(> article) > h1 { font-size: 31px; }
}


/* related-articles-nav-fix v1 */
: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;
}


/* 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;
  }
}


/* refix iter1: full-bleed home masthead and boxed archive tail */
:root > body > header:has(h1) {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
:root > body > header:has(h1) > h1,
:root > body > header:has(h1) > p {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

:root main:not(:has(> article)) > :is(section, nav):has(a),
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a),
:root main:not(:has(> article)) > :is(ul, ol):has(a) {
  grid-column: 1 / -1;
  order: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  columns: initial;
  list-style: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(h2, h3, p:not(:has(a))),
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(h2, h3, p:not(:has(a))) {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--accent);
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--primary);
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol),
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  columns: initial;
  list-style: none;
}
:root main:not(:has(> article)) > :is(section, nav):has(a) a,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) a,
:root main:not(:has(> article)) > :is(ul, ol):has(a) a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-family: var(--fh), Cambria, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
  text-decoration: none;
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > hr,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > hr {
  display: none;
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(p:has(a), a, div:has(a)),
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(p:has(a), a, div:has(a)),
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol) > li,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) > li,
:root main:not(:has(> article)) > :is(ul, ol):has(a) > li {
  display: flex;
  align-items: flex-start;
  height: 100%;
  min-height: 88px;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 22px;
  list-style: none;
  background: var(--paper);
  border: 1px solid rgba(38,69,111,.14);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.045);
  color: var(--primary);
  font-family: var(--fh), Cambria, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(p:has(a), a, div:has(a)):hover,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(p:has(a), a, div:has(a)):hover,
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol) > li:hover,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) > li:hover,
:root main:not(:has(> article)) > :is(ul, ol):has(a) > li:hover {
  transform: translateY(-2px);
  border-color: rgba(168,138,80,.32);
  box-shadow: 0 5px 14px rgba(15,24,32,.09);
}
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(p:has(a), a, div:has(a)):hover,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(p:has(a), a, div:has(a)):hover,
:root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol) > li:hover a,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) > li:hover a,
:root main:not(:has(> article)) > :is(ul, ol):has(a) > li:hover a {
  color: var(--accent);
}

@media (max-width: 640px) {
  :root > body > header:has(h1) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  :root > body > header:has(h1) > h1,
  :root > body > header:has(h1) > p {
    padding-left: 20px;
    padding-right: 20px;
  }
  :root main:not(:has(> article)) > :is(section, nav):has(a),
  :root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a),
  :root main:not(:has(> article)) > :is(ul, ol):has(a),
  :root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol),
  :root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  :root main:not(:has(> article)) > :is(section, nav):has(a) > :is(p:has(a), a, div:has(a)),
  :root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(p:has(a), a, div:has(a)),
  :root main:not(:has(> article)) > :is(section, nav):has(a) > :is(ul, ol) > li,
  :root main:not(:has(> article)) > div:not(:has(> h2 > a)):has(a) > :is(ul, ol) > li,
  :root main:not(:has(> article)) > :is(ul, ol):has(a) > li {
    min-height: 0;
    padding: 18px 20px;
  }
}


/* refix iter2: article masthead full-bleed, affiliate CTAs, article meta anchor */
:root > body > header:has(> a) {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
:root > body > header:has(> a) > a {
  box-sizing: border-box;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
:root main:has(> article) > span::after {
  content: " · Marta Garrido · Valencia · 6 min lectura";
}
:root main:has(> article) > article :is(p, li) a[href^="/go/"],
:root main:has(> article) > article :is(p, li) a[href^="/ref/"],
:root main:has(> article) > article :is(p, li) a[href^="/try/"],
:root main:has(> article) > article :is(p, li) a[href^="/out/"],
:root main:has(> article) > article :is(p, li) a[href^="/check/"],
:root main:has(> article) > article :is(p, li) a[href^="/partner/"],
:root main:has(> article) > article :is(p, li) a[href*="/go/"],
:root main:has(> article) > article :is(p, li) a[href*="/ref/"],
:root main:has(> article) > article :is(p, li) a[href*="/try/"],
:root main:has(> article) > article :is(p, li) a[href*="/out/"],
:root main:has(> article) > article :is(p, li) a[href*="hotmart"],
:root main:has(> article) > article :is(p, li) a[href*="go.hotmart"],
:root main:has(> article) > article :is(p, li) a[href*="pay.hotmart"],
:root main:has(> article) > article :is(p, li) a[href*="masterfestiglobos"],
:root main:has(> article) > article :is(p, li) a[href*="decoracion-con-globos"],
:root main:has(> article) > article :is(p, li) a[href*="decoracionconglobos"] {
  display: inline-block;
  background: var(--accent);
  color: #fffdf5;
  padding: 4px 15px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--fm), system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .02em;
}
:root main:has(> article) > article :is(p, li) a[href^="/go/"]:hover,
:root main:has(> article) > article :is(p, li) a[href^="/ref/"]:hover,
:root main:has(> article) > article :is(p, li) a[href^="/try/"]:hover,
:root main:has(> article) > article :is(p, li) a[href^="/out/"]:hover,
:root main:has(> article) > article :is(p, li) a[href^="/check/"]:hover,
:root main:has(> article) > article :is(p, li) a[href^="/partner/"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="/go/"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="/ref/"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="/try/"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="/out/"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="hotmart"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="go.hotmart"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="pay.hotmart"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="masterfestiglobos"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="decoracion-con-globos"]:hover,
:root main:has(> article) > article :is(p, li) a[href*="decoracionconglobos"]:hover {
  background: var(--primary);
  color: #fdf7e8;
}
@media (max-width: 640px) {
  :root > body > header:has(> a) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  :root > body > header:has(> a) > a {
    padding-left: 20px;
    padding-right: 20px;
  }
}


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


/* ── 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: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: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: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: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;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.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: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: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: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: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))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}