/*
Theme Name: TuFem Editorial
Theme URI: https://tufem.cl/
Description: Theme editorial responsive para TuFem, construido desde el sistema visual entregado.
Version: 1.0.0
Author: TuFem
Text Domain: tufem-editorial
*/
@import url('assets/tufem-tokens.css');
@import url('assets/tufem-system.css');

:root { --container: 1280px; --gutter: clamp(20px, 4vw, 40px); }
body { padding-bottom: 82px; background-image:url('assets/fondo-tufem-original.jpeg'); background-size:cover; background-position:center center; background-attachment:fixed; background-repeat:no-repeat; }
.skip { position:absolute; left:-9999px; top:auto; }
.skip:focus { left:var(--gutter); top:10px; z-index:100; background:var(--bg); padding:10px; }
.container { max-width:var(--container); }
.site-header { position:sticky; top:0; z-index:20; background:var(--fg); color:var(--bg); border-bottom:1px solid color-mix(in oklch,var(--bg) 24%,var(--fg)); }
.site-footer, .tufem-player { background-color:var(--bg); }
.site-header .brand-tag, .site-header .primary-nav a { color:var(--bg); }
.site-header .primary-nav a:hover, .site-header .primary-nav .current-menu-item a { color:var(--bg); text-decoration:underline; text-underline-offset:5px; }
.site-header .menu-toggle { color:var(--bg); border-color:color-mix(in oklch,var(--bg) 42%,var(--fg)); }
.site-header .menu-toggle:hover { border-color:var(--bg); }
.site-header .primary-nav .sub-menu { background:var(--fg); border-color:color-mix(in oklch,var(--bg) 24%,var(--fg)); }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:20px; font-weight:600; }
.brand img { width:132px; height:auto; background:var(--fg); padding:9px 12px; }
.brand-tag { color:var(--muted); font:12px var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.primary-nav { display:flex; align-items:center; gap:var(--gap-lg); }
.primary-nav ul { display:flex; align-items:center; gap:var(--gap-lg); list-style:none; margin:0; padding:0; }
.primary-nav li { position:relative; margin:0; padding:0; list-style:none; }
.primary-nav .sub-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:190px; padding:8px 0; background:var(--bg); border:1px solid var(--border); box-shadow:0 12px 30px color-mix(in oklch,var(--fg) 12%,transparent); }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { display:block; }
.primary-nav .sub-menu li { display:block; }
.primary-nav .sub-menu a { display:flex; width:100%; padding:10px 16px; white-space:nowrap; }
.primary-nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:14px; }
.primary-nav a:hover, .primary-nav .current-menu-item a { color:var(--fg); }
.menu-toggle { display:none; }
.issue-bar { border-bottom:1px solid var(--border); }
.issue-bar { background:var(--bg); }
.issue-bar .container { padding-block:12px; }
.issue-bar strong { font-family:var(--font-display); font-size:20px; }
.site-main { max-width:var(--container); margin-inline:auto; background:var(--bg); }
.site-main .section + .section { border-top:1px solid var(--border); }
.hero-split { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.hero-split figure { margin:0; }
.content-img { width:100%; height:auto; }
.section-title { margin-bottom:32px; }
.article-card h3 { font-family:var(--font-display); font-size:28px; margin-top:8px; }
.article-card a:hover h3 { color:var(--accent); }
.guide-cover { display:flex; flex-direction:column; justify-content:center; min-height:280px; padding:32px; background:var(--fg); color:var(--bg); }
.tufem-video-section { background:var(--bg); }
.tufem-video { margin:0; background:var(--fg); }
.tufem-video video { display:block; width:100%; max-height:620px; object-fit:cover; }
.tufem-video figcaption { padding:10px 0 0; background:var(--bg); }
.guide-cover h2 { margin:12px 0 32px; }
.audio-band { padding:32px; background:var(--surface); border:1px solid var(--border); }
.audio-band h2 { max-width:18ch; margin:8px 0; }
.tufem-legacy-ad { display:grid; grid-template-columns:1fr minmax(180px,260px); gap:32px; align-items:center; margin:40px 0; padding:28px; background:var(--surface); border:1px solid var(--border); }
.tufem-legacy-ad h2 { margin:8px 0 24px; }
.tufem-legacy-ad img { width:100%; height:auto; display:block; }
.site-main > .section:last-child .container { padding-block:24px; background:var(--surface); border:1px solid var(--border); }
.site-main > .section:last-child img { max-width:560px !important; width:100%; }
.site-main > .section:last-child .mini-label { color:var(--accent); }
.site-footer { border-top:1px solid var(--border); padding-block:40px; color:var(--muted); font-size:13px; }
.whatsapp-float { position:fixed; right:24px; bottom:96px; z-index:31; display:inline-flex; align-items:center; gap:8px; padding:12px 16px; background:#25d366; color:#073b1d; border:1px solid color-mix(in oklch,#073b1d 24%,#25d366); border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 8px 22px color-mix(in oklch,var(--fg) 18%,transparent); }
.whatsapp-float:hover { background:#1ebe5d; color:#073b1d; transform:translateY(-1px); text-decoration:none; }
.site-footer .row-between { flex-wrap:wrap; }
.tufem-player { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--bg); border-top:1px solid var(--fg); padding:12px 0; }
.tufem-player .container { display:flex; align-items:center; gap:16px; }
.player-info { min-width:0; flex:1; }
.player-info strong, .player-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-info small, #audio-status { color:var(--muted); font-size:12px; }
.tufem-player input { width:110px; accent-color:var(--accent); }
.article-layout { display:grid; grid-template-columns:minmax(0, var(--reading)) 260px; gap:clamp(32px,7vw,96px); justify-content:center; }
.article-heading { max-width:920px; }
.article-heading .entry-title { max-width:14ch; }
.article-dek { margin-top:24px; }
.article-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.article-featured-image { margin-block:0; }
.article-featured-image .content-img { max-height:680px; object-fit:cover; }
.article-featured-image figcaption { margin-top:10px; }
.article-body-section { padding-top:56px; }
.article-layout .entry-content > * { margin-inline:auto; }
.entry-header { margin-bottom:40px; }
.entry-header .entry-title { max-width:18ch; }
.entry-content { font-size:19px; }
.entry-content p { margin-block:1.2em; }
.entry-content img { margin-block:32px; }
.entry-content a { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.entry-sidebar { border-top:1px solid var(--fg); padding-top:16px; }
.entry-sidebar h2 { font-size:20px; }
.sidebar-note { margin-top:24px; }
.article-share { margin-top:24px; padding-inline:0; }
.article-pagination { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.article-pagination a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); }
.article-pagination a:hover { color:var(--fg); }
.article-pages { display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
@media (max-width:920px) { .hero-split, .article-layout { grid-template-columns:1fr; } .entry-sidebar { order:-1; } }
@media (max-width:700px) {
  .brand-tag { display:none; }
  .menu-toggle { display:inline-flex; }
  .primary-nav { display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav.is-open { display:flex; }
  .primary-nav ul { width:100%; flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav li { width:100%; }
  .primary-nav .sub-menu { position:static; display:block; min-width:0; padding:0 0 0 16px; border:0; box-shadow:none; }
  .site-header-inner { flex-wrap:wrap; }
  .primary-nav a { border-top:1px solid var(--border); }
  .audio-band { align-items:flex-start; flex-direction:column; }
  .tufem-legacy-ad { grid-template-columns:1fr; }
  .tufem-player .container { flex-wrap:wrap; gap:8px 12px; }
  .whatsapp-float { right:16px; bottom:132px; padding:10px 13px; font-size:13px; }
  #audio-status, .tufem-player label { display:none; }
}