/* ==========================================================================
   Papasidero Arquitectura · estilos
   Referencia: fransilvestrearquitectos.com. Portada oscura a pantalla completa
   con el nombre gigante, isotipo arriba al centro, títulos de sección enormes
   centrados y grillas de fotos de borde a borde. Pie negro.
   ========================================================================== */

/* Nombre de la portada con la tipografía del logo (Now). Si se suman los archivos en assets/fonts
   (now-bold.woff2 y now-regular.woff2) se usan esos; si no, la Now instalada en la compu y, si no,
   Montserrat, la gratuita más parecida. */
@font-face{font-family:"Papasidero Now";font-weight:700;font-style:normal;font-display:swap;
  src:local("Now Bold"),local("Now-Bold"),url("../fonts/now-bold.woff2") format("woff2")}
@font-face{font-family:"Papasidero Now";font-weight:400;font-style:normal;font-display:swap;
  src:local("Now Regular"),local("Now-Regular"),local("Now"),url("../fonts/now-regular.woff2") format("woff2")}

:root{
  --paper:#ffffff; --ink:#2d2d2d; --ink-2:#555; --muted:#8e8e8e; --line:#e6e6e6; --soft:#f1f1f1; --black:#000;
  --font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --edge:clamp(16px,1.9vw,36px);          /* margen de las grillas de fotos */
  --gap:clamp(12px,1.3vw,24px);
  --ease:cubic-bezier(.77,0,.175,1);
  --out:cubic-bezier(.19,1,.22,1);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
::selection{background:var(--ink);color:#fff}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
.todo{font-family:var(--mono);font-size:.72em;background:#c9e265;color:#111;padding:2px 6px;white-space:nowrap;letter-spacing:0}

/* ---------- Isotipo P ---------- */
.iso{display:block;fill:currentColor;overflow:visible}
.iso .stem,.iso .bowl,.iso .dot{transform-box:fill-box}

/* ---------- Entrada: aparece la P, sube a su lugar y se descubre la portada ---------- */
.intro{position:fixed;inset:0;z-index:100;background:#0b0b0b;color:#fff;transition:background-color 1.1s var(--ease)}
.intro .iso{position:absolute;left:50%;top:50%;width:clamp(56px,6vw,84px);height:auto;transform:translate(-50%,-50%);transform-origin:0 0}
.intro .stem{transform:scaleY(0);transform-origin:top}
.intro .bowl{transform:scaleX(0);transform-origin:left}
.intro .dot{transform:scale(0);transform-origin:center}
.intro.draw .stem{transform:none;transition:transform .8s var(--ease)}
.intro.draw .bowl{transform:none;transition:transform .8s var(--ease) .45s}
.intro.draw .dot{transform:none;transition:transform .5s var(--out) 1.05s}
.intro.fly{background-color:transparent}
.intro.fly .iso{transition:transform 1.1s var(--ease)}

/* ---------- Cabecera: idiomas · P · menú ---------- */
.top{position:fixed;inset:0 0 auto;z-index:60;height:120px;pointer-events:none;color:var(--ink)}
.top > *{pointer-events:auto}
.lang{position:absolute;left:var(--edge);top:50px;display:flex;gap:16px;transition:opacity .5s,color .5s}
.lang button{background:none;border:0;padding:4px 0;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.01em;opacity:.55;transition:opacity .3s}
.lang button.on,.lang button:hover{opacity:1}
.top .home-link{position:absolute;left:50%;top:26px;transform:translateX(-50%);transition:opacity .5s,color .5s}
.top .home-link .iso{width:30px;height:auto}
.burger{position:absolute;right:var(--edge);top:52px;width:38px;height:24px;background:none;border:0;padding:0;cursor:pointer;transition:opacity .4s,color .4s}
.burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .5s var(--ease),opacity .3s,top .5s var(--ease)}
.burger i:nth-child(1){top:1px}.burger i:nth-child(2){top:11px}.burger i:nth-child(3){top:21px}
body.on-hero .top{color:#fff}
body.scrolled:not(.on-hero) .lang,body.scrolled:not(.on-hero) .home-link{opacity:0;pointer-events:none}
body.scrolled:not(.on-hero) .burger{opacity:.3}
body.scrolled:not(.on-hero) .burger:hover{opacity:1}
body.menu-open .top{color:#fff}
body.menu-open .lang,body.menu-open .home-link,body.menu-open .burger{opacity:1!important;pointer-events:auto!important}
body.menu-open .burger i:nth-child(1){top:11px;transform:rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){top:11px;transform:rotate(-45deg)}
body.intro-on .lang,body.intro-on .burger{opacity:0}
body.intro-on .home-link{visibility:hidden}
@media (max-width:700px){.top{height:96px}.lang{top:36px;gap:12px}.lang button{font-size:13px}.top .home-link{top:20px}.top .home-link .iso{width:24px}.burger{top:38px;width:32px;height:22px}.burger i:nth-child(2){top:10px}.burger i:nth-child(3){top:19px}body.menu-open .burger i:nth-child(1),body.menu-open .burger i:nth-child(3){top:10px}}

/* Menú a pantalla completa */
.overlay{position:fixed;inset:0;z-index:55;background:#0b0b0b;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:140px var(--edge) 60px;clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease);pointer-events:none}
.overlay.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.overlay a{display:block;overflow:hidden;font-size:clamp(34px,6.4vw,84px);font-weight:400;letter-spacing:-.02em;line-height:1.12;text-transform:uppercase}
.overlay a span{display:block;transform:translateY(105%);transition:transform .9s var(--out),opacity .4s}
.overlay.open a span{transform:none}
.overlay a:hover span{opacity:.55}
.overlay a:nth-child(2) span{transition-delay:.05s}.overlay a:nth-child(3) span{transition-delay:.1s}.overlay a:nth-child(4) span{transition-delay:.15s}.overlay a:nth-child(5) span{transition-delay:.2s}
.overlay p{margin:36px 0 0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8e8e8e}

/* ---------- Transiciones entre páginas ---------- */
main{min-height:100vh;min-height:100svh}
.page{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.page.leaving{opacity:0;transform:translateY(-18px)}
.progress{position:fixed;left:0;top:0;z-index:70;height:2px;width:100%;background:var(--ink);transform:scaleX(0);opacity:0}
.progress.run{opacity:1;animation:prog .9s var(--ease) forwards}
@keyframes prog{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Revelados (sólo con JS; siempre terminan visibles) */
.js [data-r]{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--out),transform 1.4s var(--out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-r].in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;transition:transform 1.3s var(--out);transition-delay:calc(var(--d,0) * 120ms)}
.js .lines:not(.in) .ln>span{transform:translateY(110%)}
/* el recorte va en la imagen: si fuera en el figure, el observer lo vería con área cero */
.js .img-r img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.5s var(--ease),transform 2.2s var(--out)}
.js .img-r.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
body.swap [data-i18n],body.swap .dyn{opacity:0}
[data-i18n],.dyn{transition:opacity .28s ease}

/* ---------- Portada ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:#0b0b0b;color:#fff;display:grid;place-items:center}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:rgba(8,10,16,.42);pointer-events:none}
.hero h1{position:relative;z-index:2;text-align:center;text-transform:uppercase;font-weight:500;font-size:clamp(46px,9.4vw,168px);line-height:.93;letter-spacing:-.025em;padding-inline:var(--edge)}
/* Logo: PAPASIDERO muy negrita y debajo ARQUITECTURA + DESARROLLOS fino, al mismo ancho (lo ajusta app.js) */
.hero-name{font-family:"Papasidero Now","Montserrat","Helvetica Neue",Arial,sans-serif;letter-spacing:0!important;line-height:1!important;font-size:clamp(48px,11vw,190px)!important}
.hero-name .ln{display:flex;justify-content:center}
.hero-name .ln>span{display:inline-block;white-space:nowrap}
.hero-name .n1{font-weight:700;letter-spacing:-.005em}
.hero-name .n2{font-weight:400;font-size:.2em;margin-top:.35em;opacity:1!important}

.down{position:absolute;z-index:2;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px;opacity:0;transition:opacity 1s ease .9s}
.hero.in .down{opacity:1}
.down svg{display:block;width:26px;height:34px;stroke:currentColor;fill:none;stroke-width:1.2;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.hero .cap{position:absolute;z-index:2;left:var(--edge);bottom:calc(30px + env(safe-area-inset-bottom,0px));font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity 1s ease 1.1s}
.hero.in .cap{opacity:.85}
.hero .cap span{display:inline-block;transition:opacity .5s}
.hero .cap.swap span{opacity:0}
@media (max-width:700px){.hero .cap{display:none}}

/* ---------- Títulos de sección gigantes ---------- */
.block{padding-top:clamp(90px,11vw,170px)}
.big{text-align:center;padding-inline:var(--edge)}
.big small{display:block;font-size:clamp(16px,1.4vw,22px);font-weight:500;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.big h1,.big h2{font-size:clamp(58px,11.5vw,190px);font-weight:400;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
.go{display:table;margin:clamp(40px,4.5vw,76px) auto clamp(56px,6vw,100px);font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.01em;position:relative;padding-bottom:4px}
.go::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--out)}
.go:hover::after{transform:scaleX(1);transform-origin:left}
.intro-text{text-align:center;max-width:46ch;margin:0 auto clamp(56px,6vw,100px);padding-inline:var(--edge);font-size:clamp(17px,1.4vw,21px);color:var(--ink-2)}

/* ---------- Grillas de fotos ---------- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding-inline:var(--edge)}
.ph{position:relative;overflow:hidden;background:var(--soft);margin:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile{display:block}
.tile .ph{aspect-ratio:3/2}
.tile img{transition:transform 1.6s var(--out),opacity .6s}
.tile:hover img{transform:scale(1.05)}
.tile .veil{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:18px 20px;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%);color:#fff;opacity:0;transition:opacity .6s var(--out)}
.tile .veil b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.01em;transform:translateY(12px);transition:transform .8s var(--out)}
.tile:hover .veil{opacity:1}
.tile:hover .veil b{transform:none}
.tile .under{display:none}
@media (hover:none){.tile .veil{display:none}.tile .under{display:block;margin-top:12px;font-weight:500;text-transform:uppercase;font-size:14px}}
.tile.gone{display:none}
.sq .ph{aspect-ratio:1/1}
.tall .ph{aspect-ratio:3/4}
.label{display:block;margin-top:14px;font-size:clamp(18px,1.4vw,22px);font-weight:500}
.label + p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);max-width:40ch}
@media (max-width:1000px){.g4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.g4{grid-template-columns:1fr}}

/* Obras en proceso: grilla desfasada */
.wip{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);padding-inline:var(--edge);align-items:start}
.wip .ph{aspect-ratio:3/4}
.wip > :nth-child(2n) .ph{aspect-ratio:4/5}
.wip > :nth-child(3n) .ph{aspect-ratio:1/1}
@media (max-width:1000px){.wip{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.wip{grid-template-columns:1fr 1fr}}

/* Tienda */
.prod .pic{aspect-ratio:3/4;background:#e9e9e9;display:grid;place-items:center;position:relative;overflow:hidden}
.prod .pic svg{width:58%;stroke:#9d9d9d;stroke-width:1.1;fill:none;transition:transform 1.4s var(--out)}
.prod:hover .pic svg{transform:scale(1.06)}
.prod .pic em{position:absolute;left:14px;bottom:12px;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#8e8e8e}
.prod .spec{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.prod .ask{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
.note{text-align:center;margin:40px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Filtros */
.filters{display:flex;justify-content:center;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;margin:-24px auto clamp(40px,4vw,64px);padding-inline:var(--edge)}
.filters button{background:none;border:0;padding:4px 0;cursor:pointer;font-size:14px;font-weight:500;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.filters button.on,.filters button:hover{color:var(--ink)}
.filters button.on{border-color:var(--ink)}

/* ---------- Ficha de proyecto ---------- */
.hero.pj h1{font-size:clamp(44px,8vw,140px)}
.hero.pj .kicker{position:absolute;z-index:2;top:calc(50% - clamp(70px,8vw,140px));left:0;right:0;text-align:center;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--edge)}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:24px clamp(32px,5vw,80px);margin:clamp(70px,8vw,120px) auto 0;text-align:center}
.facts dt{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:6px 0 0;font-size:17px;font-weight:500}
@media (max-width:760px){.facts{display:grid;grid-template-columns:1fr 1fr;text-align:left}}
.memo{max-width:760px;margin:clamp(70px,8vw,120px) auto 0;padding-inline:var(--edge)}
.memo-block{padding-block:26px;border-top:1px solid var(--line)}
.memo-block h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.memo-block p{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:var(--ink-2)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-inline:var(--edge);margin-top:clamp(70px,8vw,120px)}
.gallery:empty{display:none}
.gallery .ph{aspect-ratio:4/3}
.gallery .ph:nth-child(3n+1){grid-column:1/-1;aspect-ratio:16/8}
@media (max-width:620px){.gallery{grid-template-columns:1fr}.gallery .ph,.gallery .ph:nth-child(3n+1){aspect-ratio:4/3}}
.ask-line{text-align:center;margin-top:40px}
.next{display:block;text-align:center;margin-top:clamp(100px,12vw,180px)}
.next small{display:block;font-size:15px;font-weight:500;text-transform:uppercase;margin-bottom:6px}
.next b{display:block;font-weight:400;font-size:clamp(44px,8vw,130px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;transition:opacity .5s}
.next:hover b{opacity:.55}

/* ---------- Estudio ---------- */
.services{max-width:900px;margin:clamp(90px,10vw,150px) auto 0;padding-inline:var(--edge)}
.services h3{text-align:center;font-size:15px;font-weight:500;text-transform:uppercase;margin-bottom:24px}
.services ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.services li{padding:20px 0;border-bottom:1px solid var(--line);font-size:clamp(20px,2.2vw,32px);text-transform:uppercase;letter-spacing:-.01em;text-align:center}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,6vw,110px);max-width:1200px;margin:0 auto;padding-inline:var(--edge)}
.data{display:grid;gap:28px;align-content:start}
.data small,.fl{display:block;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.data .v{display:block;font-size:clamp(18px,1.5vw,22px);font-weight:500;text-transform:uppercase;margin-top:4px;overflow-wrap:anywhere}
.data a.v:hover{opacity:.6}
form{display:grid;gap:28px;min-width:0}
form label{display:grid;gap:4px}
input,select,textarea{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #cfcfcf;border-radius:0;padding:10px 0;width:100%;transition:border-color .4s}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--ink)}
textarea{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.send{justify-self:start;display:inline-flex;padding:16px 36px;border:1px solid var(--ink);font-size:14px;font-weight:500;text-transform:uppercase;background:linear-gradient(var(--ink),var(--ink)) left/0 100% no-repeat;cursor:pointer;transition:background-size .7s var(--out),color .5s}
.send:hover{background-size:100% 100%;color:#fff}
@media (max-width:860px){.contact{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* ---------- Pie negro ---------- */
.foot{margin-top:clamp(110px,12vw,190px);background:var(--black);color:#fff;padding:clamp(90px,9vw,150px) var(--edge) calc(40px + env(safe-area-inset-bottom,0px))}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;max-width:1150px;margin:0 auto}
.foot-cols > div:nth-child(2){text-align:center}
.foot-cols > div:nth-child(3){text-align:right}
.foot small{display:block;font-size:10.5px;font-weight:500;text-transform:uppercase;color:#8e8e8e;margin-bottom:44px}
.foot p{margin:0 0 28px;font-size:clamp(16px,1.3vw,20px);font-weight:500;text-transform:uppercase;line-height:1.1}
.foot a{transition:opacity .3s}
.foot a:hover{opacity:.55}
.foot .iso{width:30px;height:auto;margin:clamp(70px,8vw,130px) auto 0}
.legal{text-align:center;margin-top:clamp(60px,7vw,110px);font-size:10.5px;font-weight:500;text-transform:uppercase;color:#8e8e8e;line-height:1.5}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr}.foot-cols > div:nth-child(n){text-align:left}.foot small{margin-bottom:18px}}

/* Volver arriba */
.totop{position:fixed;right:clamp(14px,1.6vw,28px);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:50px;height:50px;border-radius:50%;border:0;background:#2d2d2d;color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s,transform .5s var(--out)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;transition-delay:0s!important}
}