:root{--day:#fbf8f0;--night:#0e0e0e;--bg:var(--day);--fg:#111;--soft:#6a665e}
html.noche{--bg:var(--night);--fg:#f7f4ee;--soft:#9a968e}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);transition:background .8s,color .8s}
body{font:19px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
main{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:3vw;max-width:1240px;width:100%;margin:0 auto;padding:32px}
.emblema{display:block;width:100%;max-width:620px;aspect-ratio:1100/1375;justify-self:end;position:relative;border:0;padding:0;background:none;cursor:pointer}
.emblema img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .8s}
.emblema .n{opacity:0}html.noche .emblema .d{opacity:0}html.noche .emblema .n{opacity:1}
.emblema{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.emblema:focus:not(:focus-visible){outline:none}.emblema:focus-visible{outline:2px solid var(--fg);outline-offset:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
h1{font-family:Futura,"Futura PT","Century Gothic","Avenir Next",sans-serif;font-weight:700;font-size:clamp(46px,6.4vw,92px);line-height:1;letter-spacing:-.01em;margin-bottom:28px}
.sub{font-size:21px;max-width:28ch;margin-bottom:28px}
.mail{color:var(--soft)}.mail a{color:var(--fg);font-weight:600}
[data-noche]{display:none}html.noche [data-dia]{display:none}html.noche [data-noche]{display:revert}
footer{position:relative;z-index:1;font-size:13px;color:var(--soft);padding:20px 32px 26px;max-width:1240px;width:100%;margin:0 auto;display:flex;justify-content:space-between}
.simple{display:block;max-width:760px}
.texto h1{font-size:clamp(40px,5vw,64px)}
.texto h2{font-family:Futura,"Century Gothic","Avenir Next",sans-serif;font-size:22px;margin:32px 0 6px}
.texto p,.texto li{color:var(--soft)}.texto ul{padding-left:1.1em}
.volver{display:inline-block;margin-bottom:40px;font-weight:600;text-decoration:none}
/* móvil (punto 5 v2, 2026-11-01): póster de una pantalla sobre un eje central. Arriba el emblema (la ventana),
   el titular y el texto; la franja de abajo queda libre para el mundo (de día el parche de luz con la gata,
   de noche la cordillera y las medusas). Alturas en svh para que la composición sea la del primer pantallazo. */
@media (max-width:760px){
body{min-height:100svh;font-size:16px}
main{grid-template-columns:1fr;align-content:start;justify-items:center;text-align:center;gap:0;padding:max(28px,6.5svh) 24px 0}
.emblema{--w:min(60vw,26.5svh,300px);width:var(--w);max-width:none;justify-self:center;margin-bottom:calc(var(--w) * -.07)}
main>div{display:flex;flex-direction:column;align-items:center}
h1{font-size:clamp(34px,10.6vw,48px);line-height:1.02;margin:0 0 14px}
.sub{font-size:17px;line-height:1.45;max-width:30ch;margin-bottom:14px;text-wrap:balance}
.mail{font-size:15px;line-height:1.5}
footer{font-size:12px;padding:14px 24px max(16px,env(safe-area-inset-bottom))}
}
/* celular en horizontal (2026-11-01): dos columnas, el emblema manda por el alto de la pantalla y todo cabe sin scroll */
@media (orientation:landscape) and (max-height:500px){
body{min-height:100svh;font-size:15px}
main{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-content:center;gap:max(24px,5vw);padding:12px max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));max-width:900px}
.emblema{--w:calc((100svh - 64px) / 1.25);width:var(--w);max-width:none;justify-self:end;margin:0}
main>div{display:block}
h1{font-size:clamp(28px,9svh,40px);line-height:1.02;margin:0 0 12px}
.sub{font-size:15px;line-height:1.45;max-width:34ch;margin-bottom:12px;text-wrap:balance}
.mail{font-size:14px}
footer{font-size:11px;padding:6px max(28px,env(safe-area-inset-right)) 10px max(28px,env(safe-area-inset-left))}
}