/* Porongaverse · estilos de la puerta (login) y de la casa (Home). Sin recursos externos. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#f3ead8; --paper2:#ece1c9; --ink:#2b231b; --ink2:#6a5b4b;
  --moss:#5b6b3a; --terra:#b4532f; --hair:rgba(43,35,27,.22);
  --serif:"Fraunces",Georgia,"Iowan Old Style",serif; --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1c1713; --paper2:#262019; --ink:#efe4cf; --ink2:#b3a58b;
    --moss:#9db06a; --terra:#e0845e; --hair:rgba(239,228,207,.22); color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh; background:var(--paper); color:var(--ink);
  font:400 16px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
}
body::before{ /* grano de papel, sin imagen externa */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.07; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body>*{position:relative; z-index:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:4px}

.kicker{margin:0 0 .6rem; font:600 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink2)}
h1.marca{
  margin:0; font:600 clamp(2.7rem,10vw,5.6rem)/.95 var(--serif); letter-spacing:-.025em;
}
h1.marca em{font-style:italic; font-weight:400; color:var(--terra)}
.lema{margin:.9rem 0 0; font:italic 400 1.15rem/1.4 var(--serif); color:var(--ink2)}

@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* ───────── Puerta (login) ───────── */
.entrada{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:28px 18px}
.puerta{
  width:min(100%,380px); padding:64px 30px 34px; text-align:center;
  border:2px solid var(--ink); border-radius:190px 190px 6px 6px;
  background:linear-gradient(var(--paper2),var(--paper2)); position:relative;
  box-shadow:6px 7px 0 var(--ink); animation:rise .6s backwards;
}
.puerta::after{ /* picaporte */
  content:""; position:absolute; right:16px; top:58%; width:12px; height:12px; border-radius:50%;
  background:var(--terra); border:2px solid var(--ink);
}
.puerta h1.marca{font-size:clamp(2.2rem,9vw,2.9rem)}
.puerta .lema{font-size:1rem; margin-bottom:1.6rem}
.puerta label{display:block; margin:0 0 .4rem; font:600 .72rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink2)}
.puerta input[type=password],.puerta input[type=text]{
  width:100%; padding:.8rem 1rem; font:500 1.05rem var(--sans); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--ink); border-radius:6px; text-align:center; letter-spacing:.08em;
}
.puerta button{
  margin-top:.9rem; width:100%; padding:.8rem 1rem; cursor:pointer;
  font:600 .95rem var(--sans); letter-spacing:.04em; color:var(--paper); background:var(--ink);
  border:1.5px solid var(--ink); border-radius:6px; transition:transform .15s, background .2s;
}
.puerta button:hover{background:var(--terra); border-color:var(--terra); transform:translateY(-1px)}
.puerta .nota{margin:.8rem 0 0; font-size:.82rem; color:var(--ink2)}
.puerta button.alt{background:transparent; color:var(--ink2); border-color:transparent; margin-top:.3rem; font-weight:500}
.puerta button.alt:hover{background:transparent; color:var(--terra); border-color:transparent}
.puerta .aviso{min-height:1.3em; margin:.8rem 0 0; font-size:.9rem; color:var(--terra)}

/* ───────── Casa (Home) ───────── */
.portada{max-width:1100px; margin:0 auto; padding:clamp(40px,9vh,96px) 20px clamp(22px,5vh,44px)}
.planta{display:flex; flex-wrap:wrap; gap:14px; max-width:1100px; margin:0 auto; padding:0 20px 28px}
.sala{
  --b:300px; --h:160px;
  flex:1 1 var(--b); min-height:var(--h); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.2rem;
  padding:20px 22px 18px; text-decoration:none; color:inherit;
  background:var(--paper2); border:2px solid var(--ink); border-radius:3px 12px 4px 9px;
  transition:transform .25s ease, box-shadow .25s ease;
  animation:rise .55s backwards; animation-delay:calc(var(--i,0) * 70ms);
}
.sala:nth-child(3n+1){--b:360px} .sala:nth-child(3n+2){--b:250px} .sala:nth-child(3n){--b:300px}
.sala:nth-child(4n+1){--h:210px} .sala:nth-child(4n+3){--h:150px}
.sala:hover,.sala:focus-visible{transform:translateY(-3px) rotate(-.25deg); box-shadow:5px 6px 0 var(--ink)}
.sala h2{margin:0; font:600 1.65rem/1.1 var(--serif); letter-spacing:-.01em; position:relative}
.sala p{margin:0; max-width:30ch; font-size:.93rem; color:var(--ink2); position:relative}
.sello{
  position:absolute; left:18px; top:16px; width:46px; height:46px; display:grid; place-items:center;
  font-size:1.35rem; border:1.5px dashed var(--ink2); border-radius:50%; transform:rotate(-7deg);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1);
}
.sala:hover .sello,.sala:focus-visible .sello{transform:rotate(6deg) scale(1.06)}
.puerta-mini{ /* una puertita que se abre al pasar */
  position:absolute; right:18px; top:16px; width:20px; height:30px; border:1.8px solid var(--ink);
  border-radius:10px 10px 1px 1px; transform-origin:left center; transition:transform .35s ease; background:var(--paper);
}
.puerta-mini::after{content:""; position:absolute; right:3px; top:55%; width:3px; height:3px; border-radius:50%; background:var(--terra)}
.sala:hover .puerta-mini,.sala:focus-visible .puerta-mini{transform:perspective(160px) rotateY(-58deg)}

/* motivo de cada sala (decorativo; nunca tapa el texto) */
.sala::before{
  content:""; position:absolute; right:0; bottom:0; width:58%; height:100%; opacity:.16; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 65%); mask-image:linear-gradient(90deg,transparent,#000 65%);
}
.m-biblioteca::before{background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 9px,var(--moss) 9px 15px,transparent 15px 18px,var(--terra) 18px 21px,transparent 21px 28px) bottom/100% 62% no-repeat}
.m-archivo::before{background:repeating-linear-gradient(0deg,transparent 0 30px,var(--ink) 30px 32px)}
.m-cantera::before{background:radial-gradient(circle at 25% 35%,var(--moss) 0 5px,transparent 6px),radial-gradient(circle at 62% 72%,var(--terra) 0 8px,transparent 9px),radial-gradient(circle at 86% 28%,var(--ink) 0 3px,transparent 4px),radial-gradient(circle at 48% 18%,var(--ink) 0 2px,transparent 3px)}
.m-corcho::before{background:radial-gradient(var(--ink) 1.2px,transparent 1.8px) 0 0/11px 11px}
.m-libreta::before{background:repeating-linear-gradient(0deg,transparent 0 21px,var(--ink) 21px 22px)}
.m-mapa::before{background:repeating-linear-gradient(90deg,transparent 0 33px,var(--ink) 33px 34px),repeating-linear-gradient(0deg,transparent 0 33px,var(--ink) 33px 34px)}
.m-produccion::before{background:repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 13px) bottom/100% 70% no-repeat}


/* ───────── zona no-poronga (Bexhill): costa y niebla, distinta de las salas operativas ───────── */
.sala.zona-nopo{
  --b:100%; --h:200px; flex:1 1 100%; padding-bottom:calc(22% * .0 + 54px); border-color:#3d6879; border-radius:12px 3px 12px 3px; color:#1c2a31;
  background:linear-gradient(180deg,#dfe8eb 0%,#eef2f2 58%,#f6efe0 100%);
}
.sala.zona-nopo::before{
  content:""; inset:auto 0 0 0; width:100%; height:22%; opacity:1; -webkit-mask-image:none; mask-image:none;
  background:linear-gradient(180deg,#7fa7b5,#3d6879);
}
.sala.zona-nopo:hover,.sala.zona-nopo:focus-visible{box-shadow:5px 6px 0 #3d6879}
.sala.zona-nopo .nw{white-space:nowrap}
.sala.zona-nopo h2{max-width:min(100%,24ch); font-weight:300; letter-spacing:.06em; text-transform:uppercase; color:#1d3a49; position:relative; z-index:1}
.sala.zona-nopo p{color:#566b76; font-style:italic; position:relative; z-index:1}
.zona-marca{position:absolute; left:22px; top:18px; font:600 .66rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#566b76; z-index:1}
.faro{position:absolute; right:clamp(14px,6vw,64px); top:6px; height:calc(100% - 6px); max-height:200px; width:auto; z-index:0}
.faro .torre{fill:#1d3a49; opacity:.85} .faro .lampara{fill:#c8902f} .faro .haz{fill:#c8902f; opacity:.18}
.faro .mar{fill:none; stroke:#eef2f2; stroke-width:1.4; opacity:.7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sala.zona-nopo{background:linear-gradient(180deg,#0b1820,#14262f 60%,#243840); border-color:#78abbe; color:#e6eef1}
  :root:not([data-theme="light"]) .sala.zona-nopo::before{background:linear-gradient(180deg,#27424f,#0b1a21)}
  :root:not([data-theme="light"]) .sala.zona-nopo h2{color:#e6eef1}
  :root:not([data-theme="light"]) .sala.zona-nopo p,:root:not([data-theme="light"]) .zona-marca{color:#95abb5}
  :root:not([data-theme="light"]) .faro .torre{fill:#c9d8de}
  :root:not([data-theme="light"]) .sala.zona-nopo:hover{box-shadow:5px 6px 0 #78abbe}
}
@media (max-width:560px){ .sala.zona-nopo{--h:225px; padding-bottom:50px} .sala.zona-nopo h2{font-size:1.3rem; max-width:62%} .sala.zona-nopo p{max-width:62%} .faro{max-height:140px} }

.pie{max-width:1100px; margin:0 auto; padding:6px 20px 44px; display:flex; justify-content:flex-end}
.salir{
  all:unset; cursor:pointer; font:500 .82rem var(--sans); letter-spacing:.06em; color:var(--ink2);
  padding:.45rem .2rem; border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.salir:hover,.salir:focus-visible{color:var(--terra); border-color:var(--terra)}

@media (max-width:560px){
  .sala{flex-basis:100%; --h:132px; padding:18px 18px 16px}
  .sala:nth-child(4n+1){--h:150px}
  .sala p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}