@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');
:root{--paper:#f4ecd9;--ink:#26251e;--orange:#d75d36;--border:#2c2a22;--yellow:#ead9a2;--muted:#6a6455;--teal:#416a66}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:repeating-linear-gradient(0deg,rgba(60,50,20,.027) 0 1px,transparent 1px 6px),var(--paper);font:17px/1.6 'DM Sans',sans-serif}a{color:inherit}button,input,textarea,select{font:inherit}.topline{display:flex;justify-content:space-between;gap:1rem;padding:7px max(18px,calc((100vw - 1220px)/2));background:#302e27;color:#f7e6bb;font:11px 'DM Mono',monospace;letter-spacing:.08em}.masthead{max-width:1320px;margin:auto;padding:0 36px}.status{display:flex;align-items:center;gap:9px;padding:16px 3px;font:11px 'DM Mono',monospace;border-bottom:1px solid var(--ink);letter-spacing:.07em}.status-right{margin-left:auto;color:var(--muted)}.blink-dot{display:inline-block;vertical-align:middle;width:8px;height:8px;background:#da6d3c;border-radius:50%;animation:blink 1.3s steps(2) infinite}@keyframes blink{50%{opacity:0}}.mast-title{display:flex;align-items:center;justify-content:center;gap:22px;text-align:center;padding:40px 0 29px}.overline,.room-label{font:12px 'DM Mono',monospace;letter-spacing:.12em;color:var(--orange);font-weight:500}.mast-title h1{font:900 clamp(45px,8vw,115px)/.96 'Playfair Display',serif;margin:12px 0;letter-spacing:-.065em}.mast-title h1 em{color:var(--orange);font-style:italic;display:block}.tagline{margin:18px auto 0;font-style:italic;font-size:15px}.sparkle{font-size:44px;color:var(--orange)}marquee{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:8px 0;font:12px 'DM Mono',monospace;background:#f0db9b}.navigation{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:16px 0 0}.navigation a{background:#fff9e9;border:1px solid var(--border);padding:9px 13px;text-decoration:none;font:12px 'DM Mono',monospace;transition:.2s}.navigation a:hover{background:var(--ink);color:var(--paper)}main{max-width:1320px;margin:auto;padding:0 36px}.room{padding:90px 26px;border-bottom:1px solid #b4a88e;scroll-margin-top:12px}.hero{padding-top:80px}.hero-grid{display:grid;grid-template-columns:42% 58%;align-items:center;gap:20px}.hero-copy{position:relative;z-index:1}.hero h2,.room h2{font:900 clamp(50px,6vw,91px)/1.05 'Playfair Display',serif;letter-spacing:-.055em;margin:20px 0 29px}.room h2 i{color:var(--orange)}.room p{max-width:620px}.hero-copy p{font-size:16px}.tape{display:inline-block;background:#ede0a2;padding:7px 12px;transform:rotate(-2deg);font:11px 'DM Mono',monospace}.big-button,button{display:inline-block;cursor:pointer;border:2px solid var(--ink);padding:13px 19px;background:var(--orange);color:#fff;text-decoration:none;font:700 13px 'DM Mono',monospace;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}.big-button:hover,button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.smallprint,.caption,.fine{font:11px 'DM Mono',monospace;color:var(--muted);margin-top:24px}.drawing img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.drawing{margin:0}.drawing figcaption{font:10px 'DM Mono',monospace;text-align:right;line-height:1.6;color:var(--muted)}.manifesto{margin-top:50px;border-block:2px solid var(--ink);display:flex;justify-content:center;align-items:center;gap:30px;text-align:center}.manifesto p{font:13px 'DM Mono',monospace;letter-spacing:.06em}.star{color:var(--orange);font-size:20px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}.inverse>div:first-child{order:2}.inverse>div:last-child{order:1}.window-panel{border:2px solid var(--ink);box-shadow:9px 9px 0 #cfbfa1;background:#fffaf0;padding:28px}.window-panel h3,.postcard-controls h3{margin:0 0 22px;font:700 17px 'DM Mono',monospace}.window-panel label,.postcard-controls label{display:block;font:12px 'DM Mono',monospace;margin:0 0 18px}input,textarea,select{display:block;width:100%;padding:11px;margin-top:7px;border:1px solid #777063;background:#fffdf8;border-radius:0;color:var(--ink);font:15px 'DM Sans',sans-serif}textarea{resize:vertical}.form-hint{font:11px/1.6 'DM Mono',monospace;color:var(--muted)}.note{border-left:3px solid var(--orange);background:#e9dfc7;padding:17px;font-size:14px;margin-top:25px}.honey{position:absolute!important;left:-9999px!important;opacity:0!important}.guestbook-list{margin-top:30px;border-top:1px dashed var(--ink);padding-top:15px}.entry{padding:14px 0;border-bottom:1px dashed #aaa}.entry .meta{font:12px 'DM Mono',monospace;color:var(--muted)}.entry p{margin:8px 0}.entry a{color:#8b442c;overflow-wrap:anywhere}.retro-stamp{border:3px double var(--orange);display:inline-block;padding:12px;transform:rotate(-3deg);font:12px 'DM Mono',monospace}.center-heading{text-align:center}.center-heading p{margin:0 auto 35px}.postcard-layout{display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:start;margin-top:40px}.postcard-controls{border:1px solid var(--ink);padding:24px;background:#ece3cc}.postcard-controls button{width:100%;margin-bottom:14px}.postcard-controls .button-secondary{background:#fffaf0;color:var(--ink)}.postcard-preview canvas{width:100%;height:auto;box-shadow:8px 9px 0 #b5a487;display:block;background:#e7d9bd}.postcard-preview .caption{text-align:center}.window-title{background:#312f2a;color:#faf0d9;padding:8px 12px;margin:-28px -28px 26px;font:12px 'DM Mono',monospace}.diary{min-height:310px}.diary h3{font-family:'Playfair Display',serif;font-size:28px}.text-link{font:12px 'DM Mono',monospace;color:var(--orange)}.neighbors{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:36px}.neighbor{border:1px solid var(--border);padding:20px;background:#fff8e9}.neighbor strong{display:block;font:700 15px 'Playfair Display',serif;margin-top:13px}.neighbor p{font-size:13px;margin-bottom:0}.banner{display:flex;justify-content:center;align-items:center;text-align:center;width:132px;height:47px;font:900 13px/1.05 'DM Mono',monospace;border:2px ridge #aaa}.cosmic{color:#ffeb66;background:#170f59}.green{color:#5bf897;background:#152919}.pink{color:#fff;background:#a04170}.blue{color:#fded54;background:#1a4f96}.basement{background:#eae0cd}.archive{padding-left:18px;font:13px 'DM Mono',monospace}.archive li{margin-bottom:14px}.ascii{margin-top:32px;color:var(--teal);font:14px 'DM Mono',monospace}.under-construction{text-align:center;padding-bottom:120px}.under-construction p{margin:15px auto}.construction-stripe{display:inline-block;margin-top:30px;padding:9px 20px;border:2px solid var(--ink);background:repeating-linear-gradient(45deg,#f4d055 0 16px,#24231e 16px 32px);color:white;text-shadow:1px 1px 2px #000;font:900 15px 'DM Mono',monospace}.retro-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:35px}.retro-badges span{border:2px outset #ccc;background:#344670;color:#fff;padding:6px;font:10px 'DM Mono',monospace}footer{background:#302e27;color:#f0e5cd;text-align:center;padding:37px 20px;font:12px 'DM Mono',monospace}footer a{color:#f6c471}footer .fine{color:#aca38f}@media(max-width:900px){.hero-grid,.two-col,.postcard-layout{grid-template-columns:1fr}.hero-grid{gap:0}.drawing{max-width:650px}.inverse>div:first-child,.inverse>div:last-child{order:initial}.neighbors{grid-template-columns:repeat(2,1fr)}.room{padding:68px 8px}.masthead,main{padding-inline:22px}}@media(max-width:550px){.topline span:last-child,.status-right,.sparkle{display:none}.mast-title{padding:29px 0}.mast-title h1{font-size:49px}.tagline{font-size:13px}.navigation{justify-content:start}.navigation a{font-size:10px;padding:8px}.room h2,.hero h2{font-size:51px}.window-panel{padding:18px}.window-title{margin:-18px -18px 21px}.neighbors{grid-template-columns:1fr}.hero{padding-top:45px}.room{padding-top:55px;padding-bottom:55px}.manifesto{gap:9px}.manifesto p{font-size:10px}}


/* CASA 88/31 — museo de interfaces domésticas, revisión visual 1994–1999.
   Inspiración histórica, no reproducción de sitios ajenos. */
:root{--paper:#d5d5cb;--ink:#171724;--orange:#b50076;--border:#343452;--yellow:#ffe65b;--muted:#43435f;--teal:#00766d}
html{scroll-padding-top:12px}
body{font-family:Verdana,Arial,sans-serif;font-size:15px;line-height:1.55;color:#171724;background-color:#d9d7d0;background-image:radial-gradient(#aaa3ba 0.8px,transparent 0.8px),radial-gradient(#ffffff 0.8px,transparent 0.8px);background-position:0 0,7px 7px;background-size:14px 14px}
a{color:#0035b9;text-decoration:underline}a:visited{color:#6b238b}a:hover{color:#b50076}
.topline{background:#000066;color:#ffff8e;font:12px 'Courier New',monospace;border-bottom:3px ridge #d5d5d5}
.masthead,main{max-width:1120px;background:#ecebe5;border-left:4px ridge #fff;border-right:4px groove #777;padding-left:26px;padding-right:26px}
.masthead{padding-top:8px}
.status{background:#d6d6d6;padding:8px 12px;border:3px inset #fff;color:#20204f;font-family:'Courier New',monospace;font-weight:bold}
.status-right{color:#343452}
.blink-dot{border-radius:0;background:#f60072}
.mast-title{background:linear-gradient(135deg,#090b56,#242078 70%,#42145b);color:#fff;background-image:radial-gradient(#f8dd8a 1px,transparent 1px),linear-gradient(135deg,#070840,#291c77 70%,#4b174c);background-size:35px 35px,auto;border:5px ridge #b7b7bb;margin-top:12px;padding:30px 8px}
.mast-title h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(42px,7vw,82px);line-height:1.02;letter-spacing:.025em;text-shadow:4px 4px #000,7px 7px #b60073}
.mast-title h1 em{font-style:normal;color:#fff35d}
.overline,.room-label{font-family:'Courier New',monospace;color:#a50060;font-size:12px;font-weight:bold;letter-spacing:.06em}
.mast-title .overline{color:#ffd35b}.tagline{font-family:Georgia,serif;color:#fffbd1;font-size:16px}
.sparkle{color:#fff35d}
marquee{background:#ffeb66;border:3px groove #888;color:#101036;font:bold 13px 'Courier New',monospace}
.navigation{background:#c6c7ce;border:3px outset #fff;justify-content:flex-start;padding:7px;gap:6px;margin-top:10px}
.navigation a{font:bold 13px 'Courier New',monospace;color:#030c96;text-decoration:underline;border:2px outset #fff;background:#e4e4e4;padding:8px}
.navigation a:hover{background:#fff9a9;color:#97004b;border-style:inset}
.room{padding:52px 18px;border-bottom:5px double #8882a4;background:#eeede8}
.room:nth-child(even){background:#e2e2e8}
.room h2,.hero h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(40px,5.4vw,70px);letter-spacing:-.045em}
.room h2 i{color:#a50060}
.room-label{background:#000080;color:#fffcc3;display:inline-block;padding:4px 10px;border:2px outset #9a9ad9}
.hero-grid{grid-template-columns:45% 55%}
.tape{font:bold 12px 'Courier New',monospace;background:#ffff8c;border:2px dashed #b76d00}
.big-button,button{font:bold 13px 'Courier New',monospace;color:#fff;background:#000080;border:3px outset #bfbfd8;box-shadow:none;padding:10px 14px}
.big-button:hover,button:hover{background:#9b0060;color:#fff;transform:none;box-shadow:none;border-style:inset}
.smallprint,.caption,.fine,.form-hint{font-family:'Courier New',monospace}
.drawing{background:#faf6e8;border:5px ridge #c4b3a0;padding:8px}
.drawing img{mix-blend-mode:multiply}
.manifesto{background:#ffffb3;border:3px double #343452;margin-top:30px;padding:4px}
.manifesto p{font:bold 13px 'Courier New',monospace}
.window-panel{border:4px ridge #fff;box-shadow:5px 5px #777;background:#d6d6d6;padding:25px}
.window-panel h3,.postcard-controls h3{font-family:'Courier New',monospace;color:#000080}
.window-panel label,.postcard-controls label{font-family:'Courier New',monospace;font-weight:bold}
input,textarea,select{border:3px inset #eee;background:#fff;color:#151525;font:15px Verdana,Arial,sans-serif}
input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #ff1493;outline-offset:2px}
.note{background:#ffffca;border:2px dashed #777342}
.guestbook-list{background:#fffef4;padding:14px;border:2px inset #aaa;overflow-wrap:anywhere}
.entry .meta{color:#004b67;font-weight:bold}
.retro-stamp{color:#990052;border:3px double #990052}
.postcard-controls{background:#d3d3dc;border:4px ridge white}
.postcard-preview canvas{border:4px ridge #eee;box-shadow:5px 5px #777}
.window-title{background:linear-gradient(90deg,#000080,#5288b2);color:white;font:bold 13px 'Courier New',monospace}
.neighbors{gap:13px}
.neighbor{background:#fffde3;border:3px ridge #c6c6ce;text-align:center;padding:17px}
.neighbor strong{font-family:Verdana,Arial,sans-serif;color:#000080;font-size:13px;text-decoration:underline}
.neighbor p{font-size:12px}
.banner{margin:auto;border:2px outset #ddd;box-shadow:2px 2px #777;font-family:'Courier New',monospace}
.basement{background:#d4d3da!important}
.archive{background:#08091f;color:#9aff9b;border:3px inset #b8b8b8;padding:18px 20px 18px 35px;font-family:'Courier New',monospace}
.ascii{color:#000080}
.under-construction{background:#fff9cb!important}
.construction-stripe{border:4px ridge #ddd;font-family:'Courier New',monospace}
.retro-badges span{background:#000080;border:3px outset #bbb;font-family:'Courier New',monospace}
footer{background:#000066;color:#fff8a0;border-top:5px ridge #bbb}
footer a{color:#fff}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.masthead,main{padding-left:16px;padding-right:16px}.room{padding:44px 12px}}
@media(max-width:550px){.mast-title h1{font-size:43px}.navigation a{font-size:12px}.room h2,.hero h2{font-size:45px}.window-panel{padding:17px}.window-title{margin:-17px -17px 20px}.topline{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.blink-dot{animation:none}marquee{animation:none}}

/* El barrio: directorio narrativo legible, no mapa pesado */
.neighborhood-map{margin:24px 0 8px;padding:20px 24px;background:#fffbdc;border:3px double #000080;box-shadow:4px 4px 0 #9393a5}
.neighborhood-map h3{margin:0 0 10px;font:bold 16px 'Courier New',monospace;color:#000080}
.neighborhood-map p{max-width:100%;margin:10px 0;font-size:15px;line-height:1.65}
.neighborhood-map .map-small{font:12px/1.6 'Courier New',monospace;color:#5c225f;border-top:1px dashed #8c8ca6;padding-top:12px}
@media(max-width:550px){.neighborhood-map{padding:15px}.neighborhood-map h3{font-size:14px}.neighborhood-map p{font-size:14px}}

/* Cuatro postales ilustradas: imágenes responsivas y formulario accesible */
.postcard-preview{min-width:0}.postcard-preview canvas{aspect-ratio:3/2;object-fit:contain;max-width:100%}.postcard-controls label{line-height:1.65}.postcard-controls select{cursor:pointer}

/* Selección de postales por miniaturas, siempre visibles */
.postcard-layout{grid-template-columns:minmax(285px,370px) minmax(0,1fr)}
.postcard-picker{border:0;padding:0;margin:0 0 20px;min-width:0}
.postcard-picker legend{font:bold 13px/1.5 'Courier New',monospace;margin-bottom:10px}
.postcard-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.postcard-choice{display:block!important;margin:0!important;cursor:pointer;position:relative;background:#fff9e6;border:3px solid #999;box-shadow:2px 2px #777;padding:5px;font:bold 11px/1.4 'Courier New',monospace!important}
.postcard-choice img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#ddd}
.postcard-choice span{display:block;padding:6px 2px 2px;text-align:center}
.postcard-choice input{position:absolute;top:8px;left:8px;width:19px;height:19px;margin:0;accent-color:#000080;z-index:1}
.postcard-choice:has(input:checked){border-color:#001bba;background:#fff0a0;box-shadow:0 0 0 2px #001bba}
.postcard-choice:focus-within{outline:3px solid #b50076;outline-offset:2px}
.anonymous-option{display:flex!important;align-items:center;gap:9px;cursor:pointer}
.anonymous-option input{width:19px;height:19px;margin:0;accent-color:#000080}
.disabled-name{opacity:.45}
@media(max-width:900px){.postcard-layout{grid-template-columns:1fr}}
@media(max-width:550px){.postcard-choices{gap:8px}.postcard-choice{font-size:10px!important}}

/* Postales con tabla clásica Web 1.0. Cuatro imágenes visibles, radio debajo, SEND. */
.classic-postcard-form{border:3px ridge #aaa;background:#e2e2e8;padding:18px;text-align:center}
.postcard-instructions{margin:0 auto 18px;font:bold 14px 'Courier New',monospace}
.postcard-table-scroll{width:100%;overflow-x:auto}
.postcard-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:7px}
.postcard-table td{width:25%;vertical-align:top;text-align:center;background:#fffde9;border:2px outset #ddd;padding:8px}
.postcard-table label{display:block;cursor:pointer;font:bold 12px/1.5 'Courier New',monospace}
.postcard-table img{display:block;max-width:100%;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.postcard-table span{display:block;margin:8px 0 4px}
.postcard-table input[type=radio]{display:block;width:20px;height:20px;margin:7px auto 3px;accent-color:#000080;cursor:pointer}
.postcard-table td:has(input:checked){background:#fff0ae;border:2px inset #000080}
.postcard-write{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:24px auto;max-width:850px;text-align:left}
.postcard-write label{display:block;font:bold 13px 'Courier New',monospace}
#send-postcard{display:inline-block;min-width:225px}
@media(max-width:650px){.postcard-table{min-width:0;border-spacing:3px}.postcard-table td{padding:3px}.postcard-table label{font-size:10px}.postcard-table span{min-height:32px}.postcard-write{grid-template-columns:1fr}}

/* FIX: los estilos globales de .postcard-table no deben permitir dimensiones intrínsecas */
.classic-postcard-form,.postcard-table-scroll{min-width:0;max-width:100%;width:100%}
.postcard-table-scroll{overflow-x:auto;overflow-y:hidden}
.postcard-table{width:100%!important;max-width:100%!important;table-layout:fixed!important;border-collapse:separate}
.postcard-table td{width:25%!important;min-width:0!important;max-width:25%!important;overflow:hidden;box-sizing:border-box}
.postcard-table label{display:block!important;width:100%;min-width:0;overflow-wrap:anywhere}
.postcard-table img{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;aspect-ratio:3/2;object-fit:cover}
@media(max-width:650px){.postcard-table{min-width:560px!important}.postcard-table td{width:25%!important;max-width:25%!important}}

/* Habitaciones como documentos independientes; misma navegación en cada homepage. */
.door-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.door-link{display:flex;flex-direction:column;gap:8px;padding:18px;background:#fffddb;border:3px outset #c5c3cb;color:#000080;text-decoration:none;min-width:0}
.door-link strong{font:bold 17px 'Courier New',monospace;text-decoration:underline}
.door-link span{font:14px/1.55 Verdana,Arial,sans-serif;color:#24243f}
.door-link:hover{background:#fff2a8}
.navigation a[aria-current="page"]{background:#fff2a8;color:#710059;border:2px inset #fff}
.guestbook-shortcuts{font:bold 14px/1.8 'Courier New',monospace}
#guestbook-entries{scroll-margin-top:20px}
#guestbook-form{scroll-margin-top:20px}
@media(max-width:650px){.door-directory{grid-template-columns:1fr}.navigation a{font-size:12px}}
