/* Datos curiosos: tarjeta del dato del día (portada y página /curiosidades/) y la página con todos los datos.
   Alcance .zf (la portada usa además home.css). Mismo negro, lima y chili del sitio; Oswald para titulares e Inter para texto. */
@font-face{font-family:"Mal Display";font-style:normal;font-weight:300 700;font-display:swap;src:local("Oswald"),url("/wp-content/uploads/zumbo-maldito/fonts/oswald-latin.woff2") format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+0100-017F,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+2248,U+2260,U+2264-2265,U+FEFF,U+FFFD}

.zf,.zh{
  --zk-bg:#0b0b0b;--zk-ink:#fff4e6;--zk-text:rgba(255,244,230,.88);--zk-mute:#aaa39a;--zk-lime:#c8f060;--zk-limeh:#d8f67e;--zk-chili:#ff5b2e;
  --zk-card:#141414;--zk-card2:#1b1b1b;--zk-line:#262626;--zk-line2:#3a3a3a;--zk-on-lime:#161a09;--c:22px;
  --zk-disp:"Mal Display",Oswald,"Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --zk-body:Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
  color:var(--zk-ink);font-family:var(--zk-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:dark
}
.zf *,.zf *::before,.zf *::after,.zh *,.zh *::before,.zh *::after{box-sizing:border-box}
.zf :where(h1,h2,h3,p,ul,ol,li,figure,blockquote),.zh :where(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0}
.zf :where(ul,ol),.zh :where(ul,ol){list-style:none}
.zf :focus-visible,.zh :focus-visible{outline:3px solid var(--zk-lime);outline-offset:3px}
.zf [hidden],.zh [hidden]{display:none!important}
.zf .zi,.zh .zi{vertical-align:-.28em}

/* ---------- tarjeta del dato (esquina cortada con pliegue lima, como el emblema del logotipo) ---------- */
.zf-card{position:relative;color:var(--zk-ink)}
.zf-card::after{content:"";position:absolute;right:0;bottom:0;width:var(--c);height:var(--c);background:var(--zk-lime);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
.zf-card__in{position:relative;display:flex;flex-direction:column;gap:1.05rem;padding:clamp(1.3rem,3vw,2.1rem) clamp(1.3rem,3vw,2.1rem) clamp(1.3rem,3vw,2rem) clamp(1.5rem,3.2vw,2.4rem);background:var(--zk-card);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.zf-card__in::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--zk-chili)}
.zf-card__in::after{content:"";position:absolute;right:0;top:0;width:150px;height:110px;pointer-events:none;background:radial-gradient(circle,rgba(200,240,96,.2) 1.3px,transparent 1.7px) 0 0/9px 9px;-webkit-mask:linear-gradient(225deg,#000,transparent 72%);mask:linear-gradient(225deg,#000,transparent 72%)}
.zf-kicker{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.9rem;line-height:1.2;color:var(--zk-mute)}
.zf-cat{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--zk-lime)}
.zf-cat .zi{font-size:1.3rem}
.zf-card[data-cat="anime"] .zf-cat{color:var(--zk-chili)}
.zf-swap{position:relative;z-index:1;display:flex;flex-direction:column;gap:.8rem;transition:opacity .2s ease,transform .2s ease}
.zf-card.is-out .zf-swap{opacity:0;transform:translateY(8px)}
.zf-h{font:700 clamp(1.45rem,2.7vw,2.1rem)/1.12 var(--zk-disp);letter-spacing:.005em;color:#fff;text-wrap:balance}
.zf-p{font-size:clamp(1rem,1.5vw,1.075rem);line-height:1.62;color:var(--zk-text);max-width:62ch;text-wrap:pretty}
.zf-src{font-size:.86rem;line-height:1.5;color:var(--zk-mute)}
/* El tema colorea los enlaces de <main> (.wp-site-blocks main a): los de aquí llevan un prefijo de clase más para ganarle en especificidad. */
:is(.zf,.zh) .zf-src a{color:var(--zk-lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
:is(.zf,.zh) .zf-src a:hover{color:#fff}
.zf-src a .zi{font-size:.95em;margin-left:.15em}
.zf-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-top:.2rem}
/* sin JavaScript no hay «otro dato» que pedir */
.zf-card:not([data-zf-js]) [data-zf="next"]{display:none}
/* mientras el script elige el dato del día, el texto espera (si el script no llega, aparece solo a los 1,2 s) */
.zf-card[data-zf-state="boot"] .zf-swap{opacity:0;animation:zf-show .01s 1.2s forwards}
@keyframes zf-show{to{opacity:1}}

/* ---------- botones: paralelogramo lima (el texto no se inclina), como en Anime Fit ---------- */
:is(.zf,.zh) :is(.zf-btn,.zh-btn){position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.65rem 1.5rem;border:0;background:none;color:var(--zk-on-lime);font:700 1rem/1.1 var(--zk-body);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .15s}
:is(.zf-btn,.zh-btn)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--zk-lime);transform:skewX(-10deg);transition:background .15s,box-shadow .15s}
:is(.zf-btn,.zh-btn):hover::before{background:var(--zk-limeh);box-shadow:0 0 0 2px var(--zk-chili)}
:is(.zf-btn,.zh-btn):active{transform:translateY(1px)}
:is(.zf-btn,.zh-btn) .zi{font-size:1.15em}
:is(.zf,.zh) .zf-btn--ghost{color:var(--zk-ink)}
.zf-btn--ghost::before{background:transparent!important;box-shadow:inset 0 0 0 2px var(--zk-line2)!important}
:is(.zf,.zh) .zf-btn--ghost:hover{color:#fff}
.zf-btn--ghost:hover::before{box-shadow:inset 0 0 0 2px var(--zk-lime)!important}
:is(.zf,.zh) .zf-more{display:inline-flex;align-items:center;gap:.45rem;color:var(--zk-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--zk-line2);padding-bottom:.1rem;transition:color .15s,border-color .15s}
:is(.zf,.zh) .zf-more:hover{color:var(--zk-lime);border-color:var(--zk-lime)}
.zf-more .zi{font-size:1.1em;transition:transform .15s}
.zf-more:hover .zi{transform:translateX(3px)}

/* ---------- página /curiosidades/ ---------- */
.zf-wrap{max-width:1180px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) 1.5rem clamp(3rem,6vw,5rem)}
.zf-page{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
.zf-side{display:flex;flex-direction:column;gap:1.4rem}
.zf-side h1{font:700 clamp(2.1rem,4.6vw,3.3rem)/1 var(--zk-disp);text-transform:uppercase;letter-spacing:.004em;color:#fff;text-wrap:balance}
.zf-lead{font-size:1.075rem;line-height:1.6;color:var(--zk-text);max-width:34rem}
.zf-filter{display:flex;flex-wrap:wrap;gap:.55rem}
.zf-chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem .5rem .9rem;border:0;background:var(--zk-card2);box-shadow:inset 0 0 0 1px var(--zk-line2);color:var(--zk-ink);font:600 .95rem/1 var(--zk-body);cursor:pointer;touch-action:manipulation;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);transition:background .15s,color .15s}
.zf-chip .zi{font-size:1.15em}
.zf-chip small{font-size:.78rem;font-weight:600;color:var(--zk-mute)}
.zf-chip:hover{background:#252525}
.zf-chip[aria-pressed="true"]{background:var(--zk-lime);color:var(--zk-on-lime);box-shadow:none}
.zf-chip[aria-pressed="true"] small{color:rgba(22,26,9,.7)}
.zf-note{font-size:.88rem;line-height:1.55;color:var(--zk-mute);max-width:30rem}
.zf-main{display:flex;flex-direction:column;gap:2.2rem;min-width:0}
.zf-h2{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem;font:700 1.5rem/1.2 var(--zk-disp);letter-spacing:.005em;color:#fff}
.zf-list{display:flex;flex-direction:column}
.zf-item{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 1rem;padding:1.35rem 0;border-top:1px solid var(--zk-line);scroll-margin-top:6rem}
.zf-item:last-child{border-bottom:1px solid var(--zk-line)}
.zf-item[data-cat="cocina"] .zf-ico{color:var(--zk-lime)}
.zf-item[data-cat="anime"] .zf-ico{color:var(--zk-chili)}
.zf-ico{font-size:1.55rem;margin-top:.1rem}
.zf-item h3{font:700 clamp(1.15rem,2vw,1.4rem)/1.2 var(--zk-disp);letter-spacing:.005em;color:#fff;text-wrap:balance}
.zf-item p{margin-top:.45rem;font-size:1rem;line-height:1.62;color:var(--zk-text);max-width:66ch}
.zf-item .zf-src{margin-top:.55rem;font-size:.85rem;color:var(--zk-mute)}
.zf-item:target{background:linear-gradient(90deg,rgba(200,240,96,.08),transparent 70%)}
.zf-count{font:500 .9rem/1 var(--zk-body);letter-spacing:0;color:var(--zk-mute)}
@media (min-width:920px){
  .zf-page{grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
  .zf-side{position:sticky;top:6.5rem}
}
@media (prefers-reduced-motion:reduce){
  .zf-swap,.zf-btn,.zh-btn,.zf-more,.zf-more .zi{transition:none}
  .zf-card.is-out .zf-swap{transform:none}
}
@media print{.zf-actions,.zf-filter{display:none}}