/*
Theme Name: Hello Stranger
Description: Tema de bloques para Hello Stranger, productora audiovisual.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: hello-stranger
*/
:root{--hs-ink:#14130f;--hs-paper:#f4f2ed;--hs-accent:#b4442a;--hs-gutter:clamp(16px,4vw,48px);--hs-secy:clamp(48px,8vw,112px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%;height:auto}
a{text-underline-offset:3px}
.wp-site-blocks>*{margin-block-start:0!important}
.hs-ph{background:repeating-linear-gradient(135deg,#e6e2d8 0 12px,#ece9e0 12px 24px);aspect-ratio:16/10;width:100%}

/* Loader y progreso */
#hs-loader{position:fixed;inset:0;z-index:100;background:var(--hs-ink);color:var(--hs-paper);display:flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--serif);font-size:clamp(32px,6vw,72px);letter-spacing:-.02em;animation:hsFail 0s 5s forwards}
#hs-loader img{max-height:80px;width:auto}
@keyframes hsFail{to{visibility:hidden}}
#hs-prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--hs-accent);z-index:90}

/* Header */
header.wp-block-template-part{position:sticky;top:0;z-index:30}
.hs-header{background:var(--hs-ink);color:var(--hs-paper);padding:34px var(--hs-gutter);min-height:104px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.hs-header a{color:var(--hs-paper);text-decoration:none}
.hs-header a:hover{opacity:.75}
.hs-header .wp-block-navigation .current-menu-item>a,.hs-header .wp-block-navigation .current_page_item>a{border-bottom:1px solid var(--hs-paper)}
.hs-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--hs-ink);color:var(--hs-paper)}
.hs-brand{font-family:var(--wp--preset--font-family--serif);font-size:30px;letter-spacing:-.01em}
.hs-brand img{max-height:44px;width:auto;display:block}
.hs-right{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.hs-lang{list-style:none;display:flex;gap:10px;margin:0;padding:0;font-family:var(--wp--preset--font-family--mono);font-size:13px;text-transform:uppercase}

/* Secciones */
.hs-sec{padding:var(--hs-secy) var(--hs-gutter);border-top:1px solid rgba(20,19,15,.13);scroll-margin-top:100px}
.hs-sec--reel{border:0;padding:var(--hs-gutter) var(--hs-gutter) 0}
.hs-sec--projects{border:0;padding-top:clamp(24px,4vw,48px)}
.hs-sec h2{font-family:var(--wp--preset--font-family--serif);font-weight:400;font-size:clamp(40px,7vw,96px);letter-spacing:-.03em;line-height:1;margin:0 0 32px}
.hs-reel{display:block;width:100%;aspect-ratio:21/9;min-height:220px;object-fit:cover}

/* Grillas: todos los elementos con el mismo tamaño */
.hs-grid{display:grid;gap:32px 24px;grid-template-columns:repeat(auto-fit,minmax(max(200px,calc((100% - 72px)/4)),1fr))}
.hs-grid--people{grid-template-columns:repeat(auto-fit,minmax(max(160px,calc((100% - 96px)/5)),1fr))}
.hs-grid--news{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.hs-grid>*{min-width:0}
.hs-card,.hs-news{display:block;color:inherit;text-decoration:none}
.hs-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e6e2d8}
.hs-thumb>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.hs-thumb img{transition:filter .4s}
.hs-thumb video{opacity:0;transition:opacity .25s}
.hs-card:hover video{opacity:1}
.hs-card:hover .hs-thumb img,.hs-news:hover .hs-thumb img{filter:brightness(.9) contrast(1.05)}
.hs-thumb--p{aspect-ratio:4/5}
.hs-thumb--n{aspect-ratio:3/2}
.hs-card-title{margin-top:10px;font-weight:500}
.hs-role{font-size:15px}
.hs-news time{display:block;font-family:var(--wp--preset--font-family--mono);font-size:12px;margin:10px 0 4px}
.hs-news h3{font-family:var(--wp--preset--font-family--serif);font-weight:400;font-size:24px;line-height:1.15;margin:0}
.hs-news:hover h3{color:var(--hs-accent)}
.hs-sentinel{height:80px;display:flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--mono);font-size:13px}

/* Podcast en el home */
.hs-pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px clamp(24px,4vw,64px)}
.hs-pf-imgs{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e6e2d8}
.hs-pf-img{position:absolute;inset:0;opacity:0;transition:opacity .6s}.hs-pf-img.is-on{opacity:1}
.hs-pf-img img,.hs-pf-img .hs-ph{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.hs-pf-rows{display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--hs-ink)}
.hs-pf-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:1px solid var(--hs-ink);padding:clamp(20px,3vw,36px) 0;color:var(--hs-ink);text-decoration:none;transition:color .3s}
.hs-pf-row span{font-family:var(--wp--preset--font-family--serif);font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:-.02em}
.hs-pf-row small{font-family:var(--wp--preset--font-family--mono);font-size:13px}
.hs-pf-row.is-on{color:var(--hs-accent)}

/* Podcast: página */
.hs-prow{display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,64px);align-items:center;border-top:1px solid var(--hs-ink);padding:clamp(24px,4vw,48px) 0}
.hs-prow .hs-thumb{flex:1.4 1 360px;aspect-ratio:16/9}
.hs-prow-info{flex:1 1 260px;min-width:0;display:grid;gap:16px;justify-items:start}
.hs-prow-info p{font-size:20px;max-width:34ch;margin:0}
.hs-mono{font-family:var(--wp--preset--font-family--mono);font-size:13px}
.hs-link{color:var(--hs-ink);text-decoration:none;border-bottom:1px solid var(--hs-ink);padding-bottom:2px}
.hs-link:hover{color:var(--hs-accent);border-color:var(--hs-accent)}

/* Servicios */
.hs-srv{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,2fr);gap:12px 24px;border-top:1px solid var(--hs-ink);padding:20px 0}
.hs-srv h3{font-family:var(--wp--preset--font-family--serif);font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1.1;margin:0}
.hs-srv p{margin:0;max-width:56ch}
@media(max-width:640px){.hs-srv{grid-template-columns:40px minmax(0,1fr)}.hs-srv p{grid-column:1/-1}}

/* Hero de páginas (imagen destacada) */
.hs-hero{position:relative;height:clamp(280px,58vh,680px);overflow:hidden;margin:0!important;background:#e6e2d8}
.hs-hero img{position:absolute;left:0;top:-12%;width:100%!important;height:124%!important;object-fit:cover}
.hs-about{padding:var(--hs-secy) var(--hs-gutter);text-align:center;font-size:clamp(20px,2.2vw,28px);line-height:1.4}
.hs-about>*{max-width:62ch;margin-left:auto;margin-right:auto}

/* Contacto */
.hs-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px clamp(24px,4vw,64px);border-top:1px solid var(--hs-ink);padding-top:20px}
.hs-contact-col{display:grid;gap:32px;align-content:start}
.hs-contact-col a{color:var(--hs-ink)}.hs-contact-col a:hover{color:var(--hs-accent)}
.hs-mails{display:grid;gap:6px;font-size:20px}
.hs-social{display:flex;gap:24px;font-size:18px}
.hs-map{min-height:min(70vw,520px);height:100%;background:#e6e2d8;z-index:0}
.leaflet-tile-pane{filter:grayscale(1) contrast(1.05)}

/* Proyecto / podcast / nota individual */
.hs-single{padding:clamp(16px,4vw,48px) var(--hs-gutter) var(--hs-secy)}
.hs-back{display:inline-block;color:var(--hs-ink);margin-bottom:16px;font-size:15px}
.hs-embed{aspect-ratio:16/9;margin:24px 0}.hs-embed iframe{width:100%;height:100%;border:0}
.hs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;border-top:1px solid var(--hs-ink);padding-top:16px;margin:32px 0}
.hs-meta b{display:block;font-family:var(--wp--preset--font-family--mono);font-size:12px;font-weight:400}

/* Footer */
.hs-footer{background:var(--hs-ink);color:var(--hs-paper);padding:clamp(48px,7vw,96px) var(--hs-gutter) 28px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.hs-footer a{color:var(--hs-paper)}.hs-footer a:hover{text-decoration:underline}
.hs-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px 32px}
.hs-fcol{display:grid;gap:8px;align-content:start;font-size:18px}
.hs-lab{font-family:var(--wp--preset--font-family--mono);font-size:12px}
.hs-flogo{max-height:96px;max-width:240px;width:auto}
.hs-logo-ph{height:96px;max-width:240px;border:1px dashed rgba(244,242,237,.55);display:flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--mono);font-size:13px}
.hs-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-family:var(--wp--preset--font-family--mono);font-size:13px;border-top:1px solid rgba(244,242,237,.27);padding-top:20px}