*{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} .frame-9831a2{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 .page-d66bc1{color:#fff;text-decoration:none;font-size:18px;font-weight:600} .frame-84c10d{border-bottom:1px solid #eee;padding:24px 0} .frame-84c10d h2{font-size:20px;margin-bottom:8px} .frame-84c10d h2 a{color:#1a1a2e;text-decoration:none} .frame-84c10d h2 a:hover{color:#e94560} .frame-84c10d .date{font-size:13px;color:#999;margin-bottom:8px} .container-d23454{color:#e94560;text-decoration:none;font-size:14px;font-weight:600} .panel-f8fc6e{padding-bottom:60px} .panel-f8fc6e h1{font-size:32px;margin-bottom:8px} .panel-f8fc6e time{font-size:13px;color:#999;display:block;margin-bottom:24px} .panel-f8fc6e h2{font-size:22px;margin:32px 0 12px} .panel-f8fc6e h3{font-size:18px;margin:24px 0 8px} .panel-f8fc6e p{margin-bottom:16px} .panel-f8fc6e ul,.panel-f8fc6e ol{margin:0 0 16px 24px} .panel-f8fc6e a{color:#e94560} .panel-f8fc6e 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} .outer-2426c5{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic} .section-cd42e3{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b} .footer-c957a3{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic} .region-97d3fc{text-align:center;margin:0 0 20px} .footer-b51681{max-width:100%;height:auto;border-radius:6px} .header-1431c6{margin-top:40px;padding-top:24px;border-top:1px solid #eee} .header-1431c6 h3{font-size:18px;margin-bottom:12px} .header-1431c6 ul{list-style:none;padding:0} .header-1431c6 li{padding:4px 0} .header-1431c6 a{color:#e94560;text-decoration:none} .panel-444597{padding:20px 0} .panel-444597 ul{list-style:none;padding:0} .panel-444597 li{padding:5px 0;font-size:15px} .panel-444597 a{color:#1a1a2e;text-decoration:none} .panel-444597 a:hover{color:#e94560} /* === Theme === */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Fredoka:wght@400;700&display=swap'); body{font-family:'Quicksand',sans-serif;color:#2D2926;background:#FAF9F6} header{background:#4E342E;color:#fff} header h1{font-family:'Fredoka',serif;color:#fff} header p{color:rgba(255,255,255,.75)} header a{color:#fff;text-decoration:none} .frame-84c10d h2{font-family:'Fredoka',serif} .frame-84c10d h2 a{color:#4E342E} .frame-84c10d h2 a:hover{color:#FF8A65} .container-d23454{color:#FF8A65} .panel-f8fc6e h1{font-family:'Fredoka',serif} .panel-f8fc6e h2{font-family:'Fredoka',serif} .panel-f8fc6e a{color:#FF8A65} .panel-f8fc6e img{border-radius:12px} .affiliate-disclosure{border-radius:12px} .ymyl-disclaimer{border-radius:12px} /* === Custom === */ /* pl-pelu-es — Peluquería canina amateur — classic template */ /* Palette: grafito-canela · gris pimienta-y-sal #4B4340 · canela #C1652E · marfil #FBF6EF */ @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Nunito+Sans:wght@300;400;600;700&display=swap'); /* ── Tokens ── */ :root { --color-bg: #FBF6EF; --color-surface: #F3E9D8; --color-text: #332E2A; --color-text-muted: #7A6F63; --color-primary: #4B4340; --color-primary-dark: #332D2A; --color-accent: #C1652E; --color-accent-dark: #9C4F22; --color-border: #E3D5C0; --color-heading: #332E2A; --color-link: #9C4F22; --color-link-hover: #C1652E; --font-heading: 'Bree Serif', Georgia, serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --font-size-base: 17px; --font-size-sm: 15px; --font-size-h1: 2.4rem; --font-size-h2: 1.8rem; --font-size-h3: 1.35rem; --line-height-body: 1.7; --line-height-heading: 1.25; --para-max: 68ch; --space-section: 3rem; --radius: 8px; } /* ── Base ── */ :root *, :root *::before, :root *::after { box-sizing: border-box; } :root body { font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-body); color: var(--color-text); background-color: var(--color-bg); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* ── Links ── */ :root a { color: var(--color-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } :root a:hover, :root a:focus { color: var(--color-link-hover); border-color: var(--color-link-hover); outline: none; } /* ── Headings ── */ :root h1, :root h2, :root h3, :root h4, :root h5, :root h6 { font-family: var(--font-heading); font-weight: 400; line-height: var(--line-height-heading); color: var(--color-heading); margin-top: 1.8em; margin-bottom: 0.5em; } :root h1 { font-size: var(--font-size-h1); } :root h2 { font-size: var(--font-size-h2); } :root h3 { font-size: var(--font-size-h3); } :root h4 { font-size: 1.15rem; } /* ── Body copy ── */ :root p { max-width: var(--para-max); margin-top: 0; margin-bottom: 1.4em; } :root ul, :root ol { max-width: var(--para-max); padding-left: 1.6em; margin-bottom: 1.4em; } :root li { margin-bottom: 0.45em; } :root ul li::marker { color: var(--color-accent); } /* ── Blockquote — "nota de sábado" ── */ :root blockquote { max-width: var(--para-max); margin: 2rem 0; padding: 1.2rem 1.6rem; border-left: 3px solid var(--color-accent); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-text); line-height: 1.55; } :root blockquote p { max-width: none; margin: 0; } :root blockquote cite { display: block; margin-top: 0.8rem; font-family: var(--font-body); font-style: normal; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); } /* ── HR ── */ :root hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; } /* ── Site header ── */ :root .site-header { background-color: var(--color-primary); padding: 1.5rem 2rem 1.2rem; border-bottom: 3px solid var(--color-accent); } :root .site-title, :root .site-title a { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 400; color: #FBF6EF; border-bottom: none; } :root .site-title a:hover { color: var(--color-accent); border-bottom: none; } :root .site-description { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 300; color: rgba(251,246,239,.7); letter-spacing: 0.03em; margin-top: 0.4rem; margin-bottom: 0; } /* ── Navigation ── */ :root .main-navigation { background-color: var(--color-primary); padding: 0 2rem 1rem; } :root .main-navigation a { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.03em; color: rgba(251,246,239,.8); padding: 0.2rem 0; border-bottom: none; margin-right: 1.6rem; } :root .main-navigation a:hover, :root .main-navigation .current-menu-item > a { color: var(--color-accent); border-bottom: none; } /* ── Content layout ── */ :root .site-content { max-width: 840px; margin: 2.5rem auto; padding: 0 1.5rem; } :root #primary { max-width: 100%; } /* ── Entry ── */ :root .entry-header { padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.8rem; } :root .entry-title { font-family: var(--font-heading); font-size: var(--font-size-h1); font-weight: 400; line-height: 1.15; color: var(--color-heading); margin-top: 0; margin-bottom: 0.6rem; } :root .entry-title a { color: var(--color-heading); border-bottom: none; } :root .entry-title a:hover { color: var(--color-accent); border-bottom: none; } :root .entry-meta { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 300; color: var(--color-text-muted); letter-spacing: 0.02em; } :root .entry-meta a { color: var(--color-text-muted); border-bottom: 1px dotted var(--color-border); } :root .entry-content { font-size: var(--font-size-base); line-height: var(--line-height-body); } /* Cinnamon underline on h2 inside content */ :root .entry-content h2::after { content: ''; display: block; width: 3.5rem; height: 3px; background: var(--color-accent); margin-top: 0.6rem; } /* ── Images ── */ :root .entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.5rem 0; } :root .entry-content figcaption { font-size: 13px; font-weight: 300; font-style: italic; color: var(--color-text-muted); margin-top: 0.5rem; text-align: center; } /* ── Code ── */ :root code { font-size: 0.9em; background: var(--color-surface); padding: 0.15em 0.4em; border-radius: 4px; } /* ── Widget ── */ :root .widget { margin-bottom: 2rem; padding: 1.2rem; background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); } :root .widget-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; letter-spacing: 0.03em; color: var(--color-primary); border-bottom: 2px solid var(--color-accent); padding-bottom: 0.4rem; margin-top: 0; margin-bottom: 0.9rem; } :root .widget ul { list-style: none; padding-left: 0; margin: 0; } :root .widget li { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); } :root .widget li:last-child { border-bottom: none; } /* ── Pagination ── */ :root .page-numbers { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); padding: 0.4rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0.2rem; display: inline-block; transition: background 0.2s ease, color 0.2s ease; } :root .page-numbers.current, :root .page-numbers:hover { background: var(--color-primary); color: #FBF6EF; border-color: var(--color-primary); } /* ── Footer ── */ :root .site-footer { background-color: var(--color-primary); color: rgba(251,246,239,.7); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 300; text-align: center; padding: 2rem 1.5rem; margin-top: 3rem; border-top: 3px solid var(--color-accent); } :root .site-footer a { color: rgba(251,246,239,.85); border-bottom: 1px solid rgba(193,101,46,.4); } :root .site-footer a:hover { color: var(--color-accent); border-color: var(--color-accent); } /* ── Responsive ── */ @media (max-width: 640px) { :root body { font-size: 16px; } :root .site-content { padding: 0 1rem; margin: 1.5rem auto; } :root .site-header { padding: 1.2rem 1rem 1rem; } :root .main-navigation { padding: 0 1rem 0.8rem; } :root h1, :root .entry-title { font-size: 2rem; } :root h2 { font-size: 1.55rem; } :root h3 { font-size: 1.25rem; } } /* === R2 fixes (2026-07-07T04:10:08.485539+00:00) === */ /* Site title in the dark header was inheriting the near-black --color-heading from the generic ":root h1, h2, h3" rule, which outranks the theme's "header h1{color:#fff}". Restore light color with a selector specific enough to win regardless of the header title's markup (h1 or .site-title). */ :root header h1, :root header .site-title, :root header .site-title a { color: #FBF6EF; } /* === R3 fixes (2026-07-07T04:50:21.162898+00:00) === */ /* On interior pages the site name in
is a plain with no wrapping h1/.site-title, so it fell through to the generic link color (accent orange). Covering "header a" directly keeps it white regardless of markup, while more specific rules (.entry-meta a, .entry-title a, .main-navigation a) still win their own colors. */ :root header a { color: #FBF6EF; } /* The "entry-content" class doesn't exist in the real markup (content is wrapped in generated hash classes), so the old ".entry-content h2::after" rule never matched. Target any h2 inside
that isn't the very first child, so it still skips a title h2 on listing/front pages. */ :root article > * + h2::after { content: ''; display: block; width: 3.5rem; height: 3px; background: var(--color-accent); margin-top: 0.6rem; } /* === R4 fixes (2026-07-07T05:30:14.751343+00:00) === */ /* H3 subheadings inside articles (e.g. "Cuidado con los dientes y la sensibilidad") had no accent mark, so next to an H2 with its underline they looked unfinished when scanning down the page. Same treatment, slightly smaller, to signal it's one level down from H2. */ :root article > * + h3::after { content: ''; display: block; width: 2.75rem; height: 2px; background: var(--color-accent); margin-top: 0.5rem; } /* === QA round-1 fixes (2026-07-25T13:03:51+0800) === */ /* Live build (mi-rincon-peludo.pages.dev) is the Astro/"bold" template: real classes are frame-9831a2 / frame-84c10d / panel-f8fc6e — NOT .site-header / .entry-content, so the class rules above are inert on the deployed page. The concat also drops both webfont @imports (fallback fonts), and the middle "Theme" layer is a stale green/orange config (#2D5A27/#FF8C42) — the "green masthead" QA flagged. Rebuilt with @font-face + element/structural selectors on the graphite-canela palette. */ /* Real fonts, declared as @font-face so concat can't strip them. Display voice: Fraunces (warm editorial serif, real italic). Text + meta voice: Nunito Sans. latin + latin-ext cover Spanish. */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8oRcTn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv8oRcTnaIM.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8oRcTn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c1qv8oRcTnaIM.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9mv0iQublWII.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9mvMiQublWIIkfg.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/nunitosans/v19/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-tQKr51.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* Tokens: adopt Fraunces as the display/heading voice; keep graphite-canela. Paw monogram (Higo & Almendra) as reusable data-URI in three tints. */ :root{ --font-display: 'Fraunces', Georgia, serif; --font-heading: 'Fraunces', Georgia, serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --color-accent-light: #E6A468; --paw-canela: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%3E%3Cg%20fill='%23C1652E'%3E%3Cellipse%20cx='7'%20cy='9.5'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='12'%20cy='6.5'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='17.5'%20cy='6.7'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='22.5'%20cy='9.8'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='14.7'%20cy='16.5'%20rx='6'%20ry='5'/%3E%3C/g%3E%3C/svg%3E"); --paw-cream: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%3E%3Cg%20fill='%23FBF6EF'%3E%3Cellipse%20cx='7'%20cy='9.5'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='12'%20cy='6.5'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='17.5'%20cy='6.7'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='22.5'%20cy='9.8'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='14.7'%20cy='16.5'%20rx='6'%20ry='5'/%3E%3C/g%3E%3C/svg%3E"); --paw-pale: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2024'%3E%3Cg%20fill='%23EAD9C2'%3E%3Cellipse%20cx='7'%20cy='9.5'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='12'%20cy='6.5'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='17.5'%20cy='6.7'%20rx='2.5'%20ry='3.2'/%3E%3Cellipse%20cx='22.5'%20cy='9.8'%20rx='2.4'%20ry='3'/%3E%3Cellipse%20cx='14.7'%20cy='16.5'%20rx='6'%20ry='5'/%3E%3C/g%3E%3C/svg%3E"); } /* ══ MASTHEAD — shared photo band on BOTH templates (gotcha: style the shared
unconditionally; per-template deltas come from h1 vs a). ══ */ :root header{ background-image: linear-gradient(105deg, rgba(26,19,14,.93) 0%, rgba(40,29,21,.66) 55%, rgba(40,29,21,.42) 100%), url("/theme-assets/hero-masthead.jpg"); background-color:#241b15; background-size:cover; background-position:50% 42%; background-repeat:no-repeat; padding:3rem 0 2.6rem; margin-bottom:2.6rem; border-bottom:3px solid var(--color-accent); } /* Paw seal above the wordmark — the signature mark, on home and article alike. */ :root header > div::before{ content:""; display:block; width:30px; height:26px; margin-bottom:.55rem; background:left center/contain no-repeat var(--paw-cream); } :root header > div > h1{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--color-bg); font-size:clamp(1.9rem,5vw,2.8rem); line-height:1.05; letter-spacing:-.01em; margin:0; } /* Kicker above the wordmark (home only — article masthead is wordmark-only). */ :root header > div > h1::before{ content:"DIARIO DE SÁBADO · SEVILLA"; display:block; font-family:var(--font-body); font-style:normal; font-weight:700; font-size:.68rem; letter-spacing:.26em; color:var(--color-accent-light); margin-bottom:.5rem; } /* Manifesto line under the wordmark. */ :root header > div > p{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.02rem; line-height:1.5; color:rgba(251,246,239,.82); max-width:54ch; margin:.7rem 0 0; letter-spacing:0; } /* Article-page wordmark link. */ :root header > div > a{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--color-bg); font-size:1.5rem; border-bottom:none; } :root header > div > a:hover{ color:var(--color-accent-light); } /* ══ HOMEPAGE — hero → editor's picks band → chronological grid. Home
is the ONLY one whose article cards carry

(article pages' h2 have no link), so this guard never touches an article page. ══ */ :root main:has(> article > h2 > a){ display:grid; grid-template-columns:repeat(6,1fr); column-gap:30px; row-gap:0; max-width:990px; margin:0 auto 1rem; padding:0 20px; } /* Base card — quiet, consistent (the default rhythm). */ :root main:has(> article > h2 > a) > article{ grid-column:span 3; position:relative; margin:0; border-bottom:none; border-top:1px solid var(--color-border); padding:1.5rem 0 .3rem; } :root main:has(> article > h2 > a) > article > h2{ font-family:var(--font-display); font-weight:600; font-size:1.16rem; line-height:1.25; margin:0 0 .45rem; } :root main:has(> article > h2 > a) > article > h2 > a{ color:var(--color-heading); border-bottom:none; } :root main:has(> article > h2 > a) > article > h2 > a:hover{ color:var(--color-accent-dark); } :root main:has(> article > h2 > a) > article > p:nth-of-type(1){ font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 .5rem; max-width:none; } :root main:has(> article > h2 > a) > article > p:nth-of-type(2){ font-size:.92rem; line-height:1.55; color:#5f574e; margin:0 0 .8rem; max-width:none; } /* Read More → quiet uppercase cue (HTML text is English "Read More →"; zero the original and reprint in Spanish). Demoted from the old canela link so canela stops repeating 20+ times and becomes a scarce moment. */ :root main:has(> article > h2 > a) > article > a{ font-size:0; border-bottom:none; } :root main:has(> article > h2 > a) > article > a::after{ content:"Leer \2192"; font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); } :root main:has(> article > h2 > a) > article > a:hover::after{ color:var(--color-accent-dark); } /* — HERO (card 1): the loud voice — full width, big italic title, drop-cap excerpt, byline, outlined pill CTA, pale paw watermark filling the right. */ :root main:has(> article > h2 > a) > article:first-of-type{ grid-column:1 / -1; border-top:none; border-bottom:2px solid var(--color-border); padding:2rem 2rem 2.3rem; margin-bottom:.6rem; background:right 8px top 10px / 128px auto no-repeat var(--paw-pale); } :root main:has(> article > h2 > a) > article:first-of-type::before{ content:"LA ÚLTIMA ENTRADA DEL SÁBADO"; display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent); margin-bottom:.7rem; } :root main:has(> article > h2 > a) > article:first-of-type > h2{ font-size:clamp(1.9rem,4.6vw,2.9rem); line-height:1.08; margin-bottom:.6rem; max-width:19ch; } :root main:has(> article > h2 > a) > article:first-of-type > p:nth-of-type(1){ color:var(--color-primary); font-size:.74rem; } :root main:has(> article > h2 > a) > article:first-of-type > p:nth-of-type(1)::after{ content:" · POR PILAR"; color:var(--color-accent-dark); } :root main:has(> article > h2 > a) > article:first-of-type > p:nth-of-type(2){ font-size:1.06rem; line-height:1.6; color:var(--color-text); max-width:58ch; } :root main:has(> article > h2 > a) > article:first-of-type > p:nth-of-type(2)::first-letter{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:3.4em; line-height:.72; float:left; margin:.06em .12em 0 0; color:var(--color-accent); } :root main:has(> article > h2 > a) > article:first-of-type > a{ display:inline-block; font-size:0; margin-top:.3rem; border:1.5px solid var(--color-accent); border-radius:2rem; padding:.5rem 1.3rem; transition:background .2s ease; } :root main:has(> article > h2 > a) > article:first-of-type > a::after{ content:"Leer la entrada \2192"; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-dark); } :root main:has(> article > h2 > a) > article:first-of-type > a:hover{ background:var(--color-accent); } :root main:has(> article > h2 > a) > article:first-of-type > a:hover::after{ color:#fff; } /* — EDITOR'S PICKS band (cards 2–4): a real change of gear — three surface cards with a kicker label anchored above the leftmost. */ :root main:has(> article > h2 > a) > article:nth-of-type(n+2):nth-of-type(-n+4){ grid-column:span 2; margin-top:3.4rem; border-top:none; border-radius:var(--radius); background:var(--color-surface); border:1px solid var(--color-border); padding:1.15rem 1.1rem 1.2rem; } :root main:has(> article > h2 > a) > article:nth-of-type(n+2):nth-of-type(-n+4) > h2{ font-size:1.04rem; } :root main:has(> article > h2 > a) > article:nth-of-type(2)::before{ content:"LO QUE LEERÍA PRIMERO"; position:absolute; left:0; bottom:calc(100% + .75rem); white-space:nowrap; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent); } /* — CHRONOLOGICAL grid (cards 5+): two-up, hairline row dividers. Section label anchored above the first chronological row. */ :root main:has(> article > h2 > a) > article:nth-of-type(5), :root main:has(> article > h2 > a) > article:nth-of-type(6){ margin-top:3.6rem; } :root main:has(> article > h2 > a) > article:nth-of-type(5)::before{ content:"EL RESTO DE LOS SÁBADOS"; position:absolute; left:0; bottom:calc(100% + .95rem); white-space:nowrap; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent); } /* A lone trailing card fills the row instead of leaving the right column empty. */ :root main:has(> article > h2 > a) > article:last-child:nth-of-type(odd){ grid-column:1 / -1; } /* Home ends with a "popular"
    — a non-article grid child. Span it full width (otherwise it collapses into one narrow column) and label it. */ :root main:has(> article > h2 > a) > section{ grid-column:1 / -1; margin-top:1.4rem; } :root main:has(> article > h2 > a) > section::before{ content:"MÁS LEÍDO ESTA TEMPORADA"; display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent); margin-bottom:1rem; } :root main:has(> article > h2 > a) > section > ul{ grid-template-columns:1fr 1fr 1fr; } /* ══ ARTICLE PAGE ══ */ /* Massive serif title (only article pages have a direct main > h1). */ :root main > h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.01em; color:var(--color-heading); margin:.2rem 0 .4rem; } :root main > h1 + time{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--color-text-muted); } /* Drop cap on the opening paragraph (scoped to article pages via main:has(>time)). */ :root main:has(> time) > article > p:first-of-type::first-letter{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:3.2em; line-height:.72; float:left; margin:.06em .12em 0 0; color:var(--color-accent); } /* Section h2s: Fraunces + a small canela paw kicker above (dinkus), keeping the praised underline below (article > * + h2::after, defined earlier). */ :root main > article > * + h2{ font-family:var(--font-display); font-size:1.5rem; margin-top:2.5rem; } :root main > article > * + h2::before{ content:""; display:block; width:38px; height:13px; margin:0 0 1rem; background:left center/contain no-repeat var(--paw-canela); opacity:.85; } /* Inline links back to palette (kills the stray #FF8C42 orange). */ :root main > article a{ color:var(--color-link); } :root main > article a:hover{ color:var(--color-accent); } /* Affiliate deal links get a subtle, deliberate emphasis (prefix is /deal/). */ :root main > article a[href^="/deal/"]{ font-weight:700; color:var(--color-accent-dark); border-bottom:1px solid var(--color-accent); } /* Hanging quote on any blockquote. */ :root main > article blockquote{ padding-left:2.6rem; } :root main > article blockquote::before{ content:"\201C"; font-family:var(--font-display); font-style:italic; position:absolute; margin-left:-2.1rem; margin-top:-.3rem; font-size:3rem; line-height:1; color:var(--color-accent); opacity:.4; } /* Closing tip box (2nd of two