*{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}
.wrapper-535a39{max-width:860px;margin:0 auto;padding:0 20px}
.content-b67275{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.content-b67275 h1{font-size:22px;font-weight:700;margin-bottom:2px}
.content-b67275 p{font-size:14px;color:#666}
.content-b67275 a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.footer-6588a0{display:flex;flex-direction:column;gap:20px}
.sidebar-8af38c{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-8af38c:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.sidebar-8af38c h2{font-size:19px;margin-bottom:6px}
.sidebar-8af38c h2 a{color:#1a1a1a;text-decoration:none}
.sidebar-8af38c .layout-f47453{font-size:12px;color:#999;margin-bottom:8px}
.sidebar-8af38c p{font-size:14px;color:#555;margin-bottom:12px}
.panel-1c0dae{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.panel-1c0dae:hover{background:#4752c4}
.footer-c91e61{padding-bottom:60px}
.footer-c91e61 h1{font-size:30px;font-weight:700;margin-bottom:8px}
.footer-c91e61 time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.footer-c91e61 h2{font-size:22px;margin:32px 0 12px}
.footer-c91e61 h3{font-size:18px;margin:24px 0 8px}
.footer-c91e61 p{margin-bottom:16px}
.footer-c91e61 ul,.footer-c91e61 ol{margin:0 0 16px 24px}
.footer-c91e61 a{color:#5865f2}
.footer-c91e61 img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.section-b9121a{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.section-b9121a a{color:#999;text-decoration:none}
.nav-9f5086{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.main-b12c92{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.page-d6e3d0{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.header-dc0246{text-align:center;margin:0 0 24px}
.module-a69c84{max-width:100%;height:auto;border-radius:12px}
.widget-4356ca{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.widget-4356ca 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)}
.footer-65875e{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.panel-089a80{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}
.panel-089a80:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#1F2937;background:#FDFCF8}
.content-b67275{background:#2D4628;color:#fff}
.content-b67275 h1{font-family:'Cormorant Garamond',serif;color:#fff}
.content-b67275 p{color:rgba(255,255,255,.75)}
.content-b67275 a{color:#fff;text-decoration:none}
.card h2{font-family:'Cormorant Garamond',serif}
.card h2 a{color:#2D4628}
.card h2 a:hover{color:#D97706}
.read-more{color:#D97706}
.article-content h1{font-family:'Cormorant Garamond',serif}
.article-content h2{font-family:'Cormorant Garamond',serif}
.article-content a{color:#D97706}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/*
 * rn-curativ-es — custom.css
 * Palette  : azul tinta de sello bibliotecario + rosa antiguo de flor prensada
 * Fonts    : Piazzolla (heading) + Public Sans (body)
 * Template : card — pensado como una ficha de catalogo, no una tarjeta de producto
 */

@import url('https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --color-bg:             #F6F1E6;
  --color-surface:        #ECE1CB;
  --color-surface-alt:    #E2D2B4;
  --color-text:           #2A2620;
  --color-text-muted:     #6E6252;
  --color-heading:        #1F2E3D;

  --color-primary:        #2C4356;
  --color-primary-dark:   #1B2C3A;
  --color-accent:         #B5677A;
  --color-accent-hover:   #954F60;
  --color-accent-light:   #D5A3AF;

  --color-border:         #D8C6A8;
  --color-link:           #B5677A;
  --color-link-hover:     #954F60;

  --font-heading:         'Piazzolla', Georgia, serif;
  --font-body:            'Public Sans', system-ui, sans-serif;
  --font-size-base:       17px;
  --font-size-sm:         15px;
  --font-size-h1:         2.35rem;
  --font-size-h2:         1.7rem;
  --font-size-h3:         1.3rem;
  --font-weight-heading:  600;
  --font-weight-body:     400;
  --line-height-body:     1.7;
  --line-height-heading:  1.25;

  --border-radius:        6px;
  --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: var(--font-weight-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root main, :root .site-content {
  max-width: var(--max-width-layout);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ─── Headings ──────────────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-heading);
  line-height: var(--line-height-heading);
  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); color: var(--color-accent-hover); }
:root h4 { font-size: 1.1rem; }

/* ─── Paragraphs ────────────────────────────────────────────── */
:root p {
  max-width: var(--max-width-content);
  margin-block: 0 1em;
}

:root .entry-content p, :root .post-content p, :root article p {
  max-width: var(--max-width-content);
  line-height: var(--line-height-body);
}

/* ─── 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-link-hover);
}

/* ─── Lists ─────────────────────────────────────────────────── */
:root ul, :root ol {
  max-width: var(--max-width-content);
  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-primary);
}

:root ol li::marker {
  color: var(--color-accent-hover);
  font-family: var(--font-heading);
}

/* ─── Blockquote — la nota al margen de la ficha ───────────── */
:root blockquote {
  max-width: var(--max-width-content);
  margin-inline: 0;
  margin-block: 1.75rem;
  padding: 1.1rem 1.5rem;
  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-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
}

:root blockquote p {
  margin-bottom: 0;
  max-width: none;
}

/* ─── Cards (template: card) — ficha de catalogo ────────────── */
:root .card, :root .post-card, :root article.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-top-color 0.2s ease;
}

:root .card:hover, :root .post-card:hover {
  box-shadow: 0 4px 20px rgba(27, 44, 58, 0.14);
  transform: translateY(-2px);
  border-top-color: var(--color-accent);
}

:root .card-grid, :root .posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-block: var(--spacing-section);
}

:root .card h2, :root .card h3, :root .post-card h2, :root .post-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-heading);
}

:root .card p, :root .post-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
  max-width: none;
}

/* ─── Site header ───────────────────────────────────────────── */
:root .site-header, :root header.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding-block: 1.25rem;
}

:root .site-title, :root .site-header .site-title a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-heading);
  text-decoration: none;
}

:root .site-description, :root .site-header .site-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* ─── Navigation ────────────────────────────────────────────── */
:root .site-nav a, :root nav.main-navigation a {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

:root .site-nav a:hover, :root nav.main-navigation a:hover { color: var(--color-accent); }

/* ─── Card template top banner ──────────────────────────────── */
:root .content-b67275 {
  background-color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  padding-block: calc(var(--spacing-section) * 1.4);
  text-align: center;
}

:root .content-b67275 h1 {
  font-size: clamp(1.8rem, 5vw, var(--font-size-h1));
  color: #F6F1E6;
  max-width: 26ch;
  margin-inline: auto;
}

:root .content-b67275 p {
  color: rgba(246, 241, 230, 0.78);
  max-width: 52ch;
  margin-inline: auto;
  font-size: 1.05rem;
}

:root .content-b67275 a {
  color: var(--color-accent-light);
  text-decoration: none;
}

/* ─── Article content ───────────────────────────────────────── */
:root .article-content h1, :root .article-content h2, :root .article-content h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

:root .article-content a { color: var(--color-accent); }

:root .article-content img {
  border-radius: var(--border-radius);
  max-width: 100%;
  height: auto;
}

/* ─── Footer ────────────────────────────────────────────────── */
:root .site-footer, :root footer.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: 2rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

:root .site-footer a { color: var(--color-text-muted); text-decoration: underline; }
:root .site-footer a:hover { color: var(--color-accent); }

/* ─── Section spacing / utilidad ─────────────────────────────── */
:root section { padding-block: var(--spacing-section); }
:root .read-more { color: var(--color-accent-hover); font-size: var(--font-size-sm); font-weight: 600; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --font-size-h1: 1.9rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.2rem;
  }

  :root main, :root .site-content { padding-inline: 1rem; }
}

/* === R3 fixes (2026-07-08T11:20:19.295298+00:00) === */
/* R2 apuntaba a la clase inexistente '.article-content'; el cuerpo del
   articulo esta envuelto en un <article> sin clase, asi que estas reglas
   nunca coincidian con nada. Se corrigen usando la etiqueta 'article'. */

/* Más aire antes de un subtítulo nuevo dentro del artículo, para que se note
   que empieza otra sección y no se lea como si siguiera el mismo párrafo */
:root article h2 { margin-top: 2em; }

/* Links a los cursos recomendados con más peso que los links de referencia */
:root article a[href^="/to/"] { font-weight: 600; }

/* Listas del artículo como "ficha" con fondo propio, en línea con el fichero de plantas */
:root article ul {
  background-color: var(--color-surface-alt);
  border-radius: var(--border-radius);
  padding: 1rem 1.5rem;
}

/* === R4 fixes (2026-07-08T12:00:35.866852+00:00) === */

/* El botón "Read Article" de las tarjetas de portada usaba el color y radio
   genéricos de la plantilla en vez de la paleta del sitio (azul tinta) y el
   radio de 6px del resto de los componentes, y conservaba el subrayado de
   link pese a estar dentro de un botón sólido. */
:root .panel-1c0dae {
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  text-decoration: none;
}

:root .panel-1c0dae:hover {
  background-color: var(--color-primary-dark);
}

/* v.c2aa37 — layout revision */
/* Firma editorial completa reescrita sobre estructura real del build:
   masthead  <header.content-b67275> (home: >div>h1+p / artículo: >div>span>a)
   portada   <main> > div:first-of-type  (grilla 12 fichas .sidebar-8af38c)
                    > div:not(:first-of-type)  (cola de archivo, <a> sueltos)
   artículo  <main> > h1 + time + article + div (relacionados)
   Selectores estructurales (element + :has de un nivel) porque el pipeline
   ofusca las clases. Un solo color-momento asignado #4A5C6B en 2 gestos:
   filete izquierdo de la ficha-portada + dinkus del artículo. El rosa de
   herbario (accent) se reparte con intención por la portada. Fotos vivas:
   hero-masthead.jpg / article-hero.jpg (cover.jpg y entry-photo.jpg dan 404
   en este deploy, así que se usan las que sí existen). */

:root {
  --color-moment: #4A5C6B;
}

/* ════════ MASTHEAD — sello de herbario sobre foto (ambas vistas) ════════ */
:root body > header {
  background-color: var(--color-primary-dark);
  border-bottom: 3px solid var(--color-accent);
  text-align: center;
}

/* home: foto + gradiente + monograma + wordmark cursiva + manifiesto */
:root body > header:has(h1) {
  position: relative;
  background-image:
    linear-gradient(158deg, rgba(20,32,44,0.72) 0%, rgba(20,32,44,0.90) 100%),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center;
  padding-block: clamp(2.8rem, 7vw, 4.8rem);
}

:root body > header:has(h1) > div {
  max-width: 60ch;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

:root body > header:has(h1) > div::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23D5A3AF' stroke-width='1.6'/%3E%3Cpath d='M32 47 L32 20' stroke='%23F6F1E6' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32 30 C27 27 23 29 20 25 M32 30 C37 27 41 29 44 25 M32 24 C28 22 25 23 23 20 M32 24 C36 22 39 23 41 20 M32 37 C28 35 25 36 23 33 M32 37 C36 35 39 36 41 33' stroke='%23F6F1E6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

:root body > header:has(h1) h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  color: #F6F1E6;
  line-height: 1.06;
  margin-bottom: 0.7rem;
}

:root body > header:has(h1) h1::before {
  content: "FICHERO DE PLANTAS CURATIVAS · MONTEVIDEO";
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--color-accent-light);
  margin-bottom: 0.9rem;
}

:root body > header:has(h1) > div > p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.55;
  color: rgba(246,241,230,0.86);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 52ch;
}

/* artículo: barra sello compacta con wordmark cursiva */
:root body > header:not(:has(h1)) {
  padding-block: 1rem;
}

:root body > header:not(:has(h1)) a {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.35rem;
  color: #F6F1E6;
  text-decoration: none;
}

/* ════════════════ PORTADA — grilla de 6 columnas ════════════════ */
:root main:not(:has(> article)) > div:first-of-type {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 2rem;
  row-gap: 2.4rem;
  margin-block: clamp(2.6rem, 6vw, 4rem) 0;
}

/* ── ficha base (todas las tarjetas de la grilla) ── */
:root main:not(:has(> article)) > div:first-of-type > div {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 8px;
  padding: 1.6rem 2rem 1.7rem;
  box-shadow: 0 1px 4px rgba(27,44,58,.05);
  transition: box-shadow .2s ease, transform .2s ease, border-top-color .2s ease;
}

:root main:not(:has(> article)) > div:first-of-type > div:hover {
  box-shadow: 0 8px 24px rgba(27,44,58,.13);
  transform: translateY(-2px);
  border-top-color: var(--color-accent);
}

/* fecha como kicker en versalitas */
:root main:not(:has(> article)) > div:first-of-type > div > p:first-child {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-hover);
  margin-bottom: 0.55rem;
}

:root main:not(:has(> article)) > div:first-of-type > div > h2 {
  font-size: 1.22rem;
  line-height: 1.28;
  margin-bottom: 0.55rem;
}

:root main:not(:has(> article)) > div:first-of-type > div > h2 a {
  color: var(--color-heading);
  text-decoration: none;
}

:root main:not(:has(> article)) > div:first-of-type > div > h2 a:hover {
  color: var(--color-accent-hover);
}

/* extracto acotado a 3 líneas para igualar alturas de fila */
:root main:not(:has(> article)) > div:first-of-type > div > h2 + p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA: píldora contorneada, texto SIEMPRE visible (vence a .panel-1c0dae) */
:root body main:not(:has(> article)) > div:first-of-type > div > a {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 100px;
  padding: 0.45rem 1.15rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

:root body main:not(:has(> article)) > div:first-of-type > div > a:hover {
  background-color: var(--color-primary);
  color: #F6F1E6;
}

/* ── HERO: la ficha-portada, voz alta (fila completa) ── */
:root main:not(:has(> article)) > div:first-of-type > div:first-child {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-alt);
  border-top-width: 3px;
  border-left: 5px solid var(--color-moment);   /* gesto momento 1/2 */
  padding: clamp(1.9rem, 4vw, 2.8rem) clamp(2rem, 5vw, 3rem);
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child::after {
  content: "\2767";
  position: absolute;
  top: -0.6rem;
  right: 1.6rem;
  font-family: var(--font-heading);
  font-size: 8rem;
  line-height: 1;
  color: rgba(181,103,122,0.15);
  pointer-events: none;
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-child {
  color: var(--color-accent-hover);
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-child::before {
  content: "Última ficha · ";
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.95rem, 4.6vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.9rem;
  max-width: 20ch;
  position: relative;
  z-index: 1;
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 + p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 54ch;
  -webkit-line-clamp: 4;
}

/* capitular rosa de herbario */
:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 + p::first-letter {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 0.8;
  float: left;
  padding: 0.15rem 0.55rem 0 0;
  color: var(--color-accent-hover);
}

:root main:not(:has(> article)) > div:first-of-type > div:first-child > a {
  font-size: 0.82rem;
  padding: 0.62rem 1.5rem;
}

/* ── BANDA "para empezar": fichas 2-4, 3 en fila ── */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
  grid-column: span 2;
  margin-top: 4.4rem;
}

:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2) {
  position: relative;
}

/* rótulo de sección: banda a fila completa, fuera del marco */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
  content: "FICHAS PARA EMPEZAR — LEÉ ESTAS PRIMERO";
  position: absolute;
  bottom: calc(100% + 1.1rem);
  left: 0;
  width: calc(300% + 4rem);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

/* ── GRILLA cronológica: fichas 5+, 2 en fila ── */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5) {
  grid-column: span 3;
}

:root main:not(:has(> article)) > div:first-of-type > div:nth-child(5),
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(6) {
  margin-top: 15.5rem;   /* aire para la tira-foto Strip 1 */
}

/* ── STRIP 1 — tira-foto "EL DIARIO — MÁS RECIENTES" (entre banda y grilla) ── */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(5) {
  position: relative;
}

:root main:not(:has(> article)) > div:first-of-type > div:nth-child(5)::before {
  content: "EL DIARIO — MÁS RECIENTES";
  position: absolute;
  bottom: calc(100% + 2.2rem);
  left: 0;
  width: calc(200% + 2rem);
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 30%;
  color: #F6F1E6;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* ════════════ COLA DE ARCHIVO — índice de revista a 3 columnas ════════════ */
/* Zona de diseño de primera clase: mismas fichas crema que la mitad superior
   (mismo papel, mismo filete azul, mismo radio, misma sombra y hover-lift),
   sólo que más compactas. Grilla real para igualar alturas por fila. */
:root main:not(:has(> article)) > div:not(:first-of-type) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  align-items: stretch;
  margin-top: 5.5rem;
  padding-top: 0;
  background: transparent;
}

/* STRIP 2 — tira-foto "LEER MÁS" a fila completa sobre el índice */
:root main:not(:has(> article)) > div:not(:first-of-type)::before {
  content: "LEER MÁS";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 2.4rem;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 70%;
  color: #F6F1E6;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* sin pseudo-elemento vacío que ocupe una celda de la grilla */
:root main:not(:has(> article)) > div:not(:first-of-type)::after {
  content: none;
}

/* cada entrada del índice = ficha crema compacta con la misma polida que
   las tarjetas del diario (papel, filete azul, radio, sombra, hover-lift) */
:root body main:not(:has(> article)) > div:not(:first-of-type) > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px 22px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(27,44,58,.05);
  font-family: var(--font-heading);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--color-heading);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-top-color .2s ease, color .2s ease;
}

:root body main:not(:has(> article)) > div:not(:first-of-type) > a:hover {
  color: var(--color-accent-hover);
  box-shadow: 0 8px 24px rgba(27,44,58,.13);
  transform: translateY(-2px);
  border-top-color: var(--color-accent);
}

/* ── portada en móvil: una sola columna, tiras a ancho simple ── */
@media (max-width: 720px) {
  :root main:not(:has(> article)) > div:first-of-type {
    grid-template-columns: 1fr;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child,
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(4),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5) {
    grid-column: 1 / -1;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
    margin-top: 3.4rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(4),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(6) {
    margin-top: 0;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(5) {
    margin-top: 13.5rem;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before {
    width: 100%;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(5)::before {
    width: 100%;
    height: 150px;
  }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child::after {
    font-size: 5rem;
  }
  :root main:not(:has(> article)) > div:not(:first-of-type) {
    grid-template-columns: 1fr;
  }
}

/* ═══════ ARTÍCULO — titular grande, foto de entrada, dinkus, cita ═══════ */
:root main:has(> article) > h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.14;
  max-width: 22ch;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
}

:root main:has(> article) > time {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.6rem;
}

/* S6: ancla de persona/byline, no sólo categoría·fecha. Salomé es
   bibliotecaria en Montevideo (persona del sitio). El date del <time> queda a
   continuación en tono muted. */
:root main:has(> article) > time::before {
  content: "Por Salomé, bibliotecaria · Montevideo · ";
  color: var(--color-accent-hover);
}

/* === M11 fix (iter 2) === */
/* Se elimina la tira-foto decorativa que se insertaba con ::before entre la
   meta y la imagen real del artículo. Usaba article-hero.jpg — la MISMA imagen
   que las tiras de sección de la portada (Strip 1 / Strip 2 / "LEER MÁS") — así
   que en el artículo se leía como mobiliario de portada y no como contenido
   propio. El <article> ya trae su imagen grande real (<div role="img"><img>)
   como primer hijo, que pasa a ser la única foto de cabecera del artículo. */

/* aire y dinkus entre secciones */
:root main:has(> article) > article > h2 {
  margin-top: 2.5em;
}

:root main:has(> article) > article > h2::before {
  content: "\2733 \2733 \2733";       /* gesto momento 2/2 */
  display: block;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.5em;
  color: var(--color-moment);
  margin-bottom: 1.5rem;
}

:root main:has(> article) > article > h2:first-of-type::before {
  content: none;
}

/* cita con comilla colgante */
:root article > blockquote {
  position: relative;
  padding-left: 2.5rem;
}

:root article > blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0.3rem;
  left: 0.55rem;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
}

/* tabla comparativa: bordes tan suaves + cabecera sello (no grilla negra) */
:root article table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.9rem;
  font-size: var(--font-size-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

:root article th,
:root article td {
  border: 1px solid var(--color-border);
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

:root article th {
  background-color: var(--color-primary);
  color: #F6F1E6;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-color: var(--color-primary-dark);
}

:root article tbody tr:nth-child(even) td {
  background-color: var(--color-surface-alt);
}

/* descargo YMYL como nota al margen */
:root article > aside {
  margin-top: 2rem;
  padding: 1.1rem 1.35rem;
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

/* === M10 fix (iter 2) === */
/* Los enlaces de afiliado del cuerpo (/to/main, /to/alt-2 → cursos de Hotmart)
   se renderizan como una PÍLDORA/chip claramente diferenciada del texto, no
   como link rosa subrayado en línea. Van a mitad de frase, así que se usa
   inline-block (fluye con el texto pero se ve como botón). El color de texto
   claro sobre fondo rosa se fija con mayor especificidad que la regla genérica
   de links, evitando el bug de "texto invisible = fondo" del descargo M10. */
:root article a[href^="/to/"] {
  display: inline-block;
  margin: 0.15rem 0.1rem;
  padding: 0.3rem 0.95rem;
  background-color: var(--color-accent);
  color: #F6F1E6;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-accent-hover);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(27, 44, 58, 0.12);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:root article a[href^="/to/"]:hover {
  background-color: var(--color-accent-hover);
  color: #F6F1E6;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(27, 44, 58, 0.18);
}

/* ── relacionados como fichas, no lista de links suelta ── */
:root main:has(> article) > div:last-child {
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--color-border);
}

:root main:has(> article) > div:last-child > h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

:root main:has(> article) > div:last-child > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}

:root main:has(> article) > div:last-child a {
  display: block;
  padding: 0.85rem 1.05rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 0.98rem;
  line-height: 1.35;
  transition: background-color .2s ease, border-left-color .2s ease;
}

:root main:has(> article) > div:last-child a:hover {
  background-color: var(--color-surface-alt);
  border-left-color: var(--color-accent-hover);
}

@media (max-width: 640px) {
  :root main:has(> article) > div:last-child > div {
    grid-template-columns: 1fr;
  }
}


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


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Kinfolk-minimal overlay=25% grid=equal scale=dramatic family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 25%) ── */
: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.25) 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.25) 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; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}