.punta-managed-category-page .content-page, .punta-managed-category-page main.punta-category-template { width:100%; max-width:none; margin:0; padding:0; } .punta-category-template, .punta-category-template *, .punta-category-template *::before, .punta-category-template *::after { box-sizing:border-box; } .punta-category-archive { --surface: color-mix(in srgb, var(--punta-bg) 94%, var(--punta-search-bg)); --surface-soft: color-mix(in srgb, var(--punta-accent) 6%, var(--punta-bg)); --border: color-mix(in srgb, var(--punta-text) 13%, transparent); --muted: color-mix(in srgb, var(--punta-text) 64%, transparent); --shadow-soft: 0 8px 24px rgba(15,23,42,.07); --shadow: 0 18px 44px rgba(15,23,42,.12); color:var(--punta-text); background:var(--punta-bg); width:100%; } .punta-category-archive a { color:inherit; text-decoration:none; } .punta-category-archive img { display:block; width:100%; height:100%; object-fit:cover; margin:0; } .punta-category-hero { position:relative; min-height:390px; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; background: radial-gradient(circle at 80% 20%, color-mix(in srgb,var(--punta-accent) 34%,transparent), transparent 44%), linear-gradient(135deg,var(--punta-header-bg),color-mix(in srgb,var(--punta-header-bg) 70%,#000)); } .punta-category-hero-media { position:absolute; inset:0; z-index:-3; } .punta-category-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; } .punta-category-hero-shade { position:absolute; inset:0; z-index:-2; background: linear-gradient(to top,rgba(7,12,20,.76) 0%,rgba(7,12,20,.64) 58%,rgba(7,12,20,.60) 100%), radial-gradient(circle at 50% 45%,rgba(7,12,20,.10),rgba(7,12,20,.28)); } .punta-category-hero.no-image .punta-category-hero-shade { background:linear-gradient(135deg,color-mix(in srgb,var(--punta-header-bg) 90%,#000),color-mix(in srgb,var(--punta-accent) 42%,var(--punta-header-bg))); } .punta-category-hero-inner { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:72px 0 50px; color:#fff; text-align:center; } .punta-category-parent-label { display:inline-flex; align-items:center; margin:0 auto 12px; padding:7px 10px; border:1px solid rgba(255,255,255,.23); border-radius:999px; background:rgba(0,0,0,.18); backdrop-filter:blur(4px); color:rgba(255,255,255,.9)!important; text-decoration:none!important; font-size:.75rem; font-weight:760; letter-spacing:.04em; transition:background-color .18s ease,border-color .18s ease,transform .18s ease; } .punta-category-parent-label:hover { color:#fff!important; background:rgba(0,0,0,.32); border-color:rgba(255,255,255,.42); transform:translateY(-1px); } .punta-category-parent-label:focus-visible { color:#fff!important; outline:3px solid rgba(255,255,255,.78); outline-offset:3px; } .punta-category-hero h1 { max-width:950px; margin:0 auto; color:#fff!important; font-size:clamp(2.35rem,5vw,4.8rem)!important; line-height:.98!important; letter-spacing:-.045em; font-weight:780; text-wrap:balance; text-shadow:0 3px 22px rgba(0,0,0,.32); } .punta-category-hero-meta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:18px; color:rgba(255,255,255,.84); font-size:.92rem; font-weight:650; } .punta-category-content { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:36px 0 72px; } .punta-category-description { max-width:980px; margin:0 0 42px; padding:0 0 30px; border-bottom:1px solid var(--border); color:var(--punta-text); font-size:1.04rem; line-height:1.72; } .punta-category-description > :first-child { margin-top:0; } .punta-category-description > :last-child { margin-bottom:0; } .punta-category-description a { color:var(--punta-accent); text-decoration:underline; text-underline-offset:3px; } .punta-category-section-heading { margin:0 0 18px; } .punta-category-section-heading h2 { margin:5px 0 0; color:var(--punta-heading); font-size:clamp(1.65rem,1.25rem + 1vw,2.35rem); line-height:1.08; letter-spacing:-.025em; } .punta-category-eyebrow { display:inline-block; color:var(--punta-accent); font-size:.72rem; font-weight:820; letter-spacing:.12em; text-transform:uppercase; } .punta-category-related { margin:0 0 52px; } .punta-category-related--after-posts { margin:56px 0 0; padding-top:44px; border-top:1px solid var(--border); } .punta-category-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .punta-category-related-card { min-width:0; display:grid; grid-template-columns:56px minmax(0,1fr) 18px; gap:12px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-soft); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .punta-category-related-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--punta-accent) 38%,var(--border)); box-shadow:var(--shadow); } .punta-category-related-icon { width:56px; height:56px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:var(--surface-soft); color:var(--punta-accent); font-weight:800; } .punta-category-related-icon img { width:100%; height:100%; object-fit:cover; } .punta-category-related-copy { min-width:0; } .punta-category-related-copy strong { display:block; overflow-wrap:anywhere; color:var(--punta-heading); font-size:.93rem; line-height:1.22; } .punta-category-related-copy small { display:block; margin-top:4px; color:var(--muted); font-size:.76rem; } .punta-category-related-arrow { color:var(--punta-accent); font-weight:800; } .punta-category-posts { margin-top:0; } .punta-category-section-heading--posts { margin-bottom:20px; } .punta-category-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; } .punta-category-post-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-soft); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .punta-category-post-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--punta-accent) 28%,var(--border)); box-shadow:var(--shadow); } .punta-category-post-link { display:flex; flex-direction:column; height:100%; } .punta-category-post-media { position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--punta-accent) 17%,var(--surface-soft)),var(--surface)); } .punta-category-post-media img { transition:transform .22s ease; } .punta-category-post-card:hover .punta-category-post-media img { transform:scale(1.025); } .punta-category-post-media.is-empty { display:grid; place-items:center; } .punta-category-media-fallback { color:var(--punta-accent); font-size:2rem; opacity:.7; } .punta-category-post-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; min-width:0; padding:18px 18px 20px; } .punta-category-post-topic { display:inline-block; max-width:100%; margin:0 0 10px; padding:5px 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; background:color-mix(in srgb,var(--punta-accent) 10%,var(--punta-bg)); color:var(--punta-accent); font-size:.71rem; line-height:1.1; font-weight:780; } .punta-category-post-body h2 { margin:0; color:var(--punta-heading); font-size:1.08rem; line-height:1.3; letter-spacing:-.012em; overflow-wrap:anywhere; } .punta-category-post-body p { margin:10px 0 0; color:var(--muted); font-size:.91rem; line-height:1.55; } .punta-category-readmore { display:inline-flex; gap:7px; align-items:center; margin-top:auto; padding-top:16px; color:var(--punta-accent); font-size:.84rem; font-weight:760; } .punta-category-pagination { margin-top:38px; } .punta-category-pagination .nav-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .punta-category-pagination .page-numbers { min-width:42px; min-height:42px; display:inline-grid; place-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface)!important; color:var(--punta-text)!important; font-weight:720; } .punta-category-pagination .page-numbers.current, .punta-category-pagination a.page-numbers:hover { border-color:var(--punta-accent); background:var(--punta-accent)!important; color:var(--punta-on-image)!important; } .punta-category-empty { padding:26px; border:1px dashed var(--border); border-radius:16px; background:var(--surface-soft); color:var(--muted); } .punta-category-archive a:focus-visible { outline:3px solid color-mix(in srgb,var(--punta-accent) 72%,transparent); outline-offset:3px; border-radius:8px; } @media (max-width:980px) { .punta-category-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .punta-category-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px) { .punta-category-hero { min-height:330px; } .punta-category-hero-inner, .punta-category-content { width:min(100% - 32px,1180px); } .punta-category-hero-inner { padding:58px 0 34px; } .punta-category-hero h1 { font-size:clamp(2.1rem,11vw,3.35rem)!important; } .punta-category-content { padding-top:28px; padding-bottom:54px; } .punta-category-description { margin-bottom:34px; font-size:.98rem; line-height:1.65; } .punta-category-related { margin-bottom:40px; } .punta-category-related--after-posts { margin-top:42px; padding-top:34px; } .punta-category-related-grid { grid-template-columns:1fr; } .punta-category-related-card { grid-template-columns:50px minmax(0,1fr) 18px; } .punta-category-related-icon { width:50px; height:50px; } .punta-category-post-grid { grid-template-columns:1fr; gap:16px; } .punta-category-post-link { display:grid; grid-template-columns:128px minmax(0,1fr); } .punta-category-post-media { min-height:100%; aspect-ratio:auto; } .punta-category-post-body { padding:15px; } .punta-category-post-body p { display:none; } } @media (max-width:410px) { .punta-category-post-link { grid-template-columns:108px minmax(0,1fr); } .punta-category-post-topic { max-width:170px; } } @media (prefers-reduced-motion:reduce) { .punta-category-related-card, .punta-category-post-card, .punta-category-post-media img { transition:none!important; } } @media (forced-colors:active) { .punta-category-hero-shade { background:CanvasText; opacity:.6; } .punta-category-related-card, .punta-category-post-card, .punta-category-pagination .page-numbers { border:1px solid CanvasText; } } .punta-category-hero h1, .punta-category-section-heading h2, .punta-category-post-body h2 { background:transparent!important; background-image:none!important; padding:0!important; width:auto!important; max-width:100%; border:0!important; border-radius:0!important; box-shadow:none!important; } .punta-category-hero h1 { color:#fff!important; } .punta-category-section-heading h2, .punta-category-post-body h2 { color:var(--punta-heading)!important; } .punta-category-archive .punta-category-post-link, .punta-category-archive .punta-category-post-link:is(:hover,:focus,:active,:visited) { background:transparent!important; background-image:none!important; color:inherit!important; box-shadow:none!important; text-decoration:none!important; } .punta-category-archive .punta-category-related-card, .punta-category-archive .punta-category-related-card:is(:hover,:focus,:active,:visited) { background:var(--surface)!important; background-image:none!important; color:var(--punta-text)!important; text-decoration:none!important; } .punta-category-archive .punta-category-parent-label, .punta-category-archive .punta-category-parent-label:visited { background:rgba(0,0,0,.18)!important; color:rgba(255,255,255,.9)!important; } .punta-category-archive .punta-category-parent-label:hover, .punta-category-archive .punta-category-parent-label:focus { background:rgba(0,0,0,.32)!important; color:#fff!important; } .punta-category-bottom-description.the-content.content-category { width:100%!important; max-width:980px!important; margin:52px 0 0!important; padding:42px 0 0!important; border-top:1px solid var(--border); color:var(--punta-text); overflow:visible; } .punta-category-bottom-description > :first-child { margin-top:0; } .punta-category-bottom-description > :last-child { margin-bottom:0; } @media (max-width:680px) { .punta-category-bottom-description.the-content.content-category { margin-top:40px!important; padding-top:32px!important; } }