/* ==========================================================================
   Hoolistic Web Toolkit · Escena de scroll
   Titulares y texto heredan las fuentes del tema; aquí solo van las de los
   trazos (Caveat) y las etiquetas monoespaciadas (DM Mono), servidas en local.
   ========================================================================== */

@font-face{font-family:"HWT Hand";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/caveat-600-latin.woff2") format("woff2")}
@font-face{font-family:"HWT Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-mono-400-latin.woff2") format("woff2")}

.hwt-scene{
	--hwt-ink:#1d1b20;
	--hwt-ink-2:#6b6870;
	--hwt-rule:#dcdad6;
	--hwt-stroke:#1d1b20;
	--hwt-bg:#f5f5f5;
	--hwt-gutter:clamp(16px,6vw,88px);
	--hwt-k:1;
	--hwt-hand:"HWT Hand","Bradley Hand",cursive;
	--hwt-mono:"HWT Mono",ui-monospace,Menlo,monospace;
	position:relative;
	height:calc(var(--hwt-len,3) * 100vh);
	color:var(--hwt-ink);
}

/* ---------- modo oscuro del tema ----------
   Osty cambia <body data-theme="light"> por "dark" con su interruptor. Se usan sus
   propias variables de color para que el widget cambie a la vez que la página.
   Los trazos no cambian: van sobre las fotos, que siguen siendo claras. */
body[data-theme="dark"] .hwt-scene,
html[data-theme="dark"] .hwt-scene{
	--hwt-ink:var(--color-contrast-higher,#f5f5f5);
	--hwt-ink-2:var(--color-contrast-medium,#929292);
	--hwt-rule:var(--color-contrast-low,#3a3838);
	--hwt-bg:var(--color-bg,#242323);
}
.hwt-scene__title,.hwt-scene__desc,.hwt-scene__num,.hwt-scene__kicker,.hwt-scene__list li,.hwt-scene__more,.hwt-scene__n,.hwt-scene__rule,.hwt-scene__visual{transition:color .3s ease,background-color .3s ease}

/* ---------- escenario fijo (escritorio) ---------- */
.hwt-scene__stage{
	position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
	gap:clamp(24px,5vw,80px);padding:clamp(24px,6vh,64px) var(--hwt-gutter);align-items:center;
	box-sizing:border-box;
}
.admin-bar .hwt-scene__stage{top:32px;height:calc(100vh - 32px)}

/* ---------- texto ---------- */
.hwt-scene__copy{display:grid;gap:clamp(8px,1.6vh,16px);max-width:34rem;align-content:center}
.hwt-scene__kicker{margin:0;font-family:var(--hwt-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hwt-ink-2)}
.hwt-scene__num{display:block;font-weight:300;font-size:clamp(3.2rem,12vh,8rem);line-height:.8;letter-spacing:-.04em;color:var(--hwt-ink)}
.hwt-scene .hwt-scene__title{margin:0;color:var(--hwt-ink);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,6.4vh,3.8rem);line-height:1;letter-spacing:-.01em}
.hwt-scene--intro .hwt-scene__title{font-size:clamp(2.2rem,7.4vh,4.4rem)}
.hwt-scene__desc{margin:0;font-size:clamp(.96rem,2vh,1.08rem);line-height:1.55;max-width:52ch;color:var(--hwt-ink)}
.hwt-scene__list{list-style:none;margin:0;padding:0;display:grid}
.hwt-scene__list li{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:baseline;margin:0;padding:clamp(4px,1vh,10px) 0;font-size:clamp(.88rem,1.8vh,1rem);opacity:.14}
.hwt-scene__list li::before{content:none}
.hwt-scene__list a{color:inherit;text-decoration:none}
.hwt-scene__list a:hover{text-decoration:underline;text-underline-offset:3px}
.hwt-scene__n{font-family:var(--hwt-mono);font-size:.7rem;color:var(--hwt-ink-2)}
.hwt-scene__rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hwt-rule);transform-origin:0 50%;transform:scaleX(0)}
.hwt-scene__more{font-family:var(--hwt-mono);font-size:.8rem;color:var(--hwt-ink);text-decoration:none;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:1px}
.hwt-scene a:focus-visible{outline:2px solid var(--hwt-ink);outline-offset:3px}

/* ---------- visual ---------- */
.hwt-scene__visual{position:relative;align-self:stretch;min-height:0;container-type:size;display:grid;place-items:center}
.hwt-scene__frame{position:relative;margin:0;height:min(100cqh,125cqw);aspect-ratio:4/5;max-width:100%;overflow:hidden;container-type:inline-size;border-radius:14px;background:#ddd}
.hwt-scene__frame picture,.hwt-scene__frame .hwt-scene__img{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;max-width:none}
.hwt-scene__frame .hwt-scene__img{object-fit:cover;will-change:transform}
.hwt-scene__svg{
	position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;overflow:visible;
	transform:translate(var(--hwt-ox,0%),var(--hwt-oy,0%)) scale(var(--hwt-os,1));transform-origin:50% 50%;
}
.hwt-scene__svg--m{visibility:hidden}
.hwt-scene__svg .ink{fill:none;stroke:var(--hwt-stroke);stroke-width:calc(3.2px * var(--hwt-k));stroke-linecap:round;stroke-linejoin:round}
.hwt-scene__svg .mk{fill:none;stroke:var(--hwt-stroke);stroke-width:calc(5px * var(--hwt-k));stroke-linecap:round;stroke-linejoin:round}
.hwt-scene__svg .thin{fill:none;stroke:var(--hwt-stroke);stroke-width:calc(2px * var(--hwt-k));stroke-linecap:round;stroke-linejoin:round}
/* Tiza sobre la pantalla apagada (diseño web): siempre clara, va sobre el cristal oscuro. */
.hwt-scene__svg .chalk{fill:none;stroke:#f3efe6;stroke-width:calc(2.2px * var(--hwt-k));stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.hwt-scene__svg .bold{stroke-width:calc(4.5px * var(--hwt-k))}
.hwt-scene__svg .cursor{fill:#f3efe6;stroke:#1d1b20;stroke-width:1.6;stroke-linejoin:round}
.hwt-scene__svg .hand{font-family:var(--hwt-hand);font-weight:600;fill:var(--hwt-stroke)}
.hwt-scene__svg .mono{font-family:var(--hwt-mono);fill:var(--hwt-stroke)}
.hwt-scene__svg .tag-bg{fill:var(--hwt-stroke)}
.hwt-scene__svg .tag-txt{font-family:var(--hwt-mono);fill:#f5f5f5;letter-spacing:.04em}

/* recortes de ruido (comunicación) */
.hwt-scene__scraps{position:absolute;inset:0;z-index:3;pointer-events:none}
.hwt-scene__scrap{position:absolute;white-space:nowrap;will-change:transform,opacity;box-shadow:0 6px 14px -8px rgba(0,0,0,.45);line-height:1;color:#111}
.hwt-scene__scrap--news{background:#f1ede4;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:6cqw;padding:.25em .4em}
.hwt-scene__scrap--black{background:#111;color:#f5f5f5;font-weight:700;font-size:4.6cqw;padding:.3em .5em;text-transform:uppercase}
.hwt-scene__scrap--mono{background:#f1ede4;font-family:var(--hwt-mono);font-size:3.4cqw;padding:.5em .7em;text-transform:uppercase;letter-spacing:.08em}
.hwt-scene__scrap--stamp{background:#f5f5f5;border:2px solid #111;font-weight:700;font-size:5cqw;padding:.2em .4em;text-transform:uppercase}

/* polaroids (entrada) */
.hwt-scene__pols{position:relative;height:min(100cqh,125cqw);aspect-ratio:4/5;max-width:100%}
.hwt-scene__pol{position:absolute;width:52%;margin:0;background:#fdfdfc;padding:3.2% 3.2% 12%;box-sizing:border-box;box-shadow:0 2px 3px rgba(0,0,0,.08),0 24px 40px -18px rgba(0,0,0,.35);will-change:transform,opacity}
.hwt-scene__pol--1{left:0;top:-2%;--hwt-r:-7deg}
.hwt-scene__pol--2{left:46%;top:4%;--hwt-r:5deg}
.hwt-scene__pol--3{left:3%;top:46%;--hwt-r:4deg}
.hwt-scene__pol--4{left:47%;top:52%;--hwt-r:-4deg}
.hwt-scene__pol-img{position:relative;aspect-ratio:1;overflow:hidden;background:#2e3a39}
.hwt-scene__pol img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.hwt-scene__pol-dev{position:absolute;inset:0;background:#2e3a39}
.hwt-scene__pol figcaption{position:absolute;left:0;right:0;bottom:2.5%;text-align:center;font-family:var(--hwt-hand);font-weight:600;font-size:clamp(1.1rem,4.4cqw,1.8rem);color:#1d1b20}

/* ---------- móvil: foto horizontal fija arriba, texto con scroll normal ---------- */
@media (max-width:860px){
	.hwt-scene{--hwt-k:1.5;height:auto}
	.hwt-scene__stage{position:relative;top:auto;height:auto;overflow:visible;display:flex;flex-direction:column;padding:0}
	.admin-bar .hwt-scene__stage{top:auto;height:auto}
	.hwt-scene__visual{flex:none;position:sticky;z-index:2;height:auto;display:block;container-type:normal;padding:12px var(--hwt-gutter);background:var(--hwt-bg)}
	.hwt-scene__frame{width:100%;height:auto;max-width:none;aspect-ratio:4/3;border-radius:10px}
	.hwt-scene__svg--d{visibility:hidden}
	.hwt-scene__svg--m{visibility:visible}
	.hwt-scene__pols{height:auto;width:min(60vw,240px);margin:0 auto 34%}
	.hwt-scene__pol figcaption{font-size:1.05rem}
	.hwt-scene__copy{max-width:none;gap:12px}
	.hwt-scene__num{display:none}
	.hwt-scene .hwt-scene__title,.hwt-scene--intro .hwt-scene__title{font-size:clamp(1.7rem,7.5vw,2.4rem)}
	.hwt-scene__desc{font-size:.95rem}
	.hwt-scene__list li{font-size:.92rem;padding:8px 0;opacity:1}
	.hwt-scene__list li .hwt-scene__rule{transform:none}

	/* Foto abajo (por defecto): el texto sube por encima y la cabecera fija del tema no la tapa. */
	.hwt-scene--m-bottom .hwt-scene__visual{order:2;top:auto;bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
	.hwt-scene--m-bottom .hwt-scene__visual::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(to bottom,transparent,var(--hwt-bg));pointer-events:none}
	.hwt-scene--m-bottom .hwt-scene__copy{padding:28px var(--hwt-gutter) var(--hwt-m-gap,10svh);min-height:calc(45svh + var(--hwt-m-gap,10svh));box-sizing:border-box}
	.hwt-scene--m-bottom .hwt-scene__pols{margin:4% auto 30%}

	/* Foto arriba: se fija bajo la cabecera del tema (margen configurable). */
	.hwt-scene--m-top .hwt-scene__stage{min-height:140svh}
	.hwt-scene--m-top .hwt-scene__visual{order:-1;top:var(--hwt-m-offset,0px)}
	.hwt-scene--m-top .hwt-scene__copy{padding:22px var(--hwt-gutter) var(--hwt-m-gap,16svh)}
}

/* ---------- sin animaciones ---------- */
@media (prefers-reduced-motion:reduce){
	.hwt-scene__list li{opacity:1}
	.hwt-scene__rule{transform:none}
}

/* ---------- editor de Elementor ---------- */
.elementor-editor-active .hwt-scene__stage{top:0}