*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.Header_wrapper__XydSn{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .Main_wrap__gRwMW{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.Container_title__2kfzu{border-bottom:1px solid #eee;padding:24px 0}
.Container_title__2kfzu h2{font-size:20px;margin-bottom:8px}
.Container_title__2kfzu h2 a{color:#1a1a2e;text-decoration:none}
.Container_title__2kfzu h2 a:hover{color:#e94560}
.Container_title__2kfzu .date{font-size:13px;color:#999;margin-bottom:8px}
.Main_link__TgcKY{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.Footer_text__OZkw9{padding-bottom:60px}
.Footer_text__OZkw9 h1{font-size:32px;margin-bottom:8px}
.Footer_text__OZkw9 time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.Footer_text__OZkw9 h2{font-size:22px;margin:32px 0 12px}
.Footer_text__OZkw9 h3{font-size:18px;margin:24px 0 8px}
.Footer_text__OZkw9 p{margin-bottom:16px}
.Footer_text__OZkw9 ul,.Footer_text__OZkw9 ol{margin:0 0 16px 24px}
.Footer_text__OZkw9 a{color:#e94560}
.Footer_text__OZkw9 img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.Container_foot__8FK5Y{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.Wrapper_foot__Dw5O1{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.Section_head__xv0jX{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.Nav_block__5pLGH{text-align:center;margin:0 0 20px}
.Section_section__98ZO2{max-width:100%;height:auto;border-radius:6px}
.Card_box__kzCFs{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.Card_box__kzCFs h3{font-size:18px;margin-bottom:12px}
.Card_box__kzCFs ul{list-style:none;padding:0}
.Card_box__kzCFs li{padding:4px 0}
.Card_box__kzCFs a{color:#e94560;text-decoration:none}
.Page_box__9qL0A{padding:20px 0}
.Page_box__9qL0A ul{list-style:none;padding:0}
.Page_box__9qL0A li{padding:5px 0;font-size:15px}
.Page_box__9qL0A a{color:#1a1a2e;text-decoration:none}
.Page_box__9qL0A a:hover{color:#e94560}

:root{--primary:#2B4C7E;--accent:#C8A84B;--bg:#F2F0EB;--fg:#1E1E1E;--border:#C5BFB0;--r:2px;--fb:'Libre Baskerville';--fh:'IBM Plex Sans Condensed'}

@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ7ZXk8g.woff2) format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxMaC82U.woff2) format('woff2'); }
@font-face { font-family:'Libre Baskerville'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/librebaskerville/v24/kmKWZrc3Hgbbcjq75U4uslyuy4kn0qNccR04_RUJeby2OU36SjNNlufweKgfqIc.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8lN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHYapyK7Bh4sN.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY527LvspYYnFBq4.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsanscondensed/v15/Gg8gN4UfRSqiPg7Jn2ZI12V4DCEwkj1E4LVeHY4S7bvspYYnFBq4.woff2) format('woff2'); }

:root {
  --primary: #2B4C7E;
  --accent: #C8A84B;
  --moment: #7C4A5C;          
  --bg: #F2F0EB;
  --fg: #1E1E1E;
  --muted: #5A5A5A;
  --border: #C5BFB0;
  --hair: rgba(43,76,126,.14);
  --card: #FAF6EC;            
  --panel: #F6F1E4;           
  --fdisplay: 'Fraunces';
  --fb: 'Libre Baskerville';
  --fh: 'IBM Plex Sans Condensed';
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--fb), Georgia, serif;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.75;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  margin: 1.5em 0 .5em;
  color: var(--primary);
  letter-spacing: 0;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.28rem; }

p { margin: 0 0 1.2em; max-width: 68ch; }

a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
strong { font-weight: 700; }
em { font-style: italic; }

ul, ol { padding-left: 1.6em; margin-bottom: 1.2em; }
li { margin-bottom: .4em; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
::selection { background-color: var(--accent); color: #fff; }

header {
  background-image:
    linear-gradient(150deg, rgba(26,42,72,.90), rgba(26,42,72,.70)),
    url("/content/backdrop.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 3.5rem 1.5rem 2.9rem;
  margin: 0 0 3rem;
  border-bottom: 3px solid var(--accent);
}
header > div { max-width: 760px; margin: 0 auto; }

header > div::before {
  content: "";
  display: block;
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23C8A84B'%20stroke-width='1.6'%3E%3Cpath%20d='M24%2012C18%208%208%208%206%2010L6%2038C10%2036%2018%2036%2024%2040C30%2036%2038%2036%2042%2038L42%2010C40%208%2030%208%2024%2012Z'/%3E%3Cpath%20d='M24%2012L24%2040'/%3E%3C/svg%3E");
  opacity: .95;
}
header h1,
header > div > a {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.04;
  color: #fff;
  display: block;
  margin: 0;
  text-decoration: none;
  letter-spacing: 0;
}
header p {
  font-family: var(--fb), Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 56ch;
  margin: 1rem auto 0;
}

header > div::after {
  content: "UNA PREGUNTA POR HOJA · IRENE, ZARAGOZA";
  display: block;
  margin-top: 1.15rem;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--accent);
}

main:not(:has(> h1)):first-of-type {
  max-width: var(--max);
  margin: 0 auto;
  padding: .5rem 2rem 4rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 2.4rem;
  row-gap: 2.6rem;
  align-items: stretch;
}

main:not(:has(> h1)):first-of-type::before {
  content: "SELECCIÓN DE IRENE · EMPIEZA POR AQUÍ";
  order: 1;
  grid-column: 1 / -1;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--primary);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--hair);
  margin: 1.2rem 0 -.6rem;
}

main:not(:has(> h1)):first-of-type::after {
  content: "EL DIARIO — MÁS RECIENTES";
  order: 3;
  grid-column: 1 / -1;
  min-height: 200px;
  margin: 1.2rem 0 .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/content/story-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  color: #fff;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

main:not(:has(> h1)):first-of-type > article:first-child {
  order: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  column-gap: 3rem;
  row-gap: .15rem;
  align-items: start;
  background: none;
  border: none;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  padding: .4rem 0 2.4rem;
  margin: 0;
}
main:not(:has(> h1)):first-of-type > article:first-child > * { grid-column: 1; }

main:not(:has(> h1)):first-of-type > article:first-child::before {
  content: "ÚLTIMO EN EL CUADERNO";
  grid-column: 1 / -1;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--primary);
  width: max-content;
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 1rem;
}
main:not(:has(> h1)):first-of-type > article:first-child h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.12;
  margin: 0 0 .7rem;
}
main:not(:has(> h1)):first-of-type > article:first-child h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> h1)):first-of-type > article:first-child h2 a:hover { color: var(--accent); }

main:not(:has(> h1)):first-of-type > article:first-child > p:first-of-type {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
main:not(:has(> h1)):first-of-type > article:first-child > p:first-of-type::before {
  content: "Por Irene Lozada · ";
  color: var(--primary);
  font-weight: 600;
}

main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type {
  font-family: var(--fb), Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--fg);
  max-width: 40ch;
  margin: 0;
}
main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type::first-letter {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: .8;
  float: left;
  margin: .05em .12em 0 0;
  color: var(--moment);
}

main:not(:has(> h1)):first-of-type > article:first-child > a {
  display: inline-block;
  justify-self: start;
  margin-top: 1.3rem;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: .65em 1.5em;
}
main:not(:has(> h1)):first-of-type > article:first-child > a:hover { background: var(--primary); color: #fff; }

main:not(:has(> h1)):first-of-type > article:first-child::after {
  content: "\201CLos nervios no se aguantan: se estudian.\201D";
  grid-column: 2;
  grid-row: 2 / 6;
  align-self: center;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--primary);
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: .4rem 0;
}

main:not(:has(> h1)):first-of-type > article:nth-child(n+2):nth-child(-n+4) {
  order: 2;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 26px 32px 28px;
  margin: 0;
}

main:not(:has(> h1)):first-of-type > article:nth-child(n+5) {
  order: 4;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 28px 34px 30px;
  margin: 0;
}

main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > p:first-of-type {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55rem;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.32rem;
  line-height: 1.24;
  margin: 0 0 .55rem;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) h2 a:hover { color: var(--accent); }
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > p:last-of-type {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.1rem;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > a {
  margin-top: auto;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > article:nth-child(n+2) > a:hover { color: var(--primary); }

main:not(:has(> h1)):first-of-type > section {
  order: 5;
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding: 0 0 1.8rem;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
}
main:not(:has(> h1)):first-of-type > section::before {
  content: "SEGUIR LEYENDO";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  margin-bottom: 1.8rem;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
    url("/content/story-photo.jpg");
  background-size: cover;
  background-position: center 70%;
  color: #fff;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
main:not(:has(> h1)):first-of-type > section ul {
  list-style: none;
  padding: 0 2.2rem;
  margin: 0;
  columns: 2;
  column-gap: 2.6rem;
}
main:not(:has(> h1)):first-of-type > section ul li {
  break-inside: avoid;
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px dotted rgba(0,0,0,.14);
}
main:not(:has(> h1)):first-of-type > section ul li a {
  font-family: var(--fb), Georgia, serif;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--primary);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > section ul li a:hover { color: var(--accent); text-decoration: underline; }

main:has(> h1):first-of-type {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 2rem 4rem;
}
main:has(> h1):first-of-type > h1 {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.9rem;
  line-height: 1.1;
  color: var(--primary);
  margin: .3em 0 .35em;
  max-width: 20ch;
}
main:has(> h1):first-of-type > time {
  display: block;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.2rem;
}
main:has(> h1):first-of-type > time::before { content: "Por Irene Lozada · "; color: var(--primary); }

main:has(> h1):first-of-type > article { max-width: 720px; }
main:has(> h1):first-of-type > article > div:first-child img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin: 0 0 2rem;
}
main:has(> h1):first-of-type > article > p {
  font-size: 1.14rem;
  line-height: 1.8;
  color: var(--fg);
  margin: 0 0 1.35em;
}

main:has(> h1):first-of-type > article > p:first-of-type::first-letter {
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: .78;
  float: left;
  margin: .04em .12em 0 0;
  color: var(--moment);
}
main:has(> h1):first-of-type > article > h2 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.22;
  color: var(--primary);
  border: none;
  padding: 0;
  margin: 2.4em 0 .5em;
}

main:has(> h1):first-of-type > article > h2::before {
  content: "✷ ✷ ✷";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .5em;
  margin: 0 auto 1.1em;
}
main:has(> h1):first-of-type > article > h3 {
  font-family: var(--fdisplay), Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--primary);
  margin: 2em 0 .4em;
}
main:has(> h1):first-of-type > article > blockquote {
  position: relative;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--primary);
  background: none;
  border: none;
  border-left: 3px solid var(--accent);
  margin: 2em 0;
  padding: .2em 0 .2em 2.4rem;
}
main:has(> h1):first-of-type > article > blockquote::before {
  content: "\201C";
  position: absolute;
  left: .55rem; top: -.15em;
  font-size: 3rem;
  line-height: 1;
  color: var(--accent);
}
main:has(> h1):first-of-type > article > blockquote p { margin: 0; }

main:has(> h1):first-of-type > article > p > strong:first-child { color: var(--primary); }

main:has(> h1):first-of-type > article p a,
main:has(> h1):first-of-type > article li a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

main:has(> h1):first-of-type > article p a[href^="/rec/"],
main:has(> h1):first-of-type > article li a[href^="/rec/"] {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  background: rgba(200,168,75,.18);
  box-shadow: inset 0 -1px 0 var(--accent);
  border-radius: 3px;
  padding: .04em .34em;
}
main:has(> h1):first-of-type > article p a[href^="/rec/"]::after,
main:has(> h1):first-of-type > article li a[href^="/rec/"]::after {
  content: " ↗";
  font-size: .82em;
  color: var(--accent);
}
main:has(> h1):first-of-type > article p a[href^="/rec/"]:hover,
main:has(> h1):first-of-type > article li a[href^="/rec/"]:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

main:has(> h1):first-of-type > article > aside {
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1rem 1.3rem;
  margin-top: 2.4rem;
  font-family: var(--fb), Georgia, serif;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted);
}
main:has(> h1):first-of-type > article > aside b { color: var(--primary); }

main:has(> h1):first-of-type > section {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--primary);
}
main:has(> h1):first-of-type > section > h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1.2rem;
}
main:has(> h1):first-of-type > section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
main:has(> h1):first-of-type > section ul li {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
main:has(> h1):first-of-type > section ul li a {
  display: block;
  padding: 1rem 1.3rem 1rem 2.4rem;
  position: relative;
  font-family: var(--fdisplay), Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--primary);
  text-decoration: none;
}
main:has(> h1):first-of-type > section ul li a::before {
  content: "→";
  position: absolute;
  left: 1.1rem;
  color: var(--accent);
  font-style: normal;
}
main:has(> h1):first-of-type > section ul li a:hover { color: var(--accent); }

footer {
  background: var(--primary);
  color: rgba(255,255,255,.78);
  text-align: center;
  padding: 2.2rem 1.5rem;
  margin-top: 3.5rem;
  border-top: 3px solid var(--accent);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .84rem;
  letter-spacing: .04em;
}
footer a { color: rgba(255,255,255,.9); text-decoration: none; }
footer a:hover { color: var(--accent); }

@media (max-width: 720px) {
  header h1, header > div > a { font-size: 2.3rem; }

  main:not(:has(> h1)):first-of-type {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.8rem;
    padding: .5rem 1.2rem 3rem;
  }
  
  main:not(:has(> h1)):first-of-type > article:first-child,
  main:not(:has(> h1)):first-of-type > article:nth-child(n+2):nth-child(-n+4),
  main:not(:has(> h1)):first-of-type > article:nth-child(n+5) { grid-column: 1 / -1; }

  main:not(:has(> h1)):first-of-type > article:first-child { grid-template-columns: 1fr; }
  main:not(:has(> h1)):first-of-type > article:first-child::after {
    grid-column: 1;
    grid-row: auto;
    margin-top: 1.4rem;
  }
  main:not(:has(> h1)):first-of-type > article:first-child h2 { font-size: 2rem; }
  main:not(:has(> h1)):first-of-type > article:first-child > p:last-of-type { max-width: none; }
  main:not(:has(> h1)):first-of-type > section ul { columns: 1; }

  main:has(> h1):first-of-type > h1 { font-size: 2.2rem; }
  main:has(> h1):first-of-type > article { max-width: none; }
}

: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;
}

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

@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;
  }
  
  :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;
  }
  
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

main:not(:has(> h1)):first-of-type > section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding-bottom: 0;
}
main:not(:has(> h1)):first-of-type > section::before {
  border-radius: 10px;
}
main:not(:has(> h1)):first-of-type > section ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px 16px;
  columns: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}
main:not(:has(> h1)):first-of-type > section ul li {
  display: flex;
  min-height: 100%;
  margin: 0;
  padding: 0;
  break-inside: auto;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
main:not(:has(> h1)):first-of-type > section ul li:hover {
  transform: translateY(-1px);
  border-color: rgba(43,76,126,.24);
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
}
main:not(:has(> h1)):first-of-type > section ul li a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 20px 22px;
  font-family: var(--fb), Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--primary);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > section ul li a:hover {
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 640px) {
  main:not(:has(> h1)):first-of-type > section ul {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  main:not(:has(> h1)):first-of-type > section ul li a {
    padding: 20px 22px;
  }
}

main:has(> h1):first-of-type > article :is(p, li) a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"]
) {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin: 0 .14em .18em;
  padding: .42em .9em .46em;
  border: 1px solid rgba(43,76,126,.22);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  color: var(--card);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .92em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .02em;
  text-decoration: none;
}
main:has(> h1):first-of-type > article :is(p, li) a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"]
)::after {
  content: " ↗";
  color: var(--accent);
  font-size: .9em;
  line-height: 1;
}
main:has(> h1):first-of-type > article :is(p, li) a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"]
):hover {
  background: var(--accent);
  border-color: rgba(200,168,75,.55);
  color: var(--fg);
  box-shadow: 0 2px 7px rgba(0,0,0,.08);
  text-decoration: none;
}
main:has(> h1):first-of-type > article :is(p, li) a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"]
):hover::after {
  color: var(--primary);
}

main:not(:has(> h1)):first-of-type > section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: stretch;
}
main:not(:has(> h1)):first-of-type > section::before,
main:not(:has(> h1)):first-of-type > section > :is(h2, h3, ul, ol) {
  grid-column: 1 / -1;
}
main:not(:has(> h1)):first-of-type > section > :is(p, a) {
  display: flex;
  min-height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
main:not(:has(> h1)):first-of-type > section > :is(p, a):hover {
  transform: translateY(-1px);
  border-color: rgba(43,76,126,.24);
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
}
main:not(:has(> h1)):first-of-type > section > p > a,
main:not(:has(> h1)):first-of-type > section > a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 20px 22px;
  font-family: var(--fb), Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--primary);
  text-decoration: none;
}
main:not(:has(> h1)):first-of-type > section > :is(p, a):hover a,
main:not(:has(> h1)):first-of-type > section > a:hover {
  color: var(--accent);
  text-decoration: none;
}

:root main > h1 ~ article :is(p, li) > a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
) {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  min-height: 2.1em;
  margin: 0 .16em .2em;
  padding: .44em .95em .48em;
  border: 1px solid rgba(43,76,126,.24);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  color: var(--card);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .94em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .02em;
  text-decoration: none;
}
:root main > h1 ~ article :is(p, li) > a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
)::after {
  content: " ↗";
  color: var(--accent);
  font-size: .9em;
  line-height: 1;
}
:root main > h1 ~ article :is(p, li) > a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover {
  background: var(--accent);
  border-color: rgba(200,168,75,.55);
  color: var(--fg);
  box-shadow: 0 2px 7px rgba(0,0,0,.08);
  text-decoration: none;
}
:root main > h1 ~ article :is(p, li) > a:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover::after {
  color: var(--primary);
}

@media (max-width: 640px) {
  main:not(:has(> h1)):first-of-type > section {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  main:not(:has(> h1)):first-of-type > section > p > a,
  main:not(:has(> h1)):first-of-type > section > a {
    padding: 20px 22px;
  }
}

:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
),
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 2.65em;
  clear: both;
  margin: .72em 0 .9em;
  padding: .72em 1.18em .76em;
  border: 1px solid rgba(43,76,126,.28);
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  color: var(--card);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .03em;
  text-decoration: none;
}
:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
)::before,
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
)::before {
  content: "Ver curso: ";
  color: var(--accent);
}
:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
)::after,
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
)::after {
  content: " ->";
  color: var(--accent);
  font-size: .92em;
  line-height: 1;
}
:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover,
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover {
  background: var(--accent);
  border-color: rgba(200,168,75,.58);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  color: var(--fg);
  text-decoration: none;
}
:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover::before,
:root body main > h1 ~ article :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover::after,
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover::before,
:root body main > article:only-child :is(p, li) > a[href]:is(
  [href^="/try/"],
  [href^="/ref/"],
  [href^="/go/"],
  [href^="/out/"],
  [href^="/rec/"],
  [href*="hotmart."],
  [href*="amazon."],
  [href*="amzn."],
  [href*="udemy."],
  [href*="gumroad."]
):hover::after {
  color: var(--primary);
}

@media (max-width: 640px) {
  :root body main > h1 ~ article :is(p, li) > a[href]:is(
    [href^="/try/"],
    [href^="/ref/"],
    [href^="/go/"],
    [href^="/out/"],
    [href^="/rec/"],
    [href*="hotmart."],
    [href*="amazon."],
    [href*="amzn."],
    [href*="udemy."],
    [href*="gumroad."]
  ),
  :root body main > article:only-child :is(p, li) > a[href]:is(
    [href^="/try/"],
    [href^="/ref/"],
    [href^="/go/"],
    [href^="/out/"],
    [href^="/rec/"],
    [href*="hotmart."],
    [href*="amazon."],
    [href*="amzn."],
    [href*="udemy."],
    [href*="gumroad."]
  ) {
    width: 100%;
    margin: .85em 0 1em;
    padding: .82em 1em .86em;
    font-size: .92rem;
    text-align: center;
  }
}