/* HFS prototype — reusable components (mirror of React DS components) */
/* chips */
.chip{display:inline-block;font-weight:600;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;padding:5px 12px;border-radius:var(--radius-pill);transition:filter var(--motion-fast) var(--ease-out)}
.chip:hover{filter:brightness(.94)}
.chip-diario{background:var(--cat-diario);color:var(--cat-diario-deep)}
.chip-hablemos{background:var(--cat-hablemos);color:var(--cat-hablemos-deep)}
.chip-historias{background:var(--cat-historias);color:var(--text-onberry)}
.chip-explora{background:var(--cat-explora);color:var(--cat-explora-deep)}
.chip-tag{background:var(--surface-card);color:var(--text-soft);border:1px solid var(--hfs-line-strong);padding:4px 11px}
.chip-tag:hover{color:var(--action-link)}
.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--text-caption);color:var(--text-meta)}
/* photo print */
.print{background:var(--hfs-paper);padding:8px;border-radius:3px;box-shadow:var(--shadow-print);transition:all var(--motion-base) var(--ease-paper)}
.print img{width:100%;height:100%;object-fit:cover;border-radius:1px}
/* article cards */
.card{position:relative;display:flex;flex-direction:column;gap:14px}
.card .print{aspect-ratio:3/2;overflow:hidden}
.card:hover .print{transform:translateY(-3px) rotate(-.7deg);box-shadow:var(--shadow-lift)}
.card h3 a,.card h2 a{color:var(--text-body);text-decoration:none;background-image:linear-gradient(var(--hfs-berry),var(--hfs-berry));background-repeat:no-repeat;background-position:0 96%;background-size:0 2px;transition:background-size var(--motion-base) var(--ease-out)}
.card:hover h3 a,.card:hover h2 a,.card h3 a:focus-visible,.card h2 a:focus-visible{background-size:100% 2px}
.card .excerpt{color:var(--text-soft);font-size:var(--text-small);line-height:1.6;max-width:52ch}
.card-annot{position:absolute;top:-16px;right:6px;font-family:var(--font-hand);font-size:1.35rem;color:var(--hfs-berry);transform:rotate(-4deg);z-index:var(--z-content)}
.card-feature{flex-direction:row;gap:40px;align-items:center}
.card-feature .print{flex:1.25;aspect-ratio:3/2}
.card-feature .card-body{flex:1}
.card-feature h2{font-size:var(--text-h1)}
.card-feature .excerpt{font-size:var(--text-lead)}
.card-compact{flex-direction:row;gap:16px;align-items:center}
.card-compact .print{width:86px;flex-shrink:0;aspect-ratio:1/1;padding:4px}
.card-compact h3{font-size:var(--text-h4)}
.card-body{display:flex;flex-direction:column;gap:12px}
.badge-pod{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:700;color:var(--hfs-berry)}
/* category portal */
.cat-card{display:flex;flex-direction:column;gap:12px;padding:24px 22px 18px;border-radius:var(--radius-md);text-decoration:none;box-shadow:var(--shadow-print);transition:all var(--motion-base) var(--ease-paper);position:relative}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.cat-card img.ico{width:24px;height:24px;opacity:.85;filter:invert(.3) sepia(.3)}
.cat-card h3{font-size:var(--text-h3)}
.cat-card .desc{font-size:var(--text-caption);opacity:.85}
.cat-card .count{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:700;opacity:.75;margin-top:6px}
.cat-diario{background:var(--cat-diario);color:var(--cat-diario-deep)}
.cat-hablemos{background:var(--cat-hablemos);color:var(--cat-hablemos-deep)}
.cat-historias{background:var(--cat-historias);color:var(--text-onberry)}
.cat-historias img.ico{filter:invert(.95)}
.cat-explora{background:var(--cat-explora);color:var(--cat-explora-deep)}
/* paper notes */
.note{font-family:var(--font-hand);font-size:var(--text-hand);line-height:1.35;padding:18px 20px 16px;max-width:320px;position:relative}
.note-taped{background:var(--hfs-paper);box-shadow:var(--shadow-print);border-radius:2px}
.note-taped::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(2deg);width:64px;height:18px;background:rgba(246,222,150,.75);box-shadow:var(--shadow-tape)}
.note-sticky{background:var(--surface-sun);box-shadow:var(--shadow-tape)}
.note-torn{background:var(--surface-blush);box-shadow:var(--shadow-print);clip-path:polygon(0 0,100% 0,100% 88%,92% 100%,74% 92%,55% 100%,36% 91%,18% 100%,0 90%);padding-bottom:28px}
/* pull quote + verse */
.pullquote{font-family:var(--font-display);font-style:italic;font-size:var(--text-quote);line-height:1.3;position:relative;padding-left:26px;margin:0}
.pullquote::before{content:"“";position:absolute;left:0;top:-.18em;font-size:2.4em;color:var(--hfs-berry);font-style:normal;line-height:1}
.hl{background:linear-gradient(transparent 55%,var(--hfs-sun-soft) 55%,var(--hfs-sun-soft) 92%,transparent 92%)}
.verse-card{max-width:560px;background:var(--hfs-paper);box-shadow:var(--shadow-lift);border-radius:3px;padding:34px 38px 28px;position:relative;margin:0}
.verse-card::before{content:"";position:absolute;top:-9px;left:38px;width:58px;height:17px;background:rgba(246,222,150,.75);box-shadow:var(--shadow-tape);transform:rotate(-3deg)}
.verse-card .cross{position:absolute;top:16px;right:20px;color:var(--hfs-ink-faint);font-size:14px}
.verse-card blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:var(--text-quote);line-height:1.4}
.verse-card figcaption{margin-top:14px;font-family:var(--font-hand);font-size:1.25rem;color:var(--hfs-berry)}
/* episode panels */
.ep{display:flex;flex-wrap:wrap;gap:22px;background:var(--surface-card);color:var(--text-body);border:1px solid var(--hfs-line);border-radius:var(--radius-md);box-shadow:var(--shadow-print);padding:18px;position:relative;overflow:hidden;transition:all var(--motion-base) var(--ease-out)}
.ep:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.ep-art{flex-shrink:0;width:110px;align-self:center;position:relative}
.ep-art .frame{aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:var(--hfs-petal);position:relative}
.ep-art img{width:100%;height:100%;object-fit:cover}
.ep-art .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;transition:background var(--motion-fast) var(--ease-out)}
.ep-art .play span{width:44px;height:44px;border-radius:50%;background:var(--hfs-paper);color:var(--hfs-berry);display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-float);font-size:16px}
.ep:hover .ep-art .play{background:rgba(58,42,40,.35)}
.ep:hover .ep-art .play span{display:flex}
.ep-body{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.ep-num{font-family:var(--font-display);font-style:italic;font-size:var(--text-h4);color:var(--hfs-berry)}
.ep h3{font-size:var(--text-h3);line-height:1.2}
.ep h3 a{color:inherit;text-decoration:none}
.ep .sum{font-size:var(--text-small);line-height:1.55;color:var(--text-soft)}
.ep-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto;font-size:var(--text-caption);color:var(--text-meta)}
.ep-meta a{font-weight:600}
.ep-featured{background:var(--podcast-panel);color:var(--podcast-panel-text);border:none}
.ep-featured .ep-num{color:var(--podcast-wave)}
.ep-featured .sum{color:color-mix(in srgb,var(--podcast-panel-text) 75%,transparent)}
.ep-featured .ep-meta{color:color-mix(in srgb,var(--podcast-panel-text) 60%,transparent)}
.ep-featured .ep-art{width:150px}
.ep-art button.play{border:none;padding:0;font:inherit;cursor:pointer}
.ep-art button.play:focus-visible span{display:flex}
.ep-art button.play.is-playing span{display:flex}
.episode-description summary{cursor:pointer;font-weight:700;color:var(--action-link)}
.episode-description>div{display:flex;flex-direction:column;gap:14px;margin-top:18px;color:var(--text-soft)}
.episode-description ul,.episode-description ol{padding-left:1.25rem}
.episode-list{display:flex;flex-direction:column;gap:18px;max-width:880px}
[data-episode-item][hidden]{display:none}
.episode-pagination-shell{max-width:880px;margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.episode-pagination-shell[hidden]{display:none}
.episode-pagination-status{font-size:var(--text-caption);color:var(--text-meta)}
.episode-page-numbers{display:contents}
/* waveform */
.wave{display:flex;align-items:center;gap:3px;height:30px;align-self:flex-end}
.wave span{width:3px;border-radius:2px;background:var(--podcast-wave)}
.ep:hover .wave span{animation:hfsWave 1.1s infinite ease-in-out alternate}
.wave span:nth-child(2n){animation-delay:.12s}.wave span:nth-child(3n){animation-delay:.22s}
@keyframes hfsWave{from{transform:scaleY(.5)}to{transform:scaleY(1.15)}}
/* platform pills */
.plat{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-caption);text-decoration:none;color:var(--text-body);border:1.5px solid var(--hfs-line-strong);transition:all var(--motion-fast) var(--ease-out)}
.plat img{width:16px;height:16px;filter:invert(.25) sepia(.2)}
.plat:hover{background:var(--action-primary);color:var(--text-onberry);border-color:transparent}
.plat:hover img{filter:invert(1)}
.plat-inverse{color:var(--podcast-panel-text);border-color:rgba(243,233,226,.35)}
.plat-inverse img{filter:invert(.92)}
/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--text-small);font-weight:600}
.field .req{color:var(--hfs-berry)}
.input,.select,.textarea{width:100%;font-family:var(--font-body);font-size:var(--text-body-size);color:var(--text-body);background:var(--surface-card);padding:12px 16px;border:1.5px solid var(--hfs-line-strong);border-radius:var(--radius-sm);transition:border-color var(--motion-fast) var(--ease-out)}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--focus-ring)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--state-error)}
.field .hint{font-size:var(--text-caption);color:var(--text-meta)}
.field .error{font-size:var(--text-caption);color:var(--state-error);font-weight:600}
.form-success{background:var(--state-success-bg);color:var(--state-success);border-radius:var(--radius-md);padding:18px 22px;font-weight:600}
/* pagination */
.pagination{display:flex;gap:8px;align-items:center}
.page-btn{min-width:44px;height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:600;font-size:var(--text-small);text-decoration:none;color:var(--text-body);background:transparent;border:1.5px solid var(--hfs-line-strong);cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.page-btn:hover{background:var(--surface-blush);color:var(--text-body)}
.page-btn:active{transform:scale(.97)}
.page-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.page-btn.active{background:var(--hfs-ink);color:var(--surface-page);border-color:var(--hfs-ink)}
.page-btn.disabled,.page-btn:disabled{opacity:.4;pointer-events:none}
/* social */
.social{display:flex;gap:10px}
.social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:1.5px solid var(--hfs-line-strong);transition:all var(--motion-fast) var(--ease-out)}
.social a img{width:20px;height:20px;filter:invert(.25) sepia(.2)}
.social a:hover{background:var(--action-primary);transform:translateY(-2px) rotate(-3deg)}
.social a:hover img{filter:invert(1)}
.social.inverse a{border-color:rgba(243,233,226,.3)}
.social.inverse a img{filter:invert(.92)}
[data-theme="dark"] .social a img,[data-theme="dark"] .plat img,[data-theme="dark"] .cat-card img.ico{filter:invert(.85)}
/* stamp */
.stamp{display:inline-flex;align-items:center;justify-content:center;border:2px dashed var(--hfs-red);color:var(--hfs-red);border-radius:2px;font-weight:700;font-size:10px;letter-spacing:.08em;padding:8px 10px;transform:rotate(6deg)}

/* persistent native podcast player */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.has-podcast-player{padding-bottom:116px}
body.has-minimized-player{padding-bottom:78px}
.podcast-player{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);background:var(--podcast-panel);color:var(--podcast-panel-text);border-top:3px solid var(--podcast-wave);box-shadow:0 -12px 34px rgba(58,42,40,.18);padding-bottom:env(safe-area-inset-bottom)}
.podcast-player[hidden]{display:none}
.podcast-player-message{position:absolute;right:var(--gutter);bottom:calc(100% + 8px);max-width:min(28rem,calc(100vw - 2 * var(--gutter)));padding:9px 13px;border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-body);font-size:var(--text-caption);box-shadow:var(--shadow-lift)}
.podcast-player-message[hidden]{display:none}
.podcast-player-inner{width:min(100%,var(--width-wide));min-height:108px;margin:0 auto;padding:14px var(--gutter);display:grid;grid-template-columns:64px minmax(150px,1fr) 54px minmax(260px,1.7fr) auto;gap:14px;align-items:center}
.podcast-player-art{width:64px;height:64px;display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-petal);box-shadow:var(--shadow-print)}
.podcast-player-art img{width:100%;height:100%;display:block;object-fit:cover}
.podcast-player-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.podcast-player-copy a{min-width:0;color:inherit;text-decoration:none}
.podcast-player-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:1.08rem;line-height:1.25}
.podcast-player-copy>span:last-child{font-size:var(--text-caption);color:color-mix(in srgb,var(--podcast-panel-text) 62%,transparent)}
.podcast-player-index-row{display:flex;align-items:center;gap:8px;min-width:0}
.podcast-player-index{flex-shrink:0;padding:2px 6px;border-radius:var(--radius-sm);background:var(--podcast-wave);color:var(--text-onberry);font-size:.65rem;font-weight:800;letter-spacing:.04em}
.podcast-player-show{font-size:.65rem;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--podcast-wave);font-weight:700}
.podcast-player-play{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--podcast-wave);color:var(--text-onberry);font:inherit;font-size:1rem;cursor:pointer;box-shadow:var(--shadow-print);transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.podcast-player-play:hover{background:var(--action-primary-hover);transform:scale(1.04)}
.podcast-player-play:active,.podcast-player-icon:active,.podcast-player-speed:active{transform:scale(.96)}
.podcast-player-progress{display:grid;grid-template-columns:42px minmax(120px,1fr) 50px;gap:10px;align-items:center;font-variant-numeric:tabular-nums;font-size:var(--text-caption)}
.podcast-player-progress span:last-child{text-align:right}
.podcast-player input[type="range"]{width:100%;accent-color:var(--podcast-wave);cursor:pointer}
.podcast-player-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.podcast-player-volume{display:flex;align-items:center;gap:7px;font-size:.7rem;color:color-mix(in srgb,var(--podcast-panel-text) 72%,transparent)}
.podcast-player-volume input{width:82px!important}
.podcast-player-speed,.podcast-player-icon{height:38px;min-width:38px;border:1px solid color-mix(in srgb,var(--podcast-panel-text) 24%,transparent);border-radius:var(--radius-sm);background:transparent;color:var(--podcast-panel-text);font:inherit;font-size:var(--text-caption);font-weight:700;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.podcast-player-icon{font-size:1.25rem;font-weight:400}
.podcast-player-speed:hover,.podcast-player-icon:hover{background:color-mix(in srgb,var(--podcast-panel-text) 10%,transparent)}
.podcast-player button:focus-visible,.podcast-player input:focus-visible,.podcast-player a:focus-visible{outline:2px solid var(--podcast-wave);outline-offset:3px}
.podcast-player.is-minimized .podcast-player-inner{min-height:70px;grid-template-columns:48px minmax(160px,1fr) 44px auto;padding-block:9px}
.podcast-player.is-minimized .podcast-player-art{width:48px;height:48px}
.podcast-player.is-minimized .podcast-player-progress,.podcast-player.is-minimized .podcast-player-volume,.podcast-player.is-minimized .podcast-player-speed{display:none}
.podcast-player.is-minimized .podcast-player-play{width:42px;height:42px}